datajunction-ui 0.0.1-a1 → 0.0.1-a101

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

@@ -0,0 +1,60 @@
+/**
+ * Materialization configuration field.
+ */
+import React from 'react';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+
+export const ConfigField = ({ djClient, value }) => {
+  const formik = useFormikContext();
+  const jsonExt = langs.json();
+
+  const updateFormik = val => {
+    formik.setFieldValue('spark_config', JSON.parse(val));
+  };
+
+  return (
+    <div className="DescriptionInput">
+      <details>
+        <summary>
+          <label htmlFor="SparkConfig" style={{ display: 'inline-block' }}>
+            Spark Config
+          </label>
+        </summary>
+        <ErrorMessage name="spark_config" component="span" />
+        <Field
+          type="textarea"
+          style={{ display: 'none' }}
+          as="textarea"
+          name="spark_config"
+          id="SparkConfig"
+        />
+        <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+          <CodeMirror
+            id={'spark_config'}
+            name={'spark_config'}
+            extensions={[jsonExt]}
+            value={JSON.stringify(value, null, '    ')}
+            options={{
+              theme: 'default',
+              lineNumbers: true,
+            }}
+            width="100%"
+            height="170px"
+            style={{
+              margin: '0 0 23px 0',
+              flex: 1,
+              fontSize: '150%',
+              textAlign: 'left',
+            }}
+            onChange={(value, viewUpdate) => {
+              updateFormik(value);
+            }}
+          />
+        </div>
+      </details>{' '}
+      <></>
+    </div>
+  );
+};

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

@@ -1,18 +1,25 @@
 import { useEffect, useState } from 'react';
-import ClientCodePopover from './ClientCodePopover';
 import * as React from 'react';
 import EditColumnPopover from './EditColumnPopover';
