datajunction-ui 0.0.1-rc.13 → 0.0.1-rc.15

package/package.json

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

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

@@ -35,6 +35,7 @@ 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],

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

@@ -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;

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

@@ -111,7 +111,13 @@ export default function NodeHistory({ node, djClient }) {
         </div>
       );
     }
-    return '';
+    return (
+      <div>
+        {JSON.stringify(event.details) === '{}'
+          ? ''
+          : JSON.stringify(event.details)}
+      </div>
+    );
   };
 
   const tableData = history => {
@@ -125,6 +131,7 @@ export default function NodeHistory({ node, djClient }) {
           </span>
         </td>
         <td>{event.entity_type}</td>
+        <td>{event.entity_name}</td>
         <td>{event.user ? event.user : 'unknown'}</td>
         <td>{event.created_at}</td>
         <td>{eventData(event)}</td>
@@ -161,6 +168,7 @@ export default function NodeHistory({ node, djClient }) {
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
           <th className="text-start">Activity</th>
           <th>Type</th>
+          <th>Name</th>
           <th>User</th>
           <th>Timestamp</th>
           <th>Details</th>

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

@@ -11,21 +11,8 @@ SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
 
 export default function NodeInfoTab({ node }) {
-  const [compiledSQL, setCompiledSQL] = useState('');
   const [checked, setChecked] = useState(false);
   const nodeTags = node?.tags.map(tag => <div>{tag}</div>);
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  useEffect(() => {
-    const fetchData = async () => {
-      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]);
   function toggle(value) {
     return !value;
   }
@@ -38,18 +25,8 @@ 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}
+            {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;

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

@@ -12,6 +12,7 @@ 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;
@@ -95,6 +96,11 @@ export function NodePage() {
         name: 'Linked Nodes',
         display: node?.type === 'dimension',
       },
+      {
+        id: 7,
+        name: 'Lineage',
+        display: node?.type === 'metric',
+      },
     ];
   };
 
@@ -124,6 +130,9 @@ export function NodePage() {
     case 6:
       tabToDisplay = <NodesWithDimension node={node} djClient={djClient} />;
       break;
+    case 7:
+      tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
+      break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;
   }
@@ -146,6 +155,17 @@ export function NodePage() {
             </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">
             {tabsList(node).map(buildTabs)}
           </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>

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

@@ -4,7 +4,6 @@ import { DataJunctionAPI } from '../../services/DJService';
 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';
 import Select from 'react-select';
 import QueryInfo from '../../components/QueryInfo';
 

package/src/app/services/DJService.js

@@ -36,6 +36,13 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  node_lineage: async function (name) {
+    const data = await (
+      await fetch(DJ_URL + '/nodes/' + name + '/lineage/')
+    ).json();
+    return data;
+  },
+
   metric: async function (name) {
     const data = await (await fetch(DJ_URL + '/metrics/' + name + '/')).json();
     return data;

package/webpack.config.js

@@ -99,6 +99,7 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, 'public', 'index.html'),
+      favicon: path.resolve(__dirname, 'public', 'favicon.ico'),
     }),
     new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),