datajunction-ui 0.0.1-rc.9 → 0.0.2

package/src/app/icons/NodeIcon.jsx

@@ -0,0 +1,49 @@
+const NodeIcon = ({
+  width = '45px',
+  height = '45px',
+  color = '#cccccc',
+  style = {},
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+    data-testid="node-icon"
+  >
+    <path
+      opacity="0.317243"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z"
+      fill={color}
+    ></path>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z"
+      fill={color}
+    ></path>
+    <mask
+      id="mask0"
+      type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="9"
+      y="7"
+      width="12"
+      height="16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z"
+        fill="white"
+      ></path>
+    </mask>
+    <g mask="url(#mask0)"></g>
+  </svg>
+);
+
+export default NodeIcon;

package/src/app/icons/PythonIcon.jsx

@@ -0,0 +1,14 @@
+const PythonIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="24"
+    height="24"
+    viewBox="0 0 48 48"
+  >
+    <path d="M 24 3 C 20.271429 3 18.240267 3.9470561 16.792969 4.5742188 L 16.791016 4.5742188 C 15.488673 5.1421213 14.704771 6.3187748 14.365234 7.4296875 C 14.025697 8.5406002 14 9.6506515 14 10.640625 L 14 14 L 10.640625 14 C 9.6506515 14 8.5406002 14.0257 7.4296875 14.365234 C 6.3187748 14.704771 5.1421212 15.488626 4.5742188 16.791016 L 4.5742188 16.792969 C 3.947056 18.24022 3 20.271429 3 24 C 3 27.728571 3.9470561 29.759733 4.5742188 31.207031 L 4.5742188 31.208984 C 5.1421212 32.511374 6.3187748 33.295229 7.4296875 33.634766 C 8.5406002 33.974256 9.6506515 34 10.640625 34 L 14 34 L 14 37.359375 C 14 38.349349 14.0257 39.459401 14.365234 40.570312 C 14.704771 41.681225 15.488626 42.857879 16.791016 43.425781 L 16.792969 43.425781 C 18.24022 44.052944 20.271429 45 24 45 C 27.728571 45 29.759733 44.052944 31.207031 43.425781 L 31.208984 43.425781 C 32.511374 42.857879 33.295229 41.681225 33.634766 40.570312 C 33.974256 39.459401 34 38.349349 34 37.359375 L 34 34 L 37.359375 34 C 38.349349 34 39.459401 33.9743 40.570312 33.634766 C 41.681225 33.295229 42.857879 32.511374 43.425781 31.208984 L 43.425781 31.207031 C 44.052944 29.75978 45 27.728571 45 24 C 45 20.271429 44.052944 18.240267 43.425781 16.792969 L 43.425781 16.791016 C 42.857879 15.488673 41.681225 14.704771 40.570312 14.365234 C 39.459401 14.025697 38.349349 14 37.359375 14 L 34 14 L 34 10.640625 C 34 9.6506515 33.974303 8.5406002 33.634766 7.4296875 C 33.295229 6.3187748 32.511374 5.1421213 31.208984 4.5742188 L 31.207031 4.5742188 C 29.75978 3.9470561 27.728571 3 24 3 z M 24 6 C 27.268623 6 28.459017 6.6519922 30.009766 7.3242188 C 30.427376 7.5063161 30.590162 7.7325533 30.765625 8.3066406 C 30.941088 8.8807279 31 9.7405985 31 10.640625 L 31 15.253906 A 1.50015 1.50015 0 0 0 31 15.740234 L 31 19 C 31 20.950062 29.450062 22.5 27.5 22.5 L 20.5 22.5 C 16.928062 22.5 14 25.428062 14 29 L 14 31 L 10.640625 31 C 9.7405985 31 8.8807279 30.941088 8.3066406 30.765625 C 7.7325533 30.590162 7.5063162 30.427376 7.3242188 30.009766 C 6.6519921 28.459017 6 27.268623 6 24 C 6 20.731377 6.6519921 19.540983 7.3242188 17.990234 C 7.5063161 17.572624 7.7325533 17.409838 8.3066406 17.234375 C 8.8807279 17.058912 9.7405985 17 10.640625 17 L 23.5 17 A 1.50015 1.50015 0 1 0 23.5 14 L 17 14 L 17 10.640625 C 17 9.7405985 17.058912 8.8807279 17.234375 8.3066406 C 17.409838 7.7325533 17.572624 7.5063162 17.990234 7.3242188 C 19.540983 6.6519921 20.731377 6 24 6 z M 20.5 9 A 1.5 1.5 0 0 0 20.5 12 A 1.5 1.5 0 0 0 20.5 9 z M 34 17 L 37.359375 17 C 38.259401 17 39.119272 17.05891 39.693359 17.234375 C 40.267447 17.409838 40.493684 17.572624 40.675781 17.990234 C 41.348008 19.540983 42 20.731377 42 24 C 42 27.268623 41.348008 28.459017 40.675781 30.009766 C 40.493684 30.427376 40.267447 30.590162 39.693359 30.765625 C 39.119272 30.941088 38.259401 31 37.359375 31 L 24.5 31 A 1.50015 1.50015 0 1 0 24.5 34 L 31 34 L 31 37.359375 C 31 38.259401 30.94109 39.119272 30.765625 39.693359 C 30.590162 40.267447 30.427376 40.493684 30.009766 40.675781 C 28.459017 41.348008 27.268623 42 24 42 C 20.731377 42 19.540983 41.348008 17.990234 40.675781 C 17.572624 40.493684 17.409838 40.267447 17.234375 39.693359 C 17.058912 39.119272 17 38.259401 17 37.359375 L 17 29 C 17 27.049938 18.549938 25.5 20.5 25.5 L 27.5 25.5 C 31.071938 25.5 34 22.571938 34 19 L 34 17 z M 27.5 36 A 1.5 1.5 0 0 0 27.5 39 A 1.5 1.5 0 0 0 27.5 36 z"></path>
+  </svg>
+);
+
+export default PythonIcon;

