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

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

@@ -0,0 +1,135 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function LinkDimensionPopover({
+  column,
+  node,
+  options,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const columnDimension = column.dimension;
+
+  const handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    console.log('dimension', dimension, 'columnDimension', columnDimension);
+    if (columnDimension?.name && dimension === 'Remove') {
+      await unlinkDimension(node, column, columnDimension?.name, setStatus);
+    } else {
+      await linkDimension(node, column, dimension, setStatus);
+    }
+    onSubmit();
+  };
+
+  const linkDimension = async (node, column, dimension, setStatus) => {
+    const response = await djClient.linkDimension(node, column, dimension);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const unlinkDimension = async (node, column, currentDimension, setStatus) => {
+    const response = await djClient.unlinkDimension(
+      node,
+      column,
+      currentDimension,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Removed dimension link!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="LinkDimension"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            dimension: '',
+            currentDimension: column.dimension?.name,
+          }}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <FormikSelect
+                    selectOptions={[
+                      { value: 'Remove', label: '[Remove Dimension]' },
+                    ].concat(options)}
+                    formikFieldName="dimension"
+                    placeholder="Select dimension to link"
+                    className=""
+                    defaultValue={
+                      column.dimension
+                        ? {
+                            value: column.dimension.name,
+                            label: column.dimension.name,
+                          }
+                        : ''
+                    }
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveLinkDimension"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -5,10 +5,12 @@
 import * as React from 'react';
 import { lazyLoad } from '../../../utils/loadable';
 
-export const NodePage = lazyLoad(
-  () => import('./index'),
-  module => module.NodePage,
-  {
-    fallback: <div></div>,
-  },
-);
+export const NodePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.NodePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

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

@@ -1,44 +1,123 @@
-import { Component } from 'react';
+import { useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
+import * as React from 'react';
+import EditColumnPopover from './EditColumnPopover';
+import LinkDimensionPopover from './LinkDimensionPopover';
+import { labelize } from '../../../utils/form';
 
-export default class NodeColumnTab extends Component {
-  columnList = node => {
-    return node.columns.map(col => (
-      <tr>
-        <td className="text-start">{col.name}</td>
+export default function NodeColumnTab({ node, djClient }) {
+  const [attributes, setAttributes] = useState([]);
+  const [dimensions, setDimensions] = useState([]);
+  const [columns, setColumns] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      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(name => {
+        return { value: name, label: name };
+      });
+      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 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="node_type__transform badge node_type">
+          <span
+            className="node_type__transform badge node_type"
+            role="columnheader"
+            aria-label="ColumnType"
+            aria-hidden="false"
+          >
             {col.type}
           </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
-            </span>
+          {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);
+            }}
+          />
+        </td>
+        <td>
+          {showColumnAttributes(col)}
+          <EditColumnPopover
+            column={col}
+            node={node}
+            options={attributes}
+            onSubmit={async () => {
+              const res = await djClient.node(node.name);
+              setColumns(res.columns);
+            }}
+          />
         </td>
       </tr>
     ));
   };
 
-  render() {
-    return (
-      <div className="table-responsive">
-        <table className="card-inner-table table">
-          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+  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>Type</th>
-            <th>Dimension</th>
+            <th>Linked Dimension</th>
             <th>Attributes</th>
-          </thead>
-          {this.columnList(this.props.node)}
-        </table>
-      </div>
-    );
-  }
+          </tr>
+        </thead>
+        <tbody>{columnList(columns)}</tbody>
+      </table>
+    </div>
+  );
 }

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

@@ -1,166 +1,112 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import ReactFlow, {
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  useNodesState,
-  useEdgesState,
-  MarkerType,
-} from 'reactflow';
+import { useContext } from 'react';
+import { MarkerType } from 'reactflow';
 
 import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
-import DJNode from '../../components/djgraph/DJNode';
-import { DataJunctionAPI } from '../../services/DJService';
-import dagre from 'dagre';
+import DJClientContext from '../../providers/djclient';
+import LayoutFlow from '../../components/djgraph/LayoutFlow';
 
 const NodeLineage = djNode => {
-  const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
 
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-
-  const minimapStyle = {
-    height: 100,
-    width: 150,
-  };
-  const dagreGraph = new dagre.graphlib.Graph();
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-
-  const setElementsLayout = (
-    nodes,
-    edges,
-    direction = 'LR',
-    nodeWidth = 800,
-    nodeHeight = 150,
-  ) => {
-    const isHorizontal = direction === 'TB';
-    dagreGraph.setGraph({ rankdir: direction });
-
-    nodes.forEach(node => {
-      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  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 };
     });
-
-    edges.forEach(edge => {
-      dagreGraph.setEdge(edge.source, edge.target);
-    });
-
-    dagre.layout(dagreGraph);
-
-    nodes.forEach(node => {
-      const nodeWithPosition = dagreGraph.node(node.id);
-      node.targetPosition = isHorizontal ? 'left' : 'top';
-      node.sourcePosition = isHorizontal ? 'right' : 'bottom';
-      node.position = {
-        x: nodeWithPosition.x - nodeWidth / 2,
-        y: nodeWithPosition.y - nodeHeight / 2,
-      };
-      return node;
-    });
-
-    return { nodes, edges };
+    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,
+      },
+    };
   };
 
-  useEffect(() => {
-    const dagFetch = async () => {
-      let upstreams = await DataJunctionAPI.upstreams(djNode.djNode.name);
-      let downstreams = await DataJunctionAPI.downstreams(djNode.djNode.name);
-      var djNodes = [djNode.djNode];
-      for (const iterable of [upstreams, downstreams]) {
-        for (const item of iterable) {
-          djNodes.push(item);
-        }
-      }
-      let edges = [];
-      djNodes.forEach(obj => {
-        obj.parents.forEach(parent => {
-          if (parent.name) {
-            edges.push({
-              id: obj.name + '-' + parent.name,
-              target: obj.name,
-              source: parent.name,
-              animated: true,
-              markerEnd: {
-                type: MarkerType.Arrow,
-              },
-            });
-          }
-        });
-
-        obj.columns.forEach(col => {
-          if (col.dimension) {
-            edges.push({
-              id: obj.name + '-' + col.dimension.name,
-              target: obj.name,
-              source: col.dimension.name,
-              draggable: true,
-            });
-          }
-        });
-      });
-      const nodes = djNodes.map(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 };
-        });
+  const dimensionEdges = node => {
+    return node.columns
+      .filter(col => col.dimension)
+      .map(col => {
         return {
-          id: String(node.name),
-          type: 'DJNode',
-          data: {
-            label:
-              node.table !== null
-                ? String(node.schema_ + '.' + node.table)
-                : String(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,
-            // dimensions: dimensions,
+          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',
           },
-          // parentNode: [node.name.split(".").slice(-2, -1)],
-          // extent: 'parent',
         };
       });
-      console.log(djNodes);
-      setNodes(nodes);
-      setEdges(edges);
-      setElementsLayout(nodes, edges);
-    };
+  };
 
-    dagFetch();
-  }, []);
+  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 onConnect = useCallback(
-    params => setEdges(eds => addEdge(params, eds)),
-    [],
-  );
+  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));
 
-  return (
-    <div style={{ height: '600px' }}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        snapToGrid={true}
-        fitView
-      >
-        <MiniMap style={minimapStyle} zoomable pannable />
-        <Controls />
-        <Background color="#aaa" gap={16} />
-      </ReactFlow>
-    </div>
-  );
+    // 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;