datajunction-ui 0.0.1-rc.8 → 0.0.2

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

@@ -1,44 +1,270 @@
-import { Component } from 'react';
-
-export default class NodeColumnTab extends Component {
-  columnList = node => {
-    return node.columns.map(col => (
-      <tr>
-        <td className="text-start">{col.name}</td>
-        <td>
-          <span className="node_type__transform badge node_type">
-            {col.type}
+import { useEffect, useState } from 'react';
+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 () => {
+      if (node) {
+        setColumns(await djClient.columns(node));
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const attributes = await djClient.attributes();
+      const options = attributes.map(attr => {
+        return { value: attr.name, label: labelize(attr.name) };
+      });
+      setAttributes(options);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const dimensions = await djClient.dimensions();
+      const options = dimensions.map(dim => {
+        return {
+          value: dim.name,
+          label: `${dim.name} (${dim.indegree} links)`,
+        };
+      });
+      setDimensions(options);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  const showColumnAttributes = col => {
+    return col.attributes.map((attr, idx) => (
+      <span
+        className="node_type__dimension badge node_type"
+        key={`col-attr-${col.name}-${idx}`}
+      >
+        {attr.attribute_type.name.replace(/_/, ' ')}
+      </span>
+    ));
+  };
+
+  const showColumnPartition = col => {
+    if (col.partition) {
+      return (
+        <>
+          <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">
+              <b>Format:</b> <code>{col.partition.format}</code>
+            </span>
+            <br />
+            <span className="partition_value badge">
+              <b>Granularity:</b> <code>{col.partition.granularity}</code>
+            </span>
           </span>
-        </td>
-        <td>{col.dimension ? col.dimension.name : ''}</td>
-        <td>
-          {col.attributes.find(
-            attr => attr.attribute_type.name === 'dimension',
-          ) ? (
-            <span className="node_type__dimension badge node_type">
-              dimensional
+        </>
+      );
+    }
+    return '';
+  };
+
+  const columnList = columns => {
+    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="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=""
+              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>
+          <td>
+            <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>
           ) : (
             ''
           )}
-        </td>
-      </tr>
-    ));
+          {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}
+              onSubmit={async () => {
+                const res = await djClient.node(node.name);
+                setColumns(res.columns);
+              }}
+            />
+          </td>
+        </tr>
+      );
+    });
   };
 
-  render() {
-    return (
+  return (
+    <>
       <div className="table-responsive">
         <table className="card-inner-table table">
           <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-            <th className="text-start">Column</th>
-            <th>Type</th>
-            <th>Dimension</th>
-            <th>Attributes</th>
+            <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>
-          {this.columnList(this.props.node)}
+          <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>
+  );
+}