datajunction-ui 0.0.1-a86 → 0.0.1-a86.dev1

package/package.json

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

package/src/app/icons/LoadingIcon.jsx

@@ -1,14 +1,14 @@
 import '../../styles/loading.css';
 
-export default function LoadingIcon() {
-  return (
-    <center>
-      <div className="lds-ring">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </center>
+export default function LoadingIcon({ centered = true }) {
+  const content = (
+    <div className="lds-ring">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
   );
+
+  return centered ? <center>{content}</center> : content;
 }

package/src/app/icons/WrenchIcon.jsx

@@ -0,0 +1,36 @@
+const WrenchIcon = props => (
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_24_77)">
+      <rect
+        width="16"
+        height="16"
+        transform="translate(0 0.649803)"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.41665 5.44985C6.41665 2.8265 8.5433 0.699852 11.1667 0.699852C11.4613 0.699852 11.7504 0.726773 12.0313 0.778484C12.5762 0.878798 12.9364 1.28101 13.0406 1.74377C13.1406 2.18774 13.0066 2.67055 12.6619 3.01531L11.2273 4.44985L12.1667 5.38919L13.6012 3.95465C13.946 3.60989 14.4288 3.47589 14.8728 3.57591C15.3355 3.68017 15.7377 4.04033 15.838 4.58525C15.8898 4.86615 15.9167 5.15519 15.9167 5.44985C15.9167 8.0732 13.79 10.1999 11.1667 10.1999C10.658 10.1999 10.167 10.1196 9.70625 9.97091L3.50172 16.1754C2.94847 16.7287 2.05149 16.7287 1.49825 16.1754L0.441055 15.1183C-0.112189 14.565 -0.112186 13.668 0.441056 13.1148L6.64559 6.91025C6.49685 6.44951 6.41665 5.9585 6.41665 5.44985ZM11.1667 2.19985C9.37172 2.19985 7.91665 3.65492 7.91665 5.44985C7.91665 5.92812 8.01948 6.38034 8.20352 6.7873L8.41725 7.25991L8.05048 7.62667L1.56064 14.1165L2.49998 15.0559L8.98982 8.56601L9.35659 8.19925L9.8292 8.41298C10.2362 8.59702 10.6884 8.69985 11.1667 8.69985C12.9616 8.69985 14.4167 7.24477 14.4167 5.44985C14.4167 5.38796 14.415 5.32654 14.4116 5.26562L12.697 6.98018L12.1667 7.51051L11.6363 6.98018L9.63632 4.98018L9.10599 4.44985L9.63632 3.91952L11.3509 2.20496C11.29 2.20157 11.2286 2.19985 11.1667 2.19985Z"
+        fill="black"
+        fill-opacity="0.9"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_24_77">
+        <rect
+          width="16"
+          height="16"
+          fill="white"
+          transform="translate(0 0.649803)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default WrenchIcon;

package/src/app/pages/AddEditNodePage/{PrimaryKeySelect.jsx → ColumnMetadata.jsx}

@@ -1,12 +1,12 @@
 /**
- * Primary key select component
+ * Component for arbitrary column metadata
  */
 import { ErrorMessage, useFormikContext } from 'formik';
 import { useContext, useMemo, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
 import { FormikSelect } from './FormikSelect';
 
-export const PrimaryKeySelect = ({ defaultValue }) => {
+export const ColumnMetadata = ({ name, label, defaultValue }) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
   // Used to pull out current form values for node validation
@@ -20,8 +20,7 @@ export const PrimaryKeySelect = ({ defaultValue }) => {
     }
   }, [availableColumns]);
 
-  // When focus is on the primary key field, refresh the list of available
-  // primary key columns for selection
+  // When focus is on the input field, refresh the list of available columns for selection
   const refreshColumns = event => {
     async function fetchData() {
       // eslint-disable-next-line no-unused-vars
@@ -42,18 +41,19 @@ export const PrimaryKeySelect = ({ defaultValue }) => {
   };
 
   return (
-    <div className="CubeCreationInput">
-      <ErrorMessage name="primary_key" component="span" />
-      <label htmlFor="react-select-3-input">Primary Key</label>
-      <span data-testid="select-primary-key">
+    <div className="NodeCreationInput" style={{ width: '25%' }}>
+      <ErrorMessage name={name} component="span" />
+      <label htmlFor="react-select-3-input">{label}</label>
+      <span data-testid={`select-${name}`}>
         <FormikSelect
-          className="MultiSelectInput"
+          className="SelectInput"
+          style={{ width: '100px' }}
           defaultValue={defaultValue}
           selectOptions={selectableOptions}
-          formikFieldName="primary_key"
-          placeholder="Choose Primary Key"
+          formikFieldName={name}
+          //   placeholder={`Choose ${label}`}
           onFocus={event => refreshColumns(event)}
-          isMulti={true}
+          isMulti={false}
         />
       </span>
     </div>

package/src/app/pages/AddEditNodePage/ColumnsMetadataInput.jsx

@@ -0,0 +1,72 @@
+/**
+ * Column metadata configuration component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+import WrenchIcon from 'app/icons/WrenchIcon';
+
+export const ColumnsMetadataInput = ({ columns }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // When focus is on the primary key field, refresh the list of available
+  // primary key columns for selection
+  useEffect(() => {
+    const fetchData = async () => {
+      // eslint-disable-next-line no-unused-vars
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      setAvailableColumns(
+        json.columns.map(col => {
+          return { value: col.name, label: col.name };
+        }),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div
+      className="ColumnsMetadataInput NodeCreationInput"
+      style={{ border: 'dashed 1px #ccc', padding: '20px' }}
+    >
+      <ErrorMessage name="mode" component="span" />
+      <label htmlFor="Mode">Columns Metadata</label>
+      <table>
+        <thead>
+          <tr>
+            <th>Column</th>
+            <th>Metadata</th>
+          </tr>
+        </thead>
+        <tbody>
+          {availableColumns.map(col => (
+            <tr key={col.value}>
+              <td>{col.value}</td>
+              <td>
+                <WrenchIcon />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/app/pages/AddEditNodePage/ColumnsSelect.jsx

@@ -0,0 +1,67 @@
+/**
+ * Component for selecting node columns based on the current form state
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import { useContext, useMemo, useState, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+
+export const ColumnsSelect = ({ defaultValue, fieldName, label, isMulti = false }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // The available columns, determined from validating the node query
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const selectableOptions = useMemo(() => {
+    if (availableColumns && availableColumns.length > 0) {
+      return availableColumns;
+    }
+  }, [availableColumns]);
+
+  // Fetch columns by validating the latest node query
+  const fetchColumns = async () => {
+    try {
+      const { status, json } = await djClient.validateNode(
+        values.type,
+        values.name,
+        values.display_name,
+        values.description,
+        values.query,
+      );
+      if (json?.columns) {
+        setAvailableColumns(
+          json.columns.map(col => ({ value: col.name, label: col.name }))
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching columns:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchColumns();
+  }, [values.type, values.name, values.query]);
+
+  return selectableOptions === undefined ? '' : (
+    <div className="CubeCreationInput">
+      <ErrorMessage name={fieldName} component="span" />
+      <label htmlFor="react-select-3-input">{label}</label>
+      <span data-testid={`select-${fieldName}`}>
+        <FormikSelect
+          className={isMulti ? "MultiSelectInput" : "SelectInput"}
+          defaultValue={isMulti ? defaultValue.map(val => {return {
+            value: val,
+            label: val,
+          }}) : {value: defaultValue,
+            label: defaultValue,}}
+          selectOptions={selectableOptions}
+          formikFieldName={fieldName}
+          onFocus={event => fetchColumns(event)}
+          isMulti={isMulti}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -2,10 +2,9 @@
  * Asynchronously loads the component for the Node page
  */
 
-import * as React from 'react';
 import { lazyLoad } from '../../../utils/loadable';
 
-export const AddEditNodePage = () => {
+export const LazyAddEditNodePage = () => {
   return lazyLoad(
     () => import('./index'),
     module => module.AddEditNodePage,
@@ -14,3 +13,7 @@ export const AddEditNodePage = () => {
     },
   )();
 };
+
+export const AddEditNodePage = (props) => {
+  return <LazyAddEditNodePage {...props} />;
+};

package/src/app/pages/AddEditNodePage/index.jsx

@@ -3,8 +3,7 @@
  * node types is largely the same, with minor differences handled server-side. For the `query`
  * field, this page will render a CodeMirror SQL editor with autocompletion and syntax highlighting.
  */
-import { ErrorMessage, Field, Form, Formik } from 'formik';
-
+import { ErrorMessage, Form, Formik } from 'formik';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
@@ -13,7 +12,6 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { FullNameField } from './FullNameField';
 import { MetricQueryField } from './MetricQueryField';
 import { displayMessageAfterSubmit } from '../../../utils/form';
-import { PrimaryKeySelect } from './PrimaryKeySelect';
 import { NodeQueryField } from './NodeQueryField';
 import { MetricMetadataFields } from './MetricMetadataFields';
 import { UpstreamNodeField } from './UpstreamNodeField';
@@ -25,6 +23,7 @@ import { DescriptionField } from './DescriptionField';
 import { NodeModeField } from './NodeModeField';
 import { RequiredDimensionsSelect } from './RequiredDimensionsSelect';
 import LoadingIcon from '../../icons/LoadingIcon';
+import { ColumnsSelect } from './ColumnsSelect';
 
 class Action {
   static Add = new Action('add');
@@ -35,7 +34,7 @@ class Action {
   }
 }
 
-export function AddEditNodePage() {
+export function AddEditNodePage({ extensions = {} }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   const navigate = useNavigate();
 
@@ -77,6 +76,7 @@ export function AddEditNodePage() {
       });
     }
   };
+  const submitHandlers = [handleSubmit];
 
   const pageTitle =
     action === Action.Add ? (
@@ -288,10 +288,11 @@ export function AddEditNodePage() {
       />,
     );
     setSelectPrimaryKey(
-      <PrimaryKeySelect
-        defaultValue={primaryKey.map(col => {
-          return { value: col, label: col };
-        })}
+      <ColumnsSelect
+        defaultValue={primaryKey}
+        fieldName="primary_key"
+        label="Primary Key"
+        isMulti={true}
       />,
     );
     setSelectRequiredDims(
@@ -329,7 +330,17 @@ export function AddEditNodePage() {
             <Formik
               initialValues={initialValues}
               validate={validator}
-              onSubmit={handleSubmit}
+              onSubmit={
+                (values, { setSubmitting, setStatus }) => {
+                  try {
+                    submitHandlers.map(handler => handler(values, { setSubmitting, setStatus }));
+                  } catch (error) {
+                    console.error("Error in submission", error);
+                  } finally {
+                    setSubmitting(false);
+                  }
+                }
+              }
             >
               {function Render({ isSubmitting, status, setFieldValue }) {
                 const [node, setNode] = useState([]);
@@ -407,13 +418,22 @@ export function AddEditNodePage() {
                           action === Action.Edit ? (
                             selectPrimaryKey
                           ) : (
-                            <PrimaryKeySelect />
+                            <ColumnsSelect />
                           )
                         ) : action === Action.Edit ? (
                           selectRequiredDims
                         ) : (
                           <RequiredDimensionsSelect />
                         )}
+                        {Object.entries(extensions).map(([key, ExtensionComponent]) => (
+                          <div key={key} className="mt-4 border-t pt-4">
+                            <ExtensionComponent
+                              node={node}
+                              action={action}
+                              registerSubmitHandler={onSubmit => submitHandlers.indexOf(onSubmit) === -1 ? submitHandlers.push(onSubmit) : null}
+                            />
+                          </div>
+                        ))}
                         {action === Action.Edit ? selectTags : <TagsField />}
                         <NodeModeField />
 

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

@@ -0,0 +1,141 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+import { MetricQueryField } from '../AddEditNodePage/MetricQueryField';
+
+export default function LinkComplexDimensionPopover({ link, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    if (referencedDimensionNode && dimension === 'Remove') {
+      await unlinkDimension(
+        node,
+        column,
+        referencedDimensionNode,
+        setStatus,
+      ).then(_ => setSubmitting(false));
+    } else {
+      await linkDimension(node, column, dimension, setStatus).then(_ =>
+        setSubmitting(false),
+      );
+    }
+    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' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={
+            {
+              // column: column.name,
+              // node: node.name,
+              // dimension: '',
+              // currentDimension: referencedDimensionNode,
+            }
+          }
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <label>Join Type</label>
+                  <FormikSelect
+                    selectOptions={[{ value: 'left', label: 'LEFT' }]}
+                    formikFieldName="join_type"
+                    placeholder="Select join type"
+                    className="join_type"
+                    defaultValue={link.join_type || ''}
+                    isMulti={false}
+                  />
+                  {console.log('link, ', link)}
+
+                  <label>Join On</label>
+                  <MetricQueryField
+                    djClient={djClient}
+                    value={link.join_sql ? link.join_sql : ''}
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveComplexDimension"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -34,24 +34,24 @@ export default function NodeDependenciesTab({ node, djClient }) {
       {retrieved ? (
         <NodeList nodes={nodeDAG.upstreams} />
       ) : (
-        <span style={{ display: 'inline-block' }}>
-          <LoadingIcon />
+        <span style={{ display: 'block' }}>
+          <LoadingIcon centered={false} />
         </span>
       )}
       <h2>Downstreams</h2>
       {retrieved ? (
         <NodeList nodes={nodeDAG.downstreams} />
       ) : (
-        <span style={{ display: 'inline-block' }}>
-          <LoadingIcon />
+        <span style={{ display: 'block' }}>
+          <LoadingIcon centered={false} />
         </span>
       )}
       <h2>Dimensions</h2>
       {retrieved ? (
         <NodeDimensionsList rawDimensions={nodeDAG.dimensions} />
       ) : (
-        <span style={{ display: 'inline-block' }}>
-          <LoadingIcon />
+        <span style={{ display: 'block' }}>
+          <LoadingIcon centered={false} />
         </span>
       )}
     </div>
@@ -142,6 +142,6 @@ export function NodeList({ nodes }) {
       ))}
     </ul>
   ) : (
-    <span style={{ display: 'inline-block' }}>None</span>
+    <span style={{ display: 'block' }}>None</span>
   );
 }