go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/app/page.tsx

/**
 * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
 * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
 */
'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import ReactFlow, {
  Node as FlowNode,
  Controls,
  Background,
  BackgroundVariant,
  Edge,
  ConnectionLineType,
  ConnectionMode,
  Viewport,
  Connection,
  Node,
  XYPosition,
  ReactFlowProvider,
  OnSelectionChangeParams,
} from 'reactflow';
import { Button, HotkeysProvider, OverlayToaster, Position, Section, SectionCard, Spinner, SpinnerSize, Tooltip } from '@blueprintjs/core';
import { shallow } from 'zustand/shallow';
import { useMonaco } from '@monaco-editor/react';

import * as api from '../api/nodes';
import * as graphApi from '../api/graphs';
import { HeaderNavbar } from '../components/headerNavbar';
import { NodeCard } from '../components/nodeCard';
import useStateStore, { defaultEdgeOptions } from '../store/store';
import editorTheme from '../components/editorTheme';
import { Omnibar } from '../components/omnibar';
import { DialogAddNode } from '../components/dialogAddNode';
import { DialogEditNode } from '../components/dialogEditNode';
import { nodeTypes } from '../refdata/nodeTypes';
import { DialogLink } from '../components/dialogLink';
import { DialogLoadFile } from '../components/dialogLoadFile';
import { StoreState } from '../store/store'
import { ApiEffect } from '../store/apiEffect';
import { NodeData } from '../store/nodeData';
import { NodeContextMenu, NodeContextMenuProps } from '../components/nodeContextMenu';
import { EditTableDrawer } from '../components/editTableDrawer';
import { FlowPaneContextMenu, FlowPaneContextMenuProps } from '../components/flowPaneContextMenu';
import { DialogLogs } from '../components/dialogLogs';
import { SessionProvider } from '../components/sessionProvider';
import { DialogAddGraph } from '../components/dialogAddGraph';
import { DialogEditGraph } from '../components/dialogEditGraph';
import { DialogManageGraphs } from '../components/dialogManageGraphs';

export default function Page() {
  const searchParams = useSearchParams();
  const graphId = searchParams.get('graph_id');
  return (
    <SessionProvider>
      <ReactFlowProvider>
        <GraphEditor searchGraphId={graphId} />
      </ReactFlowProvider>
    </SessionProvider>
  )
}

const nodeCardTypes = {
  nodeCard: NodeCard,
}

const stateSelector = (state: StoreState) => ({
  isLoading: state.isLoading,
  nodes: state.nodes,
  watchedNodes: state.watchedNodes,
  edges: state.edges,
  graph: state.graph,
  graphs: state.graphs,
  onApiEffect: state.onApiEffect,
  onDisconnect: state.onDisconnect,
  onConnect: state.onConnect,
  onNodesChange: state.onNodesChange,
  onEdgesChange: state.onEdgesChange,
  onRefresh: state.onRefresh,
  onStabilize: state.onStabilize,
  applyNodeDataChangeToStore: state.applyNodeDataChangeToStore,
});

