From e204a4fd92f634caf8ce013d18088723cc701020 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Sat, 25 Nov 2023 16:49:17 +0000
Subject: [PATCH 1/3] Add search by id

---
 src/features/dataflow/Sidebar.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/features/dataflow/Sidebar.tsx b/src/features/dataflow/Sidebar.tsx
index 668d764fc..3ea4dbf88 100644
--- a/src/features/dataflow/Sidebar.tsx
+++ b/src/features/dataflow/Sidebar.tsx
@@ -3,13 +3,20 @@ import {useDispatch} from 'react-redux';
 import {useAppSelector} from '../../hooks';
 import {resetPulses, sortedPulsesSelector, pulsesEmptySelector} from './pulsesSlice';
 import './Sidebar.css';
-import {selectedPulseSelector, selectedTypesSelector, setSelectedPulse, setSelectedType} from './selectionSlice';
+import {
+  setSelectedElements,
+  selectedPulseSelector,
+  selectedTypesSelector,
+  setSelectedPulse,
+  setSelectedType,
+} from './selectionSlice';
 import {GraphType, types} from './utils/graph';
 
 export function Sidebar() {
   return (
     <div className="sidebar">
       <Types />
+      <Id />
       <Pulses />
     </div>
   );
@@ -42,6 +49,28 @@ function Type({type, label, selected}: {type: GraphType; label: string; selected
   );
 }
 
+function Id() {
+  const [searchTerm, setSearchTerm] = React.useState<string | null>(null);
+  const dispatch = useDispatch();
+  return (
+    <fieldset className="id-filter">
+      <legend>Filter by id</legend>
+      <input title="Pulse Id Search" onChange={(e) => setSearchTerm(e.target.value)} />
+      <button
+        onClick={() => {
+          if (!searchTerm) {
+            return;
+          }
+          dispatch(setSelectedElements({nodes: [searchTerm], edges: []}));
+          setSearchTerm(null);
+        }}
+      >
+        Search
+      </button>
+    </fieldset>
+  );
+}
+
 function Pulses() {
   return (
     <fieldset>

From 5b37814933c8317aaf88a5684933c5af12cdc3b4 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Sat, 25 Nov 2023 16:54:09 +0000
Subject: [PATCH 2/3] Add id search

---
 src/components/input-panel/spec-editor/renderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input-panel/spec-editor/renderer.tsx b/src/components/input-panel/spec-editor/renderer.tsx
index 9dee17c24..6ac065fb1 100644
--- a/src/components/input-panel/spec-editor/renderer.tsx
+++ b/src/components/input-panel/spec-editor/renderer.tsx
@@ -198,7 +198,7 @@ class Editor extends React.PureComponent<Props> {
       prevProps.editorRef && prevProps.editorRef.deltaDecorations(prevProps.decorations, []);
     }
 
-    if (this.props.parse) {
+    if (this.editor && this.props.parse) {
       this.editor.focus();
       this.editor.layout();
       this.updateSpec(this.props.value, this.props.configEditorString);

From 3910ef88da3271ba320e005cb81de11941a25e6e Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Tue, 28 Nov 2023 17:44:18 -0800
Subject: [PATCH 3/3] updates

---
 src/features/dataflow/Sidebar.css         | 21 +++++++++++++++++
 src/features/dataflow/Sidebar.tsx         | 28 ++++++++++++-----------
 src/features/dataflow/utils/allRelated.ts |  4 ++++
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/features/dataflow/Sidebar.css b/src/features/dataflow/Sidebar.css
index 1643fb176..06ea6a614 100644
--- a/src/features/dataflow/Sidebar.css
+++ b/src/features/dataflow/Sidebar.css
@@ -8,6 +8,7 @@
   width: 250px;
   gap: 10px;
 }
+
 .sidebar fieldset {
   overflow: hidden;
   border-color: var(--light-gray-color);
@@ -53,3 +54,23 @@
 .type-filter {
   flex-shrink: 0;
 }
+
+.sidebar .id-filter {
+  padding-bottom: 20px;
+  flex-shrink: 0;
+}
+
+.sidebar .id-filter > div {
+  display: flex;
+  height: 30px;
+}
+
+.sidebar .id-filter > div input {
+  width: 70px;
+  height: 100%;
+}
+
+.sidebar .id-filter > div button {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/features/dataflow/Sidebar.tsx b/src/features/dataflow/Sidebar.tsx
index 3ea4dbf88..ddb2d10ee 100644
--- a/src/features/dataflow/Sidebar.tsx
+++ b/src/features/dataflow/Sidebar.tsx
@@ -54,19 +54,21 @@ function Id() {
   const dispatch = useDispatch();
   return (
     <fieldset className="id-filter">
-      <legend>Filter by id</legend>
-      <input title="Pulse Id Search" onChange={(e) => setSearchTerm(e.target.value)} />
-      <button
-        onClick={() => {
-          if (!searchTerm) {
-            return;
-          }
-          dispatch(setSelectedElements({nodes: [searchTerm], edges: []}));
-          setSearchTerm(null);
-        }}
-      >
-        Search
-      </button>
+      <legend>Filter by ID</legend>
+      <div>
+        <input type="search" title="Pulse Id Search" onChange={(e) => setSearchTerm(e.target.value)} />
+        <button
+          onClick={() => {
+            if (!searchTerm) {
+              return;
+            }
+            dispatch(setSelectedElements({nodes: [searchTerm], edges: []}));
+            setSearchTerm(null);
+          }}
+        >
+          Search
+        </button>
+      </div>
     </fieldset>
   );
 }
diff --git a/src/features/dataflow/utils/allRelated.ts b/src/features/dataflow/utils/allRelated.ts
index 4b6a1303f..265dc6b4d 100644
--- a/src/features/dataflow/utils/allRelated.ts
+++ b/src/features/dataflow/utils/allRelated.ts
@@ -26,6 +26,10 @@ export function allRelated({nodes, edges}: Graph, selected: Elements): Set<strin
         // Mark the compound node relations as visited
         // and add their immediate parents to the queue
         const node = nodes[id];
+        // if the user inputs an invalid node, just ignore it
+        if (node === undefined) {
+          continue;
+        }
         const parents = node.parent !== undefined ? [node.parent] : [];
         const relatedCompound = [...parents, ...node.children];
         relatedCompound.forEach((i) => processed.add(i));