datajunction-ui 0.0.95 → 0.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.95",
+  "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/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',
       },
     ];
   };

package/src/app/pages/QueryPlannerPage/ResultsView.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect, memo } from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
@@ -17,13 +17,13 @@ import {
 SyntaxHighlighter.registerLanguage('sql', sql);
 
 const SERIES_COLORS = [
-  '#3b82f6',
-  '#a2283e',
-  '#059669',
-  '#d97706',
-  '#8b5cf6',
-  '#0ea5e9',
-  '#ec4899',
+  '#60a5fa',
+  '#34d399',
+  '#fbbf24',
+  '#f87171',
+  '#a78bfa',
+  '#22d3ee',
+  '#fb923c',
 ];
 
 // Threshold for switching from multi-series to small multiples
@@ -73,19 +73,41 @@ function detectChartConfig(columns, rows) {
   const timeCols = tagged.filter(c => isTimeColumn(c));
   const numericCols = tagged.filter(c => isNumericColumn(c));
   const nonNumericCols = tagged.filter(c => !isNumericColumn(c));
+  const nonTimeCatCols = nonNumericCols.filter(c => !isTimeColumn(c));
 
-  // Time dimension present → line chart (handles integer time cols like week/year)
+  // Time dimension present → line chart
   if (timeCols.length > 0) {
     const xCol = timeCols[0];
     const metricCols = numericCols.filter(c => c.idx !== xCol.idx);
-    if (metricCols.length > 0) return { type: 'line', xCol, metricCols };
+    if (metricCols.length > 0) {
+      // Exactly one categorical dim + one metric → pivot as series
+      if (nonTimeCatCols.length === 1) {
+        return {
+          type: 'line',
+          xCol,
+          groupByCol: nonTimeCatCols[0],
+          metricCols,
+        };
+      }
+      return { type: 'line', xCol, metricCols };
+    }
   }
 
-  // String/categorical dimension → bar chart
-  if (nonNumericCols.length > 0 && numericCols.length > 0) {
-    const xCol = nonNumericCols[0];
-    const metricCols = numericCols.filter(c => c.idx !== xCol.idx);
-    if (metricCols.length > 0) return { type: 'bar', xCol, metricCols };
+  // Categorical dimension(s) → bar chart
+  if (nonTimeCatCols.length > 0 && numericCols.length > 0) {
+    if (nonTimeCatCols.length === 1) {
+      return { type: 'bar', xCol: nonTimeCatCols[0], metricCols: numericCols };
+    }
+    if (nonTimeCatCols.length === 2) {
+      return {
+        type: 'bar',
+        xCol: nonTimeCatCols[0],
+        groupByCol: nonTimeCatCols[1],
+        metricCols: numericCols,
+      };
+    }
+    // 3+ cats → fall back to first cat as x-axis
+    return { type: 'bar', xCol: nonTimeCatCols[0], metricCols: numericCols };
   }
 
   // Multiple numeric columns, no string/time dim → treat first as x-axis (line)
@@ -103,6 +125,59 @@ function detectChartConfig(columns, rows) {
   return null;
 }
 
+const MAX_GROUP_VALUES = 7;
+
+function buildPivotedData(rows, columns, xCol, groupByCol, metricCols) {
+  const xIdx = xCol.idx;
+  const gIdx = groupByCol.idx;
+  const metricIdxs = metricCols.map(c => c.idx);
+
+  // Pass 1: group totals only (cheap — just numbers)
+  const groupTotals = {};
+  for (const row of rows) {
+    const gVal = String(row[gIdx] ?? '(null)');
+    groupTotals[gVal] =
+      (groupTotals[gVal] || 0) + (Number(row[metricIdxs[0]]) || 0);
+  }
+  const groupValues = Object.entries(groupTotals)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, MAX_GROUP_VALUES)
+    .map(([k]) => k);
+  const groupSet = new Set(groupValues);
+
+  // Pass 2: build ALL metric pivot maps in one sweep
+  const pivotMaps = metricCols.map(() => ({}));
+  for (const row of rows) {
+    const gVal = String(row[gIdx] ?? '(null)');
+    if (!groupSet.has(gVal)) continue;
+    const xVal = row[xIdx];
+    const mapKey = String(xVal ?? '(null)');
+    for (let m = 0; m < metricCols.length; m++) {
+      const pm = pivotMaps[m];
+      if (!pm[mapKey]) pm[mapKey] = { [xCol.name]: xVal };
+      pm[mapKey][gVal] = row[metricIdxs[m]];
+    }
+  }
+
+  const sortFn = (a, b) => {
+    const av = a[xCol.name];
+    const bv = b[xCol.name];
+    if (av === null && bv === null) return 0;
+    if (av === null) return 1;
+    if (bv === null) return -1;
+    if (typeof av === 'number' && typeof bv === 'number') return av - bv;
+    return String(av).localeCompare(String(bv));
+  };
+
+  const pivotedByMetric = metricCols.map((metricCol, m) => {
+    const pivoted = Object.values(pivotMaps[m]);
+    pivoted.sort(sortFn);
+    return { col: metricCol, data: pivoted };
+  });
+
+  return { pivotedByMetric, groupValues };
+}
+
 function buildChartData(columns, rows, xCol) {
   const data = rows.map(row => {
     const obj = {};
@@ -160,15 +235,20 @@ const CHART_MARGIN = { top: 8, right: 24, left: 8, bottom: 40 };
 const AXIS_TICK = { fontSize: 11, fill: '#64748b' };
 const TOOLTIP_STYLE = { fontSize: 12, border: '1px solid #e2e8f0' };
 
-function Chart({
+const Chart = memo(function Chart({
   type,
   xCol,
   metricCols,
+  seriesKeys,
   chartData,
   seriesColors = SERIES_COLORS,
 }) {
   const showDots = chartData.length <= 60;
-  const xInterval = type === 'line' ? 'preserveStartEnd' : 0;
+  const keys = seriesKeys || metricCols.map(c => c.name);
+  const xInterval =
+    type === 'line'
+      ? 'preserveStartEnd'
+      : Math.max(0, Math.ceil(chartData.length / 20) - 1);
   if (type === 'line') {
     return (
       <ResponsiveContainer width="100%" height="100%">
@@ -183,14 +263,15 @@ function Chart({
           />
           <YAxis tickFormatter={formatYAxis} tick={AXIS_TICK} width={60} />
           <Tooltip contentStyle={TOOLTIP_STYLE} />
-          {metricCols.map((col, i) => (
+          {keys.map((key, i) => (
             <Line
-              key={col.idx}
+              key={key}
               type="monotone"
-              dataKey={col.name}
+              dataKey={key}
               stroke={seriesColors[i % seriesColors.length]}
               dot={showDots}
               strokeWidth={2}
+              isAnimationActive={false}
             />
           ))}
         </LineChart>
@@ -210,27 +291,74 @@ function Chart({
         />
         <YAxis tickFormatter={formatYAxis} tick={AXIS_TICK} width={60} />
         <Tooltip contentStyle={TOOLTIP_STYLE} />
-        {metricCols.map((col, i) => (
+        {keys.map((key, i) => (
           <Bar
-            key={col.idx}
-            dataKey={col.name}
+            key={key}
+            dataKey={key}
             fill={seriesColors[i % seriesColors.length]}
+            isAnimationActive={false}
           />
         ))}
       </BarChart>
     </ResponsiveContainer>
   );
-}
+});
+
+const ChartView = memo(function ChartView({
+  chartConfig,
+  chartData,
+  pivotedByMetric,
+  groupValues,
+  rows,
+  columns,
+}) {
+  if (!chartConfig) {
+    return <div className="chart-no-data">No chartable data detected</div>;
+  }
 
-function ChartView({ chartConfig, chartData, rows, columns }) {
   if (chartConfig.type === 'kpi') {
     return <KpiCards rows={rows} metricCols={chartConfig.metricCols} />;
   }
 
   const { type, xCol, metricCols } = chartConfig;
-  const useSmallMultiples = metricCols.length > SMALL_MULTIPLES_THRESHOLD;
 
-  if (useSmallMultiples) {
+  // Pivoted multi-metric: small multiples, one per metric, each with groupBy series
+  if (pivotedByMetric && pivotedByMetric.length > 1) {
+    return (
+      <div className="small-multiples">
+        {pivotedByMetric.map(({ col, data }) => (
+          <div key={col.idx} className="small-multiple">
+            <div className="small-multiple-label">{col.name}</div>
+            <div className="small-multiple-chart">
+              <Chart
+                type={type}
+                xCol={xCol}
+                metricCols={[col]}
+                seriesKeys={groupValues}
+                chartData={data}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Pivoted single-metric: one chart with groupBy as series
+  if (groupValues) {
+    return (
+      <Chart
+        type={type}
+        xCol={xCol}
+        metricCols={metricCols}
+        seriesKeys={groupValues}
+        chartData={chartData}
+      />
+    );
+  }
+
+  // No groupBy: standard small multiples or single chart
+  if (metricCols.length > SMALL_MULTIPLES_THRESHOLD) {
     return (
       <div className="small-multiples">
         {metricCols.map((col, i) => (
@@ -259,7 +387,7 @@ function ChartView({ chartConfig, chartData, rows, columns }) {
       chartData={chartData}
     />
   );
-}
+});
 
 /**
  * ResultsView - Displays query results with SQL and data table
@@ -334,15 +462,31 @@ export function ResultsView({
     () => detectChartConfig(columns, rows),
     [columns, rows],
   );
-  const chartData = useMemo(
-    () =>
-      chartConfig && chartConfig.xCol
-        ? buildChartData(columns, rows, chartConfig.xCol)
-        : [],
-    [columns, rows, chartConfig],
-  );
+  const { chartData, pivotedByMetric, groupValues } = useMemo(() => {
+    if (!chartConfig || !chartConfig.xCol)
+      return { chartData: [], pivotedByMetric: null, groupValues: null };
+    if (chartConfig.groupByCol) {
+      const { pivotedByMetric, groupValues } = buildPivotedData(
+        rows,
+        columns,
+        chartConfig.xCol,
+        chartConfig.groupByCol,
+        chartConfig.metricCols,
+      );
+      return {
+        chartData: pivotedByMetric[0].data,
+        pivotedByMetric,
+        groupValues,
+      };
+    }
+    return {
+      chartData: buildChartData(columns, rows, chartConfig.xCol),
+      pivotedByMetric: null,
+      groupValues: null,
+    };
+  }, [columns, rows, chartConfig]);
 
-  const canChart = chartConfig !== null && rowCount > 0;
+  const canChart = rowCount > 0;
 
   // Reset to table view if new results can't be charted
   useEffect(() => {
@@ -594,6 +738,8 @@ export function ResultsView({
                     <ChartView
                       chartConfig={chartConfig}
                       chartData={chartData}
+                      pivotedByMetric={pivotedByMetric}
+                      groupValues={groupValues}
                       rows={rows}
                       columns={columns}
                     />

package/src/app/pages/QueryPlannerPage/__tests__/ResultsView.test.jsx

@@ -499,7 +499,7 @@ describe('ResultsView', () => {
       expect(chartTab).not.toHaveClass('disabled');
     });
 
-    it('Chart tab is disabled when data is not chartable (string-only columns)', () => {
+    it('Chart tab is enabled for any data with rows, showing no-data message when unchartable', () => {
       render(
         <ResultsView
           {...defaultProps}
@@ -514,7 +514,12 @@ describe('ResultsView', () => {
         />,
       );
       const chartTab = screen.getByText('Chart').closest('button');
-      expect(chartTab).toHaveClass('disabled');
+      expect(chartTab).not.toHaveClass('disabled');
+
+      fireEvent.click(chartTab);
+      expect(
+        screen.getByText('No chartable data detected'),
+      ).toBeInTheDocument();
     });
 
     it('switches to chart view when Chart tab is clicked (bar chart)', () => {
@@ -643,8 +648,8 @@ describe('ResultsView', () => {
       expect(labels.length).toBe(3);
     });
 
-    it('does not click disabled Chart tab (canChart false)', () => {
-      // Single string column → not chartable
+    it('shows no-data message when Chart tab clicked with unchartable data', () => {
+      // Single string column → not chartable, but tab is still clickable
       render(
         <ResultsView
           {...defaultProps}
@@ -662,9 +667,8 @@ describe('ResultsView', () => {
       const chartTab = screen.getByText('Chart').closest('button');
       fireEvent.click(chartTab);
 
-      // Should still be on table view
       expect(
-        document.querySelector('.results-table-wrapper'),
+        screen.getByText('No chartable data detected'),
       ).toBeInTheDocument();
     });
 

package/src/app/pages/QueryPlannerPage/styles.css

@@ -2,6 +2,15 @@
    Materialization Planner - Three Column Layout
    ================================= */
 
+/* Reset native browser input styling for all planner inputs */
+.cube-search,
+.combobox-search,
+.filter-input {
+  -webkit-appearance: none;
+  appearance: none;
+  box-shadow: none;
+}
+
 /* CSS Variables for theming */
 :root {
   --planner-bg: #f8fafc;

package/src/app/pages/Root/__tests__/index.test.jsx

@@ -41,8 +41,9 @@ describe('<Root />', () => {
       expect(document.title).toEqual('DataJunction');
     });
 
-    // Check navigation links exist (two "Explore" links: catalog browser + planner)
-    expect(screen.getAllByText('Explore')).toHaveLength(2);
+    // Check navigation links exist
+    expect(screen.getAllByText('Catalog')).toHaveLength(1);
+    expect(screen.getAllByText('Explore')).toHaveLength(1);
   });
 
   it('renders Docs dropdown', async () => {

package/src/app/pages/Root/index.tsx

@@ -56,7 +56,7 @@ export function Root() {
             <div className="menu-item here menu-here-bg menu-lg-down-accordion me-0 me-lg-2 fw-semibold">
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/">Explore</a>
+                  <a href="/">Catalog</a>
                 </span>
               </span>
               <span className="menu-link">