darabos commited on
Commit
39a1d35
·
1 Parent(s): 54c14ab

Make boxes update on the UI.

Browse files
web/src/NodeWithParams.svelte CHANGED
@@ -1,24 +1,23 @@
1
  <script lang="ts">
2
  import { getContext } from 'svelte';
3
- import { type NodeProps, useSvelteFlow, useUpdateNodeInternals } from '@xyflow/svelte';
4
  import LynxKiteNode from './LynxKiteNode.svelte';
5
  import NodeParameter from './NodeParameter.svelte';
6
  type $$Props = NodeProps;
7
  export let id: $$Props['id'];
8
  export let data: $$Props['data'];
9
- const { updateNodeData } = useSvelteFlow();
10
- const updateNodeInternals = useUpdateNodeInternals();
11
  $: metaParams = data.meta?.params;
12
  $: store = getContext('LynxKite store');
13
  function setParam(name, newValue) {
14
  const i = $store.workspace.nodes.findIndex((n) => n.id === id);
15
  $store.workspace.nodes[i].data.params[name] = newValue;
16
- updateNodeInternals();
17
  }
18
- $: params = data?.params ? Object.entries(data.params) : [];
 
 
19
  </script>
20
 
21
- <LynxKiteNode {...$$props}>
22
  {#each params as [name, value]}
23
  <NodeParameter
24
  {name}
 
1
  <script lang="ts">
2
  import { getContext } from 'svelte';
3
+ import { type NodeProps, useNodes } from '@xyflow/svelte';
4
  import LynxKiteNode from './LynxKiteNode.svelte';
5
  import NodeParameter from './NodeParameter.svelte';
6
  type $$Props = NodeProps;
7
  export let id: $$Props['id'];
8
  export let data: $$Props['data'];
 
 
9
  $: metaParams = data.meta?.params;
10
  $: store = getContext('LynxKite store');
11
  function setParam(name, newValue) {
12
  const i = $store.workspace.nodes.findIndex((n) => n.id === id);
13
  $store.workspace.nodes[i].data.params[name] = newValue;
 
14
  }
15
+ $: params = $nodes && data?.params ? Object.entries(data.params) : [];
16
+ const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
17
+ $: props = $nodes && $$props;
18
  </script>
19
 
20
+ <LynxKiteNode {...props}>
21
  {#each params as [name, value]}
22
  <NodeParameter
23
  {name}
web/src/NodeWithVisualization.svelte CHANGED
@@ -1,17 +1,17 @@
1
  <script lang="ts">
2
- import { type NodeProps } from '@xyflow/svelte';
3
  import NodeWithParams from './NodeWithParams.svelte';
4
  import { Chart } from 'svelte-echarts';
5
  import { init } from 'echarts';
6
  type $$Props = NodeProps;
7
  export let data: $$Props['data'];
8
- $: display = data?.display?.value ? JSON.parse(JSON.stringify(data.display.value)) : {};
 
 
9
  </script>
10
 
11
  <NodeWithParams {...$$props}>
12
- {#if data.display}
13
- <Chart {init} options={display} initOptions={{renderer: 'canvas', width: 250, height: 250}}/>
14
- {/if}
15
  </NodeWithParams>
16
  <style>
17
  </style>
 
1
  <script lang="ts">
2
+ import { useNodes, type NodeProps } from '@xyflow/svelte';
3
  import NodeWithParams from './NodeWithParams.svelte';
4
  import { Chart } from 'svelte-echarts';
5
  import { init } from 'echarts';
6
  type $$Props = NodeProps;
7
  export let data: $$Props['data'];
8
+
9
+ const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
10
+ $: D = $nodes && data;
11
  </script>
12
 
13
  <NodeWithParams {...$$props}>
14
+ <Chart {init} options={D?.display?.value || {}} initOptions={{renderer: 'canvas', width: 250, height: 250}}/>
 
 
15
  </NodeWithParams>
16
  <style>
17
  </style>