datajunction-ui 0.0.1-rc.2 → 0.0.1-rc.21

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

@@ -0,0 +1,212 @@
+import { useEffect, useState } from 'react';
+
+export default function NodeHistory({ node, djClient }) {
+  const [history, setHistory] = useState([]);
+  const [revisions, setRevisions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        const data = await djClient.history('node', node.name);
+        setHistory(data);
+        const revisions = await djClient.revisions(node.name);
+        setRevisions(revisions);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  const eventData = event => {
+    if (
+      event.activity_type === 'set_attribute' &&
+      event.entity_type === 'column_attribute'
+    ) {
+      return event.details.attributes
+        .map(attr => (
+          <div
+            key={event.id}
+            role="cell"
+            aria-label="HistoryAttribute"
+            aria-hidden="false"
+          >
+            Set{' '}
+            <span className={`badge partition_value`}>
+              {event.details.column}
+            </span>{' '}
+            as{' '}
+            <span className={`badge partition_value_highlight`}>
+              {attr.name}
+            </span>
+          </div>
+        ))
+        .reduce((prev, curr) => [prev, <br />, curr], []);
+    }
+    if (event.activity_type === 'create' && event.entity_type === 'link') {
+      return (
+        <div
+          key={event.id}
+          role="cell"
+          aria-label="HistoryCreateLink"
+          aria-hidden="false"
+        >
+          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
+          key={event.id}
+          role="cell"
+          aria-label="HistoryCreateMaterialization"
+          aria-hidden="false"
+        >
+          Initialized materialization{' '}
+          <span className={`badge partition_value`}>
+            {event.details.materialization}
+          </span>
+        </div>
+      );
+    }
+    if (
+      event.activity_type === 'create' &&
+      event.entity_type === 'availability'
+    ) {
+      return (
+        <div
+          key={event.id}
+          role="cell"
+          aria-label="HistoryCreateAvailability"
+          aria-hidden="false"
+        >
+          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
+          key={event.id}
+          role="cell"
+          aria-label="HistoryNodeStatusChange"
+          aria-hidden="false"
+        >
+          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 key={event.id}>
+        {JSON.stringify(event.details) === '{}'
+          ? ''
+          : JSON.stringify(event.details)}
+      </div>
+    );
+  };
+
+  const tableData = history => {
+    return history.map(event => (
+      <tr key={`history-row-${event.id}`}>
+        <td className="text-start">
+          <span
+            className={`history_type__${event.activity_type} badge node_type`}
+          >
+            {event.activity_type}
+          </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>
+      </tr>
+    ));
+  };
+
+  const revisionsTable = revisions => {
+    return revisions.map(revision => (
+      <tr key={revision.version}>
+        <td className="text-start">
+          <span className={`badge node_type__source`}>{revision.version}</span>
+        </td>
+        <td>{revision.display_name}</td>
+        <td>{revision.description}</td>
+        <td>{revision.query}</td>
+        <td>{revision.tags}</td>
+      </tr>
+    ));
+  };
+  return (
+    <div className="table-vertical">
+      <table className="card-inner-table table" aria-label="Revisions">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <tr>
+            <th className="text-start">Version</th>
+            <th>Display Name</th>
+            <th>Description</th>
+            <th>Query</th>
+            <th>Tags</th>
+          </tr>
+        </thead>
+        <tbody>{revisionsTable(revisions)}</tbody>
+      </table>
+      <table className="card-inner-table table" aria-label="Activity">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <tr>
+            <th className="text-start">Activity</th>
+            <th>Type</th>
+            <th>Name</th>
+            <th>User</th>
+            <th>Timestamp</th>
+            <th>Details</th>
+          </tr>
+        </thead>
+        <tbody>{tableData(history)}</tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -1,18 +1,39 @@
-import { Component } from 'react';
+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';
+import DJClientContext from '../../providers/djclient';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
 
-export default class NodeInfoTab extends Component {
-  nodeTags = this.props.node?.tags.map(tag => <div>{tag}</div>);
-  queryDiv = this.props.node?.query ? (
+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 () => {
+      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]);
+  function toggle(value) {
+    return !value;
+  }
+  const queryDiv = node?.query ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
         <div
@@ -21,15 +42,18 @@ export default class NodeInfoTab extends Component {
           }}
         >
           <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}>
-            {format(this.props.node?.query, {
-              language: 'spark',
-              tabWidth: 2,
-              keywordCase: 'upper',
-              denseOperators: true,
-              logicalOperatorNewline: 'before',
-              expressionWidth: 10,
-            })}
+            {checked ? compiledSQL : node?.query}
           </SyntaxHighlighter>
         </div>
       </div>
@@ -38,50 +62,141 @@ export default class NodeInfoTab extends Component {
     <></>
   );
 
-  render() {
-    return (
-      <div className="list-group align-items-center justify-content-between flex-md-row gap-2">
-        <ListGroupItem
-          label="Description"
-          value={this.props.node?.description}
-        />
-        <div className="list-group-item d-flex">
-          <div className="d-flex gap-2 w-100 justify-content-between py-3">
-            <div>
-              <h6 className="mb-0 w-100">Version</h6>
-
-              <p className="mb-0 opacity-75">
+  const cubeElementsDiv = node?.cube_elements ? (
+    <div className="list-group-item d-flex">
+      <div className="d-flex gap-2 w-100 justify-content-between py-3">
+        <div
+          style={{
+            width: window.innerWidth * 0.8,
+          }}
+        >
+          <h6 className="mb-0 w-100">Cube Elements</h6>
+          <div className={`list-group-item`}>
+            {node.cube_elements.map(cubeElem => (
+              <div
+                className="button-3 cube-element"
+                key={cubeElem.name}
+                role="cell"
+                aria-label="CubeElement"
+                aria-hidden="false"
+              >
+                <a href={`/nodes/${cubeElem.node_name}`}>
+                  {cubeElem.type === 'metric'
+                    ? cubeElem.node_name
+                    : cubeElem.name}
+                </a>
                 <span
-                  className="rounded-pill badge bg-secondary-soft"
-                  style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+                  className={`badge node_type__${
+                    cubeElem.type === 'metric' ? cubeElem.type : 'dimension'
+                  }`}
                 >
-                  {this.props.node?.version}
+                  {cubeElem.type === 'metric' ? cubeElem.type : 'dimension'}
                 </span>
-              </p>
-            </div>
-            <div>
-              <h6 className="mb-0 w-100">Status</h6>
-              <p className="mb-0 opacity-75">
-                <NodeStatus node={this.props.node} />
-              </p>
-            </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+  return (
+    <div className="list-group align-items-center justify-content-between flex-md-row gap-2">
+      <ListGroupItem label="Description" value={node?.description} />
+      <div className="list-group-item d-flex">
+        <div className="d-flex gap-2 w-100 justify-content-between py-3">
+          <div>
+            <h6 className="mb-0 w-100">Version</h6>
+
+            <p className="mb-0 opacity-75">
+              <span
+                className="rounded-pill badge bg-secondary-soft"
+                style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+                role="dialog"
+                aria-hidden="false"
+                aria-label="Version"
+              >
+                {node?.version}
+              </span>
+            </p>
+          </div>
+          {node.type === 'source' ? (
             <div>
-              <h6 className="mb-0 w-100">Mode</h6>
-              <p className="mb-0 opacity-75">
-                <span className="status">{this.props.node?.mode}</span>
+              <h6 className="mb-0 w-100">Table</h6>
+              <p
+                className="mb-0 opacity-75"
+                role="dialog"
+                aria-hidden="false"
+                aria-label="Table"
+              >
+                {node?.catalog.name}.{node?.schema_}.{node?.table}
               </p>
             </div>
-            <div>
-              <h6 className="mb-0 w-100">Tags</h6>
-              <p className="mb-0 opacity-75">{this.nodeTags}</p>
-            </div>
+          ) : (
+            <></>
+          )}
+          <div>
+            <h6 className="mb-0 w-100">Status</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="NodeStatus"
+            >
+              <NodeStatus node={node} />
+            </p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Mode</h6>
+            <p className="mb-0 opacity-75">
+              <span
+                className="status"
+                role="dialog"
+                aria-hidden="false"
+                aria-label="Mode"
+              >
+                {node?.mode}
+              </span>
+            </p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Tags</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="Tags"
+            >
+              {nodeTags}
+            </p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Primary Key</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="PrimaryKey"
+            >
+              {node?.primary_key?.join(', ')}
+            </p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Last Updated</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="UpdatedAt"
+            >
+              {new Date(node?.updated_at).toDateString()}
+            </p>
           </div>
-        </div>
-        {this.queryDiv}
-        <div className="list-group-item d-flex">
-          {this.props.node?.primary_key}
         </div>
       </div>
-    );
-  }
+      {node?.type !== 'cube' ? queryDiv : ''}
+      {cubeElementsDiv}
+    </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;