datajunction-ui 0.0.1-a1 → 0.0.1-a101

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/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>
+    </>
+  );
+}

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

@@ -80,7 +80,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
               <Form>
                 {displayMessageAfterSubmit(status)}
                 <span data-testid="edit-partition">
-                  <label htmlFor="react-select-3-input">Partition Type</label>
+                  <label htmlFor="partitionType">Partition Type</label>
                   <Field
                     as="select"
                     name="partition_type"
@@ -108,9 +108,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                 <br />
                 {values.partition_type === 'temporal' ? (
                   <>
-                    <label htmlFor="react-select-3-input">
-                      Partition Format
-                    </label>
+                    <label htmlFor="partitionFormat">Partition Format</label>
                     <Field
                       type="text"
                       name="format"
@@ -119,7 +117,7 @@ export default function PartitionColumnPopover({ column, node, onSubmit }) {
                     />
                     <br />
                     <br />
-                    <label htmlFor="react-select-3-input">
+                    <label htmlFor="partitionGranularity">
                       Partition Granularity
                     </label>
                     <Field

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Field } from 'formik';
+
+export default function PartitionValueForm({ col, materialization }) {
+  if (col.partition.type_ === 'temporal') {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <span style={{ padding: '0.5rem' }}>From</span>{' '}
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].from`}
+              id={`${col.name}.from`}
+              placeholder="20230101"
+              default="20230101"
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />{' '}
+            <span style={{ padding: '0.5rem' }}>To</span>
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].to`}
+              id={`${col.name}.to`}
+              placeholder="20230102"
+              default="20230102"
+              style={{ width: '7rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}']`}
+              id={col.name}
+              placeholder=""
+              default=""
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}