datajunction-ui 0.0.1-rc.9 → 0.0.2-3.dev1

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

@@ -0,0 +1,132 @@
+/**
+ * Add or edit tags
+ */
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext } from 'react';
+import DJClientContext from '../../providers/djclient';
+import 'styles/node-creation.scss';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export function AddEditTagPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const initialValues = {
+    name: '',
+  };
+
+  const validator = values => {
+    const errors = {};
+    if (!values.name) {
+      errors.name = 'Required';
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    const { status, json } = await djClient.addTag(
+      values.name,
+      values.display_name,
+      values.tag_type,
+      values.description,
+    );
+    if (status === 200 || status === 201) {
+      setStatus({
+        success: (
+          <>
+            Successfully added tag{' '}
+            <a href={`/tags/${json.name}`}>{json.display_name}</a>.
+          </>
+        ),
+      });
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+    setSubmitting(false);
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h2>
+            Add{' '}
+            <span className={`node_type__source node_type_creation_heading`}>
+              Tag
+            </span>
+          </h2>
+          <center>
+            <Formik
+              initialValues={initialValues}
+              validate={validator}
+              onSubmit={handleSubmit}
+            >
+              {function Render({ isSubmitting, status }) {
+                return (
+                  <Form>
+                    {displayMessageAfterSubmit(status)}
+                    {
+                      <>
+                        <div className="NodeCreationInput">
+                          <ErrorMessage name="name" component="span" />
+                          <label htmlFor="name">Name</label>
+                          <Field
+                            type="text"
+                            name="name"
+                            id="name"
+                            placeholder="Tag Name"
+                          />
+                        </div>
+                        <br />
+                        <div className="FullNameInput NodeCreationInput">
+                          <ErrorMessage name="display_name" component="span" />
+                          <label htmlFor="display_name">Display Name</label>
+                          <Field
+                            type="text"
+                            name="display_name"
+                            id="display_name"
+                            placeholder="Display Name"
+                            class="FullNameField"
+                          />
+                        </div>
+                        <br />
+                        <div className="NodeCreationInput">
+                          <ErrorMessage name="tag_type" component="span" />
+                          <label htmlFor="tag_type">Tag Type</label>
+                          <Field
+                            type="text"
+                            name="tag_type"
+                            id="tag_type"
+                            placeholder="Tag Type"
+                          />
+                        </div>
+                        <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 the tag"
+                          />
+                        </div>
+                        <button type="submit" disabled={isSubmitting}>
+                          Add Tag
+                        </button>
+                      </>
+                    }
+                  </Form>
+                );
+              }}
+            </Formik>
+          </center>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/pages/CubeBuilderPage/DimensionsSelect.jsx

@@ -0,0 +1,152 @@
+/**
+ * A select component for picking dimensions
+ */
+import { useField, useFormikContext } from 'formik';
+import Select from 'react-select';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { labelize } from '../../../utils/form';
+
+export const DimensionsSelect = ({ cube }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { values, setFieldValue } = useFormikContext();
+
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField('dimensions');
+  const { setValue } = helpers;
+
+  // All common dimensions for the selected metrics, grouped by the dimension node and path
+  const [allDimensionsOptions, setAllDimensionsOptions] = useState([]);
+
+  // The selected dimensions, also grouped by dimension node and path
+  const [selectedDimensionsByGroup, setSelectedDimensionsByGroup] = useState(
+    {},
+  );
+
+  // The existing cube node's dimensions, if editing a cube
+  const [defaultDimensions, setDefaultDimensions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let cubeDimensions = undefined;
+      if (cube) {
+        cubeDimensions = cube?.current.cubeDimensions.map(cubeDim => {
+          return {
+            value: cubeDim.name,
+            label:
+              labelize(cubeDim.attribute) +
+              (cubeDim.properties?.includes('primary_key') ? ' (PK)' : ''),
+          };
+        });
+        setDefaultDimensions(cubeDimensions);
+        setValue(cubeDimensions.map(m => m.value));
+      }
+
+      if (values.metrics && values.metrics.length > 0) {
+        // Populate the common dimensions list based on the selected metrics
+        const commonDimensions = await djClient.commonDimensions(
+          values.metrics,
+        );
+        const grouped = Object.entries(
+          commonDimensions.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;
+          }, {}),
+        );
+        setAllDimensionsOptions(grouped);
+
+        // Set the selected cube dimensions if an existing cube is being edited
+        if (cube) {
+          const currentSelectedDimensionsByGroup = {};
+          grouped.forEach(grouping => {
+            const dimensionsInGroup = grouping[1];
+            currentSelectedDimensionsByGroup[dimensionsInGroup[0].node_name] =
+              getValue(
+                cubeDimensions.filter(
+                  dim =>
+                    dimensionsInGroup.filter(x => {
+                      return dim.value === x.name;
+                    }).length > 0,
+                ),
+              );
+            setSelectedDimensionsByGroup(currentSelectedDimensionsByGroup);
+            setValue(Object.values(currentSelectedDimensionsByGroup).flat(2));
+          });
+        }
+      } else {
+        setAllDimensionsOptions([]);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, setFieldValue, setValue, values.metrics, cube]);
+
+  // Retrieves the selected values as a list (since it is a multi-select)
+  const getValue = options => {
+    if (options) {
+      return options.map(option => option.value);
+    } else {
+      return [];
+    }
+  };
+
+  // Builds the block of dimensions selectors, grouped by node name + path
+  return allDimensionsOptions.map(grouping => {
+    const dimensionsInGroup = grouping[1];
+    const groupHeader = (
+      <h5
+        style={{
+          fontWeight: 'normal',
+          marginBottom: '5px',
+          marginTop: '15px',
+        }}
+      >
+        <a href={`/nodes/${dimensionsInGroup[0].node_name}`}>
+          <b>{dimensionsInGroup[0].node_display_name}</b>
+        </a>{' '}
+        via{' '}
+        <span className="HighlightPath">
+          {dimensionsInGroup[0].path.join(' → ')}
+        </span>
+      </h5>
+    );
+    const dimensionGroupOptions = dimensionsInGroup.map(dim => {
+      return {
+        value: dim.name,
+        label:
+          labelize(dim.name.split('.').slice(-1)[0]) +
+          (dim.properties?.includes('primary_key') ? ' (PK)' : ''),
+      };
+    });
+    //
+    const cubeDimensions = defaultDimensions.filter(
+      dim =>
+        dimensionGroupOptions.filter(x => {
+          return dim.value === x.value;
+        }).length > 0,
+    );
+    return (
+      <>
+        {groupHeader}
+        <span data-testid={'dimensions-' + dimensionsInGroup[0].node_name}>
+          <Select
+            className=""
+            name={'dimensions-' + dimensionsInGroup[0].node_name}
+            defaultValue={cubeDimensions}
+            options={dimensionGroupOptions}
+            isMulti
+            isClearable
+            closeMenuOnSelect={false}
+            onChange={selected => {
+              selectedDimensionsByGroup[dimensionsInGroup[0].node_name] =
+                getValue(selected);
+              setSelectedDimensionsByGroup(selectedDimensionsByGroup);
+              setValue(Object.values(selectedDimensionsByGroup).flat(2));
+            }}
+          />
+        </span>
+      </>
+    );
+  });
+};

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

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

package/src/app/pages/CubeBuilderPage/MetricsSelect.jsx

@@ -0,0 +1,75 @@
+/**
+ * A select component for picking metrics.
+ */
+import { useField, useFormikContext } from 'formik';
+import Select from 'react-select';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export const MetricsSelect = ({ cube }) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const { values } = useFormikContext();
+
+  // eslint-disable-next-line no-unused-vars
+  const [field, _, helpers] = useField('metrics');
+  const { setValue } = helpers;
+
+  // All metrics options
+  const [metrics, setMetrics] = useState([]);
+
+  // The existing cube's metrics, if editing a cube
+  const [defaultMetrics, setDefaultMetrics] = useState([]);
+
+  // Get metrics
+  useEffect(() => {
+    const fetchData = async () => {
+      if (cube) {
+        const cubeMetrics = cube?.current.cubeMetrics.map(metric => {
+          return {
+            value: metric.name,
+            label: metric.name,
+          };
+        });
+        setDefaultMetrics(cubeMetrics);
+        await setValue(cubeMetrics.map(m => m.value));
+      }
+
+      const metrics = await djClient.metrics();
+      setMetrics(metrics.map(m => ({ value: m, label: m })));
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.metrics, cube]);
+
+  const getValue = options => {
+    if (options) {
+      return options.map(option => option.value);
+    } else {
+      return [];
+    }
+  };
+
+  const render = () => {
+    if (
+      metrics.length > 0 ||
+      (cube !== undefined && defaultMetrics.length > 0 && metrics.length > 0)
+    ) {
+      return (
+        <Select
+          defaultValue={defaultMetrics}
+          options={metrics}
+          name="metrics"
+          placeholder={`${metrics.length} Available Metrics`}
+          onBlur={field.onBlur}
+          onChange={selected => {
+            setValue(getValue(selected));
+          }}
+          noOptionsMessage={() => 'No metrics found.'}
+          isMulti
+          isClearable
+          closeMenuOnSelect={false}
+        />
+      );
+    }
+  };
+  return render();
+};