datajunction-ui 0.0.1-a1

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

@@ -0,0 +1,112 @@
+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 NodeLineage = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  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 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',
+          },
+        };
+      });
+  };
+
+  const parentEdges = node => {
+    return node.parents
+      .filter(parent => parent.name)
+      .map(parent => {
+        return {
+          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',
+          },
+        };
+      });
+  };
+
+  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

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

@@ -0,0 +1,212 @@
+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 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 function NodeInfoTab({ node }) {
+  const [compiledSQL, setCompiledSQL] = useState('');
+  const [checked, setChecked] = useState(false);
+  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]);
+  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
+          style={{
+            width: window.innerWidth * 0.8,
+          }}
+        >
+          <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}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+
+  const displayCubeElement = cubeElem => {
+    return (
+      <div
+        className="button-3 cube-element"
+        key={cubeElem.name}
+        role="cell"
+        aria-label="CubeElement"
+        aria-hidden="false"
+      >
+        <a href={`/nodes/${cubeElem.node_name}`}>{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 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 =>
+              cubeElem.type === 'metric' ? displayCubeElement(cubeElem) : '',
+            )}
+            {node.cube_elements.map(cubeElem =>
+              cubeElem.type !== 'metric' ? displayCubeElement(cubeElem) : '',
+            )}
+          </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">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">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>
+      </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;