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

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

@@ -1,34 +1,103 @@
-import { Component } from 'react';
+import { Component, useContext, useEffect, useRef, useState } from 'react';
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
+import DJClientContext from '../../providers/djclient';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
+import * as React from 'react';
+import { AlertMessage } from '../AddEditNodePage/AlertMessage';
+import AlertIcon from '../../icons/AlertIcon';
+import { labelize } from '../../../utils/form';
 
-export default class NodeStatus extends Component {
-  render() {
-    const { node } = this.props;
-    return (
-      <span className="status__valid status" style={{ alignContent: 'center' }}>
-        {node?.status === 'valid' ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="25"
-            height="25"
-            fill="currentColor"
-            className="bi bi-check-circle-fill"
-            viewBox="0 0 16 16"
-          >
-            <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>
-        ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            className="bi bi-x-circle-fill"
-            viewBox="0 0 16 16"
-          >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
-          </svg>
-        )}
-      </span>
+SyntaxHighlighter.registerLanguage('markdown', markdown);
+
+export default function NodeStatus({ node, revalidate = true }) {
+  const MAX_ERROR_LENGTH = 200;
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [validation, setValidation] = useState([]);
+
+  const [codeAnchor, setCodeAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (revalidate) {
+      const fetchData = async () => {
+        setValidation(await djClient.revalidate(node.name));
+      };
+      fetchData().catch(console.error);
+    }
+  }, [djClient, node, revalidate]);
+
+  const displayValidation =
+    revalidate && validation?.errors?.length > 0 ? (
+      <>
+        <button
+          className="badge"
+          style={{
+            backgroundColor: '#b34b00',
+            fontSize: '15px',
+            outline: '0',
+            border: '0',
+            cursor: 'pointer',
+          }}
+          onClick={() => setCodeAnchor(!codeAnchor)}
+        >
+          ⚠ {validation?.errors?.length} error
+          {validation?.errors?.length > 1 ? 's' : ''}
+        </button>
+        <div
+          className="popover"
+          ref={ref}
+          style={{
+            display: codeAnchor === false ? 'none' : 'block',
+            border: 'none',
+            paddingTop: '0px !important',
+            marginTop: '0px',
+            backgroundColor: 'transparent',
+          }}
+        >
+          {validation?.errors?.map((error, idx) => (
+            <div className="validation_error">
+              <b
+                style={{
+                  color: '#b34b00',
+                }}
+              >
+                {labelize(error.type.toLowerCase())}:
+              </b>{' '}
+              {error.message.length > MAX_ERROR_LENGTH
+                ? error.message.slice(0, MAX_ERROR_LENGTH - 1) + '...'
+                : error.message}
+            </div>
+          ))}
+        </div>
+      </>
+    ) : (
+      <></>
     );
-  }
+
+  return (
+    <>
+      {revalidate && validation?.errors?.length > 0 ? (
+        displayValidation
+      ) : validation?.status === 'valid' ||
+        node?.status === 'valid' ||
+        node?.current?.status === 'VALID' ? (
+        <span
+          className="status__valid status"
+          style={{ alignContent: 'center' }}
+        >
+          <ValidIcon />
+        </span>
+      ) : (
+        <span
+          className="status__invalid status"
+          style={{ alignContent: 'center' }}
+        >
+          <InvalidIcon />
+        </span>
+      )}
+    </>
+  );
 }

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