package/src/app/icons/TableIcon.jsx

@@ -0,0 +1,14 @@
+const TableIcon = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-table"
+    viewBox="0 0 16 16"
+  >
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z" />
+  </svg>
+);
+
+export default TableIcon;

package/src/app/icons/ValidIcon.jsx

@@ -0,0 +1,16 @@
+const ValidIcon = ({ width = '25px', height = '25px', style = {} }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    style={style}
+    fill="currentColor"
+    className="bi bi-check-circle-fill"
+    viewBox="0 0 16 16"
+    data-testid="valid-icon"
+  >
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+  </svg>
+);
+
+export default ValidIcon;

package/src/app/index.tsx

@@ -8,50 +8,131 @@ import { Helmet } from 'react-helmet-async';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
+import { OverviewPage } from './pages/OverviewPage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
+import RevisionDiff from './pages/NodePage/RevisionDiff';
+import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
+import { CubeBuilderPage } from './pages/CubeBuilderPage/Loadable';
+import { TagPage } from './pages/TagPage/Loadable';
+import { AddEditNodePage } from './pages/AddEditNodePage/Loadable';
+import { AddEditTagPage } from './pages/AddEditTagPage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
+import { LoginPage } from './pages/LoginPage';
+import { RegisterTablePage } from './pages/RegisterTablePage';
 import { Root } from './pages/Root/Loadable';
-import { ListNamespacesPage } from './pages/ListNamespacesPage';
 import DJClientContext from './providers/djclient';
