datajunction-ui 0.0.1-a44.dev0 → 0.0.1-a44.dev1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a44.dev0",
+  "version": "0.0.1-a44.dev1",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -8,6 +8,7 @@ import { displayMessageAfterSubmit } from '../../../utils/form';
 
 export default function LinkDimensionPopover({
   column,
+  referencedDimensionNode,
   node,
   options,
   onSubmit,
@@ -28,15 +29,15 @@ export default function LinkDimensionPopover({
     };
   }, [setPopoverAnchor]);
 
-  const columnDimension = column.dimension;
+  const columnDimension = referencedDimensionNode;
 
   const handleSubmit = async (
     { node, column, dimension },
     { setSubmitting, setStatus },
   ) => {
     setSubmitting(false);
-    if (columnDimension?.name && dimension === 'Remove') {
-      await unlinkDimension(node, column, columnDimension?.name, setStatus);
+    if (referencedDimensionNode && dimension === 'Remove') {
+      await unlinkDimension(node, column, referencedDimensionNode, setStatus);
     } else {
       await linkDimension(node, column, dimension, setStatus);
     }
@@ -93,7 +94,7 @@ export default function LinkDimensionPopover({
             column: column.name,
             node: node.name,
             dimension: '',
-            currentDimension: column.dimension?.name,
+            currentDimension: referencedDimensionNode,
           }}
           onSubmit={handleSubmit}
         >
@@ -110,10 +111,10 @@ export default function LinkDimensionPopover({
                     placeholder="Select dimension to link"
                     className=""
                     defaultValue={
-                      column.dimension
+                      referencedDimensionNode
                         ? {
-                            value: column.dimension.name,
-                            label: column.dimension.name,
+                            value: referencedDimensionNode,
+                            label: referencedDimensionNode,
                           }
                         : ''
                     }

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

@@ -12,6 +12,8 @@ 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));
@@ -88,92 +90,103 @@ 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={`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' ? (
+          {node.type !== 'cube' ? (
+            <td>
+              {referencedDimensionNode !== null ? (
+                <a href={`/nodes/${referencedDimensionNode}`}>
+                  {referencedDimensionNode}
+                </a>
+              ) : (
+                ''
+              )}
+              <LinkDimensionPopover
+                column={col}
+                referencedDimensionNode={referencedDimensionNode}
+                node={node}
+                options={dimensions}
+                onSubmit={async () => {
+                  const res = await djClient.node(node.name);
+                  setColumns(res.columns);
+                  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>
-            {showColumnAttributes(col)}
-            <EditColumnPopover
+            {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 (

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

@@ -42,6 +42,7 @@ describe('<LinkDimensionPopover />', () => {
       <DJClientContext.Provider value={mockDjClient}>
         <LinkDimensionPopover
           column={column}
+          referencedDimensionNode={'default.dimension1'}
           node={node}
           options={options}
           onSubmit={onSubmitMock}
@@ -94,7 +95,6 @@ describe('<LinkDimensionPopover />', () => {
     };
     const node = { name: 'default.node1' };
     const options = [
-      { value: 'Remove', label: '[Remove dimension link]' },
       { value: 'default.dimension1', label: 'Dimension 1' },
       { value: 'default.dimension2', label: 'Dimension 2' },
     ];
@@ -117,6 +117,7 @@ describe('<LinkDimensionPopover />', () => {
       <DJClientContext.Provider value={mockDjClient}>
         <LinkDimensionPopover
           column={column}
+          referencedDimensionNode={'default.dimension1'}
           node={node}
           options={options}
           onSubmit={onSubmitMock}
@@ -148,7 +149,7 @@ describe('<LinkDimensionPopover />', () => {
 
     // Click on the 'Remove' option and save
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
-    fireEvent.click(screen.getByText('[Remove dimension link]'));
+    fireEvent.click(screen.getByText('[Remove Dimension]'));
     fireEvent.click(getByText('Save'));
     getByText('Save').click();
 

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

@@ -98,6 +98,10 @@ describe('<NodeColumnTab />', () => {
           'default.contractor.contractor_id = default.repair_orders.contractor_id',
         join_cardinality: 'one_to_one',
         role: 'contractor',
+        foreign_keys: {
+          'default.repair_orders.contractor_id':
+            'default.contractor.contractor_id',
+        },
       },
     ],
   };

package/src/app/pages/Root/index.tsx

@@ -24,11 +24,19 @@ export function Root() {
       <div className="container d-flex align-items-center justify-content-between">
         <div className="header">
           <div className="logo">
-            <a href={'/'} style={{textTransform: 'none', textDecoration: 'none', color: '#000'}}>
+            <a
+              href={'/'}
+              style={{
+                textTransform: 'none',
+                textDecoration: 'none',
+                color: '#000',
+              }}
+            >
               <h2>
-              <DJLogo />
-              Data<b>Junction</b>
-            </h2></a>
+                <DJLogo />
+                Data<b>Junction</b>
+              </h2>
+            </a>
           </div>
           <Search />
           <div className="menu">