+import EditColumnDescriptionPopover from './EditColumnDescriptionPopover';
 import LinkDimensionPopover from './LinkDimensionPopover';
 import { labelize } from '../../../utils/form';
 import PartitionColumnPopover from './PartitionColumnPopover';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { link } from 'fs';
 
 export default function NodeColumnTab({ node, djClient }) {
   const [attributes, setAttributes] = useState([]);
   const [dimensions, setDimensions] = useState([]);
   const [columns, setColumns] = useState([]);
+  const [links, setLinks] = useState([]);
+
   useEffect(() => {
     const fetchData = async () => {
-      setColumns(await djClient.columns(node));
+      if (node) {
+        setColumns(await djClient.columns(node));
+      }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
@@ -31,8 +38,11 @@ export default function NodeColumnTab({ node, djClient }) {
   useEffect(() => {
     const fetchData = async () => {
       const dimensions = await djClient.dimensions();
-      const options = dimensions.map(name => {
-        return { value: name, label: name };
+      const options = dimensions.map(dim => {
+        return {
+          value: dim.name,
+          label: `${dim.name} (${dim.indegree} links)`,
+        };
       });
       setDimensions(options);
     };
@@ -54,28 +64,16 @@ export default function NodeColumnTab({ node, djClient }) {
     if (col.partition) {
       return (
         <>
-          <span
-            className="node_type badge node_type__blank"
-            key={`col-attr-partition-type`}
-          >
-            <span
-              className="partition_value badge"
-              key={`col-attr-partition-type`}
-            >
+          <span className="node_type badge node_type__blank">
+            <span className="partition_value badge">
               <b>Type:</b> {col.partition.type_}
             </span>
             <br />
-            <span
-              className="partition_value badge"
-              key={`col-attr-partition-type`}
-            >
+            <span className="partition_value badge">
               <b>Format:</b> <code>{col.partition.format}</code>
             </span>
             <br />
-            <span
-              className="partition_value badge"
-              key={`col-attr-partition-type`}
-            >
+            <span className="partition_value badge">
               <b>Granularity:</b> <code>{col.partition.granularity}</code>
             </span>
           </span>
@@ -86,115 +84,187 @@ export default function NodeColumnTab({ node, djClient }) {
   };
 
   const columnList = columns => {
-    return columns.map(col => (
-      <tr key={col.name}>
-        <td
-          className="text-start"
-          role="columnheader"
-          aria-label="ColumnName"
-          aria-hidden="false"
-        >
-          {col.name}
-        </td>
-        <td>
-          <span
-            className=""
-            role="columnheader"
-            aria-label="ColumnDisplayName"
-            aria-hidden="false"
-          >
-            {col.display_name}
-          </span>
-        </td>
-        <td>
-          <span
-            className={`node_type__${
-              node.type === 'cube' ? col.type : 'transform'
-            } badge node_type`}
+    return columns?.map(col => {
+      const dimensionLinks = (links.length > 0 ? links : node?.dimension_links)
+        .map(link => [
+          link.dimension.name,
+          Object.entries(link.foreign_keys).filter(
+            entry => entry[0] === node.name + '.' + col.name,
+          ),
+        ])
+        .filter(keys => keys[1].length >= 1);
+      const referencedDimensionNode =
+        dimensionLinks.length > 0 ? dimensionLinks[0][0] : null;
+      return (
+        <tr key={col.name}>
+          <td
+            className="text-start"
             role="columnheader"
-            aria-label="ColumnType"
+            aria-label="ColumnName"
             aria-hidden="false"
           >
-            {col.type}
-          </span>
-        </td>
-        {node.type !== 'cube' ? (
+            {col.name}
+          </td>
           <td>
-            {col.dimension !== undefined && col.dimension !== null ? (
-              <>
-                <a href={`/nodes/${col.dimension.name}`}>
-                  {col.dimension.name}
-                </a>
-                <ClientCodePopover code={col.clientCode} />
-              </>
-            ) : (
-              ''
-            )}{' '}
-            <LinkDimensionPopover
-              column={col}
-              node={node}
-              options={dimensions}
-              onSubmit={async () => {
-                const res = await djClient.node(node.name);
-                setColumns(res.columns);
-              }}
-            />
+            <span
+              className=""
+              role="columnheader"
+              aria-label="ColumnDisplayName"
+              aria-hidden="false"
+            >
+              {col.display_name}
+            </span>
+          </td>
+          <td>
+            <span
+              className=""
+              role="columnheader"
+              aria-label="ColumnDescription"
+              aria-hidden="false"
+            >
+              {col.description || ''}
+              <EditColumnDescriptionPopover
+                column={col}
+                node={node}
+                onSubmit={async () => {
+                  const res = await djClient.node(node.name);
+                  setColumns(res.columns);
+                }}
+              />
+            </span>
           </td>
-        ) : (
-          ''
-        )}
-        {node.type !== 'cube' ? (
           <td>
-            {showColumnAttributes(col)}
-            <EditColumnPopover
+            <span
+              className={`node_type__${
+                node.type === 'cube' ? col.type : 'transform'
+              } badge node_type`}
+              role="columnheader"
+              aria-label="ColumnType"
+              aria-hidden="false"
+            >
+              {col.type}
+            </span>
+          </td>
+          {node.type !== 'cube' ? (
+            <td>
+              {dimensionLinks.length > 0
+                ? dimensionLinks.map(link => (
+                    <span
+                      className="rounded-pill badge bg-secondary-soft"
+                      style={{ fontSize: '14px' }}
+                      key={link[0]}
+                    >
+                      <a href={`/nodes/${link[0]}`}>{link[0]}</a>
+                    </span>
+                  ))
+                : ''}
+              <LinkDimensionPopover
+                column={col}
+                dimensionNodes={dimensionLinks.map(link => link[0])}
+                node={node}
+                options={dimensions}
+                onSubmit={async () => {
+                  const res = await djClient.node(node.name);
+                  setLinks(res.dimension_links);
+                }}
+              />
+            </td>
+          ) : (
+            ''
+          )}
+          {node.type !== 'cube' ? (
+            <td>
+              {showColumnAttributes(col)}
+              <EditColumnPopover
+                column={col}
+                node={node}
+                options={attributes}
+                onSubmit={async () => {
+                  const res = await djClient.node(node.name);
+                  setColumns(res.columns);
+                }}
+              />
+            </td>
+          ) : (
+            ''
+          )}
+          <td>
+            {showColumnPartition(col)}
+            <PartitionColumnPopover
               column={col}
               node={node}
-              options={attributes}
               onSubmit={async () => {
                 const res = await djClient.node(node.name);
                 setColumns(res.columns);
               }}
             />
           </td>
-        ) : (
-          ''
-        )}
-        <td>
-          {showColumnPartition(col)}
-          <PartitionColumnPopover
-            column={col}
-            node={node}
-            onSubmit={async () => {
-              const res = await djClient.node(node.name);
-              setColumns(res.columns);
-            }}
-          />
-        </td>
-      </tr>
-    ));
+        </tr>
+      );
+    });
   };
 
   return (
-    <div className="table-responsive">
-      <table className="card-inner-table table">
-        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <tr>
-            <th className="text-start">Column</th>
-            <th>Display Name</th>
-            <th>Type</th>
-            {node?.type !== 'cube' ? (
-              <>
-                <th>Linked Dimension</th>
-                <th>Attributes</th>
-              </>
-            ) : (
-              ''
-            )}
-            <th>Partition</th>
-          </tr>
-        </thead>
-        <tbody>{columnList(columns)}</tbody>
-      </table>
-    </div>
+    <>
+      <div className="table-responsive">
+        <table className="card-inner-table table">
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Column</th>
+              <th>Display Name</th>
+              <th>Description</th>
+              <th>Type</th>
+              {node?.type !== 'cube' ? (
+                <>
+                  <th>Linked Dimension</th>
+                  <th>Attributes</th>
+                </>
+              ) : (
+                ''
+              )}
+              <th>Partition</th>
+            </tr>
+          </thead>
+          <tbody>{columnList(columns)}</tbody>
+        </table>
+      </div>
+      <div>
+        <h3>Linked Dimensions (Custom Join SQL)</h3>
+        <table className="card-inner-table table">
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Dimension Node</th>
+              <th>Join Type</th>
+              <th>Join SQL</th>
+              <th>Role</th>
+            </tr>
+          </thead>
+          <tbody>
+            {node?.dimension_links.map(link => {
+              return (
+                <tr key={link.dimension.name}>
+                  <td>
+                    <a href={'/nodes/' + link.dimension.name}>
+                      {link.dimension.name}
+                    </a>
+                  </td>
+                  <td>{link.join_type.toUpperCase()}</td>
+                  <td style={{ width: '25rem', maxWidth: 'none' }}>
+                    <SyntaxHighlighter
+                      language="sql"
+                      style={foundation}
+                      wrapLongLines={true}
+                    >
+                      {link.join_sql}
+                    </SyntaxHighlighter>
+                  </td>
+                  <td>{link.role}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </>
   );
 }

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

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import { labelize } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function NodeDependenciesTab({ node, djClient }) {
+  const [nodeDAG, setNodeDAG] = useState({
+    upstreams: [],
+    downstreams: [],
+    dimensions: [],
+  });
+
+  const [retrieved, setRetrieved] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        let upstreams = await djClient.upstreams(node.name);
+        let downstreams = await djClient.downstreams(node.name);
+        let dimensions = await djClient.nodeDimensions(node.name);
+        setNodeDAG({
+          upstreams: upstreams,
+          downstreams: downstreams,
+          dimensions: dimensions,
+        });
+        setRetrieved(true);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  // Builds the block of dimensions selectors, grouped by node name + path
+  return (
+    <div>
+      <h2>Upstreams</h2>
+      {retrieved ? (
+        <NodeList nodes={nodeDAG.upstreams} />
+      ) : (
+        <span style={{ display: 'block' }}>
+          <LoadingIcon centered={false} />
+        </span>
+      )}
+      <h2>Downstreams</h2>
+      {retrieved ? (
+        <NodeList nodes={nodeDAG.downstreams} />
+      ) : (
+        <span style={{ display: 'block' }}>
+          <LoadingIcon centered={false} />
+        </span>
+      )}
+      <h2>Dimensions</h2>
+      {retrieved ? (
+        <NodeDimensionsList rawDimensions={nodeDAG.dimensions} />
+      ) : (
+        <span style={{ display: 'block' }}>
+          <LoadingIcon centered={false} />
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function NodeDimensionsList({ rawDimensions }) {
+  const dimensions = Object.entries(
+    rawDimensions.reduce((group, dimension) => {
+      group[dimension.node_name + dimension.path] =
+        group[dimension.node_name + dimension.path] ?? [];
+      group[dimension.node_name + dimension.path].push(dimension);
+      return group;
+    }, {}),
+  );
+  return (
+    <div style={{ padding: '0.5rem' }}>
+      {dimensions.map(grouping => {
+        const dimensionsInGroup = grouping[1];
+        const role = dimensionsInGroup[0].path
+          .map(pathItem => pathItem.split('.').slice(-1))
+          .join(' → ');
+        const fullPath = dimensionsInGroup[0].path.join(' → ');
+        const groupHeader = (
+          <span
+            style={{
+              fontWeight: 'normal',
+              marginBottom: '15px',
+              marginTop: '15px',
+            }}
+          >
+            <a href={`/nodes/${dimensionsInGroup[0].node_name}`}>
+              <b>{dimensionsInGroup[0].node_display_name}</b>
+            </a>{' '}
+            with role{' '}
+            <span className="HighlightPath">
+              <b>{role}</b>
+            </span>{' '}
+            via <span className="HighlightPath">{fullPath}</span>
+          </span>
+        );
+        const dimensionGroupOptions = dimensionsInGroup.map(dim => {
+          return {
+            value: dim.name,
+            label:
+              labelize(dim.name.split('.').slice(-1)[0]) +
+              (dim.properties.includes('primary_key') ? ' (PK)' : ''),
+          };
+        });
+        return (
+          <details key={grouping[0]}>
+            <summary style={{ marginBottom: '10px' }}>{groupHeader}</summary>
+            <div className="dimensionsList">
+              {dimensionGroupOptions.map(dimension => {
+                return (
+                  <div key={dimension.value}>
+                    {dimension.label.split('[').slice(0)[0]} ⇢{' '}
+                    <code className="DimensionAttribute">
+                      {dimension.value}
+                    </code>
+                  </div>
+                );
+              })}
+            </div>
+          </details>
+        );
+      })}
+    </div>
+  );
+}
+
+export function NodeList({ nodes }) {
+  return nodes && nodes.length > 0 ? (
+    <ul className="backfills">
+      {nodes?.map(node => (
+        <li
+          className="backfill"
+          style={{ marginBottom: '5px' }}
+          key={node.name}
+        >
+          <span
+            className={`node_type__${node.type} badge node_type`}
+            style={{ marginRight: '5px' }}
+            role="dialog"
+            aria-hidden="false"
+            aria-label="NodeType"
+          >
+            {node.type}
+          </span>
+          <a href={`/nodes/${node.name}`}>{node.name}</a>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <span style={{ display: 'block' }}>None</span>
+  );
+}

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

@@ -6,7 +6,7 @@ import 'reactflow/dist/style.css';
 import DJClientContext from '../../providers/djclient';
 import LayoutFlow from '../../components/djgraph/LayoutFlow';
 
-const NodeLineage = djNode => {
+const NodeGraphTab = djNode => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
   const createNode = node => {
@@ -15,9 +15,25 @@ const NodeLineage = djNode => {
         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 dimensionLinkForeignKeys = node.dimension_links
+      ? node.dimension_links.flatMap(link =>
+          Object.keys(link.foreign_keys).map(key => key.split('.').slice(-1)),
+        )
+      : [];
+    const column_names = node.columns
+      .map(col => {
+        return {
+          name: col.name,
+          type: col.type,
+          dimension: col.dimension !== null ? col.dimension.name : null,
+          order: primary_key.includes(col.name)
+            ? -1
+            : dimensionLinkForeignKeys.includes(col.name)
+            ? 0
+            : 1,
+        };
+      })
+      .sort((a, b) => a.order - b.order);
     return {
       id: String(node.name),
       type: 'DJNode',
@@ -38,28 +54,37 @@ const NodeLineage = djNode => {
   };
 
   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',
-          },
-        };
-      });
+    return node.dimension_links === undefined
+      ? []
+      : node.dimension_links.flatMap(link => {
+          return Object.keys(link.foreign_keys).map(fk => {
+            return {
+              id:
+                link.dimension.name +
+                '->' +
+                node.name +
+                '=' +
+                link.foreign_keys[fk] +
+                '->' +
+                fk,
+              source: link.dimension.name,
+              sourceHandle: link.foreign_keys[fk],
+              target: node.name,
+              targetHandle: fk,
+              draggable: true,
+              markerStart: {
+                type: MarkerType.Arrow,
+                width: 20,
+                height: 20,
+                color: '#b0b9c2',
+              },
+              style: {
+                strokeWidth: 3,
+                stroke: '#b0b9c2',
+              },
+            };
+          });
+        });
   };
 
   const parentEdges = node => {
@@ -85,8 +110,10 @@ const NodeLineage = djNode => {
   };
 
   const dagFetch = async (getLayoutedElements, setNodes, setEdges) => {
-    let related_nodes = await djClient.node_dag(djNode.djNode.name);
-    var djNodes = [djNode.djNode];
+    let related_nodes = djNode.djNode
+      ? await djClient.node_dag(djNode.djNode.name)
+      : [];
+    var djNodes = djNode.djNode ? [djNode.djNode] : [];
     for (const iterable of [related_nodes]) {
       for (const item of iterable) {
         if (item.type !== 'cube') {
@@ -109,4 +136,4 @@ const NodeLineage = djNode => {
   };
   return LayoutFlow(djNode, dagFetch);
 };
-export default NodeLineage;
+export default NodeGraphTab;