function GraphEditor({ searchGraphId }: { searchGraphId: string | null }) {
  const router = useRouter();

  const hasGraphId = searchGraphId !== null;
  const graphId = searchGraphId || '';

  const edgeUpdateSuccessful = useRef(true);
  const dragRef = useRef<FlowNode | null>(null);
  const viewportMoveRef = useRef<Viewport | null>(null);
  const viewportRef = useRef<Viewport | null>(null);
  const alertRef = useRef<OverlayToaster>(null);
  const selectionRef = useRef<OnSelectionChangeParams | null>(null);
  const {
    isLoading, nodes, watchedNodes, edges, graph, graphs,
    onNodesChange, onEdgesChange, onDisconnect, onConnect, onRefresh,
    onApiEffect, onStabilize, applyNodeDataChangeToStore
  } = useStateStore(stateSelector, shallow);

  const [watchedNodeValues, setWatchedNodeValues] = useState<{ [key: string]: any }>({});
  const [stabilizing, setStabilizing] = React.useState(false);

  const [dialogAddNodeOpen, setDialogAddNodeOpen] = useState(false);
  const [dialogEditNodeOpen, setDialogEditNodeOpen] = useState(false);
  const [dialogAddGraphOpen, setDialogAddGraphOpen] = useState(false);
  const [dialogEditGraphOpen, setDialogEditGraphOpen] = useState(false);
  const [dialogManageGraphsOpen, setDialogManageGraphsOpen] = useState(false);
  const [tableEditorOpen, setTableEditorOpen] = useState(false);
  const [dialogLoadFileOpen, setDialogLoadFileOpen] = React.useState(false);
  const [dialogLogsOpen, setDialogLogsOpen] = React.useState(false);
  const [dialogLinkOpen, setDialogLinkOpen] = React.useState(false);

  const [omnibarOpen, setOmnibarOpen] = React.useState(false);
  const [nodeContextMenu, setNodeContextMenu] = useState<NodeContextMenuProps | null>(null);
  const [flowPaneContextMenu, setFlowPaneContextMenu] = useState<FlowPaneContextMenuProps | null>(null);

  const [logs, setLogs] = useState<string | undefined>();

  const [showAddGraph, setShowAddGraph] = useState(false);
  const [addNodeType, setAddNodeType] = useState<string | null>(null);
  const [addNodePosition, setAddNodePosition] = useState<XYPosition | undefined>();
  const [editNode, setEditNode] = useState<api.Node>(api.emptyNode);
  const [editValue, setEditValue] = useState<api.NativeValueType>('');
  const [editGraph, setEditGraph] = useState<graphApi.Graph>(graphApi.emptyGraph);

  const handleError = (e) => {
    alertRef.current?.show({
      message: e.message,
      intent: 'danger',
    })
  }

  const onConnectWithError = useCallback((connection: Connection) => {
    onConnect(connection).catch(handleError)
  }, [])

  const doStabilize = useCallback(() => {
    setStabilizing(true)
    onStabilize().then(() => {
      setStabilizing(false)
    }).catch(e => {
      handleError(e)
      setStabilizing(false)
    })
  }, []);

  const doWatch = useCallback(async (nodeId: string, watched: boolean) => {
    try {
      await onApiEffect([{
        type: 'update-watched',
        node_id: nodeId,
        watched: watched,
      }])
    } catch (err) {
      handleError(err)
    }
  }, []);

  const doWatchedCollapsed = useCallback(async (nodeId: string, watched_collapsed: boolean) => {
    try {
      await onApiEffect([{
        type: 'update-watched-collapsed',
        node_id: nodeId,
        watched_collapsed: watched_collapsed,
      }])
    } catch (err) {
      handleError(err)
    }
  }, []);

  const doObserve = useCallback(async (n: Node<NodeData>) => {
    try {
      const [nodeId] = await onApiEffect([{
        type: 'add-node',
        node: {
          ...n.data.node,
          label: n.data.node.label + '-observer',
          metadata: {
            ...n.data.node.metadata,
            node_type: 'observer',
            position_x: n.position.x + 400,
            position_y: n.position.y,
            input_type: n.data.node.metadata.output_type,
            output_type: undefined,
          }
        },
      }])
      await onApiEffect([{
        type: 'link-nodes',
        child_id: nodeId,
        parent_id: n.data.node.id,
        child_input_name: 'input',
      }])
    } catch (err) {
      handleError(err)
    }
  }, []);

  const doDuplicate = useCallback(async (n: Node<NodeData>) => {
    onApiEffect([{
      type: 'duplicate-node',
      node: n.data.node,
    }]).catch(handleError)
  }, [])

  const doSetStale = useCallback((n: Node<NodeData>) => {
    onApiEffect([{
      type: 'set-stale',
      node_id: n.id,
    }]).catch(handleError)
  }, [])

  const doAddNode = useCallback((nodeType: string, node: api.Node, value: any) => {
    const clone = Object.assign({}, node);
    clone.metadata.node_type = nodeType;
    onApiEffect([{
      type: 'add-node',
      node: clone,
      value: value,
    }]).then(() => {
      setDialogAddNodeOpen(false);
    }).catch(handleError)
  }, [])

  const doRemove = useCallback((n: Node<NodeData>) => {
    onApiEffect([{
      type: 'remove-node',
      node_id: n.data.node.id,
    }]).catch(handleError)
  }, [])

  const doCollapse = useCallback((fn: Node<NodeData>, collapsed: boolean) => {
    fn.data.onCollapse(collapsed)
  }, [])

  const doCollapseAll = useCallback((collapsed: boolean) => {
    onApiEffect([{
      type: 'update-collapsed-all',
      collapsed: collapsed,
    }])
  }, []);

  const onAdd = useCallback((nodeType: string | null, xy?: XYPosition) => {
    setAddNodeType(nodeType)
    setAddNodePosition(xy)
    setDialogAddNodeOpen(true)
  }, [])

  const onShowLink = useCallback(() => {
    setDialogLinkOpen(true)
  }, [])

  const onShowGraphLogs = useCallback(() => {
    graphApi.getGraphLogs(graph?.id || '').then(logs => {
      setLogs(logs)
      setDialogLogsOpen(true)
    }).catch(handleError)
  }, [graph])

  const onAddGraph = useCallback(() => {
    setDialogAddGraphOpen(true)
  }, []);

  const onShowGraphs = useCallback(() => {
    setDialogManageGraphsOpen(true)
  }, []);

  const onSave = useCallback(() => {
    if (graph !== null) {
      window.location.href = `/api/v1/graph/${graph.id}/save/`
    }
  }, [graph]);

  const onLoad = useCallback(() => {
    setDialogLoadFileOpen(true);
  }, [])

  const onLoadClose = useCallback(() => {
    setDialogLoadFileOpen(false);
  }, [])

  const onLogsClose = useCallback(() => {
    setDialogLogsOpen(false);
  }, [])

  const onEdit = useCallback((n: Node<NodeData>) => {
    setEditNode(n.data.node);
    if (n.data.node.metadata.node_type === 'table') {
      setTableEditorOpen(true)
    } else {
      const nodeType = nodeTypes[n.data.node.metadata.node_type];
      if (nodeType.canSetValue) {
        api.getNodeValue(graph?.id || '', n.id).then((v) => {
          setEditValue(v)
          setDialogEditNodeOpen(true)
        }).catch(handleError)
      } else {
        setDialogEditNodeOpen(true)
      }
    }
  }, [graph])

  const onEditSave = useCallback((n: api.Node, value: any) => {
    const nodeType = nodeTypes[n.metadata.node_type]
    const effects: ApiEffect[] = [];
    effects.push({ type: 'update-label', node_id: n.id, label: n.label });
    if (nodeType.canSetExpression) {
      if (n.metadata.expression === undefined) {
        throw new Error('expression is required');
      }
      effects.push({ type: 'update-expression', node_id: n.id, expression: n.metadata.expression });
    }
    if (nodeType.canSetValue) {
      if (value === undefined) {
        throw new Error('value is required');
      }
      effects.push({ type: 'update-value', node_id: n.id, value: value });
    }
    onApiEffect(effects).then(() => {
      setDialogEditNodeOpen(false);
    }).catch(handleError)
  }, [graph])

  const onEditGraphSave = useCallback((g: graphApi.Graph) => {
    onApiEffect([{
      type: 'update-graph-label',
      graph_id: g.id,
      label: g.label,
    }]).then(() => {
      setDialogEditGraphOpen(false)
    }).catch(handleError)
  }, [graph]);

  const doEditGraph = useCallback(async (graphId: string) => {
    const graph = await graphApi.getGraph(graphId);
    setEditGraph(graph)
    setDialogEditGraphOpen(true)
  }, [])

  const doDeleteGraph = useCallback(async (graphId: string) => {
    onApiEffect([{ type: 'delete-graph', graph_id: graphId }]).catch(handleError)
  }, []);

  const doNodeLabelChange = useCallback((n: api.Node, label: string) => {
    onApiEffect([{ type: 'update-label', node_id: n.id, label: label }]).catch(handleError)
  }, []);

  const onLink = useCallback((conn: Connection) => {
    onApiEffect([{
      type: 'link-nodes',
      parent_id: conn.source || '',
      child_id: conn.target || '',
      child_input_name: conn.targetHandle,
    }]).then(() => setDialogLinkOpen(false)).catch(handleError)
  }, []);

  const submitFile = useCallback((loadedFiles?: FileList) => {
    if (loadedFiles) {
      graphApi.postGraphLoad(loadedFiles).then(() => {
        setDialogLoadFileOpen(false);
        onRefresh(graphId);
      }).catch(handleError)
    }
  }, []);

  const onFlowEdgeUpdateStart = useCallback(() => {
    edgeUpdateSuccessful.current = false;
  }, []);
  const onFlowEdgeUpdate = useCallback(() => {
    edgeUpdateSuccessful.current = true;
  }, []);
  const onFlowEdgeUpdateEnd = useCallback((e: MouseEvent, edge: Edge<any>) => {
    if (!edgeUpdateSuccessful.current) {
      onDisconnect(edge).catch(handleError)
    }
    edgeUpdateSuccessful.current = true;
  }, []);

  const onFlowNodeDragStart = useCallback((event: any, node: FlowNode<NodeData>, nodes: FlowNode<NodeData>[]) => {
    dragRef.current = node;
  }, []);
  const onFlowNodeDragStop = useCallback((_, node: FlowNode) => {
    if (dragRef.current) {
      if (dragRef.current.position !== node.position) {
        onApiEffect([{
          type: 'update-position',
          node_id: node.id,
          position: node.position
        }]).catch(handleError)
      }
    }
    dragRef.current = null;
  }, [])

  const onMoveStart = useCallback((event: MouseEvent | TouchEvent, viewport: Viewport) => {
    setNodeContextMenu(null)
    viewportMoveRef.current = viewport;
  }, []);

  const onMoveEnd = useCallback((event: MouseEvent | TouchEvent, viewport: Viewport) => {
    if (viewportMoveRef.current) {
      if (viewportMoveRef.current !== viewport) {
        onApiEffect([{
          type: 'update-graph-viewport',
          graph_id: graph?.id || '',
          viewport: viewport,
        }]).catch(handleError)
      }
    }
    viewportMoveRef.current = null;
  }, [graph]);

  const onMove = useCallback((event: MouseEvent | TouchEvent, viewport: Viewport) => {
    viewportRef.current = viewport;
  }, []);

  // onFitView is just the action handler that is called _after_
  // the viewport is changed and `onMove` fires, so we have to tap
  // into the viewport ref we manage in the `onMove` handler.
  const onFitView = useCallback(() => {
    if (viewportRef.current) {
      onApiEffect([{
        type: 'update-graph-viewport',
        graph_id: graph?.id || '',
        viewport: viewportRef.current,
      }]).catch(handleError)
    }
  }, [graph, viewportRef])

  const fetchWatchedValuesFromAPI = () => {
    const ids = watchedNodes.map((o) => o.id);
    if (ids.length > 0) {
      api.getNodeValues(graph?.id || '', ids).then((nodeValues) => {
        setWatchedNodeValues(nodeValues.reduce((o, v) => {
          o[v.id] = v
          return o
        }, {}))
      }).catch(handleError)
    }
  }

  const onNodeContextMenu = useCallback(
    (event, node) => {
      event.preventDefault();
      setNodeContextMenu({
        node: node,
        top: event.clientY - 50,
        left: event.clientX,
        onDuplicate: doDuplicate,
        onWatch: doWatch,
        onObserve: doObserve,
        onEdit: onEdit,
        onRemove: doRemove,
        onSetStale: doSetStale,
      });
    },
    [graph, setNodeContextMenu]
  );

  const getProjectViewport = (): Viewport => {
    if (viewportRef.current) {
      return viewportRef.current
    }
    return graphApi.viewportFromGraph(graph);
  }

  const project = (pos: XYPosition): XYPosition => {
    const { x, y, zoom } = getProjectViewport();
    return {
      x: (pos.x - x) / zoom,
      y: (pos.y - y) / zoom,
    };
  }

  const onFlowPaneContextMenu = useCallback(
    (event) => {
      event.preventDefault();
      const projectedXY = project({ x: event.clientX, y: event.clientY });
      setFlowPaneContextMenu({
        top: event.clientY,
        left: event.clientX,
        onAddNode: () => {
          onAdd(null, projectedXY)
        },
        onRefresh: () => { onRefresh(graphId) },
        onStabilize: onStabilize,
      })
    },
    [setFlowPaneContextMenu]
  )

  const onSelectionChange = (params: OnSelectionChangeParams) => {
    selectionRef.current = params
  }

  const doSelectionRemove = () => {
    const effects: Array<ApiEffect> = []
    if (selectionRef.current) {
      for (const node of selectionRef.current.nodes) {
        effects.push({
          type: 'remove-node',
          node_id: node.id,
        })
      }
    }
    onApiEffect(effects).catch(handleError)
  }

  const onEditTableNodeChange = (n: api.Node) => {
    applyNodeDataChangeToStore(n.id, (n0d: NodeData): NodeData => {
      n0d.refreshedAt = new Date()
      return n0d
    })
  }

  const doSelectionDuplicate = () => {
    const effects: Array<ApiEffect> = []
    if (selectionRef.current) {
      for (const node of selectionRef.current.nodes) {
        effects.push({
          type: 'duplicate-node',
          node: node.data.node,
        })
      }
    }
    onApiEffect(effects).catch(handleError)
  }

  const doAddGraph = async (g: graphApi.Graph) => {
    const newGraphId = await graphApi.postGraph(g);
    router.push(`/?graph_id=${newGraphId}`)
    setDialogAddGraphOpen(false);
  }

  // Close the context menu if it's open whenever the window is clicked.
  const onFlowPaneClick = useCallback(() => {
    setNodeContextMenu(null)
    setFlowPaneContextMenu(null)
  }, [setNodeContextMenu, setFlowPaneContextMenu]);


  const suppress = (e) => {
    e.preventDefault();
    e.stopPropagation();
  }

  const monaco = useMonaco();

  useEffect(() => {
    if (monaco) {
      monaco.editor.defineTheme("bp5", editorTheme);
    }
  }, [monaco])

  useEffect(() => {
    if (!hasGraphId) {
      graphApi.getGraphActive().then(graph => {
        if (graph === null) {
          setShowAddGraph(true);
          return
        }
        setShowAddGraph(false);
        router.push(`/?graph_id=${graph.id}`)
      })
    }
  }, [searchGraphId]);

  useEffect(() => {
    if (hasGraphId) {
      onRefresh(graphId)
    }
  }, [searchGraphId])

  // only if we stabilize
  useEffect(() => {
    fetchWatchedValuesFromAPI()
  }, [searchGraphId, watchedNodes, graph?.stabilization_num])

  useEffect(() => {
    if (graph) {
      document.title = `Nodes - ${graph.label}`;
    }
  }, [graph])

  if (!hasGraphId) {
    return <Spinner size={SpinnerSize.LARGE} style={{ position: 'absolute', left: '50%', top: '50%' }} />
  }

  if (showAddGraph || graph === null) {
    // the user does not have an active graph, it's likely they have _no_ graphs.
    return (
      <div id="app-page">
        <DialogAddGraph isOpen={true} canCancel={false} onSave={doAddGraph} isBootstrap={true} />
      </div>
    )
  }

  if (isLoading) {
    return <Spinner size={SpinnerSize.LARGE} style={{ position: 'absolute', left: '50%', top: '50%' }} />
  }

  return (
    <HotkeysProvider>
      <div id="app-page">
        <HeaderNavbar
          graph={graph}
          stabilizing={stabilizing}
          onAdd={() => onAdd(null)}
          onRemove={doSelectionRemove}
          onLink={onShowLink}
          onDuplicate={doSelectionDuplicate}
          onStabilize={doStabilize}
          onRefresh={() => onRefresh(graphId)}
          onOmnibar={() => setOmnibarOpen(true)}
          onLoad={onLoad}
          onSave={onSave}
          onAddGraph={onAddGraph}
          onShowGraphs={onShowGraphs}
          onShowGraphLogs={onShowGraphLogs}
        />
        <Omnibar nodes={nodes}
          isOpen={omnibarOpen}
          onClose={() => setOmnibarOpen(false)}
          onAdd={onAdd}
          onLink={onShowLink}
          onEdit={onEdit}
          onDuplicate={doDuplicate}
          onDuplicateSelected={doSelectionDuplicate}
          onRemove={doRemove}
          onRemoveSelected={doSelectionRemove}
          onLoad={onLoad}
          onSave={onSave}
          onShowGraphLogs={onShowGraphLogs}
          onStabilize={doStabilize}
          onRefresh={() => onRefresh(graphId)}
          onObserve={doObserve}
          onSetStale={doSetStale}
          onCollapseAll={doCollapseAll}
          onCollapse={doCollapse} />
        <OverlayToaster ref={alertRef} usePortal={false} position={Position.TOP} />
        <div id="flow-container">
          <ReactFlow
            nodes={nodes}
            edges={edges}

            defaultEdgeOptions={defaultEdgeOptions}

            onMoveStart={onMoveStart}
            onMoveEnd={onMoveEnd}
            onMove={onMove}

            connectionMode={ConnectionMode.Strict}
            connectionLineType={ConnectionLineType.Step}

            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}

            onEdgeUpdate={onFlowEdgeUpdate}
            onEdgeUpdateStart={onFlowEdgeUpdateStart}
            onEdgeUpdateEnd={onFlowEdgeUpdateEnd}

            onConnect={onConnectWithError}

            onNodeDragStart={onFlowNodeDragStart}
            onNodeDragStop={onFlowNodeDragStop}

            snapToGrid={true}
            autoPanOnNodeDrag={true}
            onNodeClick={suppress}
            onNodeDoubleClick={suppress}

            selectNodesOnDrag={false}
            multiSelectionKeyCode={'ShiftLeft'}
            onSelectionChange={onSelectionChange}

            onNodeContextMenu={onNodeContextMenu}
            onPaneClick={onFlowPaneClick}
            onPaneContextMenu={onFlowPaneContextMenu}

            nodeTypes={nodeCardTypes}
            minZoom={0.25}
            defaultViewport={graphApi.viewportFromGraph(graph)}
          >
            <Controls onFitView={onFitView} position='top-left' />
            <Background variant={BackgroundVariant.Dots} gap={24} size={1} />
            {nodeContextMenu && <NodeContextMenu {...nodeContextMenu} onClick={onFlowPaneClick} />}
            {flowPaneContextMenu && <FlowPaneContextMenu {...flowPaneContextMenu} onClick={onFlowPaneClick} />}
          </ReactFlow>
          {watchedNodes && watchedNodes.length > 0 && (
            <div id="outputs">
              <WatchedNodes nodes={watchedNodes} values={watchedNodeValues} onWatch={doWatch} onWatchedCollapsed={doWatchedCollapsed} />
            </div>
          )}
        </div>
        <DialogAddNode isOpen={dialogAddNodeOpen} nodeType={addNodeType} nodePosition={addNodePosition} doAddNode={doAddNode} onClose={() => setDialogAddNodeOpen(false)} />
        <DialogEditNode isOpen={dialogEditNodeOpen} node={editNode} value={editValue} onClose={() => { setDialogEditNodeOpen(false) }} onSave={onEditSave} />
        <DialogAddGraph isOpen={dialogAddGraphOpen} onClose={() => { setDialogAddGraphOpen(false) }} onSave={doAddGraph} isBootstrap={false} canCancel={true} />
        <DialogEditGraph isOpen={dialogEditGraphOpen} graph={editGraph} onClose={() => { setDialogEditGraphOpen(false) }} onSave={onEditGraphSave} />
        <DialogManageGraphs isOpen={dialogManageGraphsOpen} graphs={graphs} onDelete={doDeleteGraph} onEdit={doEditGraph} onClose={() => setDialogManageGraphsOpen(false)} />
        <DialogLink isOpen={dialogLinkOpen} nodes={nodes} onClose={() => { setDialogLinkOpen(false) }} onLink={onLink} />
        <DialogLoadFile isOpen={dialogLoadFileOpen} onClose={onLoadClose} onLoad={submitFile} />
        <DialogLogs isOpen={dialogLogsOpen} onClose={onLogsClose} logs={logs} />
        <EditTableDrawer node={editNode} isOpen={tableEditorOpen} onClose={() => setTableEditorOpen(false)} onError={handleError} onLabelChange={doNodeLabelChange} onNodeChange={onEditTableNodeChange} />
      </div>
    </HotkeysProvider>
  )
}

