A-12 further code cleanup

app/src/App.tsx

@@ -14,7 +14,6 @@ import ZoomInfo from "./ui/ZoomInfo";
 import State from "./graph/State";
 import Button from "./ui/components/Button";
 import ContextMenu from "./ui/components/ContextMenu";
-import Recenter from "./ui/Recenter";
 import Header from "./ui/Header";
 import NodeBlueprints, {NodeGroups} from "./ui/NodeBlueprints";
 import BlueprintSvg from "./svg/BlueprintSvg";
@@ -28,7 +27,7 @@ function App() {
 
     const [graph, setGraph] = useState(true);
 
-    const [light, setLight] = useState(false);
+    const [light, setLight] = useState(localStorage.getItem("graphene_theme") === "1");
     const toggleBg = () => {
         setLight(now => !now);
     };
@@ -52,7 +51,6 @@ function App() {
             {graph ? <>
                     <ContextMenu items={items}/>
                     <ZoomInfo/>
-                    <Recenter/>
                     <Svg items={items}/>
                     <Taskbar items={items}/>
                 </>

app/src/__snapshots__/App.test.tsx.snap

@@ -217,7 +217,7 @@ exports[`Renders <App/> without issues 1`] = `
       className="taskbarElement"
       style={
         Object {
-          "height": "200px",
+          "height": "240px",
           "transform": "translate3d(0px, 0px, 0)",
           "width": "350px",
         }
@@ -255,54 +255,99 @@ exports[`Renders <App/> without issues 1`] = `
               onClick={[Function]}
             >
               + det_reader
+              <span
+                className="CP white"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + fv_classify
+              <span
+                className="CP purple"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + fv_cluster
+              <span
+                className="CP purple"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + fv_sim
+              <span
+                className="CP purple"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + join
+              <span
+                className="CP orange"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + line_cross
+              <span
+                className="CP green"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + print
+              <span
+                className="CP white"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + SQL
+              <span
+                className="CP red"
+              >
+                 
+              </span>
             </button>
             <button
               className="btnSmall btn "
               onClick={[Function]}
             >
               + window
+              <span
+                className="CP blue"
+              >
+                 
+              </span>
             </button>
           </div>
         </div>
@@ -351,7 +396,7 @@ exports[`Renders <App/> without issues 1`] = `
       className="taskbarElement"
       style={
         Object {
-          "top": "300px",
+          "top": "340px",
           "transform": "translate3d(0px, 0px, 0)",
           "width": "300px",
         }
@@ -431,7 +476,7 @@ exports[`Renders <App/> without issues 1`] = `
               onChange={[Function]}
               type="checkbox"
             />
-             Open in new window instead of downloading
+            Open in new window instead of downloading
           </label>
           <br />
           <br />

app/src/app/EdgeLoader.ts

@@ -2,7 +2,7 @@ import {NodeBuilder} from "../node/Builder";
 import {jsobj} from "../util/util";
 
 /**
- * The type of the edge is not pre defined.
+ * The type of the edge is not predefined.
  */
 export type EdgePrimitive = "any" | string;
 

app/src/graph/GraphUtil.ts

@@ -1,6 +1,6 @@
-import {Node} from "../node/Node";
+import {Node, NodeId} from "../node/Node";
 import State, {getState} from "./State";
-import {Line, LineId, NodeId} from "../node/Line";
+import {Line, LineId} from "../node/Line";
 
 /**
  * first argument is the node, or if it's a source node, null
@@ -40,7 +40,7 @@ export class GraphUtil {
      * @returns {boolean} Returns true if the iteration was successful and false if a circle was detected.
      */
     forEachInOrder(callbackFn: Function, doSvgRender = false) {
-        getState().nodes.forEach(node => node.orderedNode = []);
+        getState().nodes.forEach(node => node.volatile_previousNodes = []);
         this.circleElementsInGraph = [];
 
         if (this.sourceNodes.length === 0 && this.everyNode.length !== 0) {
@@ -72,7 +72,7 @@ export class GraphUtil {
      * @param {Function} callbackFn - The function to call on each node.
      */
     forEachInOrderRecurse(currentNode: Node, initialSourceNode: NodeId, visitedLines: Line[], prevNode: prevNodeIterator, callbackFn: Function) {
-        currentNode.orderedNode.push(initialSourceNode);
+        currentNode.volatile_previousNodes.push(initialSourceNode);
         callbackFn && callbackFn(currentNode, initialSourceNode, visitedLines, prevNode);
 
         // detect a circle in this path
@@ -123,14 +123,14 @@ export class GraphUtil {
      * This function modifies the current graph, resets and then rewrites Node.connectedNodeInputs[]
      */
     rippleNodeEdgeRefs() {
-        this.everyNode.forEach(node => node.connectedNodeInputs = []);
+        this.everyNode.forEach(node => node.volatile_connectedNodeInputs = []);
 
         this.forEachInOrder(
             (current: Node, initial: NodeId, visited: Line[], [prevNode, item]: prevNodeIterator) => {
                 const prevNodeInputs = prevNode ? prevNode.getConnectedNodeInputs : [];
                 const prevNodeSelfOutputs = prevNode ? prevNode.nodeOutputs : [];
 
-                current.connectedNodeInputs.push(
+                current.volatile_connectedNodeInputs.push(
                     ...prevNodeInputs,
                     ...prevNodeSelfOutputs
                 )

app/src/graph/Serialiser.ts

@@ -1,8 +1,8 @@
 import {getState} from "./State";
 import {createFile, jsobj} from "../util/util";
-import {Line, LineId, NodeId} from "../node/Line";
+import {Line, LineId} from "../node/Line";
 import {NodeGroup, NodeSerialised} from "../app/NodeGroupLoader";
-import {Node} from "../node/Node";
+import {Node, NodeId} from "../node/Node";
 // de and re serialise content
 /* eslint import/no-webpack-loader-syntax: off */
 
@@ -20,7 +20,7 @@ class Serialiser {
                 name: this.toID(node.ID),
                 [nodeProps.config?.self || "graphene_toJSONRAW_self_not_found"]: {
                     ...node.configValues,
-                    ...Object.fromEntries(node.configurableInputValues)
+                    ...Object.fromEntries(node.configValuesActual)
                 },
                 input: [this.toID(node.ID)],
                 output: node.nextNodes.map(this.toID)

app/src/graph/State.ts

@@ -1,19 +1,13 @@
-import {jsobj} from "../util/util";
 import {create, useStore} from 'zustand'
-import {devtools, persist} from 'zustand/middleware'
-import {Node} from "../node/Node";
-import {Line, LineId, NodeId} from "../node/Line";
-import {unwatchFile} from "fs";
+import {devtools} from 'zustand/middleware'
+import {Node, NodeId} from "../node/Node";
+import {Line, LineId} from "../node/Line";
 import {temporal, TemporalState} from 'zundo'
 import {shallow} from "zustand/shallow";
-import {GraphUtil, GraphUtilInst} from "./GraphUtil";
+import {GraphUtilInst} from "./GraphUtil";
 import {Point} from "../util/Geom";
 import {NodeGroup} from "../app/NodeGroupLoader";
 
-// export default class State {
-//     static nodes: Node[] = [];
-// }
-
 interface AppState {
     nodes: Node[],
     lines: Line[],
@@ -75,7 +69,7 @@ const State = create<AppState>()(
                     set((state) => {
                             const activeNode = state.activeNode;
                             if (!activeNode) return {};
-                            activeNode.configurableInputValues.set(propertyName, to);
+                            activeNode.configValuesActual.set(propertyName, to);
                             return {activeNode}
                         }
                     ),
@@ -105,25 +99,25 @@ const State = create<AppState>()(
                 setActiveNode: (id) => set((state) =>
                     ({activeNode: id ? get().nodes.find(item => item.ID === Number(id)) : undefined})
                 ),
-                setBlueprintedNode: (nodeName: string) => set((state) =>
+                setBlueprintedNode: (nodeName: string) => set(() =>
                     ({blueprintedNode: nodeName})),
                 setNodeGroup: (nodeGroup: string) => {
                     resetIDS();
                     NodeGroup.activeNodeGroup = nodeGroup;
-                    set((state) =>
+                    set(() =>
                         ({...initialState, blueprintedNode: "", nodeGroup: nodeGroup}))
                 },
                 getLinesAtNodeConnection: (id: NodeId | undefined, end: End) => {
                     if (!id) return [];
                     const whichJunction = end === End.FROM ? "from" : "to";
                     return get().lines.filter(line => line[whichJunction] === id)
                 },
-                doSvgRender: () => set((state) =>
+                doSvgRender: () => set(() =>
                     ({forceSvgRender: Math.random()})
                 ),
                 resetStore: () => {
                     resetIDS();
-                    return set((state) => initialState)
+                    return set(() => initialState)
                 },
                 setInspectLine: (line: Line, point: Point) => set(() =>
                     ({inspectedLine: {line, point}})),

app/src/node/Line.tsx

@@ -1,15 +1,13 @@
-import State, {getState} from "../graph/State";
-import {Node} from "./Node";
-import Draggable, {DragHandler, DragHandlerInst} from "../svg/Draggable";
+import {getState} from "../graph/State";
+import {Node, NodeId} from "./Node";
+import {DragHandlerInst} from "../svg/Draggable";
 import CONST from "../const";
-import {GraphUtil, GraphUtilInst} from "../graph/GraphUtil";
-import {MouseEventHandler, ReactElement} from "react";
+import {GraphUtilInst} from "../graph/GraphUtil";
+import {ReactElement} from "react";
 import {Geom, Point} from "../util/Geom";
-import svgContainer from "../svg/Movable";
 import {jsobj} from "../util/util";
 
 export type LineId = number;
-export type NodeId = number;
 
 export class Line {
     public to: NodeId;
@@ -58,7 +56,7 @@ export class Line {
     getNode(id: number): Node {
         const res = getState().getNodeById(id);
         if (!res) {
-            throw `Cannot find node ${id} from line.`;
+            throw Error(`Cannot find node ${id} from line.`);
         }
         return res;
     }