Allow disabling specific nodes

Ironclad · Oct 31, 2023 · a026981 · a026981
1 parent c554e20
commit a026981
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 1 deletion.
diff --git a/packages/app/src/colors.css b/packages/app/src/colors.css
@@ -12,6 +12,7 @@
   --grey: #5a5a5a;
   --grey-lightish: #6e6e6e;
   --grey-light: #bbb;
+  --grey-light-seethrough: rgba(187, 187, 187, 0.5);
   --grey-lighter: #ddd;
   --grey-lightest: #fff;
   --foreground: #f0f0f0;

diff --git a/packages/app/src/components/NodeEditor.tsx b/packages/app/src/components/NodeEditor.tsx
@@ -247,7 +247,11 @@ const Container = styled.div`
   }
 
   .node-color-picker {
-    padding-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    padding-top: 4px;
   }
 `;
 
@@ -332,6 +336,10 @@ export const NodeEditor: FC<NodeEditorProps> = ({ selectedNode, onDeselect }) =>
     updateNode({ ...selectedNode, visualData: { ...selectedNode.visualData, color } });
   });
 
+  const nodeDisabledChanged = useStableCallback((disabled: boolean) => {
+    updateNode({ ...selectedNode, disabled });
+  });
+
   const variantOptions = useMemo(() => {
     const appliedOption = { value: '', label: '(Current)' };
 
@@ -419,6 +427,10 @@ export const NodeEditor: FC<NodeEditorProps> = ({ selectedNode, onDeselect }) =>
                 {showGlobalControls && (
                   <div className="section section-global-controls">
                     <div className="node-color-picker">
+                      <Toggle
+                        isChecked={!selectedNode.disabled}
+                        onChange={(e) => nodeDisabledChanged(!e.target.checked)}
+                      />
                       <NodeColorPicker currentColor={selectedNode.visualData.color} onChange={nodeColorChanged} />
                     </div>
                     <InlineEditableTextfield

diff --git a/packages/app/src/components/VisualNode.tsx b/packages/app/src/components/VisualNode.tsx
@@ -188,6 +188,7 @@ export const VisualNode = memo(
             zoomedOut: isZoomedOut,
             isComment,
             isPinned,
+            disabled: node.disabled,
           })}
           ref={nodeRef}
           style={style}

diff --git a/packages/app/src/components/nodeStyles.ts b/packages/app/src/components/nodeStyles.ts
@@ -561,4 +561,12 @@ export const nodeStyles = css`
       color: var(--primary-text);
     }
   }
+
+  .node.disabled {
+    opacity: 0.5;
+
+    .node-title {
+      text-decoration: line-through;
+    }
+  }
 `;
diff --git a/packages/core/src/model/GraphProcessor.ts b/packages/core/src/model/GraphProcessor.ts
@@ -1490,6 +1490,16 @@ export class GraphProcessor {
     processId: ProcessId,
     typeOfExclusion: ControlFlowExcludedDataValue['value'] = undefined,
   ) {
+    if (node.disabled) {
+      this.#emitter.emit('trace', `Excluding node ${node.title} because it's disabled`);
+
+      this.#emitter.emit('nodeExcluded', { node, processId });
+      this.#visitedNodes.add(node.id);
+      this.#nodeResults.set(node.id, {
+        [ControlFlowExcluded as unknown as PortId]: { type: 'control-flow-excluded', value: undefined },
+      });
+    }
+
     const inputsWithValues = entries(inputValues);
     const controlFlowExcludedValues = inputsWithValues.filter(
       ([, value]) =>

diff --git a/packages/core/src/model/NodeBase.ts b/packages/core/src/model/NodeBase.ts
@@ -56,6 +56,9 @@ export interface NodeBase {
   variants?: ChartNodeVariant<unknown>[];
 
   tests?: NodeTestGroup[];
+
+  /** If true, the node is disabled and effectively "not ran" */
+  disabled?: boolean;
 }
 
 /** Base type for a typed node. */