datajunction-ui 0.0.94 → 0.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.94",
+  "version": "0.0.96",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/Search.jsx

@@ -10,6 +10,7 @@ export default function Search() {
   const [searchResults, setSearchResults] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const hasLoadedRef = useRef(false);
+  const inputRef = useRef(null);
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
@@ -64,39 +65,39 @@ export default function Search() {
 
   return (
     <div>
-      <form
-        className="search-box"
-        onSubmit={e => {
-          e.preventDefault();
-        }}
-      >
+      <div className="nav-search-box" onClick={() => inputRef.current?.focus()}>
         <input
+          ref={inputRef}
           type="text"
-          placeholder={isLoading ? 'Loading...' : 'Search'}
+          placeholder={isLoading ? 'Loading...' : 'Search nodes...'}
           name="search"
           value={searchValue}
           onChange={handleChange}
           onFocus={loadSearchData}
         />
-      </form>
-      <div className="search-results">
-        {searchResults.slice(0, 20).map(item => {
-          const itemUrl =
-            item.type !== 'tag' ? `/nodes/${item.name}` : `/tags/${item.name}`;
-          return (
-            <a key={item.name} href={itemUrl}>
-              <div className="search-result-item">
-                <span className={`node_type__${item.type} badge node_type`}>
-                  {item.type}
-                </span>
-                {item.display_name} (<b>{item.name}</b>){' '}
-                {item.description ? '- ' : ' '}
-                {truncate(item.description || '')}
-              </div>
-            </a>
-          );
-        })}
       </div>
+      {searchResults.length > 0 && (
+        <div className="search-results">
+          {searchResults.slice(0, 20).map(item => {
+            const itemUrl =
+              item.type !== 'tag'
+                ? `/nodes/${item.name}`
+                : `/tags/${item.name}`;
+            return (
+              <a key={item.name} href={itemUrl}>
+                <div className="search-result-item">
+                  <span className={`node_type__${item.type} badge node_type`}>
+                    {item.type}
+                  </span>
+                  {item.display_name} (<b>{item.name}</b>){' '}
+                  {item.description ? '- ' : ' '}
+                  {truncate(item.description || '')}
+                </div>
+              </a>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }

package/src/app/components/Tab.jsx

@@ -13,7 +13,12 @@ export default class Tab extends Component {
         aria-label={this.props.name}
         aria-hidden="false"
       >
-        {this.props.name}
+        <span
+          style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+        >
+          {this.props.icon}
+          {this.props.name}
+        </span>
       </button>
     );
   }

package/src/app/components/__tests__/Search.test.jsx

@@ -56,7 +56,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    expect(getByPlaceholderText('Search')).toBeInTheDocument();
+    expect(getByPlaceholderText('Search nodes...')).toBeInTheDocument();
   });
 
   it('fetches and initializes search data on focus (lazy loading)', async () => {
@@ -73,7 +73,7 @@ describe('<Search />', () => {
     expect(mockDjClient.DataJunctionAPI.nodeDetails).not.toHaveBeenCalled();
 
     // Focus on search input to trigger lazy loading
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     fireEvent.focus(searchInput);
 
     await waitFor(() => {
@@ -92,7 +92,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -117,7 +117,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -143,7 +143,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -169,7 +169,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -194,7 +194,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -226,7 +226,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -256,7 +256,7 @@ describe('<Search />', () => {
     );
 
     // Focus to trigger lazy loading
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     fireEvent.focus(searchInput);
 
     await waitFor(() => {
@@ -269,7 +269,7 @@ describe('<Search />', () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it('prevents form submission', async () => {
+  it('renders search input inside nav-search-box container', async () => {
     mockDjClient.DataJunctionAPI.nodeDetails.mockResolvedValue([]);
     mockDjClient.DataJunctionAPI.listTags.mockResolvedValue([]);
 
@@ -279,17 +279,9 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const form = container.querySelector('form');
-
-    const submitEvent = new Event('submit', {
-      bubbles: true,
-      cancelable: true,
-    });
-    const preventDefaultSpy = jest.spyOn(submitEvent, 'preventDefault');
-
-    form.dispatchEvent(submitEvent);
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
+    const searchBox = container.querySelector('.nav-search-box');
+    expect(searchBox).toBeInTheDocument();
+    expect(searchBox.querySelector('input')).toBeInTheDocument();
   });
 
   it('handles empty tags array', async () => {
@@ -302,7 +294,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 
@@ -324,7 +316,7 @@ describe('<Search />', () => {
       </DJClientContext.Provider>,
     );
 
-    const searchInput = getByPlaceholderText('Search');
+    const searchInput = getByPlaceholderText('Search nodes...');
     // Focus to trigger lazy loading
     fireEvent.focus(searchInput);
 

package/src/app/components/search.css

@@ -1,17 +1,55 @@
-.search-box {
+.nav-search-box {
   display: flex;
-  height: 50%;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  background: var(--planner-bg, #f8fafc);
+  border: 1px solid var(--planner-border, #e2e8f0);
+  border-radius: 6px;
+  height: 32px;
+  cursor: text;
+  transition: border-color 0.15s;
+  position: relative;
+}
+
+.nav-search-box:focus-within {
+  border-color: var(--accent-primary, #3b82f6);
+}
+
+.nav-search-box input {
+  flex: 1;
+  min-width: 160px;
+  border: none;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  -webkit-appearance: none;
+  appearance: none;
+  font-size: 12px;
+  color: var(--planner-text, #1e293b);
+  padding: 2px 0;
+}
+
+.nav-search-box input::placeholder {
+  color: var(--planner-text-dim, #94a3b8);
 }
 
 .search-results {
   position: absolute;
   z-index: 1000;
   width: 75%;
-  background-color: rgba(244, 244, 244, 0.8);
-  border-radius: 1rem;
+  background-color: var(--planner-surface, #ffffff);
+  border: 1px solid var(--planner-border, #e2e8f0);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .search-result-item {
-  text-decoration: wavy;
   padding: 0.5rem;
+  color: var(--planner-text, #1e293b);
+  font-size: 12px;
+}
+
+.search-result-item:hover {
+  background-color: var(--planner-surface-hover, #f1f5f9);
 }

package/src/app/icons/ChartIcon.jsx

@@ -0,0 +1,28 @@
+const ChartIcon = ({ size = 16, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="none"
+    {...props}
+  >
+    {/* Bars */}
+    <rect x="4" y="11" width="5" height="8" rx="1" />
+    <rect x="10" y="5" width="5" height="14" rx="1" />
+    <rect x="16" y="8" width="5" height="11" rx="1" />
+    {/* X axis */}
+    <line
+      x1="2"
+      y1="21"
+      x2="23"
+      y2="21"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      opacity="0.35"
+    />
+  </svg>
+);
+
+export default ChartIcon;

package/src/app/pages/NodePage/__tests__/NodeDimensionsTab.test.jsx

@@ -322,6 +322,56 @@ describe('<NodeDimensionsTab />', () => {
     consoleSpy.mockRestore();
   });
 
+  it('renders cube dimension graph via dimensionDag (backend handles cube expansion)', async () => {
+    const djNode = {
+      name: 'default.repairs_cube',
+      type: 'cube',
+      parents: [],
+      dimension_links: [],
+    };
+
+    // The backend now seeds the BFS from the cube's metric upstreams, so the
+    // frontend just calls dimensionDag normally and gets back a populated result.
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [
+        {
+          name: 'default.repair_orders',
+          type: 'source',
+          display_name: 'Repair Orders',
+        },
+      ],
+      inbound_edges: [
+        { source: 'default.repair_orders', target: 'default.hard_hat' },
+      ],
+      outbound: [
+        {
+          name: 'default.hard_hat',
+          type: 'dimension',
+          display_name: 'Hard Hat',
+        },
+        {
+          name: 'default.dispatcher',
+          type: 'dimension',
+          display_name: 'Dispatcher',
+        },
+      ],
+      outbound_edges: [
+        { source: 'default.repair_orders', target: 'default.hard_hat' },
+        { source: 'default.repair_orders', target: 'default.dispatcher' },
+      ],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+    expect(mockDjClient.dimensionDag).toHaveBeenCalledWith(
+      'default.repairs_cube',
+    );
+    expect(screen.getAllByText('dimension').length).toBeGreaterThan(0);
+  });
+
   it('renders multi-level inbound chain (non-flat graph)', async () => {
     const djNode = {
       name: 'default.us_state',

package/src/app/pages/NodePage/index.jsx

@@ -17,6 +17,7 @@ import WatchButton from './WatchNodeButton';
 import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
+import ChartIcon from '../../icons/ChartIcon';
 import AlertIcon from '../../icons/AlertIcon';
 import LoadingIcon from '../../icons/LoadingIcon';
 import NodeDependenciesTab from './NodeDependenciesTab';
@@ -39,7 +40,8 @@ export function NodePage() {
   const onClickTab = id => () => {
     // Preview tab redirects to Query Planner instead of showing content
     if (id === 'preview') {
-      navigate(`/planner?metrics=${encodeURIComponent(name)}`);
+      const param = node?.type === 'cube' ? 'cube' : 'metrics';
+      navigate(`/planner?${param}=${encodeURIComponent(name)}`);
       return;
     }
     navigate(`/nodes/${name}/${id}`);
@@ -52,6 +54,7 @@ export function NodePage() {
         key={tab.id}
         id={tab.id}
         name={tab.name}
+        icon={tab.icon}
         onClick={onClickTab(tab.id)}
         selectedTab={state.selectedTab}
       />
@@ -121,7 +124,8 @@ export function NodePage() {
       {
         id: 'preview',
         name: 'Preview →',
-        display: node?.type === 'metric',
+        icon: <ChartIcon size={18} />,
+        display: node?.type === 'metric' || node?.type === 'cube',
       },
     ];
   };