-import {DataJunctionAPI} from "./services/DJService";
+import { DataJunctionAPI } from './services/DJService';
+import { CookiesProvider, useCookies } from 'react-cookie';
+import * as Constants from './constants';
 
 export function App() {
+  const [cookies] = useCookies([Constants.LOGGED_IN_FLAG_COOKIE]);
   return (
-    <BrowserRouter>
-      <Helmet
-        titleTemplate="DataJunction: %s"
-        defaultTitle="DataJunction: A Metrics Platform"
-      >
-        <meta
-          name="description"
-          content="DataJunction serves as a semantic layer to help manage metrics"
-        />
-      </Helmet>
-      <DJClientContext.Provider value={{ DataJunctionAPI }}>
-        <Routes>
-          <Route
-            path="/"
-            element={<Root />}
-            children={
-              <>
-                <Route path="nodes" key="nodes">
-                  <Route path=":name" element={<NodePage />} />
-                </Route>
+    <CookiesProvider>
+      <BrowserRouter>
+        {cookies.__djlif || process.env.REACT_DISABLE_AUTH === 'true' ? (
+          <>
+            <Helmet
+              titleTemplate="DataJunction: %s"
+              defaultTitle="DataJunction: A Metrics Platform"
+            >
+              <meta
+                name="description"
+                content="DataJunction serves as a semantic layer to help manage metrics"
+              />
+            </Helmet>
+            <DJClientContext.Provider value={{ DataJunctionAPI }}>
+              <Routes>
+                <Route
+                  path="/"
+                  element={<Root />}
+                  children={
+                    <>
+                      <Route path="nodes" key="nodes">
+                        <Route path=":name" element={<NodePage />} />
+                        <Route
+                          path=":name/edit"
+                          key="edit"
+                          element={<AddEditNodePage />}
+                        />
+                        <Route
+                          path=":name/edit-cube"
+                          key="edit-cube"
+                          element={<CubeBuilderPage />}
+                        />
+                        <Route
+                          path=":name/revisions/:revision"
+                          element={<RevisionDiff />}
+                        />
+                        <Route path=":name/:tab" element={<NodePage />} />
+                      </Route>
 
-                <Route path="/" element={<ListNamespacesPage />} key="index" />
-                <Route path="namespaces">
-                  <Route
-                    path=":namespace"
-                    element={<NamespacePage />}
-                    key="namespaces"
-                  />
-                </Route>
-              </>
-            }
-          />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </DJClientContext.Provider>
-    </BrowserRouter>
+                      <Route path="/" element={<NamespacePage />} key="index" />
+                      <Route path="namespaces">
+                        <Route
+                          path=":namespace"
+                          element={<NamespacePage />}
+                          key="namespaces"
+                        />
+                      </Route>
+                      <Route
+                        path="create/tag"
+                        key="createtag"
+                        element={<AddEditTagPage />}
+                      ></Route>
+                      <Route
+                        path="create/source"
+                        key="register"
+                        element={<RegisterTablePage />}
+                      ></Route>
+                      <Route path="/create/cube">
+                        <Route
+                          path=":initialNamespace"
+                          key="create"
+                          element={<CubeBuilderPage />}
+                        />
+                        <Route
+                          path=""
+                          key="create"
+                          element={<CubeBuilderPage />}
+                        />
+                      </Route>
+                      <Route path="create/:nodeType">
+                        <Route
+                          path=":initialNamespace"
+                          key="create"
+                          element={<AddEditNodePage />}
+                        />
+                        <Route
+                          path=""
+                          key="create"
+                          element={<AddEditNodePage />}
+                        />
+                      </Route>
+                      <Route
+                        path="sql"
+                        key="sql"
+                        element={<SQLBuilderPage />}
+                      />
+                      <Route path="tags" key="tags">
+                        <Route path=":name" element={<TagPage />} />
+                      </Route>
+                      <Route
+                        path="overview"
+                        key="overview"
+                        element={<OverviewPage />}
+                      />
+                    </>
+                  }
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </DJClientContext.Provider>
+          </>
+        ) : (
+          <LoginPage />
+        )}
+      </BrowserRouter>
+    </CookiesProvider>
   );
 }

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

@@ -0,0 +1,10 @@
+import AlertIcon from '../../icons/AlertIcon';
+
+export const AlertMessage = ({ message }) => {
+  return (
+    <div className="message alert">
+      <AlertIcon />
+      {message}
+    </div>
+  );
+};

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

