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

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

@@ -0,0 +1,94 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useEffect, useRef, useState } from 'react';
+import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import PythonIcon from '../../icons/PythonIcon';
+
+export default function ClientCodePopover({ code }) {
+  const [showModal, setShowModal] = useState(false);
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        setShowModal(false);
+      }
+    };
+
+    if (showModal) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showModal]);
+
+  return (
+    <>
+      <button
+        className="button-3"
+        onClick={() => setShowModal(true)}
+        style={{ height: '2.5rem' }}
+      >
+        <PythonIcon /> See Python
+      </button>
+
+      {showModal && (
+        <div
+          className="modal-backdrop fade in"
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            className="centerPopover"
+            ref={modalRef}
+            style={{
+              position: 'relative',
+              maxWidth: '80%',
+              width: '600px',
+              maxHeight: '80vh',
+              overflowY: 'auto',
+              padding: '1.5rem',
+              background: '#fff',
+              borderRadius: '10px',
+              boxShadow: '0 3px 10px rgba(0, 0, 0, 0.3)',
+            }}
+          >
+            <button
+              onClick={() => setShowModal(false)}
+              style={{
+                position: 'absolute',
+                top: '1rem',
+                right: '1rem',
+                background: 'none',
+                border: 'none',
+                fontSize: '1.5rem',
+                cursor: 'pointer',
+                color: '#999',
+              }}
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+            <h2>Python Client Code</h2>
+            <SyntaxHighlighter language="python" style={nightOwl}>
+              {code}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { useContext, useEffect, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import CreatableSelect from 'react-select/creatable';
+
+export default function DimensionFilter({ dimension, onChange }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [dimensionValues, setDimensionValues] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const dimensionNode = await djClient.node(dimension.metadata.node_name);
+
+      // Only include the primary keys as filterable dimensions for now, until we figure out how
+      // to build a manageable UI experience around all dimensional attributes
+      if (dimensionNode && dimensionNode.type === 'dimension') {
+        const primaryKey =
+          dimensionNode.name +
+          '.' +
+          dimensionNode.columns
+            .filter(col =>
+              col.attributes.some(
+                attr => attr.attribute_type.name === 'primary_key',
+              ),
+            )
+            .map(col => col.name);
+        const label =
+          dimensionNode.name +
+          '.' +
+          dimensionNode.columns
+            .filter(col =>
+              col.attributes.some(attr => attr.attribute_type.name === 'label'),
+            )
+            .map(col => col.name);
+
+        const data = await djClient.nodeData(dimension.metadata.node_name);
+        /* istanbul ignore if */
+        if (dimensionNode && data.results && data.results.length > 0) {
+          const columnNames = data.results[0].columns.map(
+            column => column.semantic_entity,
+          );
+          const dimValues = data.results[0].rows.map(row => {
+            const rowData = { value: '', label: '' };
+            row.forEach((value, index) => {
+              if (columnNames[index] === primaryKey) {
+                rowData.value = value;
+                if (rowData.label === '') {
+                  rowData.label = value;
+                }
+              } else if (columnNames[index] === label) {
+                rowData.label = value;
+              }
+            });
+            return rowData;
+          });
+          setDimensionValues(dimValues);
+        }
+      }
+    };
+    fetchData().catch(console.error);
+  }, [dimension.metadata.node_name, djClient]);
+
+  return (
+    <div key={dimension.metadata.node_name}>
+      {dimension.label.split('[').slice(0)[0]} (
+      {
+        <a href={`/nodes/${dimension.metadata.node_name}`}>
+          {dimension.metadata.node_display_name}
+        </a>
+      }
+      )
+      <CreatableSelect
+        name="dimensions"
+        options={dimensionValues}
+        isMulti
+        isClearable
+        onChange={event => {
+          onChange({
+            dimension: dimension.value,
+            values: event,
+          });
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function EditColumnDescriptionPopover({
+  column,
+  node,
+  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 saveDescription = async (
+    { node, column, description },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setColumnDescription(
+      node,
+      column,
+      description,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumnDescription"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="edit-description"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            description: column.description || '',
+          }}
+          onSubmit={saveDescription}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <div className="form-group mt-3">
+                  <label htmlFor="description">Description</label>
+                  <textarea
+                    name="description"
+                    className="form-control"
+                    rows="3"
+                    onChange={e => setFieldValue('description', e.target.value)}
+                    defaultValue={column.description || ''}
+                  />
+                </div>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="btn btn-primary mt-3"
+                  type="submit"
+                  disabled={isSubmitting}
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useRef, 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, labelize } from '../../../utils/form';
+
+export default function EditColumnPopover({ column, node, options, 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 saveAttributes = async (
+    { node, column, attributes },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setAttributes(node, column, attributes);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    // window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="EditColumn"
+        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,
+            attributes: [],
+          }}
+          onSubmit={saveAttributes}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-attributes">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="attributes"
+                    placeholder="Select column attributes"
+                    className=""
+                    defaultValue={column.attributes.map(attr => {
+                      return {
+                        value: attr.attribute_type.name,
+                        label: labelize(attr.attribute_type.name),
+                      };
+                    })}
+                    isMulti={true}
+                  />
+                </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="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,164 @@
+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';
+
+export default function LinkDimensionPopover({
+  column,
+  dimensionNodes,
+  node,
+  options,
+  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, updatedDimensionNodes },
+    { setSubmitting, setStatus },
+  ) => {
+    const oldSet = new Set(dimensionNodes);
+    const newSet = new Set(updatedDimensionNodes);
+    try {
+      const linkPromises = Array.from(newSet)
+        .filter(item => !oldSet.has(item))
+        .map(dimension => {
+          return linkDimension(node, column, dimension, setStatus);
+        });
+      const unlinkPromises = Array.from(oldSet)
+        .filter(item => !newSet.has(item))
+        .map(dimension => {
+          return unlinkDimension(node, column, dimension, setStatus);
+        });
+      await Promise.all([...linkPromises, ...unlinkPromises]);
+    } catch (error) {
+      console.error('Error in editing linked dimensions:', error);
+      setStatus({ error: error.message });
+    } finally {
+      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,
+            updatedDimensionNodes: dimensionNodes || [],
+          }}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="updatedDimensionNodes"
+                    placeholder="Select dimension to link"
+                    className=""
+                    defaultValue={
+                      dimensionNodes.length > 0
+                        ? dimensionNodes.map(dimNode => {
+                            return {
+                              value: dimNode,
+                              label: dimNode,
+                            };
+                          })
+                        : []
+                    }
+                    isMulti={true}
+                  />
+                </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"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}