datajunction-ui 0.0.1-a54 → 0.0.1-a54.dev0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a54",
+  "version": "0.0.1-a54.dev0",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

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

@@ -0,0 +1,124 @@
+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';
+import { NodeQueryField } from '../AddEditNodePage/NodeQueryField';
+
+export default function LinkComplexDimensionPopover({ link, 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, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    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={{
+            link: link,
+          }}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            console.log('link', link);
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension"></span>
+                <input
+                  // hidden={true}
+                  disabled={true}
+                  name="dimension"
+                  value={link.dimension.name}
+                  readOnly={true}
+                />
+                <label htmlFor={'join_type'}>Join Type</label>
+                <input name="join_type" value={link.join_type} />
+                <label htmlFor={'join_sql'}>Join On</label>
+                <div style={{ width: '50%' }}>
+                  <NodeQueryField
+                    djClient={djClient}
+                    value={link.join_sql ? link.join_sql : ''}
+                  />
+                </div>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveLinkDimension"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -92,7 +92,7 @@ export default function NodeColumnTab({ node, djClient }) {
   };
 
   const columnList = columns => {
-    return columns.map(col => {
+    return columns?.map(col => {
       const dimensionLinks = (links.length > 0 ? links : node?.dimension_links)
         .map(link => [
           link.dimension.name,
@@ -151,7 +151,6 @@ export default function NodeColumnTab({ node, djClient }) {
                 options={dimensions}
                 onSubmit={async () => {
                   const res = await djClient.node(node.name);
-                  setColumns(res.columns);
                   setLinks(res.dimension_links);
                 }}
               />

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

@@ -0,0 +1,37 @@
+import DJClientContext from '../../providers/djclient';
+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 (
+    <>
+      <div
+        className="badge download_notebook"
+        style={{cursor: 'pointer', backgroundColor: '#ffefd0'}}
+        tabIndex="0"
+        height="45px"
+        onClick={downloadFile}
+      >
+        Export as Notebook
+      </div>
+    </>
+  );
+}

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

@@ -7,6 +7,7 @@ import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeGraphTab from './NodeGraphTab';
 import NodeHistory from './NodeHistory';
+import NotebookDownload from './NotebookDownload';
 import DJClientContext from '../../providers/djclient';
 import NodeValidateTab from './NodeValidateTab';
 import NodeMaterializationTab from './NodeMaterializationTab';
@@ -203,6 +204,7 @@ export function NodePage() {
               >
                 {node?.version}
               </span>
+              {node?.type === 'cube' ? <NotebookDownload node={node} /> : <></>}
             </div>
             <div className="align-items-center row">
               {tabsList(node).map(buildTabs)}

package/src/app/services/DJService.js

@@ -399,16 +399,6 @@ export const DataJunctionAPI = {
   columns: async function (node) {
     return await Promise.all(
       node.columns.map(async col => {
-        if (col.dimension) {
-          col.clientCode = await (
-            await fetch(
-              `${DJ_URL}/datajunction-clients/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
-              {
-                credentials: 'include',
-              },
-            )
-          ).json();
-        }
         return col;
       }),
     );
@@ -462,6 +452,20 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  notebookExportCube: async function (cube) {
+    return await fetch(`${DJ_URL}/datajunction-clients/python/notebook/?cube=${cube}`, {
+      credentials: 'include',
+    });
+  },
+
+  notebookExportNamespace: async function (namespace) {
+    return await (
+      await fetch(`${DJ_URL}/datajunction-clients/python/notebook/?namespace=${namespace}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   stream: async function (metricSelection, dimensionSelection, filters) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));

package/src/app/services/__tests__/DJService.test.jsx

@@ -489,9 +489,9 @@ describe('DataJunctionAPI', () => {
     const sampleNode = {
       name: 'sampleNode',
       columns: [
-        { name: 'column1', dimension: { name: 'dimension1' }, clientCode: {} },
+        { name: 'column1', dimension: { name: 'dimension1' }, },
         { name: 'column2', dimension: null },
-        { name: 'column3', dimension: { name: 'dimension2' }, clientCode: {} },
+        { name: 'column3', dimension: { name: 'dimension2' }, },
       ],
     };
 
@@ -503,18 +503,6 @@ describe('DataJunctionAPI', () => {
     fetch.mockResponses(...mockClientCodeResponses);
 
     const result = await DataJunctionAPI.columns(sampleNode);
-
-    // Check the fetch calls for clientCode for columns with a dimension
-    sampleNode.columns.forEach(col => {
-      if (col.dimension) {
-        expect(fetch).toHaveBeenCalledWith(
-          `${DJ_URL}/datajunction-clients/python/link_dimension/${sampleNode.name}/${col.name}/${col.dimension.name}`,
-          { credentials: 'include' },
-        );
-      }
-    });
-
-    // Ensure the result contains the clientCode for columns with a dimension and leaves others unchanged
     expect(result).toEqual(sampleNode.columns);
   });
 

package/src/styles/index.css

@@ -1065,6 +1065,15 @@ pre {
 .tag_value:hover {
   background-color: #5c3b8f50;
 }
+.download_notebook {
+  color: #5c3b8f;
+  background-color: #ffefd0;
+  margin: 0.25rem;
+  font-size: 100%;
+}
+.download_notebook:hover {
+  background-color: #fedda1 !important;
+}
 
 .modal-backdrop.in {
   filter: alpha(opacity=50);