Skip to content

Commit

Permalink
feat(Monitor): auto range graph
Browse files Browse the repository at this point in the history
  • Loading branch information
xiduzo committed Dec 16, 2024
1 parent d9f9cbc commit 4752060
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 81 deletions.
2 changes: 1 addition & 1 deletion FEEDBACK.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

## Nodes
- [x] If..Else is strangely named because technically you cannot do an Else with it, only an If. :) Maybe this node could be called **Compare**?
- [ ] Would be awesome if Debug could "autorange" :)
- [x] Would be awesome if Debug could "autorange" :)
- [x] and maybe instead of **Debug** it could be called **Plot** or **Graph**?

Nodes that would be nice to have:
Expand Down
117 changes: 48 additions & 69 deletions apps/electron-app/src/render/components/react-flow/nodes/Monitor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { Handle } from './Handle';
import { BaseNode, NodeContainer, useNodeData, useNodeSettings } from './Node';
import type { DebugValueType, MonitorData } from '@microflow/components';
import { useNodeValue } from '../../../stores/node-data';
import { useEffect, useMemo, useRef } from 'react';
import { useEffect, useRef } from 'react';
import { Pane } from '@ui/index';
import { BindingApi } from '@tweakpane/core';
import { BindingApi, BindingParams } from '@tweakpane/core';

export function Monitor(props: Props) {
return (
Expand All @@ -17,28 +17,18 @@ export function Monitor(props: Props) {
);
}

const BASE_GRAPH_RANGE = {
min: -0.01,
max: 0.01,
};

function Value() {
const data = useNodeData<MonitorData>();
const value = useNodeValue<DebugValueType>(0);

const container = useRef<HTMLDivElement>(null);
const display = useRef({ value });

const bindingConfig = useMemo(() => {
switch (data.type) {
case 'raw':
return { rows: data.rows, multiline: true };
case 'graph':
default:
return { ...data.range, view: 'graph' };
}
}, [
data.type,
(data as any).rows,
(data as any).bufferSize,
(data as any).range?.min,
(data as any).range?.max,
]);
const binding = useRef<BindingApi>();

useEffect(() => {
switch (data.type) {
Expand All @@ -47,7 +37,13 @@ function Value() {
break;
case 'graph':
default:
display.current.value = Number(value);
const numericalValue = Number(value);
display.current.value = numericalValue;
if (!binding.current) return;
// @ts-expect-error `min` is not on type
binding.current.min = Math.min(binding.current.min ?? BASE_GRAPH_RANGE.min, numericalValue);
// @ts-expect-error `max` is not on type
binding.current.max = Math.max(binding.current.max ?? BASE_GRAPH_RANGE.max, numericalValue);
break;
}
}, [value, data.type]);
Expand All @@ -57,18 +53,36 @@ function Value() {
container: container.current ?? undefined,
});

pane.addBinding(display.current, 'value', {
readonly: true,
const baseProps: BindingParams = {
index: 1,
readonly: true,
label: '',
interval: 1000 / 60,
...bindingConfig,
});
};

switch (data.type) {
case 'raw':
pane.addBinding(display.current, 'value', {
...baseProps,
rows: 5,
multiline: true,
});
break;
case 'graph':
default:
binding.current = pane.addBinding(display.current, 'value', {
...baseProps,
...BASE_GRAPH_RANGE,
view: 'graph',
});

break;
}

return () => {
pane.dispose();
};
}, [bindingConfig]);
}, [data.type]);

return (
<div className="custom-tweak-pane-graph">
Expand All @@ -83,52 +97,18 @@ function Settings() {
useEffect(() => {
if (!pane) return;

let optionsBinding: BindingApi;

function addOptionsBinding() {
if (!pane) return;
optionsBinding?.dispose();

switch (settings.type) {
case 'raw':
settings.rows = 5;
optionsBinding = pane.addBinding(settings, 'rows', {
label: 'size',
index: 1,
min: 1,
max: 10,
step: 1,
});
break;
case 'graph':
default:
settings.range = settings.range || { min: 0, max: 1023 };
optionsBinding = pane.addBinding(settings, 'range', {
label: 'range',
index: 1,
});
break;
}
}

const typeBinding = pane
.addBinding(settings, 'type', {
label: 'type',
index: 0,
view: 'list',
options: [
{ value: 'graph', text: 'graph' },
{ value: 'raw', text: 'raw' },
],
})
.on('change', () => {
addOptionsBinding();
});

addOptionsBinding();
const typeBinding = pane.addBinding(settings, 'type', {
label: 'type',
index: 0,
view: 'list',
options: [
{ value: 'graph', text: 'graph' },
{ value: 'raw', text: 'raw' },
],
});

return () => {
[typeBinding, optionsBinding].forEach(disposable => disposable.dispose());
[typeBinding].forEach(binding => binding.dispose());
};
}, [pane, settings]);

Expand All @@ -142,6 +122,5 @@ Monitor.defaultProps = {
tags: ['output', 'information'],
label: 'Monitor',
type: 'graph',
range: { min: 0, max: 1023 },
} satisfies Props['data'],
};
13 changes: 2 additions & 11 deletions packages/components/src/components/Monitor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,10 @@ import { BaseComponent, BaseComponentData } from './BaseComponent';

export type DebugValueType = unknown;

type GraphData = {
type: 'graph';
range: { min: number; max: number };
export type MonitorData = {
type: 'graph' | 'raw';
};

type RawData = {
type: 'raw';
multiline: true;
rows: number;
};

export type MonitorData = GraphData | RawData;

export class Monitor extends BaseComponent<DebugValueType> {
constructor(data: BaseComponentData & MonitorData) {
super(data, 0);
Expand Down

0 comments on commit 4752060

Please sign in to comment.