@@ -0,0 +1,84 @@
+/**
+ * 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,
+  labelStyle = {},
+  isMulti = false,
+  isClearable = true,
+}) => {
+  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 (
+    <div className="CubeCreationInput">
+      <ErrorMessage name={fieldName} component="span" />
+      <label htmlFor={fieldName} style={labelStyle}>
+        {label}
+      </label>
+      <span data-testid={`select-${fieldName}`}>
+        <FormikSelect
+          className={isMulti ? 'MultiSelectInput' : 'SelectInput'}
+          defaultValue={
+            isMulti
+              ? defaultValue.map(val => {
+                  return {
+                    value: val,
+                    label: val,
+                  };
+                })
+              : defaultValue
+              ? { value: defaultValue, label: defaultValue }
+              : null
+          }
+          selectOptions={selectableOptions}
+          formikFieldName={fieldName}
+          onFocus={event => fetchColumns(event)}
+          isMulti={isMulti}
+          isClearable={isClearable}
+        />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DescriptionField = () => {
+  return (
+    <div className="DescriptionInput NodeCreationInput">
+      <ErrorMessage name="description" component="span" />
+      <label htmlFor="Description">Description</label>
+      <Field
+        type="textarea"
+        as="textarea"
+        name="description"
+        id="Description"
+        placeholder="Describe your node"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { ErrorMessage, Field } from 'formik';
+
+export const DisplayNameField = () => {
+  return (
+    <div className="DisplayNameInput NodeCreationInput">
+      <ErrorMessage name="display_name" component="span" />
+      <label htmlFor="displayName">Display Name *</label>
+      <Field
+        type="text"
+        name="display_name"
+        id="displayName"
+        placeholder="Human readable display name"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,51 @@
+/**
+ * A React Select component for use in Formik forms.
+ */
+import { useField } from 'formik';
+import Select from 'react-select';
+
+export const FormikSelect = ({
+  selectOptions,
+  formikFieldName,
+  placeholder,
+  defaultValue,
+  style,
+  className = 'SelectInput',
+  isMulti = false,
+  isClearable = false,
+  onFocus = event => {},
+}) => {
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField(formikFieldName);
+  const { setValue } = helpers;
+
+  // handles both multi-select and single-select cases
+  const getValue = options => {
+    if (options) {
+      return isMulti ? options.map(option => option.value) : options.value;
+    } else {
+      return isMulti ? [] : '';
+    }
+  };
+
+  return (
+    <Select
+      className={className}
+      defaultValue={defaultValue}
+      options={selectOptions}
+      name={field.name}
+      placeholder={placeholder}
+      onBlur={field.onBlur}
+      onChange={selected => setValue(getValue(selected))}
+      styles={style}
+      isMulti={isMulti}
+      isClearable={isClearable}
+      onFocus={event => onFocus(event)}
+      id={field.name}
+    />
+  );
+};
+
+FormikSelect.defaultProps = {
+  placeholder: '',
+};

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

@@ -0,0 +1,38 @@
+/**
+ * A field for the full node name, which is generated based on the node's input
+ * namespace and display name.
+ */
+import { useField, useFormikContext } from 'formik';
+import { useEffect } from 'react';
+
+export const FullNameField = props => {
+  const { values, setFieldValue } = useFormikContext();
+  const [field, meta] = useField(props);
+
+  useEffect(() => {
+    // Set the value of the node's full name based on its namespace and display name
+    if (values.namespace || values.display_name) {
+      setFieldValue(
+        props.name,
+        `${values.namespace}.${values.display_name
+          .toLowerCase()
+          .replace(/ /g, '_')
+          .replace(/[^a-zA-Z0-9_]/g, '')}` || '',
+      );
+    }
+  }, [setFieldValue, props.name, values]);
+
+  return (
+    <>
+      <input
+        {...props}
+        {...field}
+        className="FullNameField"
+        disabled="disabled"
+        id="FullName"
+        value={values.name || ''}
+      />
+      {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+    </>
+  );
+};

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

@@ -0,0 +1,20 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const LazyAddEditNodePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.AddEditNodePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};
+
+export const AddEditNodePage = props => {
+  return <LazyAddEditNodePage {...props} />;
+};

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

