datajunction-ui 0.0.42 → 0.0.44

package/package.json

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

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

@@ -4,7 +4,6 @@ import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
 import NodeStatus from './NodeStatus';
 import ListGroupItem from '../../components/ListGroupItem';
-import ToggleSwitch from '../../components/ToggleSwitch';
 import DJClientContext from '../../providers/djclient';
 import { labelize } from '../../../utils/form';
 
@@ -30,9 +29,6 @@ foundation.hljs['padding'] = '2rem';
 // }
 
 export default function NodeInfoTab({ node }) {
-  const [compiledSQL, setCompiledSQL] = useState('');
-  const [checked, setChecked] = useState(false);
-
   // For metrics
   const [metricInfo, setMetricInfo] = useState(null);
 
@@ -47,29 +43,16 @@ export default function NodeInfoTab({ node }) {
   ));
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (checked === true) {
-        const data = await djClient.compiledSql(node.name);
-        if (data.sql) {
-          setCompiledSQL(data.sql);
-        } else {
-          setCompiledSQL(
-            '/* Ran into an issue while generating compiled SQL */',
-          );
-        }
-      }
-    };
-    fetchData().catch(console.error);
-  }, [node, djClient, checked]);
-
   useEffect(() => {
     const fetchData = async () => {
       const metric = await djClient.getMetric(node.name);
+      // For derived metrics (multiple parents), upstream_node is null
+      const parents = metric.current.parents || [];
+      const upstreamNode = parents.length === 1 ? parents[0]?.name : null;
       setMetricInfo({
         metric_metadata: metric.current.metricMetadata,
         required_dimensions: metric.current.requiredDimensions,
-        upstream_node: metric.current.parents[0]?.name,
+        upstream_node: upstreamNode,
         expression: metric.current.metricMetadata?.expression,
         incompatible_druid_functions:
           metric.current.metricMetadata?.incompatibleDruidFunctions || [],
@@ -93,9 +76,6 @@ export default function NodeInfoTab({ node }) {
     }
   }, [node, djClient]);
 
-  function toggle(value) {
-    return !value;
-  }
   const metricsWarning =
     node?.type === 'metric' &&
     metricInfo?.incompatible_druid_functions?.length > 0 ? (
@@ -134,17 +114,23 @@ export default function NodeInfoTab({ node }) {
     node?.type === 'metric' ? (
       <div className="list-group-item d-flex">
         <div className="gap-2 w-100 justify-content-between py-3">
-          <div style={{ marginBottom: '30px' }}>
-            <h6 className="mb-0 w-100">Upstream Node</h6>
-            <p>
-              <a href={`/nodes/${metricInfo?.upstream_node}`}>
-                {metricInfo?.upstream_node}
-              </a>
-            </p>
-          </div>
+          {metricInfo?.upstream_node && (
+            <div style={{ marginBottom: '30px' }}>
+              <h6 className="mb-0 w-100">Upstream Node</h6>
+              <p>
+                <a href={`/nodes/${metricInfo?.upstream_node}`}>
+                  {metricInfo?.upstream_node}
+                </a>
+              </p>
+            </div>
+          )}
           <div>
             <h6 className="mb-0 w-100">Aggregate Expression</h6>
-            <SyntaxHighlighter language="sql" style={foundation}>
+            <SyntaxHighlighter
+              language="sql"
+              style={foundation}
+              wrapLongLines={true}
+            >
               {metricInfo?.expression}
             </SyntaxHighlighter>
           </div>
@@ -162,18 +148,12 @@ export default function NodeInfoTab({ node }) {
           }}
         >
           <h6 className="mb-0 w-100">Query</h6>
-          {['metric', 'dimension', 'transform'].indexOf(node?.type) > -1 ? (
-            <ToggleSwitch
-              id="toggleSwitch"
-              checked={checked}
-              onChange={() => setChecked(toggle)}
-              toggleName="Show Compiled SQL"
-            />
-          ) : (
-            <></>
-          )}
-          <SyntaxHighlighter language="sql" style={foundation}>
-            {checked ? compiledSQL : node?.query}
+          <SyntaxHighlighter
+            language="sql"
+            style={foundation}
+            wrapLongLines={true}
+          >
+            {node?.query}
           </SyntaxHighlighter>
         </div>
       </div>
@@ -213,7 +193,26 @@ export default function NodeInfoTab({ node }) {
     node?.type === 'metric' ? (
       <div className="list-group-item d-flex">
         <div className="d-flex gap-2 w-100 py-3">
-          <div>
+          <div style={{ marginRight: '2rem' }}>
+            <h6 className="mb-0 w-100">Output Type</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="OutputType"
+            >
+              <code
+                style={{
+                  background: '#f5f5f5',
+                  padding: '2px 6px',
+                  borderRadius: '3px',
+                }}
+              >
+                {node?.columns?.[0]?.type || 'Unknown'}
+              </code>
+            </p>
+          </div>
+          <div style={{ marginRight: '2rem' }}>
             <h6 className="mb-0 w-100">Direction</h6>
             <p
               className="mb-0 opacity-75"
@@ -270,7 +269,11 @@ export default function NodeInfoTab({ node }) {
             }}
           >
             <h6 className="mb-0 w-100">Custom Metadata</h6>
-            <SyntaxHighlighter language="json" style={foundation}>
+            <SyntaxHighlighter
+              language="json"
+              style={foundation}
+              wrapLongLines={true}
+            >
               {JSON.stringify(node.custom_metadata, null, 2)}
             </SyntaxHighlighter>
           </div>
@@ -326,12 +329,12 @@ export default function NodeInfoTab({ node }) {
                 <a href={`/nodes/${node?.name}`}>{dim}</a>
               </span>
             ))
-          : node?.required_dimensions?.map((dim, idx) => (
+          : metricInfo?.required_dimensions?.map((dim, idx) => (
               <span
                 key={`rd-${idx}`}
                 className="rounded-pill badge bg-secondary-soft PrimaryKey"
               >
-                <a href={`/nodes/${node?.upstream_node}`}>{dim.name}</a>
+                <a href={`/nodes/${metricInfo?.upstream_node}`}>{dim.name}</a>
               </span>
             ))}
       </p>

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

@@ -591,32 +591,6 @@ describe('<NodePage />', () => {
     });
   });
 
-  it('renders compiled sql correctly', async () => {
-    const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
-    djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.compiledSql.mockReturnValue('select 1');
-
-    const element = (
-      <DJClientContext.Provider value={djClient}>
-        <NodePage />
-      </DJClientContext.Provider>
-    );
-    render(
-      <MemoryRouter initialEntries={[`/nodes/${mocks.mockTransformNode.name}`]}>
-        <Routes>
-          <Route path="nodes/:name" element={element} />
-        </Routes>
-      </MemoryRouter>,
-    );
-    await waitFor(() => {
-      fireEvent.click(screen.getByRole('checkbox', { name: 'ToggleSwitch' }));
-      expect(djClient.DataJunctionAPI.compiledSql).toHaveBeenCalledWith(
-        mocks.mockTransformNode.name,
-      );
-    });
-  });
-
   it('renders an empty NodeMaterialization tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockResolvedValue(mocks.mockMetricNode);
@@ -708,113 +682,6 @@ describe('<NodePage />', () => {
     });
   });
 
-  it('renders the NodeValidate tab', async () => {
-    const djClient = mockDJClient();
-    window.scrollTo = jest.fn();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.nodeDimensions.mockReturnValue([]);
-    djClient.DataJunctionAPI.getMetric.mockReturnValue(
-      mocks.mockMetricNodeJson,
-    );
-    djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.sql.mockReturnValue({
-      sql: 'SELECT * FROM testNode',
-    });
-    const streamNodeData = {
-      onmessage: jest.fn(),
-      onerror: jest.fn(),
-      close: jest.fn(),
-    };
-    djClient.DataJunctionAPI.streamNodeData.mockResolvedValue(streamNodeData);
-    djClient.DataJunctionAPI.streamNodeData.mockResolvedValueOnce({
-      state: 'FINISHED',
-      results: [
-        {
-          columns: [{ name: 'column1' }, { name: 'column2' }],
-          rows: [
-            [1, 'value1'],
-            [2, 'value2'],
-          ],
-        },
-      ],
-    });
-
-    const element = (
-      <DJClientContext.Provider value={djClient}>
-        <NodePage />
-      </DJClientContext.Provider>
-    );
-    render(
-      <MemoryRouter
-        initialEntries={['/nodes/default.num_repair_orders/validate']}
-      >
-        <Routes>
-          <Route path="nodes/:name/:tab" element={element} />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Group By')).toBeInTheDocument();
-      expect(screen.getByText('Add Filters')).toBeInTheDocument();
-      expect(screen.getByText('Generated Query')).toBeInTheDocument();
-      expect(screen.getByText('Results')).toBeInTheDocument();
-    });
-    // Click on the 'Validate' tab
-    fireEvent.click(screen.getByRole('button', { name: '► Validate' }));
-
-    await waitFor(() => {
-      expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
-      expect(djClient.DataJunctionAPI.sql).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-        { dimensions: [], filters: [] },
-      );
-      expect(djClient.DataJunctionAPI.nodeDimensions).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
-    });
-
-    // Click on 'Run' to run the node query
-    const runButton = screen.getByText('► Run');
-    fireEvent.click(runButton);
-
-    await waitFor(() => {
-      expect(djClient.DataJunctionAPI.streamNodeData).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-        { dimensions: [], filters: [] },
-      );
-      expect(streamNodeData.onmessage).toBeDefined();
-      expect(streamNodeData.onerror).toBeDefined();
-    });
-
-    const infoTab = screen.getByRole('button', { name: 'QueryInfo' });
-    const resultsTab = screen.getByText('Results');
-
-    // Initially, the Results tab should be active
-    expect(resultsTab).toHaveClass('active');
-    expect(infoTab).not.toHaveClass('active');
-
-    // Click on the Info tab first
-    fireEvent.click(infoTab);
-
-    await waitFor(() => {
-      // Now, the Info tab should be active
-      expect(infoTab).toHaveClass('active');
-      expect(resultsTab).not.toHaveClass('active');
-    });
-
-    // Click on the Results tab
-    fireEvent.click(resultsTab);
-
-    await waitFor(() => {
-      // Now, the Results tab should be active again
-      expect(resultsTab).toHaveClass('active');
-      expect(infoTab).not.toHaveClass('active');
-    });
-  });
-
   it('renders a NodeColumnLineage tab correctly', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);