@@ -0,0 +1,367 @@
+import React, { useEffect, useState } from 'react';
+import Select from 'react-select';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { labelize } from '../../../utils/form';
+import { Form, Formik } from 'formik';
+import DimensionFilter from './DimensionFilter';
+import QueryInfo from '../../components/QueryInfo';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function NodeValidateTab({ node, djClient }) {
+  const [query, setQuery] = useState('');
+  const [lookup, setLookup] = useState([]);
+  const [running, setRunning] = useState(false);
+
+  // These are a list of dimensions that are available for this node
+  const [dimensions, setDimensions] = useState([]);
+
+  // A separate structure used to store the selected dimensions to filter by and their values
+  const [selectedFilters, setSelectedFilters] = useState({});
+
+  // The set of dimensions and filters to pass to the /sql or /data endpoints for the node
+  const [selection, setSelection] = useState({
+    dimensions: [],
+    filters: [],
+  });
+
+  // Any query result info retrieved when a node query is run
+  const [queryInfo, setQueryInfo] = useState(null);
+
+  const initialValues = {};
+
+  const [state, setState] = useState({
+    selectedTab: 'results',
+  });
+
+  const switchTab = tabName => {
+    setState({ selectedTab: tabName });
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        // Find all the dimensions for this node
+        const dimensions = await djClient.nodeDimensions(node.name);
+
+        // Create a dimensions lookup object
+        const lookup = {};
+        dimensions.forEach(dimension => {
+          lookup[dimension.name] = dimension;
+        });
+        setLookup(lookup);
+
+        // Group the dimensions by dimension node
+        const grouped = Object.entries(
+          dimensions.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;
+          }, {}),
+        );
+        setDimensions(grouped);
+
+        // Build the query for this node based on the user-provided dimensions and filters
+        const query = await djClient.sql(node.name, selection);
+        setQuery(query.sql);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node, selection]);
+
+  const dimensionsList = dimensions.flatMap(grouping => {
+    const dimensionsInGroup = grouping[1];
+    return dimensionsInGroup
+      .filter(dim => dim.properties.includes('primary_key') === true)
+      .map(dim => {
+        return {
+          value: dim.name,
+          label: (
+            <span>
+              {labelize(dim.name.split('.').slice(-1)[0])}{' '}
+              <small>{dim.name}</small>
+            </span>
+          ),
+        };
+      });
+  });
+
+  // Run the query and use SSE to stream the status of the query execution results
+  const runQuery = async (values, setStatus, setSubmitting) => {
+    setRunning(true);
+    const sse = await djClient.streamNodeData(node?.name, selection);
+    sse.onmessage = e => {
+      const messageData = JSON.parse(JSON.parse(e.data));
+      if (
+        messageData !== null &&
+        messageData?.state !== 'FINISHED' &&
+        messageData?.state !== 'CANCELED' &&
+        messageData?.state !== 'FAILED'
+      ) {
+        setRunning(false);
+      }
+      if (messageData.results && messageData.results?.length > 0) {
+        messageData.numRows = messageData.results?.length
+          ? messageData.results[0].rows.length
+          : [];
+        switchTab('results');
+        setRunning(false);
+      } else {
+        switchTab('info');
+      }
+      setQueryInfo(messageData);
+    };
+    sse.onerror = () => sse.close();
+  };
+
+  // Handle form submission (runs the query)
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    await runQuery(values, setStatus, setSubmitting);
+  };
+
+  // Handle when filter values are updated. This is available for all nodes.
+  const handleAddFilters = event => {
+    const updatedFilters = selectedFilters;
+    if (event.dimension in updatedFilters) {
+      updatedFilters[event.dimension].operator = event.operator;
+      updatedFilters[event.dimension].values = event.values;
+    } else {
+      updatedFilters[event.dimension] = {
+        operator: event.operator,
+        values: event.values,
+      };
+    }
+    setSelectedFilters(updatedFilters);
+    const updatedDimensions = selection.dimensions.concat([event.dimension]);
+    setSelection({
+      filters: Object.entries(updatedFilters).map(obj =>
+        obj[1].values
+          ? `${obj[0]} IN (${obj[1].values
+              .map(val =>
+                ['int', 'bigint', 'float', 'double', 'long'].includes(
+                  lookup[obj[0]].type,
+                )
+                  ? val.value
+                  : "'" + val.value + "'",
+              )
+              .join(', ')})`
+          : '',
+      ),
+      dimensions: updatedDimensions,
+    });
+  };
+
+  // Handle when one or more dimensions are selected from the dropdown
+  // Note that this is only available to metrics
+  const handleAddDimensions = event => {
+    const updatedDimensions = event.map(
+      selectedDimension => selectedDimension.value,
+    );
+    setSelection({
+      filters: selection.filters,
+      dimensions: updatedDimensions,
+    });
+  };
+
+  const filters = dimensions.map(grouping => {
+    const dimensionsInGroup = grouping[1];
+    const dimensionGroupOptions = dimensionsInGroup
+      .filter(dim => dim.properties.includes('primary_key') === true)
+      .map(dim => {
+        return {
+          value: dim.name,
+          label: labelize(dim.name.split('.').slice(-1)[0]),
+          metadata: dim,
+        };
+      });
+    return (
+      <>
+        <div className="dimensionsList">
+          {dimensionGroupOptions.map(dimension => {
+            return (
+              <DimensionFilter
+                dimension={dimension}
+                onChange={handleAddFilters}
+              />
+            );
+          })}
+        </div>
+      </>
+    );
+  });
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {function Render({ isSubmitting, status, setFieldValue }) {
+        return (
+          <Form>
+            <div className={'queryrunner'}>
+              <div className="queryrunner-filters left">
+                {node?.type === 'metric' ? (
+                  <>
+                    <span>
+                      <label>Group By</label>
+                    </span>
+                    <Select
+                      name="dimensions"
+                      options={dimensionsList}
+                      isMulti
+                      isClearable
+                      onChange={handleAddDimensions}
+                    />
+                    <br />
+                  </>
+                ) : null}
+                <span>
+                  <label>Add Filters</label>
+                </span>
+                {filters}
+              </div>
+              <div className={'righttop'}>
+                <label>Generated Query</label>
+                <div
+                  style={{
+                    height: '200px',
+                    width: '80%',
+                    overflow: 'scroll',
+                    borderRadius: '0',
+                    border: '1px solid #ccc',
+                  }}
+                  className="queryrunner-query"
+                >
+                  <SyntaxHighlighter
+                    language="sql"
+                    style={foundation}
+                    wrapLines={true}
+                  >
+                    {query}
+                  </SyntaxHighlighter>
+                </div>
+                <button
+                  type="submit"
+                  disabled={
+                    running ||
+                    (queryInfo !== null &&
+                      queryInfo?.state !== 'FINISHED' &&
+                      queryInfo?.state !== 'CANCELED' &&
+                      queryInfo?.state !== 'FAILED')
+                  }
+                  className="button-3 execute-button"
+                  style={{ marginTop: '1rem' }}
+                >
+                  {isSubmitting || running === true ? <LoadingIcon /> : '► Run'}
+                </button>
+              </div>
+              <div
+                style={{
+                  width: window.innerWidth * 0.8,
+                  marginTop: '1rem',
+                  marginLeft: '0.5rem',
+                  height: 'calc(70% - 5.5px)',
+                }}
+                className={'rightbottom'}
+              >
+                <div
+                  className={'align-items-center row'}
+                  style={{
+                    borderBottom: '1px solid #dddddd',
+                    width: '86%',
+                  }}
+                >
+                  <div
+                    className={
+                      'tab-item' +
+                      (state.selectedTab === 'results' ? ' active' : '')
+                    }
+                    onClick={_ => switchTab('results')}
+                  >
+                    Results
+                  </div>
+                  <div
+                    className={
+                      'tab-item' +
+                      (state.selectedTab === 'info' ? ' active' : '')
+                    }
+                    aria-label={'QueryInfo'}
+                    role={'button'}
+                    onClick={_ => switchTab('info')}
+                  >
+                    Info
+                  </div>
+                </div>
+                {state.selectedTab === 'info' ? (
+                  <div>
+                    {queryInfo && queryInfo.id ? (
+                      <QueryInfo {...queryInfo} isList={true} />
+                    ) : (
+                      <></>
+                    )}
+                  </div>
+                ) : null}
+                {state.selectedTab === 'results' ? (
+                  <div>
+                    {queryInfo !== null && queryInfo.state !== 'FINISHED' ? (
+                      <div style={{ padding: '2rem' }}>
+                        The query has status {queryInfo.state}! Check the INFO
+                        tab for more details.
+                      </div>
+                    ) : queryInfo !== null &&
+                      queryInfo.results !== null &&
+                      queryInfo.results.length === 0 ? (
+                      <div style={{ padding: '2rem' }}>
+                        The query finished but output no results.
+                      </div>
+                    ) : queryInfo !== null &&
+                      queryInfo.results !== null &&
+                      queryInfo.results.length > 0 ? (
+                      <div
+                        className="table-responsive"
+                        style={{
+                          gridGap: '0',
+                          width: '86%',
+                          padding: '0',
+                          maxHeight: '50%',
+                        }}
+                      >
+                        <table
+                          style={{ marginTop: '0 !important' }}
+                          className="table"
+                        >
+                          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+                            <tr>
+                              {queryInfo.results[0]?.columns.map(columnName => (
+                                <th key={columnName.name}>
+                                  {columnName.column}
+                                </th>
+                              ))}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {queryInfo.results[0]?.rows
+                              .slice(0, 100)
+                              .map((rowData, index) => (
+                                <tr key={`data-row:${index}`}>
+                                  {rowData.map(rowValue => (
+                                    <td key={rowValue}>{rowValue}</td>
+                                  ))}
+                                </tr>
+                              ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    ) : (
+                      <div style={{ padding: '2rem' }}>
+                        Click "Run" to execute the query.
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+
+export default function NodesWithDimension({ node, djClient }) {
+  const [availableNodes, setAvailableNodes] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.nodesWithDimension(node.name);
+      setAvailableNodes(data);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <tr>
+            <th className="text-start">Name</th>
+            <th>Type</th>
+          </tr>
+        </thead>
+        <tbody>
+          {availableNodes.map(node => (
+            <tr>
+              <td>
+                <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+              </td>
+              <td>
+                <span
+                  className={'node_type__' + node.type + ' badge node_type'}
+                >
+                  {node.type}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import DJClientContext from '../../providers/djclient';
+import JupyterExportIcon from '../../icons/JupyterExportIcon';
+import { useContext } from 'react';
+
+export default function NotebookDownload({ node }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const downloadFile = async () => {
+    try {
+      const response = await djClient.notebookExportCube(node.name);
+      const notebook = await response.blob();
+      const url = window.URL.createObjectURL(new Blob([notebook]));
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', 'notebook.ipynb');
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+    } catch (error) {
+      console.error('Error downloading file: ', error);
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="button-3"
+        onClick={downloadFile}
+        style={{ height: '2.5rem' }}
+      >
+        <JupyterExportIcon /> Export as Notebook
+      </button>
+    </>
+  );
+}