[ui] Add a hierarchical sidebar to the asset catalog

Author: bengotow

js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx

@@ -20,6 +20,16 @@ export type SplitPanelContainerHandle = {
   changeSize: (value: number) => void;
 };
 
+function getStorageKey(identifier: string) {
+  return `dagster.panel-width.${identifier}`;
+}
+
+export function getFirstPanelSizeFromStorage(identifier: string, firstInitialPercent: number) {
+  const storedSize = window.localStorage.getItem(getStorageKey(identifier));
+  const parsed = storedSize === null ? null : parseFloat(storedSize);
+  return parsed === null || isNaN(parsed) ? firstInitialPercent : parsed;
+}
+
 export const SplitPanelContainer = forwardRef<SplitPanelContainerHandle, SplitPanelContainerProps>(
   (props, ref) => {
     const {
@@ -34,23 +44,20 @@ export const SplitPanelContainer = forwardRef<SplitPanelContainerHandle, SplitPa
 
     const [_, setTrigger] = useState(0);
     const [resizing, setResizing] = useState(false);
-    const key = `dagster.panel-width.${identifier}`;
 
     const getSize = useCallback(() => {
       if (!second) {
         return 100;
       }
-      const storedSize = window.localStorage.getItem(key);
-      const parsed = storedSize === null ? null : parseFloat(storedSize);
-      return parsed === null || isNaN(parsed) ? firstInitialPercent : parsed;
-    }, [firstInitialPercent, key, second]);
+      return getFirstPanelSizeFromStorage(identifier, firstInitialPercent);
+    }, [firstInitialPercent, identifier, second]);
 
     const onChangeSize = useCallback(
       (newValue: number) => {
-        window.localStorage.setItem(key, `${newValue}`);
+        window.localStorage.setItem(getStorageKey(identifier), `${newValue}`);
         setTrigger((current) => (current ? 0 : 1));
       },
-      [key],
+      [identifier],
     );
 
     useImperativeHandle(ref, () => ({getSize, changeSize: onChangeSize}), [onChangeSize, getSize]);

js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx

@@ -1,4 +1,4 @@
-import {Box, Colors, Icon, MiddleTruncate, UnstyledButton} from '@dagster-io/ui-components';
+import {Box, Colors, Icon, UnstyledButton} from '@dagster-io/ui-components';
 import * as React from 'react';
 import {observeEnabled} from 'shared/app/observeEnabled.oss';
 import styled from 'styled-components';
@@ -12,6 +12,8 @@ import {
 } from './util';
 import {AssetHealthSummary} from '../../assets/AssetHealthSummary';
 import {ExplorerPath} from '../../pipelines/PipelinePathUtils';
+import {FocusableLabelContainer, GrayOnHoverBox} from '../../ui/Sidebar/FocusableLabelContainer';
+import {SidebarDisclosureTriangle} from '../../ui/Sidebar/SidebarDisclosureTriangle';
 import {AssetGroup} from '../AssetGraphExplorer';
 import {AssetNodeMenuProps, useAssetNodeMenu} from '../AssetNodeMenu';
 import {useGroupNodeContextMenu} from '../CollapsedGroupNode';
@@ -52,27 +54,7 @@ export const AssetSidebarNode = (props: AssetSidebarNodeProps) => {
           onDoubleClick={(e) => !e.metaKey && toggleOpen()}
         >
           {showArrow ? (
-            <UnstyledButton
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleOpen();
-              }}
-              onDoubleClick={(e) => {
-                e.stopPropagation();
-              }}
-              onKeyDown={(e) => {
-                if (e.code === 'Space') {
-                  // Prevent the default scrolling behavior
-                  e.preventDefault();
-                }
-              }}
-              style={{cursor: 'pointer', width: 18}}
-            >
-              <Icon
-                name="arrow_drop_down"
-                style={{transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}}
-              />
-            </UnstyledButton>
+            <SidebarDisclosureTriangle isOpen={isOpen} toggleOpen={toggleOpen} />
           ) : level === 1 && isAssetNode ? (
             // Special case for when asset nodes are at the root (level = 1) due to their being only a single group.
             // In this case we don't need the spacer div to align nodes because  none of the nodes will be collapsible/un-collapsible.
@@ -188,43 +170,6 @@ const AssetSidebarLocationLabel = ({
   );
 };
 
-const FocusableLabelContainer = ({
-  isSelected,
-  isLastSelected,
-  icon,
-  text,
-}: {
-  isSelected: boolean;
-  isLastSelected: boolean;
-  icon: React.ReactNode;
-  text: string;
-}) => {
-  const ref = React.useRef<HTMLButtonElement | null>(null);
-  React.useLayoutEffect(() => {
-    // When we click on a node in the graph it also changes "isSelected" in the sidebar.
-    // We want to check if the focus is currently in the graph and if it is lets keep it there
-    // Otherwise it means the click happened in the sidebar in which case we should move focus to the element
-    // in the sidebar
-    if (ref.current && isLastSelected && !isElementInsideSVGViewport(document.activeElement)) {
-      ref.current.focus();
-    }
-  }, [isLastSelected]);
-
-  return (
-    <GrayOnHoverBox
-      ref={ref}
-      style={{
-        gridTemplateColumns: icon ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)',
-        gridTemplateRows: 'minmax(0, 1fr)',
-        ...(isSelected ? {background: Colors.backgroundBlue()} : {}),
-      }}
-    >
-      {icon}
-      <MiddleTruncate text={text} />
-    </GrayOnHoverBox>
-  );
-};
-
 const BoxWrapper = ({level, children}: {level: number; children: React.ReactNode}) => {
   const wrapper = React.useMemo(() => {
     let sofar = children;
@@ -255,22 +200,6 @@ const ExpandMore = styled(UnstyledButton)`
   visibility: hidden;
 `;
 
-const GrayOnHoverBox = styled(UnstyledButton)`
-  border-radius: 8px;
-  user-select: none;
-  width: 100%;
-  display: grid;
-  flex-direction: row;
-  height: 32px;
-  align-items: center;
-  padding: 5px 8px;
-  justify-content: space-between;
-  gap: 6px;
-  flex-grow: 1;
-  flex-shrink: 1;
-  transition: background 100ms linear;
-`;
-
 export const ItemContainer = styled(Box)`
   height: 32px;
   position: relative;
@@ -287,7 +216,3 @@ export const ItemContainer = styled(Box)`
     }
   }
 `;
-
-function isElementInsideSVGViewport(element: Element | null) {
-  return !!element?.closest('[data-svg-viewport]');
-}

js_modules/dagster-ui/packages/ui-core/src/assets/catalog/AssetCatalogTableSidebar.tsx

@@ -0,0 +1,80 @@
+import invariant from 'invariant';
+import {useMemo} from 'react';
+
+import {tokenForAssetKey} from '../../asset-graph/Utils';
+import {HierarchicalSidebar, buildHierarchyFromPaths} from '../../ui/Sidebar/HierarchicalSidebar';
+import {HierarchyNode} from '../../ui/Sidebar/types';
+import {AssetTableFragment} from '../types/AssetTableFragment.types';
+
+export const AssetCatalogTableSidebar = ({
+  assets,
+  loading,
+  selection,
+  onChangeSelection,
+}: {
+  assets: AssetTableFragment[] | undefined;
+  loading: boolean;
+  selection: string;
+  onChangeSelection: (str: string) => void;
+}) => {
+  const hierarchyData = useMemo(() => {
+    const hierarchy = buildHierarchyFromPaths(
+      (assets || []).map((a) => tokenForAssetKey(a.key)),
+      false,
+    );
+    const root: HierarchyNode = {
+      type: 'folder',
+      name: 'Catalog',
+      children: hierarchy,
+      path: 'Catalog',
+      icon: 'catalog_book',
+    };
+    return [root];
+  }, [assets]);
+
+  const currentKeyPrefix = extractKeyPrefixFromSelection(selection);
+  return (
+    <HierarchicalSidebar
+      loading={loading}
+      hierarchyData={hierarchyData}
+      selectedPaths={
+        currentKeyPrefix?.key === '*'
+          ? ['Catalog']
+          : currentKeyPrefix?.key
+            ? [`Catalog/${currentKeyPrefix.key}`]
+            : []
+      }
+      onSelectPath={(e, path) => {
+        onChangeSelection(selectionReplacingKeyPrefix(selection, path.replace(/^Catalog\/?/, '')));
+      }}
+    />
+  );
+};
+
+/** Given `code_location:"dagster_open_platform"+ AND key:"aws/prod/*"`,
+ * returns `aws/prod`. Returns null if there are multiple key prefixes.
+ */
+export function extractKeyPrefixFromSelection(selection: string) {
+  const matches = Array.from(selection.matchAll(/(?<=^|\s)key:\"([^"]*\/?\*)\"/g));
+  const first = matches[0];
+  if (!first || matches.length !== 1) {
+    return null;
+  }
+  invariant(first[1], 'Regexp match must contain first match group');
+  return {text: first[0], key: first[1].replace(/\/\*$/, '')};
+}
+
+/* Given an existing search selection, update the existing key prefix clause or add
+ * a new one. Makes an attempt to preserve logical correctness by adding parens if necessary.
+ */
+export function selectionReplacingKeyPrefix(selection: string, nextKeyPrefix: string): string {
+  const existing = extractKeyPrefixFromSelection(selection);
+  const term = nextKeyPrefix.length ? `key:"${nextKeyPrefix}/*"` : 'key:"*"';
+  if (existing !== null) {
+    return selection.replace(existing.text, term);
+  }
+  if (selection.toLowerCase().includes(' or ') && !selection.startsWith('(')) {
+    return `(${selection}) AND ${term}`;
+  }
+  return `${selection}${selection.length > 0 ? ' AND ' : ''}${term}`;
+}