break stuff out

dagster-io · Sep 15, 2023 · 02bf6ce · 02bf6ce
1 parent 53e48b3
commit 02bf6ce
Show file tree

Hide file tree

Showing 4 changed files with 319 additions and 299 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/MiddleTruncate.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/MiddleTruncate.tsx
@@ -68,6 +68,8 @@ const MeasureWidth = styled.div`
   height: 0;
   overflow: hidden;
   white-space: nowrap;
+  user-select: none;
+  visibility: hidden;
 `;
 
 const Container = styled.div`

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -56,7 +56,7 @@ export const TextInputContainerStyles = css`
   position: relative;
 `;
 
-export const TextInputContainer = styled.div<{$disabled: boolean}>`
+export const TextInputContainer = styled.div<{$disabled?: boolean}>`
   ${TextInputContainerStyles}
 
   > ${IconWrapper}:first-child {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -220,13 +220,13 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
       );
     },
     [
+      assetGraphData,
       explorerPath,
+      findAssetLocation,
+      layout?.nodes,
       onChangeExplorerPath,
       onNavigateToSourceAssetNode,
-      findAssetLocation,
       selectedGraphNodes,
-      assetGraphData,
-      layout,
     ],
   );
 
@@ -266,18 +266,22 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
     selectNodeById(e, nextId);
   };
 
-  const selectNodeById = (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId?: string) => {
-    if (!nodeId) {
-      return;
-    }
-    const node = assetGraphData.nodes[nodeId];
-    if (node) {
-      onSelectNode(e, node.assetKey, node);
-      if (layout && viewportEl.current) {
-        viewportEl.current.zoomToSVGBox(layout.nodes[nodeId]!.bounds, true);
+  const selectNodeById = React.useCallback(
+    (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId?: string) => {
+      if (!nodeId) {
+        return;
       }
-    }
-  };
+      const node = assetGraphData.nodes[nodeId];
+      if (node) {
+        onSelectNode(e, node.assetKey, node);
+        if (layout && viewportEl.current) {
+          viewportEl.current.zoomToSVGBox(layout.nodes[nodeId]!.bounds, true);
+        }
+      }
+    },
+    [assetGraphData.nodes, layout, onSelectNode],
+  );
+
   React.useEffect(() => {
     if (layout && lastSelectedNode) {
       selectNodeById({stopPropagation: () => {}} as any, lastSelectedNode.id);
@@ -296,7 +300,12 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
         <AssetGraphExplorerSidebar
           assetGraphData={assetGraphData}
           lastSelectedNode={lastSelectedNode}
-          selectNode={selectNodeById}
+          selectNode={React.useCallback(
+            (e, nodeId) => {
+              selectNodeById(e, nodeId);
+            },
+            [selectNodeById],
+          )}
         />
       }
       second={