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

package/.env

@@ -1 +1,2 @@
 REACT_APP_DJ_URL=http://localhost:8000
+REACT_USE_SSE=true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.12",
+  "version": "0.0.1-rc.14",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/__tests__/__snapshots__/index.test.tsx.snap

@@ -35,9 +35,12 @@ exports[`<App /> should render and match the snapshot 1`] = `
           "namespaces": [Function],
           "node": [Function],
           "node_dag": [Function],
+          "node_lineage": [Function],
+          "nodesWithDimension": [Function],
           "revisions": [Function],
           "sql": [Function],
           "sqls": [Function],
+          "stream": [Function],
           "upstreams": [Function],
         },
       }

package/src/app/components/QueryInfo.jsx

@@ -10,38 +10,6 @@ export default function QueryInfo({
   started,
   numRows,
 }) {
-  const stateIcon =
-    state === 'FINISHED' ? (
-      <span className="status__valid status" style={{ alignContent: 'center' }}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="25"
-          height="25"
-          fill="currentColor"
-          className="bi bi-check-circle-fill"
-          viewBox="0 0 16 16"
-        >
-          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-        </svg>
-      </span>
-    ) : (
-      <span
-        className="status__invalid status"
-        style={{ alignContent: 'center' }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          className="bi bi-x-circle-fill"
-          viewBox="0 0 16 16"
-        >
-          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
-        </svg>
-      </span>
-    );
-
   return (
     <div className="table-responsive">
       <table className="card-inner-table table">
@@ -70,11 +38,11 @@ export default function QueryInfo({
                 {engine_version}
               </span>
             </td>
-            <td>{stateIcon}</td>
+            <td>{state}</td>
             <td>{scheduled}</td>
             <td>{started}</td>
             <td>
-              {errors.length ? (
+              {errors?.length ? (
                 errors.map(e => (
                   <p>
                     <span className="rounded-pill badge bg-secondary-error">

package/src/app/components/djgraph/DJNode.jsx

@@ -1,6 +1,5 @@
-import React, { memo } from 'react';
+import { memo, useLayoutEffect, useRef, useState } from 'react';
 import { Handle, Position } from 'reactflow';
-import { DJNodeDimensions } from './DJNodeDimensions';
 import Collapse from './Collapse';
 
 function capitalize(string) {
@@ -43,6 +42,8 @@ export function DJNode({ id, data }) {
     <>
       <div
         className={'dj-node__full node_type__' + data.type + highlightNodeClass}
+        key={data.name}
+        style={{ width: '450px' }}
       >
         <div style={handleWrapperStyle}>
           <Handle
@@ -61,7 +62,8 @@ export function DJNode({ id, data }) {
           </div>
         </div>
         <div className="dj-node__body">
-          <b>{capitalize(data.type)}</b>:{' '}
+          <b>{capitalize(data.type)}</b>
+          <br />{' '}
           <a href={`/nodes/${data.name}`}>
             {data.type === 'source' ? data.table : data.display_name}
           </a>

package/src/app/components/djgraph/DJNodeDimensions.jsx

@@ -1,6 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
-import Collapse from './Collapse';
 
 export function DJNodeDimensions(data) {
   const [dimensions, setDimensions] = useState([]);

package/src/app/components/djgraph/LayoutFlow.jsx

@@ -0,0 +1,104 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+} from 'reactflow';
+
+import '../../../styles/dag.css';
+import 'reactflow/dist/style.css';
+import DJNode from '../../components/djgraph/DJNode';
+import dagre from 'dagre';
+
+const getLayoutedElements = (
+  nodes,
+  edges,
+  direction = 'LR',
+  nodeWidth = 600,
+) => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const isHorizontal = direction === 'TB';
+  dagreGraph.setGraph({
+    rankdir: direction,
+    nodesep: 40,
+    ranksep: 10,
+    ranker: 'longest-path',
+  });
+  const nodeHeightTracker = {};
+
+  nodes.forEach(node => {
+    nodeHeightTracker[node.id] =
+      Math.min(node.data.column_names.length, 10) * 40 + 250;
+    dagreGraph.setNode(node.id, {
+      width: nodeWidth,
+      height: nodeHeightTracker[node.id],
+    });
+  });
+
+  edges.forEach(edge => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  nodes.forEach(node => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    node.targetPosition = isHorizontal ? 'left' : 'top';
+    node.sourcePosition = isHorizontal ? 'right' : 'bottom';
+    node.position = {
+      x: nodeWithPosition.x - nodeWidth / 2,
+      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 2,
+    };
+    node.width = nodeWidth;
+    node.height = nodeHeightTracker[node.id];
+    return node;
+  });
+
+  return { nodes: nodes, edges: edges };
+};
+
+const LayoutFlow = (djNode, saveGraph) => {
+  const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
+
+  // These are used internally by ReactFlow (to update the nodes on the ReactFlow pane)
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const minimapStyle = {
+    height: 100,
+    width: 150,
+  };
+
+  useEffect(() => {
+    saveGraph(getLayoutedElements, setNodes, setEdges).catch(console.error);
+  }, [djNode]);
+
+  const onConnect = useCallback(
+    params => setEdges(eds => addEdge(params, eds)),
+    [setEdges],
+  );
+  return (
+    <div style={{ height: '800px' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        snapToGrid={true}
+        fitView
+      >
+        <MiniMap style={minimapStyle} zoomable pannable />
+        <Controls />
+        <Background color="#aaa" gap={16} />
+      </ReactFlow>
+    </div>
+  );
+};
+export default LayoutFlow;

package/src/app/components/djgraph/__tests__/__snapshots__/DJNode.test.tsx.snap

@@ -4,6 +4,11 @@ exports[`<DJNode /> should render and match the snapshot 1`] = `
 <React.Fragment>
   <div
     className="dj-node__full node_type__source"
