datajunction-ui 0.0.1-rc.9 → 0.0.2-3.dev1

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

@@ -1,18 +1,155 @@
-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';
+import { labelize } from '../../../utils/form';
 
 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 ? (
+// interface MetricInfo {
+//   name: string;
+//   current: MetricRevision;
+// }
+
+// interface MetricRevision {
+//   parents: array<string>;
+//   metricMetadata:
+// }
+
+// interface MetricMetadata {
+//   direction: string;
+//   unit: string;
+//   expression: string;
+//   significantDigits: string;
+//   incompatibleDruidFunctions: array<string>;
+// }
+
+export default function NodeInfoTab({ node }) {
+  const [compiledSQL, setCompiledSQL] = useState('');
+  const [checked, setChecked] = useState(false);
+
+  // For metrics
+  const [metricInfo, setMetricInfo] = useState(null);
+
+  const nodeTags = node?.tags.map(tag => (
+    <div className={'badge tag_value'}>
+      <a href={`/tags/${tag.name}`}>{tag.display_name}</a>
+    </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]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const metric = await djClient.getMetric(node.name);
+      setMetricInfo({
+        metric_metadata: metric.current.metricMetadata,
+        required_dimensions: metric.current.requiredDimensions,
+        upstream_node: metric.current.parents[0]?.name,
+        expression: metric.current.metricMetadata?.expression,
+        incompatible_druid_functions:
+          metric.current.metricMetadata?.incompatibleDruidFunctions || [],
+      });
+    };
+    if (node.type === 'metric') {
+      fetchData().catch(console.error);
+    }
+  }, [node, djClient]);
+
+  // For cubes
+  const [cubeElements, setCubeElements] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const cube = await djClient.cube(node.name);
+      setCubeElements(cube.cube_elements);
+    };
+    if (node.type === 'cube') {
+      fetchData().catch(console.error);
+    }
+  }, [node, djClient]);
+
+  function toggle(value) {
+    return !value;
+  }
+  const metricsWarning =
+    node?.type === 'metric' &&
+    metricInfo?.incompatible_druid_functions?.length > 0 ? (
+      <div className="message warning" style={{ marginTop: '0.7rem' }}>
+        ⚠{' '}
+        <small>
+          The following functions used in the metric definition may not be
+          compatible with Druid SQL:{' '}
+          {metricInfo?.incompatible_druid_functions.map(func => (
+            <li
+              style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}
+              key={func}
+            >
+              ⇢{' '}
+              <span style={{ background: '#fff', padding: '0.3rem' }}>
+                {func}
+              </span>
+            </li>
+          ))}
+          If you need your metrics to be compatible with Druid, please use{' '}
+          <a
+            href={
+              'https://druid.apache.org/docs/latest/querying/sql-functions/'
+            }
+          >
+            these supported functions
+          </a>
+          .
+        </small>
+      </div>
+    ) : (
+      ''
+    );
+
+  const metricQueryDiv =
+    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>
+          <div>
+            <h6 className="mb-0 w-100">Aggregate Expression</h6>
+            <SyntaxHighlighter language="sql" style={foundation}>
+              {metricInfo?.expression}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </div>
+    ) : (
+      ''
+    );
+  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 +158,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 +178,265 @@ export default class NodeInfoTab extends Component {
     <></>
   );
 
