datajunction-ui 0.0.1-rc.12 → 0.0.1-rc.14

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

@@ -13,6 +13,113 @@ export default function NodeHistory({ node, djClient }) {
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
+
+  const eventData = event => {
+    console.log('event', event);
+    if (
+      event.activity_type === 'set_attribute' &&
+      event.entity_type === 'column_attribute'
+    ) {
+      return event.details.attributes
+        .map(attr => (
+          <div>
+            Set{' '}
+            <span className={`badge partition_value`}>{attr.column_name}</span>{' '}
+            as{' '}
+            <span className={`badge partition_value_highlight`}>
+              {attr.attribute_type_name}
+            </span>
+          </div>
+        ))
+        .reduce((prev, curr) => [prev, <br />, curr]);
+    }
+    if (event.activity_type === 'create' && event.entity_type === 'link') {
+      return (
+        <div>
+          Linked{' '}
+          <span className={`badge partition_value`}>
+            {event.details.column}
+          </span>{' '}
+          to
+          <span className={`badge partition_value_highlight`}>
+            {event.details.dimension}
+          </span>{' '}
+          via
+          <span className={`badge partition_value`}>
+            {event.details.dimension_column}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'create' &&
+      event.entity_type === 'materialization'
+    ) {
+      return (
+        <div>
+          Initialized materialization{' '}
+          <span className={`badge partition_value`}>
+            {event.details.materialization}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'create' &&
+      event.entity_type === 'availability'
+    ) {
+      return (
+        <div>
+          Materialized at{' '}
+          <span className={`badge partition_value_highlight`}>
+            {event.post.catalog}.{event.post.schema_}.{event.post.table}
+          </span>
+          from{' '}
+          <span className={`badge partition_value`}>
+            {event.post.min_temporal_partition}
+          </span>{' '}
+          to
+          <span className={`badge partition_value`}>
+            {event.post.max_temporal_partition}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'status_change' &&
+      event.entity_type === 'node'
+    ) {
+      const expr = (
+        <div>
+          Caused by a change in upstream{' '}
+          <a href={`/nodes/${event.details['upstream_node']}`}>
+            {event.details['upstream_node']}
+          </a>
+        </div>
+      );
+      return (
+        <div>
+          Status changed from{' '}
+          <span className={`status__${event.pre['status']}`}>
+            {event.pre['status']}
+          </span>{' '}
+          to{' '}
+          <span className={`status__${event.post['status']}`}>
+            {event.post['status']}
+          </span>{' '}
+          {event.details['upstream_node'] !== undefined ? expr : ''}
+        </div>
+      );
+    }
+    return (
+      <div>
+        {JSON.stringify(event.details) === '{}'
+          ? ''
+          : JSON.stringify(event.details)}
+      </div>
+    );
+  };
+
   const tableData = history => {
     return history.map(event => (
       <tr>
@@ -27,6 +134,7 @@ export default function NodeHistory({ node, djClient }) {
         <td>{event.entity_name}</td>
         <td>{event.user ? event.user : 'unknown'}</td>
         <td>{event.created_at}</td>
+        <td>{eventData(event)}</td>
       </tr>
     ));
   };
@@ -45,7 +153,7 @@ export default function NodeHistory({ node, djClient }) {
     ));
   };
   return (
-    <div className="table-responsive">
+    <div className="table-vertical">
       <table className="card-inner-table table">
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
           <th className="text-start">Version</th>
@@ -63,6 +171,7 @@ export default function NodeHistory({ node, djClient }) {
           <th>Name</th>
           <th>User</th>
           <th>Timestamp</th>
+          <th>Details</th>
         </thead>
         {tableData(history)}
       </table>

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

@@ -2,7 +2,6 @@ import { useState, useContext, useEffect } 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';
-import { format } from 'sql-formatter';
 import NodeStatus from './NodeStatus';
 import ListGroupItem from '../../components/ListGroupItem';
 import ToggleSwitch from '../../components/ToggleSwitch';
@@ -18,7 +17,7 @@ export default function NodeInfoTab({ node }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   useEffect(() => {
     const fetchData = async () => {
-      const data = await djClient.compiledSql(node.name);
+      const data = djClient.compiledSql(node.name);
       if (data.sql) {
         setCompiledSQL(data.sql);
       } else {
@@ -50,23 +49,7 @@ export default function NodeInfoTab({ node }) {
             <></>
           )}
           <SyntaxHighlighter language="sql" style={foundation}>
-            {checked
-              ? format(compiledSQL, {
-                  language: 'spark',
-                  tabWidth: 2,
-                  keywordCase: 'upper',
-                  denseOperators: true,
-                  logicalOperatorNewline: 'before',
-                  expressionWidth: 10,
-                })
-              : format(node?.query, {
-                  language: 'spark',
-                  tabWidth: 2,
-                  keywordCase: 'upper',
-                  denseOperators: true,
-                  logicalOperatorNewline: 'before',
-                  expressionWidth: 10,
-                })}
+            {checked ? compiledSQL : node?.query}
           </SyntaxHighlighter>
         </div>
       </div>

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

@@ -0,0 +1,84 @@
+import { useContext } from 'react';
+import { MarkerType } from 'reactflow';
+
+import '../../../styles/dag.css';
+import 'reactflow/dist/style.css';
+import DJClientContext from '../../providers/djclient';
+import LayoutFlow from '../../components/djgraph/LayoutFlow';
+
+const createDJNode = node => {
+  return {
+    id: node.node_name,
+    type: 'DJNode',
+    data: {
+      label: node.node_name,
+      name: node.node_name,
+      type: node.node_type,
+      table: node.node_type === 'source' ? node.node_name : '',
+      display_name:
+        node.node_type === 'source' ? node.node_name : node.display_name,
+      column_names: [{ name: node.column_name, type: '' }],
+      primary_key: [],
+    },
+  };
+};
+
+const NodeColumnLineage = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const dagFetch = async (getLayoutedElements, setNodes, setEdges) => {
+    let relatedNodes = await djClient.node_lineage(djNode.djNode.name);
+    let nodesMapping = {};
+    let edgesMapping = {};
+    let processing = relatedNodes;
+    while (processing.length > 0) {
+      let current = processing.pop();
+      let node = createDJNode(current);
+      if (node.id in nodesMapping) {
+        nodesMapping[node.id].data.column_names = Array.from(
+          new Set([
+            ...nodesMapping[node.id].data.column_names.map(x => x.name),
+            ...node.data.column_names.map(x => x.name),
+          ]),
+        ).map(x => {
+          return { name: x, type: '' };
+        });
+      } else {
+        nodesMapping[node.id] = node;
+      }
+
+      current.lineage.forEach(lineageColumn => {
+        const sourceHandle =
+          lineageColumn.node_name + '.' + lineageColumn.column_name;
+        const targetHandle = current.node_name + '.' + current.column_name;
+        edgesMapping[sourceHandle + '->' + targetHandle] = {
+          id: sourceHandle + '->' + targetHandle,
+          source: lineageColumn.node_name,
+          sourceHandle: sourceHandle,
+          target: current.node_name,
+          targetHandle: targetHandle,
+          animated: true,
+          markerEnd: {
+            type: MarkerType.Arrow,
+          },
+          style: {
+            strokeWidth: 3,
+            stroke: '#b0b9c2',
+          },
+        };
+        processing.push(lineageColumn);
+      });
+    }
+
+    // use dagre to determine the position of the parents (the DJ nodes)
+    // the positions of the columns are relative to each DJ node
+    const elements = getLayoutedElements(
+      Object.keys(nodesMapping).map(key => nodesMapping[key]),
+      Object.keys(edgesMapping).map(key => edgesMapping[key]),
+    );
+
+    setNodes(elements.nodes);
+    setEdges(elements.edges);
+  };
+  return LayoutFlow(djNode, dagFetch);
+};
+export default NodeColumnLineage;

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

@@ -3,7 +3,6 @@ import Select from 'react-select';
 import DJClientContext from '../../providers/djclient';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
-import { format } from 'sql-formatter';
 
 const NodeSQLTab = djNode => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -82,14 +81,7 @@ const NodeSQLTab = djNode => {
         >
           <h6 className="mb-0 w-100">Query</h6>
           <SyntaxHighlighter language="sql" style={foundation}>
-            {format(query, {
-              language: 'spark',
-              tabWidth: 2,
-              keywordCase: 'upper',
-              denseOperators: true,
-              logicalOperatorNewline: 'before',
-              expressionWidth: 10,
-            })}
+            {query}
           </SyntaxHighlighter>
         </div>
       </div>

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

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+
+export default function NodesWithDimension({ node, djClient }) {
+  const [availableNodes, setAvailableNodes] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.nodesWithDimension(node.name);
+      setAvailableNodes(data);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <th className="text-start">Name</th>
+          <th>Type</th>
+        </thead>
+        <tbody>
+          {availableNodes.map(node => (
+            <tr>
+              <td>
+                <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+              </td>
+              <td>
+                <span
+                  className={'node_type__' + node.type + ' badge node_type'}
+                >
+                  {node.type}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -11,6 +11,8 @@ import DJClientContext from '../../providers/djclient';
 import NodeSQLTab from './NodeSQLTab';
 import NodeMaterializationTab from './NodeMaterializationTab';
 import ClientCodePopover from './ClientCodePopover';
+import NodesWithDimension from './NodesWithDimension';
+import NodeColumnLineage from './NodeLineageTab';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -25,7 +27,7 @@ export function NodePage() {
   };
 
   const buildTabs = tab => {
-    return (
+    return tab.display ? (
       <Tab
         key={tab.id}
         id={tab.id}
@@ -33,7 +35,7 @@ export function NodePage() {
         onClick={onClickTab(tab.id)}
         selectedTab={state.selectedTab}
       />
-    );
+    ) : null;
   };
 
   const { name } = useParams();
@@ -57,32 +59,51 @@ export function NodePage() {
     fetchData().catch(console.error);
   }, [djClient, name]);
 
-  const TabsJson = [
-    {
-      id: 0,
-      name: 'Info',
-    },
-    {
-      id: 1,
-      name: 'Columns',
-    },
-    {
-      id: 2,
-      name: 'Graph',
-    },
-    {
-      id: 3,
-      name: 'History',
-    },
-    {
-      id: 4,
-      name: 'SQL',
-    },
-    {
-      id: 5,
-      name: 'Materializations',
-    },
-  ];
+  const tabsList = node => {
+    return [
+      {
+        id: 0,
+        name: 'Info',
+        display: true,
+      },
+      {
+        id: 1,
+        name: 'Columns',
+        display: true,
+      },
+      {
+        id: 2,
+        name: 'Graph',
+        display: true,
+      },
+      {
+        id: 3,
+        name: 'History',
+        display: true,
+      },
+      {
+        id: 4,
+        name: 'SQL',
+        display: node?.type !== 'dimension' && node?.type !== 'source',
+      },
+      {
+        id: 5,
+        name: 'Materializations',
+        display: node?.type !== 'source',
+      },
+      {
+        id: 6,
+        name: 'Linked Nodes',
+        display: node?.type === 'dimension',
+      },
+      {
+        id: 7,
+        name: 'Lineage',
+        display: node?.type === 'metric',
+      },
+    ];
+  };
+
   //
   //
   let tabToDisplay = null;
@@ -106,6 +127,12 @@ export function NodePage() {
     case 5:
       tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
       break;
+    case 6:
+      tabToDisplay = <NodesWithDimension node={node} djClient={djClient} />;
+      break;
+    case 7:
+      tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
+      break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;
   }
@@ -121,12 +148,26 @@ export function NodePage() {
             style={{ display: 'inline-block' }}
           >
             <span className="card-label fw-bold text-gray-800">
-              {node?.display_name}
+              {node?.display_name}{' '}
+              <span className={'node_type__' + node?.type + ' badge node_type'}>
+                {node?.type}
+              </span>
             </span>
           </h3>
           <ClientCodePopover code={node?.createNodeClientCode} />
+          <div>
+            <a href={'/nodes/' + node?.name} className="link-table">
+              {node?.name}
+            </a>
+            <span
+              className="rounded-pill badge bg-secondary-soft"
+              style={{ marginLeft: '0.5rem' }}
+            >
+              {node?.version}
+            </span>
+          </div>
           <div className="align-items-center row">
-            {TabsJson.map(buildTabs)}
+            {tabsList(node).map(buildTabs)}
           </div>
           {tabToDisplay}
         </div>

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

@@ -34,7 +34,13 @@ export function Root() {
               </span>
               <span className="menu-link">
                 <span className="menu-title">
-                  <a href="/">Help</a>
+                  <a
+                    href="https://www.datajunction.io"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Docs
+                  </a>
                 </span>
               </span>
             </div>