declare interface WatchedNodesProps {
  nodes: api.Node[];
  values: { [key: string]: any };
  onWatch: (nodeId: string, watched: boolean) => void;
  onWatchedCollapsed: (nodeId: string, watched_collapsed: boolean) => void;
}

const WatchedNodes = (props: WatchedNodesProps) => {
  return (
    <div className="watched-nodes-inner">
      {
        props.nodes && props.nodes.length > 0 && props.nodes.map((o, i) => {
          const value: api.NodeValue | undefined = props.values[o.id];
          const hasValue = value !== undefined && value !== null;
          const nodeType = nodeTypes[o.metadata.node_type];
          const valueType = nodeType.outputTypeIsDisplayType ? o.metadata.output_type : o.metadata.input_type;
          const watched_collapsed = o.metadata.watched_collapsed !== undefined ? o.metadata.watched_collapsed : false;
          return (
            <Section
              key={i}
              className="output-card node-observer"
              title={o.label}
              compact={true}
              icon='many-to-one'
              collapsible={true}
              collapseProps={{
                defaultIsOpen: true,
                isOpen: !watched_collapsed,
                onToggle: () => { props.onWatchedCollapsed(o.id, !watched_collapsed) },
              }}
              rightElement={<Tooltip content={"Remove the watch for this node"} intent='danger'><Button minimal={true} icon='delete' onClick={() => props.onWatch(o.id, false)} /></Tooltip>}
            >
              <WatchedNode hasValue={hasValue} valueType={valueType || 'string'} value={value?.value} />
            </Section>
          )
        })
      }
    </div >
  )
}

declare interface WatchedNodeProps {
  hasValue: boolean;
  valueType: string;
  value: any;
}

const WatchedNode = (props: WatchedNodeProps) => {
  const loadingClass = 'bp5-skeleton';
  if (props.hasValue && props.valueType === 'svg') {
    return (<div className={`observer-value value-type-svg ${!props.hasValue ? loadingClass : ''}`} dangerouslySetInnerHTML={{ __html: String(props.value.thumbnail) }}></div>)
  }
  return (<div className={`observer-value ${!props.hasValue ? loadingClass : ''}`}>{props.hasValue ? String(props.value) : '-'}</div>)
}