+    style={
+      Object {
+        "width": "450px",
+      }
+    }
   >
     <div
       style={
@@ -52,7 +57,7 @@ exports[`<DJNode /> should render and match the snapshot 1`] = `
       <b>
         Source
       </b>
-      :
+      <br />
        
       <a
         href="/nodes/shared.dimensions.accounts"

package/src/app/pages/NamespacePage/__tests__/__snapshots__/index.test.tsx.snap

@@ -41,6 +41,9 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
               <th>
                 Name
               </th>
+              <th>
+                Display Name
+              </th>
               <th>
                 Type
               </th>

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

@@ -20,7 +20,7 @@ export function NamespacePage() {
     const hierarchy = [];
 
     for (const item of namespaceList) {
-      const namespaces = item.namespace.split('.');
+      const namespaces = item.split('.');
       let currentLevel = hierarchy;
 
       let path = '';
@@ -75,7 +75,7 @@ export function NamespacePage() {
     <tr>
       <td>
         <a href={'/nodes/' + node.name} className="link-table">
-          {node.display_name}
+          {node.name}
         </a>
         <span
           className="rounded-pill badge bg-secondary-soft"
@@ -84,6 +84,11 @@ export function NamespacePage() {
           {node.version}
         </span>
       </td>
+      <td>
+        <a href={'/nodes/' + node.name} className="link-table">
+          {node.display_name}
+        </a>
+      </td>
       <td>
         <span className={'node_type__' + node.type + ' badge node_type'}>
           {node.type}
@@ -138,6 +143,7 @@ export function NamespacePage() {
               <thead>
                 <tr>
                   <th>Name</th>
+                  <th>Display Name</th>
                   <th>Type</th>
                   <th>Status</th>
                   <th>Mode</th>

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

@@ -1,4 +1,4 @@
-import { Component, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import ClientCodePopover from './ClientCodePopover';
 
 export default function NodeColumnTab({ node, djClient }) {

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

@@ -1,195 +1,113 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
-import ReactFlow, {
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  useNodesState,
-  useEdgesState,
-  MarkerType,
-} from 'reactflow';
+import React, { useContext } from 'react';
+import { MarkerType } from 'reactflow';
 
 import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
 import DJNode from '../../components/djgraph/DJNode';
-import dagre from 'dagre';
 import DJClientContext from '../../providers/djclient';
+import LayoutFlow from '../../components/djgraph/LayoutFlow';
 
 const NodeLineage = djNode => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-
-  const minimapStyle = {
-    height: 100,
-    width: 150,
+  const createNode = node => {
+    const primary_key = node.columns
+      .filter(col =>
+        col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
+      )
+      .map(col => col.name);
+    const column_names = node.columns.map(col => {
+      return { name: col.name, type: col.type };
+    });
+    return {
+      id: String(node.name),
+      type: 'DJNode',
+      data: {
+        label:
+          node.table !== null
+            ? String(node.schema_ + '.' + node.table)
+            : 'default.' + node.name,
+        table: node.table,
+        name: String(node.name),
+        display_name: String(node.display_name),
+        type: node.type,
+        primary_key: primary_key,
+        column_names: column_names,
+        is_current: node.name === djNode.djNode.name,
+      },
+    };
   };
 
-  const dagreGraph = useMemo(() => new dagre.graphlib.Graph(), []);
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-
-  useEffect(() => {
-    const setElementsLayout = (
-      nodes,
-      edges,
-      direction = 'LR',
-      nodeWidth = 800,
-    ) => {
-      const isHorizontal = direction === 'TB';
-      dagreGraph.setGraph({ rankdir: direction });
-      const nodeHeightTracker = {};
-
-      nodes.forEach(node => {
-        nodeHeightTracker[node.id] =
-          Math.min(node.data.column_names.length, 10) * 37 + 250;
-        dagreGraph.setNode(node.id, {
-          width: nodeWidth,
-          height: nodeHeightTracker[node.id],
-        });
-      });
-
-      edges.forEach(edge => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-
-      dagre.layout(dagreGraph);
-
-      nodes.forEach(node => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.targetPosition = isHorizontal ? 'left' : 'top';
-        node.sourcePosition = isHorizontal ? 'right' : 'bottom';
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeightTracker[node.id] / 2,
+  const dimensionEdges = node => {
+    return node.columns
+      .filter(col => col.dimension)
+      .map(col => {
+        return {
+          id: col.dimension.name + '->' + node.name + '.' + col.name,
+          source: col.dimension.name,
+          sourceHandle: col.dimension.name,
+          target: node.name,
+          targetHandle: node.name + '.' + col.name,
+          draggable: true,
+          markerStart: {
+            type: MarkerType.Arrow,
+            width: 20,
+            height: 20,
+            color: '#b0b9c2',
+          },
+          style: {
+            strokeWidth: 3,
+            stroke: '#b0b9c2',
+          },
         };
-        node.width = nodeWidth;
-        node.height = nodeHeightTracker[node.id];
-        return node;
       });
-      return { nodes, edges };
-    };
-
-    const dagFetch = async () => {
-      let related_nodes = await djClient.node_dag(djNode.djNode.name);
-      // djNode.djNode.is_current = true;
-      var djNodes = [djNode.djNode];
-      for (const iterable of [related_nodes]) {
-        for (const item of iterable) {
-          if (item.type !== 'cube') {
-            djNodes.push(item);
-          }
-        }
-      }
-      let edges = [];
-      djNodes.forEach(obj => {
-        obj.parents.forEach(parent => {
-          if (parent.name) {
-            edges.push({
-              id: obj.name + '-' + parent.name,
-              source: parent.name,
-              sourceHandle: parent.name,
-              target: obj.name,
-              targetHandle: obj.name,
-              animated: true,
-              markerEnd: {
-                type: MarkerType.Arrow,
-              },
-              style: {
-                strokeWidth: 3,
-                stroke: '#b0b9c2',
-              },
-            });
-          }
-        });
+  };
 
-        obj.columns.forEach(col => {
-          if (col.dimension) {
-            const edge = {
-              id: col.dimension.name + '->' + obj.name + '.' + col.name,
-              source: col.dimension.name,
-              sourceHandle: col.dimension.name,
-              target: obj.name,
-              targetHandle: obj.name + '.' + col.name,
-              draggable: true,
-              markerStart: {
-                type: MarkerType.Arrow,
-                width: 20,
-                height: 20,
-                color: '#b0b9c2',
-              },
-              style: {
-                strokeWidth: 3,
-                stroke: '#b0b9c2',
-              },
-            };
-            edges.push(edge);
-          }
-        });
-      });
-      const nodes = djNodes.map(node => {
-        const primary_key = node.columns
-          .filter(col =>
-            col.attributes.some(
-              attr => attr.attribute_type.name === 'primary_key',
-            ),
-          )
-          .map(col => col.name);
-        const column_names = node.columns.map(col => {
-          return { name: col.name, type: col.type };
-        });
+  const parentEdges = node => {
+    return node.parents
+      .filter(parent => parent.name)
+      .map(parent => {
         return {
-          id: String(node.name),
-          type: 'DJNode',
-          data: {
-            label:
-              node.table !== null
-                ? String(node.schema_ + '.' + node.table)
-                : 'default.' + node.name,
-            table: node.table,
-            name: String(node.name),
-            display_name: String(node.display_name),
-            type: node.type,
-            primary_key: primary_key,
-            column_names: column_names,
-            is_current: node.name === djNode.djNode.name,
+          id: node.name + '-' + parent.name,
+          source: parent.name,
+          sourceHandle: parent.name,
+          target: node.name,
+          targetHandle: node.name,
+          animated: true,
+          markerEnd: {
+            type: MarkerType.Arrow,
+          },
+          style: {
+            strokeWidth: 3,
+            stroke: '#b0b9c2',
           },
         };
       });
-      setNodes(nodes);
-      setEdges(edges);
-
-      // use dagre to determine the position of the parents (the DJ nodes)
-      // the positions of the columns are relative to each DJ node
-      setElementsLayout(nodes, edges);
-    };
-
-    dagFetch();
-  }, [dagreGraph, djClient, djNode.djNode, setEdges, setNodes]);
-
-  const onConnect = useCallback(
-    params => setEdges(eds => addEdge(params, eds)),
-    [setEdges],
-  );
+  };
 
-  return (
-    <div style={{ height: '800px' }}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        snapToGrid={true}
-        fitView
-      >
-        <MiniMap style={minimapStyle} zoomable pannable />
-        <Controls />
-        <Background color="#aaa" gap={16} />
-      </ReactFlow>
-    </div>
-  );
+  const dagFetch = async (getLayoutedElements, setNodes, setEdges) => {
+    let related_nodes = await djClient.node_dag(djNode.djNode.name);
+    var djNodes = [djNode.djNode];
+    for (const iterable of [related_nodes]) {
+      for (const item of iterable) {
+        if (item.type !== 'cube') {
+          djNodes.push(item);
+        }
+      }
+    }
+    let edges = [];
+    djNodes.forEach(node => {
+      edges = edges.concat(parentEdges(node));
+      edges = edges.concat(dimensionEdges(node));
+    });
+    const nodes = djNodes.map(node => createNode(node));
+
+    // use dagre to determine the position of the parents (the DJ nodes)
+    // the positions of the columns are relative to each DJ node
+    getLayoutedElements(nodes, edges);
+    setNodes(nodes);
+    setEdges(edges);
+  };
+  return LayoutFlow(djNode, dagFetch);
 };
 export default NodeLineage;