feat: The Big One UI

src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx

@@ -0,0 +1,245 @@
+/* contains all logic for the VisProgEditor warning system
+*
+* Missing but desirable features:
+* - Warning filtering:
+*     - if there is no completely connected chain of startNode-[PhaseNodes]-EndNode
+*       then hide any startNode, phaseNode, or endNode specific warnings
+*/
+import useFlowStore from "../VisProgStores.tsx";
+import type {FlowState} from "../VisProgTypes.tsx";
+
+// --| Type definitions |--
+
+export type WarningId = NodeId | "GLOBAL_WARNINGS";
+export type NodeId = string;
+
+
+export type WarningType =
+  | 'MISSING_INPUT'
+  | 'MISSING_OUTPUT'
+  | 'PLAN_IS_UNDEFINED'
+  | 'INCOMPLETE_PROGRAM'
+  | 'NOT_CONNECTED_TO_PROGRAM'
+  | string
+
+export type WarningSeverity =
+  | 'INFO' // Acceptable, but important to be aware of
+  | 'WARNING' // Acceptable, but probably undesirable behavior
+  | 'ERROR' // Prevents running program, should be fixed before running program is allowed
+
+/**
+ * warning scope, include a handleId if the warning is handle specific
+ */
+export type WarningScope = {
+  id: string;
+  handleId?: string;
+}
+
+export type EditorWarning = {
+  scope: WarningScope;
+  type: WarningType;
+  severity: WarningSeverity;
+  description: string;
+};
+
+/**
+ * a scoped WarningKey,
+ * the handleId scoping is only needed for handle specific errors
+ *
+ * "`WarningType`:`handleId`"
+ */
+export type WarningKey = string; // for warnings that can occur on a per-handle basis
+
+/**
+ * a composite key used in the severityIndex
+ *
+ * "`WarningId`|`WarningKey`"
+ */
+export type CompositeWarningKey = string;
+
+export type WarningRegistry = Map<WarningId , Map<WarningKey, EditorWarning>>;
+export type SeverityIndex = Map<WarningSeverity, Set<CompositeWarningKey>>;
+
+type ZustandSet = (partial: Partial<FlowState> | ((state: FlowState) => Partial<FlowState>)) => void;
+type ZustandGet = () => FlowState;
+
+export type EditorWarningRegistry = {
+  /**
+   * stores all editor warnings
+   */
+  editorWarningRegistry: WarningRegistry;
+  /**
+   * index of warnings by severity
+   */
+  severityIndex: SeverityIndex;
+
+  /**
+   * gets all warnings and returns them as a list of warnings
+   * @returns {EditorWarning[]}
+   */
+  getWarnings: () => EditorWarning[];
+
+  /**
+   * gets all warnings with the current severity
+   * @param {WarningSeverity} warningSeverity
+   * @returns {EditorWarning[]}
+   */
+  getWarningsBySeverity: (warningSeverity: WarningSeverity) => EditorWarning[];
+
+  /**
+   * checks if there are no warnings of breaking severity
+   * @returns {boolean}
+   */
+  isProgramValid: () => boolean;
+
+  /**
+   * registers a warning to the warningRegistry and the SeverityIndex
+   * @param {EditorWarning} warning
+   */
+  registerWarning: (warning: EditorWarning) => void;
+
+  /**
+   * unregisters a warning from the warningRegistry and the SeverityIndex
+   * @param {EditorWarning} warning
+   */
+  unregisterWarning: (id: WarningId, warningKey: WarningKey) => void
+
+  /**
+   * unregisters warnings from the warningRegistry and the SeverityIndex
+   * @param {WarningId} warning
+   */
+  unregisterWarningsForId: (id: WarningId) => void;
+}
+
+// --| implemented logic |--
+
+/**
+ * the id to use for global editor warnings
+ * @type {string}
+ */
+export const globalWarning = "GLOBAL_WARNINGS";
+
+export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : EditorWarningRegistry { return {
+  editorWarningRegistry: new Map<NodeId, Map<WarningKey, EditorWarning>>(),
+  severityIndex: new Map([
+    ['INFO', new Set<CompositeWarningKey>()],
+    ['WARNING', new Set<CompositeWarningKey>()],
+    ['ERROR', new Set<CompositeWarningKey>()],
+  ]),
+
+  getWarningsBySeverity: (warningSeverity) => {
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
+    const warningKeys = sIndex.get(warningSeverity);
+    const warnings: EditorWarning[] = [];
+
+    warningKeys?.forEach(
+      (compositeKey) => {
+        const [id, warningKey] = compositeKey.split('|');
+        const warning = wRegistry.get(id)?.get(warningKey);
+
+        if (warning) {
+          warnings.push(warning);
+        }
+      }
+    )
+
+    return warnings;
+  },
+
+  isProgramValid: () => {
+    const sIndex = get().severityIndex;
+    return (sIndex.get("ERROR")!.size === 0);
+  },
+
+  getWarnings: () => Array.from(get().editorWarningRegistry.values())
+      .flatMap(innerMap => Array.from(innerMap.values())),
+
+
+  registerWarning: (warning) => {
+    const { scope: {id, handleId}, type, severity } = warning;
+    const warningKey = handleId ? `${type}:${handleId}` : type;
+    const compositeKey = `${id}|${warningKey}`;
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
+    // add to warning registry
+    if (!wRegistry.has(id)) {
+      wRegistry.set(id, new Map());
+    }
+    wRegistry.get(id)!.set(warningKey, warning);
+
+
+    // add to severityIndex
+    if (!sIndex.get(severity)!.has(compositeKey)) {
+      sIndex.get(severity)!.add(compositeKey);
+    }
+
+    set({
+      editorWarningRegistry: wRegistry,
+      severityIndex: sIndex
+    })
+  },
+
+  unregisterWarning: (id, warningKey) => {
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
+    // verify if the warning was created already
+    const warning = wRegistry.get(id)?.get(warningKey);
+    if (!warning) return;
+
+    // remove from warning registry
+    wRegistry.get(id)!.delete(warningKey);
+
+
+    // remove from severityIndex
+    sIndex.get(warning.severity)!.delete(`${id}|${warningKey}`);
+
+    set({
+      editorWarningRegistry: wRegistry,
+      severityIndex: sIndex
+    })
+  },
+
+  unregisterWarningsForId: (id) => {
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
+
+    const nodeWarnings = wRegistry.get(id);
+
+    // remove from severity index
+    if (nodeWarnings) {
+      nodeWarnings.forEach((warning) => {
+        const warningKey = warning.scope.handleId
+          ? `${warning.type}:${warning.scope.handleId}`
+          : warning.type;
+        sIndex.get(warning.severity)?.delete(`${id}|${warningKey}`);
+      });
+    }
+
+    // remove from warning registry
+    wRegistry.delete(id);
+
+    set({
+      editorWarningRegistry: wRegistry,
+      severityIndex: sIndex
+    })
+  },
+}}
+
+
+
+/**
+ * returns a summary of the warningRegistry
+ * @returns {{info: number, warning: number, error: number, isValid: boolean}}
+ */
+export function warningSummary() {
+  const {severityIndex, isProgramValid} = useFlowStore.getState();
+  return {
+    info: severityIndex.get('INFO')!.size,
+    warning: severityIndex.get('WARNING')!.size,
+    error: severityIndex.get('ERROR')!.size,
+    isValid: isProgramValid(),
+  };
+}
+
+

