Merge branch 'rc' into sy-3556-use-high-performance-codecs-for-iterators

Author: pjdotson

.gitignore

@@ -72,6 +72,8 @@ work
 # |||| DATA ||||
 
 **/data
+!pluto/src/schematic/edge/data
+!pluto/src/schematic/edge/data/**
 synnax-data
 synnax-data/**
 

console/src/arc/editor/Editor.tsx

@@ -29,7 +29,7 @@ export const useLoadRemote = createLoadRemote<arc.Arc>({
   useSelectVersion,
   actionCreator: (v) =>
     internalCreate({
-      version: "0.0.0",
+      version: "1.0.0",
       key: v.key,
       remoteCreated: true,
       graph: translateGraphToConsole(v.graph),

console/src/arc/editor/graph/Context.ts

@@ -0,0 +1,24 @@
+// Copyright 2026 Synnax Labs, Inc.
+//
+// Use of this software is governed by the Business Source License included in the file
+// licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with the Business Source
+// License, use of this software will be governed by the Apache License, Version 2.0,
+// included in the file licenses/APL.txt.
+
+import { type Dispatch, type UnknownAction } from "@reduxjs/toolkit";
+import { context } from "@synnaxlabs/pluto";
+
+export interface ArcEditorContext {
+  layoutKey: string;
+  dispatch: Dispatch<UnknownAction>;
+}
+
+// This is a temporary type that is used for drilling the arc program key and
+// the UNDOABLE dispatch down into the arc stage renderer. This function will
+// be removed when arc no longer gets stored in redux.
+export const [Provider, useArcEditorContext] = context.create<ArcEditorContext>({
+  providerName: "ArcEditor.Provider",
+  displayName: "ArcEditor.Context",
+});

console/src/arc/editor/graph/Editor.tsx

@@ -7,12 +7,12 @@
 // License, use of this software will be governed by the Apache License, Version 2.0,
 // included in the file licenses/APL.txt.
 
-import { type Dispatch, type UnknownAction } from "@reduxjs/toolkit";
 import { arc } from "@synnaxlabs/client";
 import { useSelectWindowKey } from "@synnaxlabs/drift/react";
 import {
   Access,
   Arc as Base,
+  Component,
   Diagram,
   Haul,
   Theming,
@@ -24,24 +24,26 @@ import { type ReactElement, useCallback, useMemo, useRef } from "react";
 import { useDispatch } from "react-redux";
 
 import { Controls } from "@/arc/editor/Controls";
+import { Provider, useArcEditorContext } from "@/arc/editor/graph/Context";
 import {
   select,
   useSelect,
   useSelectNodeProps,
+  useSelectSelected,
   useSelectViewportMode,
 } from "@/arc/selectors";
 import {
   addElement,
-  clearSelection,
+  applyEdgeChanges,
+  applyNodeChanges,
   copySelection,
   internalCreate,
   pasteSelection,
   selectAll,
-  setEdges,
   setEditable,
   setElementProps,
   setFitViewOnResize,
-  setNodes,
+  setSelected,
   setViewport,
   setViewportMode,
   type State,
@@ -65,42 +67,35 @@ export const filterHaulItems = (items: Haul.Item[]): HaulItem[] =>
 
 export const canDropHaulItem = Haul.canDropOfType<HaulItem>(HAUL_TYPE);
 
-interface SymbolRendererProps extends Diagram.SymbolProps {
-  layoutKey: string;
-  dispatch: Dispatch<UnknownAction>;
-}
-
-const StageRenderer = ({
-  symbolKey,
+const NodeRenderer = ({
+  nodeKey,
   position,
   selected,
   draggable,
-  dispatch,
-  layoutKey,
-}: SymbolRendererProps): ReactElement | null => {
-  const props = useSelectNodeProps(layoutKey, symbolKey);
+}: Diagram.NodeProps): ReactElement | null => {
+  const { layoutKey, dispatch } = useArcEditorContext("ArcEditor.NodeRenderer");
+  const props = useSelectNodeProps(layoutKey, nodeKey);
   const { key = "", ...rest } = props ?? {};
   const handleChange = useCallback(
     (props: object) => {
       if (key == null) return;
       dispatch(
         setElementProps({
           layoutKey,
-          key: symbolKey,
+          key: nodeKey,
           props: { key, ...props },
         }),
       );
     },
-    [symbolKey, layoutKey, key, dispatch],
+    [nodeKey, layoutKey, key, dispatch],
   );
   if (props == null) return null;
   const C = Base.Stage.REGISTRY[key];
   if (C == null) throw new Error(`Symbol ${key} not found`);
   return (
     <C.Symbol
       key={key}
-      id={symbolKey}
-      symbolKey={symbolKey}
+      nodeKey={nodeKey}
       position={position}
       selected={selected}
       draggable={draggable}
@@ -110,6 +105,10 @@ const StageRenderer = ({
   );
 };
 
+const ArcDiagram = Base.create({
+  node: Component.renderProp(NodeRenderer),
+});
+
 export const ContextMenu: Layout.ContextMenuRenderer = ({ layoutKey }) => (
   <CMenu.Menu>
     <Layout.MenuItems layoutKey={layoutKey} />
@@ -128,33 +127,39 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
   const [undoableDispatch, undo, redo] = useUndoableDispatch<RootState, State>(
     selector,
     internalCreate,
-    30, // roughly the right time needed to prevent actions that get dispatch automatically by Diagram.tsx, like setNodes immediately following addElement
+    30,
   );
 
   const theme = Theming.use();
   const viewportRef = useSyncedRef(state.graph.viewport);
   const hasUpdatePermission = Access.useUpdateGranted(arc.ontologyID(layoutKey));
   const canEdit = hasUpdatePermission && state.graph.editable;
 
-  const handleEdgesChange: Diagram.DiagramProps["onEdgesChange"] = useCallback(
-    (edges) => undoableDispatch(setEdges({ key: layoutKey, edges })),
-    [layoutKey, undoableDispatch],
+  const selected = useSelectSelected(layoutKey);
+
+  const handleSelectionChange = useCallback(
+    (selected: string[]) => dispatch(setSelected({ key: layoutKey, selected })),
+    [layoutKey, dispatch],
   );
 
-  const handleNodesChange: Diagram.DiagramProps["onNodesChange"] = useCallback(
-    (nodes, changes) => {
-      if (
-        // @ts-expect-error - Sometimes, the nodes do have dragging
-        nodes.some((n) => n.dragging) ||
-        changes.some((c) => c.type === "select")
-      )
-        // don't remember dragging a node or selecting an element
-        dispatch(setNodes({ key: layoutKey, nodes }));
-      else undoableDispatch(setNodes({ key: layoutKey, nodes }));
+  const handleNodesChange = useCallback(
+    (changes: Diagram.NodeChange[]) => {
+      const dragging = changes.some(
+        (c) => c.type === "position" && c.dragging === true,
+      );
+      const action = applyNodeChanges({ key: layoutKey, changes });
+      if (dragging) dispatch(action);
+      else undoableDispatch(action);
     },
     [layoutKey, dispatch, undoableDispatch],
   );
 
+  const handleEdgesChange = useCallback(
+    (changes: Diagram.EdgeChange[]) =>
+      undoableDispatch(applyEdgeChanges({ key: layoutKey, changes })),
+    [layoutKey, undoableDispatch],
+  );
+
   const handleViewportChange: Diagram.DiagramProps["onViewportChange"] = useCallback(
     (vp) => dispatch(setViewport({ key: layoutKey, viewport: vp })),
     [layoutKey, dispatch],
@@ -171,13 +176,6 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
     [layoutKey, dispatch],
   );
 
-  const elRenderer = useCallback(
-    (props: Diagram.SymbolProps) => (
-      <StageRenderer layoutKey={layoutKey} dispatch={undoableDispatch} {...props} />
-    ),
-    [layoutKey, undoableDispatch],
-  );
-
   const ref = useRef<HTMLDivElement>(null);
 
   const calculateCursorPosition = useCallback(
@@ -264,7 +262,7 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
   );
 
   const handleClearSelection = useCallback(
-    () => dispatch(clearSelection({ key: layoutKey })),
+    () => dispatch(setSelected({ key: layoutKey, selected: [] })),
     [dispatch, layoutKey],
   );
 
@@ -278,13 +276,15 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
     region: ref,
   });
 
+  const ctxValue = useMemo(
+    () => ({ layoutKey, dispatch: undoableDispatch }),
+    [layoutKey, undoableDispatch],
+  );
+
   return (
-    <div
-      ref={ref}
-      onDoubleClick={handleDoubleClick}
-      style={{ width: "inherit", height: "inherit", position: "relative" }}
-    >
-      <Base.Arc
+    <Provider value={ctxValue}>
+      <ArcDiagram
+        ref={ref}
         viewportMode={viewportMode}
         onViewportModeChange={handleViewportModeChange}
         onViewportChange={handleViewportChange}
@@ -294,6 +294,8 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
         // effects on the arc sizing and ensures that we position all the lines
         // in the correct place.
         viewport={{ ...state.graph.viewport, zoom: 1 }}
+        selected={selected}
+        onSelectionChange={handleSelectionChange}
         onEdgesChange={handleEdgesChange}
         onNodesChange={handleNodesChange}
         onEditableChange={handleEditableChange}
@@ -305,14 +307,13 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
         visible={visible}
         {...dropProps}
       >
-        <Diagram.NodeRenderer>{elRenderer}</Diagram.NodeRenderer>
         <Diagram.Background />
         <BaseControls x>
-          <Diagram.FitViewControl />
-          {hasUpdatePermission && <Diagram.ToggleEditControl />}
+          <Diagram.Controls.FitView />
+          {hasUpdatePermission && <Diagram.Controls.ToggleEdit />}
         </BaseControls>
-      </Base.Arc>
+      </ArcDiagram>
       <Controls state={state} />
-    </div>
+    </Provider>
   );
 };

console/src/arc/selectors.ts

@@ -52,9 +52,11 @@ export const selectSelectedElementDigests = (
   layoutKey: string,
 ): ElementDigest[] => {
   const arc = select(state, layoutKey);
-  return arc.graph.nodes
-    .filter((node) => node.selected)
-    .map((node) => ({ key: node.key, type: "node" }));
+  const nodeKeys = new Set(arc.graph.nodes.map((n) => n.key));
+  return arc.graph.selected.map((key) => ({
+    key,
+    type: nodeKeys.has(key) ? "node" : "edge",
+  }));
 };
 
 export const useSelectSelectedElementDigests = (layoutKey: string): ElementDigest[] =>
@@ -84,20 +86,27 @@ export const selectSelectedElementsProps = (
 ): ElementInfo[] => {
   const arc = select(state, layoutKey);
   if (arc == null) return [];
+  const selectedSet = new Set(arc.graph.selected);
   const nodes: ElementInfo[] = arc.graph.nodes
-    .filter((node) => node.selected)
+    .filter((node) => selectedSet.has(node.key))
     .map((node) => ({
       key: node.key,
       type: "node",
       node,
       props: arc.graph.props[node.key],
     }));
   const edges: ElementInfo[] = arc.graph.edges
-    .filter((edge) => edge.selected)
+    .filter((edge) => selectedSet.has(edge.key))
     .map((edge) => ({ key: edge.key, type: "edge", edge }));
   return [...nodes, ...edges];
 };
 
+export const selectSelected = (state: StoreState, layoutKey: string): string[] =>
+  select(state, layoutKey).graph.selected;
+
+export const useSelectSelected = (layoutKey: string): string[] =>
+  useMemoSelect((state: StoreState) => selectSelected(state, layoutKey), [layoutKey]);
+
 export const selectEdge = (
   state: StoreState,
   layoutKey: string,

console/src/arc/services/link.ts

@@ -18,7 +18,7 @@ export const handleLink: Link.Handler = async ({ client, key, placeLayout }) =>
   placeLayout(
     Arc.Editor.create({
       name,
-      version: "0.0.0",
+      version: "1.0.0",
       key,
       type: "arc",
       remoteCreated: true,

console/src/arc/services/ontology.tsx

@@ -38,7 +38,7 @@ const load = async (client: Synnax, id: ontology.ID, placeLayout: Layout.Placer)
   placeLayout(
     Arc.Editor.create({
       name,
-      version: "0.0.0",
+      version: "1.0.0",
       key,
       type: "arc",
       remoteCreated: true,