@@ -0,0 +1,75 @@
+/**
+ * Metric unit select component
+ */
+import { ErrorMessage, Field } from 'formik';
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { labelize } from '../../../utils/form';
+
+export const MetricMetadataFields = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  // Metric metadata
+  const [metricUnits, setMetricUnits] = useState([]);
+  const [metricDirections, setMetricDirections] = useState([]);
+
+  // Get metric metadata values
+  useEffect(() => {
+    const fetchData = async () => {
+      const metadata = await djClient.listMetricMetadata();
+      setMetricDirections(metadata.directions);
+      setMetricUnits(metadata.units);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div
+      style={{
+        borderRadius: '8px',
+        padding: '10px 10px 20px 10px',
+        margin: '32px 0',
+        background: '#f9f9f9',
+        width: 'max-content',
+        display: 'flex',
+      }}
+    >
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="metric_direction" component="span" />
+        <label htmlFor="MetricDirection">Metric Direction</label>
+        <Field as="select" name="metric_direction" id="MetricDirection">
+          <option value=""></option>
+          {metricDirections.map(direction => (
+            <option value={direction} key={direction}>
+              {labelize(direction)}
+            </option>
+          ))}
+        </Field>
+      </div>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="metric_unit" component="span" />
+        <label htmlFor="MetricUnit">Metric Unit</label>
+        <Field as="select" name="metric_unit" id="MetricUnit">
+          <option value=""></option>
+          {metricUnits.map(unit => (
+            <option value={unit.name} key={unit.name}>
+              {unit.label}
+            </option>
+          ))}
+        </Field>
+      </div>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="significant_digits" component="span" />
+        <label htmlFor="SignificantDigits">Significant Digits</label>
+        <Field as="select" name="significant_digits" id="SignificantDigits">
+          <option value=""></option>
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => (
+            <option value={val} key={val}>
+              {val}
+            </option>
+          ))}
+        </Field>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+/**
+ * Metric aggregate expression input field, which consists of a CodeMirror SQL
+ * editor with autocompletion for node columns and syntax highlighting.
+ */
+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 MetricQueryField = ({ djClient, value }) => {
+  const [schema, setSchema] = React.useState([]);
+  const formik = useFormikContext();
+  const sqlExt = langs.sql({ schema: schema });
+
+  const initialAutocomplete = async context => {
+    // Based on the selected upstream, we load the upstream node's columns
+    // into the autocomplete schema
+    const nodeName = formik.values['upstream_node'];
+    const nodeDetails = await djClient.node(nodeName);
+    nodeDetails.columns.forEach(col => {
+      schema[col.name] = [];
+    });
+    setSchema(schema);
+  };
+
+  const updateFormik = val => {
+    formik.setFieldValue('aggregate_expression', val);
+  };
+
+  return (
+    <div className="QueryInput MetricQueryInput NodeCreationInput">
+      <ErrorMessage name="query" component="span" />
+      <label htmlFor="Query">Aggregate Expression *</label>
+      <Field
+        type="textarea"
+        style={{ display: 'none' }}
+        as="textarea"
+        name="aggregate_expression"
+        id="Query"
+      />
+      <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+        <CodeMirror
+          id={'aggregate_expression'}
+          name={'aggregate_expression'}
+          extensions={[
+            sqlExt,
+            sqlExt.language.data.of({
+              autocomplete: initialAutocomplete,
+            }),
+          ]}
+          value={value}
+          options={{
+            theme: 'default',
+            lineNumbers: true,
+          }}
+          width="100%"
+          height="100px"
+          style={{
+            margin: '0 0 23px 0',
+            flex: 1,
+            fontSize: '150%',
+            textAlign: 'left',
+          }}
+          onChange={(value, viewUpdate) => {
+            updateFormik(value);
+          }}
+        />
+      </div>
+    </div>
+  );
+};