src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx

@@ -1,4 +1,4 @@
-import {NodeToolbar} from '@xyflow/react';
+import {NodeToolbar, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {type JSX, useState} from "react";
 import {createPortal} from "react-dom";
@@ -30,10 +30,11 @@ type ToolbarProps = {
  */
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
   const {nodes, deleteNode} = useFlowStore();
-
+  const { deleteElements } = useReactFlow();
 
   const deleteParentNode = () => {
-    deleteNode(nodeId);
+
+    deleteNode(nodeId, deleteElements);
   };
 
   const nodeType = nodes.find((node) => node.id === nodeId)?.type as keyof typeof NodeTooltips;

src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css

@@ -1,7 +1,16 @@
+:global(.react-flow__handle.source){
+    border-radius: 100%;
+}
+:global(.react-flow__handle.target){
+    border-radius: 15%;
+}
+
+
+
 :global(.react-flow__handle.connected) {
     background: lightgray;
     border-color: green;
-    filter: drop-shadow(0 0 0.25rem green);
+    filter: drop-shadow(0 0 0.15rem green);
 }
 
 :global(.singleConnectionHandle.connected) {
@@ -16,19 +25,19 @@
 :global(.singleConnectionHandle.unconnected){
     background: lightsalmon;
     border-color: #ff6060;
-    filter: drop-shadow(0 0 0.25rem #ff6060);
+    filter: drop-shadow(0 0 0.15rem #ff6060);
 }
 
 :global(.react-flow__handle.connectingto) {
     background: #ff6060;
     border-color: coral;
-    filter: drop-shadow(0 0 0.25rem coral);
+    filter: drop-shadow(0 0 0.15rem coral);
 }
 
 :global(.react-flow__handle.valid) {
     background: #55dd99;
     border-color: green;
-    filter: drop-shadow(0 0 0.25rem green);
+    filter: drop-shadow(0 0 0.15rem green);
 }
 
 :global(.react-flow__handle) {

src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx

@@ -4,7 +4,6 @@ import {
   type Connection,
   useNodeId, useNodeConnections
 } from '@xyflow/react';
-import {useState} from 'react';
 import { type HandleRule, useHandleRules} from "../HandleRuleLogic.ts";
 import "./RuleBasedHandle.module.css";
 
@@ -29,21 +28,16 @@ export function MultiConnectionHandle({
     handleId: id!
   })
 
-  // initialise the handles state with { isValid: true } to show that connections are possible
-  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
-
   return (
     <Handle
       {...otherProps}
       id={id}
       type={type}
-      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected") + ` ${type}`}
       isValidConnection={(connection) => {
         const result = validate(connection as Connection);
-        setHandleState(result);
         return result.isSatisfied;
       }}
-      title={handleState.message}
     />
   );
 }
@@ -66,22 +60,18 @@ export function SingleConnectionHandle({
     handleId: id!
   })
 
-  // initialise the handles state with { isValid: true } to show that connections are possible
-  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
 
   return (
     <Handle
       {...otherProps}
       id={id}
       type={type}
-      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected") + ` ${type}`}
       isConnectable={connections.length === 0}
       isValidConnection={(connection) => {
         const result = validate(connection as Connection);
-        setHandleState(result);
         return result.isSatisfied;
       }}
-      title={handleState.message}
     />
   );
 }

src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx

@@ -29,6 +29,8 @@ export default function SaveLoadPanel() {
       const text = await file.text();
       const parsed = JSON.parse(text) as SavedProject;
       if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
+      const {nodes, unregisterWarningsForId} = useFlowStore.getState();
+      nodes.forEach((node) => {unregisterWarningsForId(node.id);});
       setNodes(parsed.nodes);
       setEdges(parsed.edges);
     } catch (e) {

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css

@@ -0,0 +1,203 @@
+.warnings-sidebar {
+    min-width: auto;
+    max-width: 340px;
+    margin-right: 0;
+    height: 100%;
+    background: canvas;
+    display: flex;
+    flex-direction: row;
+}
+
+.warnings-toggle-bar {
+    background-color: ButtonFace;
+    justify-items: center;
+    align-content: center;
+    width: 1rem;
+    cursor: pointer;
+}
+
+.warnings-toggle-bar.error:first-child:has(.arrow-right){
+    background-color: hsl(from red h s 75%);
+}
+.warnings-toggle-bar.warning:first-child:has(.arrow-right) {
+    background-color: hsl(from orange h s 75%);
+}
+.warnings-toggle-bar.info:first-child:has(.arrow-right) {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warnings-toggle-bar:hover {
+    background-color: GrayText !important ;
+    .arrow-left {
+        border-right-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+    .arrow-right {
+        border-left-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+}
+
+
+.warnings-content {
+    width: 320px;
+    flex: 1;
+    flex-direction: column;
+    border-left: 2px solid CanvasText;
+}
+
+.warnings-header {
+    padding: 12px;
+    border-bottom: 2px solid CanvasText;
+}
+
+.severity-tabs {
+    display: flex;
+    gap: 4px;
+}
+
+.severity-tab {
+    flex: 1;
+    padding: 4px;
+    background: ButtonFace;
+    color: GrayText;
+    border: none;
+    cursor: pointer;
+}
+
+.count {
+    padding: 4px;
+    color: GrayText;
+    border: none;
+    cursor: pointer;
+}
+
+.severity-tab.active {
+    color: ButtonText;
+    border: 2px solid currentColor;
+    .count {
+        color: ButtonText;
+    }
+}
+
+.warning-group-header {
+    background: ButtonFace;
+    padding: 6px;
+    font-weight: bold;
+}
+
+.warnings-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: scroll;
+}
+
+.warnings-empty {
+    margin: auto;
+}
+
+.warning-item {
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+    gap: 2px;
+    padding: 0;
+    border-radius: 5px;
+    cursor: pointer;
+    color: GrayText;
+}
+
+.warning-item:hover {
+    background: ButtonFace;
+}
+
+.warning-item--error {
+    border: 2px solid red;
+    background-color: hsl(from red h s 96%);
+    .item-header{
+        background-color: red;
+        .type{
+            color: hsl(from red h s 96%);
+        }
+    }
+
+}
+
+.warning-item--error:hover {
+    background-color: hsl(from red h s 75%);
+}
+
+.warning-item--warning {
+    border: 2px solid orange;
+    background-color: hsl(from orange h s 96%);
+    .item-header{
+        background-color: orange;
+        .type{
+            color: hsl(from orange h s 96%);
+        }
+    }
+}
+
+.warning-item--warning:hover {
+    background-color: hsl(from orange h s 75%);
+}
+
+.warning-item--info {
+    border: 2px solid steelblue;
+    background-color: hsl(from steelblue h s 96%);
+    .item-header{
+        background-color: steelblue;
+        .type{
+            color: hsl(from steelblue h s 96%);
+        }
+    }
+}
+
+.warning-item--info:hover {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warning-item .item-header {
+    padding: 8px 8px;
+    opacity: 1;
+    font-weight: bolder;
+}
+.warning-item .item-header .type{
+    padding: 2px 8px;
+    font-size: 0.9rem;
+}
+
+.warning-item .description {
+    padding: 5px 10px;
+    font-size: 0.8rem;
+}
+
+.auto-hide {
+    background-color: Canvas;
+    border-top: 2px solid CanvasText;
+    margin-top: auto;
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+}
+
+/* arrows for toggleBar */
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-left: 0.6rem solid GrayText;
+}
+
+.arrow-left {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-right: 0.6rem solid GrayText;
+}

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx

@@ -0,0 +1,225 @@
+import {useReactFlow, useStoreApi} from "@xyflow/react";
+import clsx from "clsx";
+import {useEffect, useState} from "react";
+import useFlowStore from "../VisProgStores.tsx";
+import {
+  warningSummary,
+  type WarningSeverity,
+  type EditorWarning, globalWarning
+} from "./EditorWarnings.tsx";
+import styles from "./WarningSidebar.module.css";
+
+/**
+ * the warning sidebar, shows all warnings
+ *
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export function WarningsSidebar() {
+  const warnings = useFlowStore.getState().getWarnings();
+  const [hide, setHide] = useState(false);
+  const [severityFilter, setSeverityFilter] = useState<WarningSeverity | 'ALL'>('ALL');
+  const [autoHide, setAutoHide] = useState(false);
+
+  // let autohide change hide status only when autohide is toggled
+  // and allow for user to change the hide state even if autohide is enabled
+  const hasWarnings = warnings.length > 0;
+  useEffect(() => {
+    if (autoHide) {
+      setHide(!hasWarnings);
+    }
+  }, [autoHide, hasWarnings]);
+
+  const filtered = severityFilter === 'ALL'
+    ? warnings
+    : warnings.filter(w => w.severity === severityFilter);
+
+
+  const summary = warningSummary();
+  // Finds the first key where the count > 0
+  const getHighestSeverity = () => {
+    if (summary.error > 0) return styles.error;
+    if (summary.warning > 0) return styles.warning;
+    if (summary.info > 0) return styles.info;
+    return '';
+  };
+
+  return (
+    <aside className={`flex-row`} >
+      <div
+        className={`${styles.warningsToggleBar} ${getHighestSeverity()}`}
+        onClick={() => setHide(!hide)}
+        title={"toggle warnings"}
+      >
+        <div className={`${hide ? styles.arrowRight : styles.arrowLeft}`}></div>
+      </div>
+      <div 
+        id="warningSidebar" 
+        className={styles.warningsContent} 
+        style={hide ? {display: "none"} : {display: "flex"}}
+      >
+        <WarningsHeader
+          severityFilter={severityFilter}
+          onChange={setSeverityFilter}
+        />
+
+        <WarningsList warnings={filtered} />
+        <div className={styles.autoHide}>
+          <input
+            id="autoHideSwitch"
+            type={"checkbox"}
+            checked={autoHide}
+            onChange={(e) => setAutoHide(e.target.checked)}
+          /><label>Hide if there are no warnings</label>
+        </div>
+      </div>
+    </aside>
+
+  );
+}
+
+/**
+ * the header of the warning sidebar, contains severity filtering buttons
+ *
+ * @param {WarningSeverity | "ALL"} severityFilter
+ * @param {(severity: (WarningSeverity | "ALL")) => void} onChange
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+function WarningsHeader({
+  severityFilter,
+  onChange,
+}: {
+  severityFilter: WarningSeverity | 'ALL';
+  onChange: (severity: WarningSeverity | 'ALL') => void;
+}) {
+  const summary = warningSummary();
+
+  return (
+    <div className={styles.warningsHeader}>
+      <h3>Warnings</h3>
+      <div className={styles.severityTabs}>
+        {(['ALL', 'ERROR', 'WARNING', 'INFO'] as const).map(severity => (
+          <button
+            key={severity}
+            className={clsx(styles.severityTab, severityFilter === severity && styles.active)}
+            onClick={() => onChange(severity)}
+          >
+            {severity}
+            {severity !== 'ALL' && (
+              <span className={styles.count}>
+                {summary[severity.toLowerCase() as keyof typeof summary]}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+
+/**
+ *  the list of warnings in the warning sidebar
+ *
+ * @param {{warnings: EditorWarning[]}} props
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+function WarningsList(props: { warnings: EditorWarning[] }) {
+  const splitWarnings = {
+    global: props.warnings.filter(w => w.scope.id === globalWarning),
+    other: props.warnings.filter(w => w.scope.id !== globalWarning),
+  }
+  if (props.warnings.length === 0) {
+    return (
+      <div className={styles.warningsEmpty}>
+        No warnings!
+      </div>
+    )
+  }
+  return (
+    <div className={styles.warningsList}>
+        <div className={styles.warningGroupHeader}>global:</div>
+        <div className={styles.warningsGroup}>
+          {splitWarnings.global.map((warning) => (
+            <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
+              ? `:${warning.scope.handleId}`
+              : "")}
+            />
+          ))}
+          {splitWarnings.global.length === 0 && "No global warnings!"}
+        </div>
+        <div className={styles.warningGroupHeader}>other:</div>
+        <div className={styles.warningsGroup}>
+          {splitWarnings.other.map((warning) => (
+            <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
+              ? `:${warning.scope.handleId}`
+              : "")}
+            />
+          ))}
+          {splitWarnings.other.length === 0 && "No other warnings!"}
+        </div>
+    </div>
+  );
+}
+
+/**
+ * a single warning in the warning sidebar
+ *
+ * @param {{warning: EditorWarning, key: string}} props
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+function WarningListItem(props: { warning: EditorWarning, key: string}) {
+  const jumpToNode = useJumpToNode();
+
+  return (
+    <div
+      className={clsx(styles.warningItem, styles[`warning-item--${props.warning.severity.toLowerCase()}`],)}
+      onClick={() => jumpToNode(props.warning.scope.id)}
+    >
+      <div className={styles.itemHeader}>
+        <span className={styles.type}>{props.warning.type}</span>
+      </div>
+
+      <div className={styles.description}>
+        {props.warning.description}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * moves the editor to the provided node
+ * @returns {(nodeId: string) => void}
+ */
+function useJumpToNode() {
+  const { getNode, setCenter, getViewport } = useReactFlow();
+  const { addSelectedNodes } = useStoreApi().getState();
+
+
+  return (nodeId: string) => {
+    // user can't jump to global warning, so prevent further logic from running if the warning is a globalWarning
+    if (nodeId === globalWarning) return;
+    const node = getNode(nodeId);
+    if (!node) return;
+
+    const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLElement;
+    const { position } = node;
+    const viewport = getViewport();
+    const { width, height } = nodeElement.getBoundingClientRect();
+
+    //move to node
+    setCenter(
+      position!.x + ((width / viewport.zoom) / 2),
+      position!.y + ((height / viewport.zoom) / 2),
+      {duration: 300, interpolate: "smooth" }
+    ).then(() => {
+      addSelectedNodes([nodeId]);
+    });
+
+
+
+  };
+}