package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap

@@ -4,15 +4,17 @@ exports[`<NodePage /> renders the NodeInfo tab correctly for a metric node 1`] =
 HTMLCollection [
   <code
     class="language-sql"
-    style="white-space: pre;"
+    style="white-space: pre-wrap;"
   >
-    <span
-      class="hljs-built_in"
-    >
-      count
-    </span>
     <span>
-      (repair_order_id)
+      <span
+        class="hljs-built_in"
+      >
+        count
+      </span>
+      <span>
+        (repair_order_id)
+      </span>
     </span>
   </code>,
 ]

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

@@ -9,7 +9,6 @@ import NodeGraphTab from './NodeGraphTab';
 import NodeHistory from './NodeHistory';
 import NotebookDownload from './NotebookDownload';
 import DJClientContext from '../../providers/djclient';
-import NodeValidateTab from './NodeValidateTab';
 import NodeMaterializationTab from './NodeMaterializationTab';
 import NodePreAggregationsTab from './NodePreAggregationsTab';
 import ClientCodePopover from './ClientCodePopover';
@@ -35,6 +34,11 @@ export function NodePage() {
   const [node, setNode] = useState(null);
 
   const onClickTab = id => () => {
+    // Preview tab redirects to Query Planner instead of showing content
+    if (id === 'preview') {
+      navigate(`/planner?metrics=${encodeURIComponent(name)}`);
+      return;
+    }
     navigate(`/nodes/${name}/${id}`);
     setState({ selectedTab: id });
   };
@@ -74,7 +78,7 @@ export function NodePage() {
       {
         id: 'columns',
         name: 'Columns',
-        display: true,
+        display: node?.type !== 'metric',
       },
       {
         id: 'graph',
@@ -86,15 +90,10 @@ export function NodePage() {
         name: 'History',
         display: true,
       },
-      {
-        id: 'validate',
-        name: '► Validate',
-        display: node?.type !== 'source',
-      },
       {
         id: 'materializations',
         name: 'Materializations',
-        display: node?.type !== 'source',
+        display: node?.type !== 'source' && node?.type !== 'metric',
       },
       {
         id: 'linked',
@@ -111,6 +110,11 @@ export function NodePage() {
         name: 'Dependencies',
         display: node?.type !== 'cube',
       },
+      {
+        id: 'preview',
+        name: 'Preview →',
+        display: node?.type === 'metric',
+      },
     ];
   };
   let tabToDisplay = null;
@@ -128,9 +132,6 @@ export function NodePage() {
     case 'history':
       tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
       break;
-    case 'validate':
-      tabToDisplay = <NodeValidateTab node={node} djClient={djClient} />;
-      break;
     case 'materializations':
       // Cube nodes use cube-specific materialization tab
       // Other nodes (transform, metric, dimension) use pre-aggregations tab