-  render() {
+  const displayCubeElement = cubeElem => {
     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>
+      <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 === 'dimension'
+            ? labelize(cubeElem.node_name.split('.').slice(-1)[0]) + ' → '
+            : ''}
+          {cubeElem.display_name}
+        </a>
+        <span
+          className={`badge node_type__${
+            cubeElem.type === 'metric' ? cubeElem.type : 'dimension'
+          }`}
+          style={{ fontSize: '100%', textTransform: 'capitalize' }}
+        >
+          {cubeElem.type === 'metric' ? cubeElem.type : 'dimension'}
+        </span>
+      </div>
+    );
+  };
+
+  const metricMetadataDiv =
+    node?.type === 'metric' ? (
+      <div className="list-group-item d-flex">
+        <div className="d-flex gap-2 w-100 py-3">
+          <div>
+            <h6 className="mb-0 w-100">Direction</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="MetricDirection"
+            >
+              {metricInfo?.metric_metadata?.direction
+                ? labelize(
+                    metricInfo?.metric_metadata?.direction?.toLowerCase(),
+                  )
+                : 'None'}
+            </p>
+          </div>
+          <div style={{ marginRight: '2rem' }}>
+            <h6 className="mb-0 w-100">Unit</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="MetricUnit"
+            >
+              {metricInfo?.metric_metadata?.unit?.name
+                ? labelize(
+                    metricInfo?.metric_metadata?.unit?.name?.toLowerCase(),
+                  )
+                : 'None'}
+            </p>
+          </div>
+          <div style={{ marginRight: '2rem' }}>
+            <h6 className="mb-0 w-100">Significant Digits</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="SignificantDigits"
+            >
+              {metricInfo?.metric_metadata?.significantDigits || 'None'}
+            </p>
+          </div>
+        </div>
+      </div>
+    ) : (
+      ''
+    );
+
+  const customMetadataDiv =
+    node?.custom_metadata && Object.keys(node.custom_metadata).length > 0 ? (
+      <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">Custom Metadata</h6>
+            <SyntaxHighlighter language="json" style={foundation}>
+              {JSON.stringify(node.custom_metadata, null, 2)}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </div>
+    ) : (
+      ''
+    );
 
-              <p className="mb-0 opacity-75">
+  const cubeElementsDiv = cubeElements ? (
+    <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`}>
+            {cubeElements.map(cubeElem =>
+              cubeElem.type === 'metric' ? displayCubeElement(cubeElem) : '',
+            )}
+            {cubeElements.map(cubeElem =>
+              cubeElem.type !== 'metric' ? displayCubeElement(cubeElem) : '',
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+
+  const primaryKeyOrRequiredDims = (
+    <div style={{ maxWidth: '25%' }}>
+      <h6 className="mb-0 w-100">
+        {node?.type !== 'metric' ? 'Primary Key' : 'Required Dimensions'}
+      </h6>
+      <p
+        className="mb-0 opacity-75"
+        role="dialog"
+        aria-hidden="false"
+        aria-label={
+          node?.type !== 'metric' ? 'PrimaryKey' : 'RequiredDimensions'
+        }
+      >
+        {node?.type !== 'metric'
+          ? node?.primary_key?.map(dim => (
+              <span className="rounded-pill badge bg-secondary-soft PrimaryKey">
+                <a href={`/nodes/${node?.name}`}>{dim}</a>
+              </span>
+            ))
+          : node?.required_dimensions?.map(dim => (
+              <span className="rounded-pill badge bg-secondary-soft PrimaryKey">
+                <a href={`/nodes/${node?.upstream_node}`}>{dim.name}</a>
+              </span>
+            ))}
+      </p>
+    </div>
+  );
+  return (
+    <div
+      className="list-group align-items-center justify-content-between flex-md-row gap-2"
+      style={{ minWidth: '700px' }}
+    >
+      {node?.type === 'metric' ? metricsWarning : ''}
+      <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">Owners</h6>
+            <p className="mb-0 opacity-75">
+              {node?.owners.map(owner => (
                 <span
-                  className="rounded-pill badge bg-secondary-soft"
-                  style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+                  className="badge node_type__transform"
+                  style={{ margin: '2px', fontSize: '16px', cursor: 'pointer' }}
                 >
-                  {this.props.node?.version}
+                  {owner.username}
                 </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>
+              ))}
+            </p>
+          </div>
+        </div>
+      </div>
+      <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>
+          {primaryKeyOrRequiredDims}
+          <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>
-    );
-  }
+      {metricMetadataDiv}
+      {node.type !== 'cube' && node.type !== 'metric' ? queryDiv : ''}
+      {node.type === 'metric' ? metricQueryDiv : ''}
+      {customMetadataDiv}
+      {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;