datajunction-ui 0.0.1-a70.dev1 → 0.0.1-a72

package/package.json

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

package/src/app/pages/AddEditNodePage/__tests__/index.test.jsx

@@ -138,7 +138,9 @@ describe('AddEditNodePage', () => {
       ).toMatchSnapshot();
 
       // The namespace should be set to the one provided in params
-      expect(screen.getByText('default')).toBeInTheDocument();
+      screen
+        .getAllByText('default')
+        .forEach(element => expect(element).toBeInTheDocument());
     });
   });
 

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

@@ -313,7 +313,15 @@ export function AddEditNodePage() {
 
   return (
     <div className="mid">
-      <NamespaceHeader namespace="" />
+      <NamespaceHeader
+        namespace={
+          initialNamespace
+            ? initialNamespace
+            : name
+            ? name.substring(0, name.lastIndexOf('.'))
+            : ''
+        }
+      />
       <div className="card">
         <div className="card-header">
           {pageTitle}

package/src/app/pages/NamespacePage/Explorer.jsx

@@ -45,7 +45,10 @@ const Explorer = ({ item = [], current }) => {
               }}
               key={index}
             >
-              <div className={`${expand ? '' : 'inactive'}`} key={`nested-${index}`}>
+              <div
+                className={`${expand ? '' : 'inactive'}`}
+                key={`nested-${index}`}
+              >
                 <Explorer item={item} current={highlight} />
               </div>
             </div>

package/src/app/pages/NamespacePage/NodeTypeSelect.jsx

@@ -3,8 +3,11 @@ import Control from './FieldControl';
 
 export default function NodeTypeSelect({ onChange }) {
   return (
-    <span className="menu-link" style={{ marginLeft: '30px', width: '300px' }}
-                             data-testid="select-node-type">
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-type"
+    >
       <Select
         name="node_type"
         isClearable
@@ -15,11 +18,11 @@ export default function NodeTypeSelect({ onChange }) {
           control: styles => ({ ...styles, backgroundColor: 'white' }),
         }}
         options={[
-          {value: 'source', label: 'Source'},
-          {value: 'transform', label: 'Transform'},
-          {value: 'dimension', label: 'Dimension'},
-          {value: 'metric', label: 'Metric'},
-          {value: 'cube', label: 'Cube'},
+          { value: 'source', label: 'Source' },
+          { value: 'transform', label: 'Transform' },
+          { value: 'dimension', label: 'Dimension' },
+          { value: 'metric', label: 'Metric' },
+          { value: 'cube', label: 'Cube' },
         ]}
       />
     </span>

package/src/app/pages/NamespacePage/TagSelect.jsx

@@ -20,7 +20,11 @@ export default function TagSelect({ onChange }) {
   }, [djClient]);
 
   return (
-    <span className="menu-link" style={{ marginLeft: '30px', width: '350px' }} data-testid="select-tag">
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '350px' }}
+      data-testid="select-tag"
+    >
       <Select
         name="tags"
         isClearable

package/src/app/pages/NamespacePage/UserSelect.jsx

@@ -19,7 +19,11 @@ export default function UserSelect({ onChange, currentUser }) {
   }, [djClient]);
 
   return (
-    <span className="menu-link" style={{ marginLeft: '30px', width: '400px' }} data-testid="select-user">
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '400px' }}
+      data-testid="select-user"
+    >
       {retrieved ? (
         <Select
           name="edited_by"

package/src/app/pages/NamespacePage/__tests__/index.test.jsx

@@ -38,9 +38,15 @@ describe('NamespacePage', () => {
 
   beforeEach(() => {
     fetch.resetMocks();
-    mockDjClient.whoami.mockResolvedValue({username: 'dj'});
-    mockDjClient.users.mockResolvedValue([{username: 'dj'}, {username: 'user1'}]);
-    mockDjClient.listTags.mockResolvedValue([{name: 'tag1'}, {name: 'tag2'}]);
+    mockDjClient.whoami.mockResolvedValue({ username: 'dj' });
+    mockDjClient.users.mockResolvedValue([
+      { username: 'dj' },
+      { username: 'user1' },
+    ]);
+    mockDjClient.listTags.mockResolvedValue([
+      { name: 'tag1' },
+      { name: 'tag2' },
+    ]);
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -82,45 +88,43 @@ describe('NamespacePage', () => {
         type: 'transform',
         mode: 'active',
         updated_at: new Date(),
-        tags: [{name: 'tag1'}],
+        tags: [{ name: 'tag1' }],
         edited_by: ['dj'],
       },
     ]);
-    mockDjClient.listNodesForLanding.mockResolvedValue(
-      {
-        "data": {
-          "findNodesPaginated": {
-              "pageInfo": {
-                  "hasNextPage": true,
-                  "endCursor": "eyJjcmVhdGVkX2F0IjogIjIwMjQtMDQtMTZUMjM6MjI6MjIuNDQxNjg2KzAwOjAwIiwgImlkIjogNjE0fQ==",
-                  "hasPrevPage": true,
-                  "startCursor": "eyJjcmVhdGVkX2F0IjogIjIwMjQtMTAtMTZUMTY6MDM6MTcuMDgzMjY3KzAwOjAwIiwgImlkIjogMjQwOX0="
+    mockDjClient.listNodesForLanding.mockResolvedValue({
+      data: {
+        findNodesPaginated: {
+          pageInfo: {
+            hasNextPage: true,
+            endCursor:
+              'eyJjcmVhdGVkX2F0IjogIjIwMjQtMDQtMTZUMjM6MjI6MjIuNDQxNjg2KzAwOjAwIiwgImlkIjogNjE0fQ==',
+            hasPrevPage: true,
+            startCursor:
+              'eyJjcmVhdGVkX2F0IjogIjIwMjQtMTAtMTZUMTY6MDM6MTcuMDgzMjY3KzAwOjAwIiwgImlkIjogMjQwOX0=',
+          },
+          edges: [
+            {
+              node: {
+                name: 'default.test_node',
+                type: 'DIMENSION',
+                currentVersion: 'v4.0',
+                tags: [],
+                editedBy: ['dj'],
+                current: {
+                  displayName: 'Test Node',
+                  status: 'VALID',
+                  updatedAt: '2024-10-18T15:15:33.532949+00:00',
+                },
+                createdBy: {
+                  username: 'dj',
+                },
               },
-              "edges": [
-                  {
-                      "node": {
-                          "name": "default.test_node",
-                          "type": "DIMENSION",
-                          "currentVersion": "v4.0",
-                          "tags": [],
-                          "editedBy": [
-                              "dj",
-                          ],
-                          "current": {
-                              "displayName": "Test Node",
-                              "status": "VALID",
-                              "updatedAt": "2024-10-18T15:15:33.532949+00:00"
-                          },
-                          "createdBy": {
-                              "username": "dj"
-                          }
-                      }
-                  },
-              ]
-          }
-        }
-      }
-    );
+            },
+          ],
+        },
+      },
+    });
   });
 
   afterEach(() => {
@@ -142,56 +146,58 @@ describe('NamespacePage', () => {
       </MemoryRouter>,
     );
 
-    await waitFor(() => {
-      expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
-      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+    await waitFor(
+      () => {
+        expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+        expect(screen.getByText('Namespaces')).toBeInTheDocument();
 
-      // check that it displays namespaces
-      expect(screen.getByText('common')).toBeInTheDocument();
-      expect(screen.getByText('one')).toBeInTheDocument();
-      expect(screen.getByText('fruits')).toBeInTheDocument();
-      expect(screen.getByText('vegetables')).toBeInTheDocument();
+        // check that it displays namespaces
+        expect(screen.getByText('common')).toBeInTheDocument();
+        expect(screen.getByText('one')).toBeInTheDocument();
+        expect(screen.getByText('fruits')).toBeInTheDocument();
+        expect(screen.getByText('vegetables')).toBeInTheDocument();
 
-      // check that it renders nodes
-      expect(screen.getByText('Test Node')).toBeInTheDocument();
+        // check that it renders nodes
+        expect(screen.getByText('Test Node')).toBeInTheDocument();
 
-      // check that it sorts nodes
-      fireEvent.click(screen.getByText('name'));
-      fireEvent.click(screen.getByText('name'));
-      fireEvent.click(screen.getByText('display Name'));
+        // check that it sorts nodes
+        fireEvent.click(screen.getByText('name'));
+        fireEvent.click(screen.getByText('name'));
+        fireEvent.click(screen.getByText('display Name'));
 
-      // paginate
-      const previousButton = screen.getByText('← Previous');
-      expect(previousButton).toBeDefined();
-      fireEvent.click(previousButton);
-      const nextButton = screen.getByText('Next →');
-      expect(nextButton).toBeDefined();
-      fireEvent.click(nextButton);
+        // paginate
+        const previousButton = screen.getByText('← Previous');
+        expect(previousButton).toBeDefined();
+        fireEvent.click(previousButton);
+        const nextButton = screen.getByText('Next →');
+        expect(nextButton).toBeDefined();
+        fireEvent.click(nextButton);
 
-      // check that we can filter by node type
-      const selectNodeType = screen.getAllByTestId('select-node-type')[0];
-      expect(selectNodeType).toBeDefined();
-      expect(selectNodeType).not.toBeNull();
-      fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
-      fireEvent.click(screen.getByText('Source'));
+        // check that we can filter by node type
+        const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+        expect(selectNodeType).toBeDefined();
+        expect(selectNodeType).not.toBeNull();
+        fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+        fireEvent.click(screen.getByText('Source'));
 
-      // check that we can filter by tag
-      const selectTag = screen.getAllByTestId('select-tag')[0];
-      expect(selectTag).toBeDefined();
-      expect(selectTag).not.toBeNull();
-      fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+        // check that we can filter by tag
+        const selectTag = screen.getAllByTestId('select-tag')[0];
+        expect(selectTag).toBeDefined();
+        expect(selectTag).not.toBeNull();
+        fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
 
-      // check that we can filter by user
-      const selectUser = screen.getAllByTestId('select-user')[0];
-      expect(selectUser).toBeDefined();
-      expect(selectUser).not.toBeNull();
-      fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+        // check that we can filter by user
+        const selectUser = screen.getAllByTestId('select-user')[0];
+        expect(selectUser).toBeDefined();
+        expect(selectUser).not.toBeNull();
+        fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
 
-      // click to open and close tab
-      fireEvent.click(screen.getByText('common'));
-      fireEvent.click(screen.getByText('common'));
-    },
-    { timeout: 3000 });
+        // click to open and close tab
+        fireEvent.click(screen.getByText('common'));
+        fireEvent.click(screen.getByText('common'));
+      },
+      { timeout: 3000 },
+    );
   }, 60000);
 
   it('can add new namespace via add namespace popover', async () => {

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

@@ -57,10 +57,16 @@ export function NamespacePage() {
     let sortableData = [...Object.values(state.nodes)];
     if (sortConfig !== null) {
       sortableData.sort((a, b) => {
-        if (a[sortConfig.key] < b[sortConfig.key] || a.current[sortConfig.key] < b.current[sortConfig.key]) {
+        if (
+          a[sortConfig.key] < b[sortConfig.key] ||
+          a.current[sortConfig.key] < b.current[sortConfig.key]
+        ) {
           return sortConfig.direction === ASC ? -1 : 1;
         }
-        if (a[sortConfig.key] > b[sortConfig.key] || a.current[sortConfig.key] > b.current[sortConfig.key]) {
+        if (
+          a[sortConfig.key] > b[sortConfig.key] ||
+          a.current[sortConfig.key] > b.current[sortConfig.key]
+        ) {
           return sortConfig.direction === ASC ? 1 : -1;
         }
         return 0;
@@ -131,19 +137,41 @@ export function NamespacePage() {
       const nodes = await djClient.listNodesForLanding(
         namespace,
         filters.node_type ? [filters.node_type.toUpperCase()] : [],
-        filters.tags, filters.edited_by, before, after, 50);
+        filters.tags,
+        filters.edited_by,
+        before,
+        after,
+        50,
+      );
       console.log('nodes', nodes);
 
       setState({
         namespace: namespace,
-        nodes: nodes.data ? nodes.data.findNodesPaginated.edges.map(n => n.node) : [],
+        nodes: nodes.data
+          ? nodes.data.findNodesPaginated.edges.map(n => n.node)
+          : [],
       });
       if (nodes.data) {
-        setPrevCursor(nodes.data ? nodes.data.findNodesPaginated.pageInfo.startCursor : '');
-        setNextCursor(nodes.data ? nodes.data.findNodesPaginated.pageInfo.endCursor : '');
-        console.log('setting hasPrevPage, ', nodes.data.findNodesPaginated.pageInfo.hasPrevPage);
-        setHasPrevPage(nodes.data ? nodes.data.findNodesPaginated.pageInfo.hasPrevPage : false);
-        setHasNextPage(nodes.data ? nodes.data.findNodesPaginated.pageInfo.hasNextPage : false);
+        setPrevCursor(
+          nodes.data ? nodes.data.findNodesPaginated.pageInfo.startCursor : '',
+        );
+        setNextCursor(
+          nodes.data ? nodes.data.findNodesPaginated.pageInfo.endCursor : '',
+        );
+        console.log(
+          'setting hasPrevPage, ',
+          nodes.data.findNodesPaginated.pageInfo.hasPrevPage,
+        );
+        setHasPrevPage(
+          nodes.data
+            ? nodes.data.findNodesPaginated.pageInfo.hasPrevPage
+            : false,
+        );
+        setHasNextPage(
+          nodes.data
+            ? nodes.data.findNodesPaginated.pageInfo.hasNextPage
+            : false,
+        );
       }
       setRetrieved(true);
     };
@@ -164,51 +192,64 @@ export function NamespacePage() {
 
   const nodesList = retrieved ? (
     sortedNodes.length > 0 ? (
-    sortedNodes.map(node => (
-      <tr key={node.name}>
+      sortedNodes.map(node => (
+        <tr key={node.name}>
+          <td>
+            <a href={'/nodes/' + node.name} className="link-table">
+              {node.name}
+            </a>
+            <span
+              className="rounded-pill badge bg-secondary-soft"
+              style={{ marginLeft: '0.5rem' }}
+            >
+              {node.currentVersion}
+            </span>
+          </td>
+          <td>
+            <a href={'/nodes/' + node.name} className="link-table">
+              {node.type !== 'source' ? node.current.displayName : ''}
+            </a>
+          </td>
+          <td>
+            <span
+              className={
+                'node_type__' + node.type.toLowerCase() + ' badge node_type'
+              }
+            >
+              {node.type}
+            </span>
+          </td>
+          <td>
+            <NodeStatus node={node} revalidate={false} />
+          </td>
+          <td>
+            <span className="status">
+              {new Date(node.current.updatedAt).toLocaleString('en-us')}
+            </span>
+          </td>
+          <td>
+            <NodeListActions nodeName={node?.name} />
+          </td>
+        </tr>
+      ))
+    ) : (
+      <tr>
         <td>
-          <a href={'/nodes/' + node.name} className="link-table">
-            {node.name}
-          </a>
           <span
-            className="rounded-pill badge bg-secondary-soft"
-            style={{ marginLeft: '0.5rem' }}
+            style={{
+              display: 'block',
+              marginTop: '2rem',
+              marginLeft: '2rem',
+              fontSize: '16px',
+            }}
           >
-            {node.currentVersion}
+            There are no nodes in{' '}
+            <a href={`/namespaces/${namespace}`}>{namespace}</a> with the above
+            filters!
           </span>
         </td>
-        <td>
-          <a href={'/nodes/' + node.name} className="link-table">
-            {node.type !== 'source' ? node.current.displayName : ''}
-          </a>
-        </td>
-        <td>
-          <span className={'node_type__' + node.type.toLowerCase() + ' badge node_type'}>
-            {node.type}
-          </span>
-        </td>
-        <td>
-          <NodeStatus node={node} revalidate={false} />
-        </td>
-        <td>
-          <span className="status">
-            {new Date(node.current.updatedAt).toLocaleString('en-us')}
-          </span>
-        </td>
-        <td>
-          <NodeListActions nodeName={node?.name} />
-        </td>
       </tr>
-    ))
-  ) : (
-    <tr>
-      <td>
-        <span style={{ display: 'block', marginTop: '2rem', marginLeft: '2rem', fontSize: '16px' }}>
-          There are no nodes in <a href={`/namespaces/${namespace}`}>{namespace}</a> with the above filters!
-        </span>
-      </td>
-    </tr>
-  )
+    )
   ) : (
     <tr>
       <td>
@@ -318,8 +359,23 @@ export function NamespacePage() {
               <tfoot>
                 <tr>
                   <td>
-                    {retrieved && hasPrevPage ? <a onClick={loadPrev} className="previous round pagination">← Previous</a> : ''}
-                    {retrieved && hasNextPage ? <a onClick={loadNext} className="next round pagination">Next →</a> : ''}
+                    {retrieved && hasPrevPage ? (
+                      <a
+                        onClick={loadPrev}
+                        className="previous round pagination"
+                      >
+                        ← Previous
+                      </a>
+                    ) : (
+                      ''
+                    )}
+                    {retrieved && hasNextPage ? (
+                      <a onClick={loadNext} className="next round pagination">
+                        Next →
+                      </a>
+                    ) : (
+                      ''
+                    )}
                   </td>
                 </tr>
               </tfoot>

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

@@ -256,6 +256,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
                   <th className="text-start">Output Dataset</th>
                   <th>Valid Through</th>
                   <th>Partitions</th>
+                  <th>Links</th>
                 </tr>
               </thead>
               <tbody>
@@ -299,6 +300,21 @@ export default function NodeMaterializationTab({ node, djClient }) {
                       </span>
                     </span>
                   </td>
+                  <td>
+                    {node.availability.links !== null ? (
+                      Object.entries(node.availability.links).map(
+                        ([key, value]) => (
+                          <div key={key}>
+                            <a href={value} target="_blank" rel="noreferrer">
+                              {key}
+                            </a>
+                          </div>
+                        ),
+                      )
+                    ) : (
+                      <></>
+                    )}
+                  </td>
                 </tr>
               </tbody>
             </table>

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

@@ -81,7 +81,9 @@ export default function NodeStatus({ node, revalidate = true }) {
     <>
       {revalidate && validation?.errors?.length > 0 ? (
         displayValidation
-      ) : validation?.status === 'valid' || node?.status === 'valid' || node?.current?.status === 'VALID' ? (
+      ) : validation?.status === 'valid' ||
+        node?.status === 'valid' ||
+        node?.current?.status === 'VALID' ? (
         <span
           className="status__valid status"
           style={{ alignContent: 'center' }}

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

@@ -25,7 +25,7 @@ export default function NotebookDownload({ node }) {
     <>
       <div
         className="badge download_notebook"
-        style={{cursor: 'pointer', backgroundColor: '#ffefd0'}}
+        style={{ cursor: 'pointer', backgroundColor: '#ffefd0' }}
         tabIndex="0"
         height="45px"
         onClick={downloadFile}

package/src/app/pages/NodePage/__tests__/NodeMaterializationTab.test.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeMaterializationTab from '../NodeMaterializationTab';
+
+describe('<NodeMaterializationTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    materializations: jest.fn(),
+  };
+
+  const mockMaterializations = [
+    {
+      name: 'mat_one',
+      config: {},
+      schedule: '@daily',
+      job: 'SparkSqlMaterializationJob',
+      backfills: [
+        {
+          spec: [
+            {
+              column_name: 'date',
+              values: ['20200101'],
+              range: ['20201010'],
+            },
+          ],
+          urls: ['https://example.com/'],
+        },
+      ],
+      strategy: 'full',
+      output_tables: ['table1'],
+      urls: ['https://example.com/'],
+    },
+  ];
+
+  const mockNode = {
+    node_revision_id: 1,
+    node_id: 1,
+    type: 'source',
+    name: 'default.repair_orders',
+    display_name: 'Default: Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: 'roads',
+    table: 'repair_orders',
+    description: 'Repair orders',
+    query: null,
+    availability: {
+      catalog: 'default',
+      categorical_partitions: [],
+      max_temporal_partition: ['2023', '01', '25'],
+      min_temporal_partition: ['2022', '01', '01'],
+      partitions: [],
+      schema_: 'foo',
+      table: 'bar',
+      temporal_partitions: [],
+      valid_through_ts: 1729667463,
+      url: 'https://www.table.com',
+      links: { dashboard: 'https://www.foobar.com/dashboard' },
+    },
+    columns: [
+      {
+        name: 'repair_order_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: {
+          type_: 'temporal',
+          format: 'YYYYMMDD',
+          granularity: 'day',
+        },
+      },
+      {
+        name: 'municipality_id',
+        type: 'string',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+      {
+        name: 'hard_hat_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+    ],
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [
+      {
+        name: 'mat1',
+        config: {},
+        schedule: 'string',
+        job: 'string',
+        backfills: [
+          {
+            spec: [
+              {
+                column_name: 'string',
+                values: ['string'],
+                range: ['string'],
+              },
+            ],
+            urls: ['string'],
+          },
+        ],
+        strategy: 'string',
+        output_tables: ['string'],
+        urls: ['https://example.com/'],
+      },
+    ],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    mockDjClient.materializations.mockReset();
+  });
+
+  it('renders NodeMaterializationTab tab correctly', async () => {
+    mockDjClient.materializations.mockReturnValue(mockMaterializations);
+
+    render(<NodeMaterializationTab node={mockNode} djClient={mockDjClient} />);
+    await waitFor(() => {
+      const link = screen.getByText('dashboard').closest('a');
+      expect(link).toHaveAttribute('href', `https://www.foobar.com/dashboard`);
+    });
+  });
+});

package/src/app/pages/Root/index.tsx

@@ -72,7 +72,7 @@ export function Root() {
                   <div className="dropdown">
                     <a
                       className="btn btn-link dropdown-toggle"
-                      href="#"
+                      href="/"
                       id="docsDropdown"
                       role="button"
                       aria-expanded="false"

package/src/app/services/DJService.js

@@ -6,7 +6,7 @@ const DJ_URL = process.env.REACT_APP_DJ_URL
 
 const DJ_GQL = process.env.REACT_APP_DJ_GQL
   ? process.env.REACT_APP_DJ_GQL
-  : 'http://localhost:8000/graphql';
+  : process.env.REACT_APP_DJ_URL + '/graphql';
 
 export const DataJunctionAPI = {
   listNodesForLanding: async function (

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

@@ -426,9 +426,12 @@ describe('DataJunctionAPI', () => {
     const nmspce = 'sampleNamespace';
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.namespace(nmspce);
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/${nmspce}?edited_by=undefined&with_edited_by=true`, {
-      credentials: 'include',
-    });
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/namespaces/${nmspce}?edited_by=undefined&with_edited_by=true`,
+      {
+        credentials: 'include',
+      },
+    );
   });
 
   it('calls sql correctly', async () => {
@@ -489,9 +492,9 @@ describe('DataJunctionAPI', () => {
     const sampleNode = {
       name: 'sampleNode',
       columns: [
-        { name: 'column1', dimension: { name: 'dimension1' }, },
+        { name: 'column1', dimension: { name: 'dimension1' } },
         { name: 'column2', dimension: null },
-        { name: 'column3', dimension: { name: 'dimension2' }, },
+        { name: 'column3', dimension: { name: 'dimension2' } },
       ],
     };
 
@@ -1073,7 +1076,15 @@ describe('DataJunctionAPI', () => {
   it('calls listNodesForLanding correctly', () => {
     fetch.mockResponseOnce(JSON.stringify({}));
 
-    DataJunctionAPI.listNodesForLanding('', ['source'], [], '', null, null, 100);
+    DataJunctionAPI.listNodesForLanding(
+      '',
+      ['source'],
+      [],
+      '',
+      null,
+      null,
+      100,
+    );
     expect(fetch).toHaveBeenCalledWith(
       `${DJ_URL}/graphql`,
       expect.objectContaining({

package/src/styles/index.css

@@ -1284,67 +1284,67 @@ pre {
 
 .backfills {
   margin-left: -4rem;
-  --spacing : 1.5rem;
-  --radius  : 10px;
+  --spacing: 1.5rem;
+  --radius: 10px;
 }
 
-.backfills li{
-  display      : block;
-  position     : relative;
-  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+.backfills li {
+  display: block;
+  position: relative;
+  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
 }
 
-.backfills ul{
-  margin-left  : calc(var(--radius) - var(--spacing));
-  padding-left : 2rem;
+.backfills ul {
+  margin-left: calc(var(--radius) - var(--spacing));
+  padding-left: 2rem;
 }
 
-.backfills ul li{
-  border-left : 2px solid #ddd;
+.backfills ul li {
+  border-left: 2px solid #ddd;
 }
 
-.backfills ul li:last-child{
-  border-color : transparent;
+.backfills ul li:last-child {
+  border-color: transparent;
 }
 
-.backfills ul li::before{
-  content      : '';
-  display      : block;
-  position     : absolute;
-  top          : calc(var(--spacing) / -2);
-  left         : -2px;
-  width        : calc(var(--spacing) + 2px);
-  height       : calc(var(--spacing) + 1px);
-  border       : solid #ddd;
-  border-width : 0 0 2px 2px;
+.backfills ul li::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(var(--spacing) / -2);
+  left: -2px;
+  width: calc(var(--spacing) + 2px);
+  height: calc(var(--spacing) + 1px);
+  border: solid #ddd;
+  border-width: 0 0 2px 2px;
 }
 
-.backfills summary{
-  display : block;
-  cursor  : pointer;
+.backfills summary {
+  display: block;
+  cursor: pointer;
   margin-bottom: 10px;
 }
 
 .backfills summary::marker,
-.backfills summary::-webkit-details-marker{
-  display : none;
+.backfills summary::-webkit-details-marker {
+  display: none;
 }
 
-.backfills summary:focus{
-  outline : none;
+.backfills summary:focus {
+  outline: none;
 }
 
-.backfills summary:focus-visible{
-  outline : 1px dotted #000;
+.backfills summary:focus-visible {
+  outline: 1px dotted #000;
 }
 
-.backfills summary::before{
-  z-index    : 1;
+.backfills summary::before {
+  z-index: 1;
   /*background : #696 url('expand-collapse.svg') 0 0;*/
 }
 
-.backfills details[open] > summary::before{
-  background-position : calc(-2 * var(--radius)) 0;
+.backfills details[open] > summary::before {
+  background-position: calc(-2 * var(--radius)) 0;
 }
 
 .backfills_header {
@@ -1371,32 +1371,32 @@ pre {
   border-radius: 2px;
   border-style: none;
   padding: 0.4rem;
-  font-family: Lato, "sans-serif";
+  font-family: Lato, 'sans-serif';
   font-size: 110%;
   border-right: 16px solid transparent;
   margin-left: 0.4rem;
 }
 
 .backfills summary::marker,
-.backfills summary::-webkit-details-marker{
-  display : none;
+.backfills summary::-webkit-details-marker {
+  display: none;
 }
 
-.backfills summary:focus{
-  outline : none;
+.backfills summary:focus {
+  outline: none;
 }
 
-.backfills summary:focus-visible{
-  outline : 1px dotted #000;
+.backfills summary:focus-visible {
+  outline: 1px dotted #000;
 }
 
-.backfills summary::before{
-  z-index    : 1;
+.backfills summary::before {
+  z-index: 1;
   /*background : #696 url('expand-collapse.svg') 0 0;*/
 }
 
-.backfills details[open] > summary::before{
-  background-position : calc(-2 * var(--radius)) 0;
+.backfills details[open] > summary::before {
+  background-position: calc(-2 * var(--radius)) 0;
 }
 
 .backfills_header {
@@ -1445,8 +1445,8 @@ table {
   position: absolute;
   z-index: 1;
 
-    top: -5px;
-    left: 125%;
+  top: -5px;
+  left: 125%;
   /*bottom: 125%;*/
   /*left: 50%;*/
   margin-left: -60px;
@@ -1455,7 +1455,7 @@ table {
 }
 
 .tooltip .tooltiptext::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 100%;
   left: 50%;
@@ -1476,13 +1476,19 @@ table {
   grid-template-rows: 250px 1fr;
   gap: 20px;
   grid-template-areas:
-    "left righttop"
-    "left rightbottom";
+    'left righttop'
+    'left rightbottom';
   margin-top: 1rem;
 }
-.left { grid-area: left; }
-.righttop { grid-area: righttop; }
-.rightbottom { grid-area: rightbottom; }
+.left {
+  grid-area: left;
+}
+.righttop {
+  grid-area: righttop;
+}
+.rightbottom {
+  grid-area: rightbottom;
+}
 
 .queryrunner-query pre {
   border-radius: 0;
@@ -1538,4 +1544,4 @@ table {
 }
 .dropdown:hover .dropdown-menu {
   display: block;
-}
+}

package/src/styles/node-list.css

@@ -1,4 +1,4 @@
 table {
   width: 100%;
   height: min-content;
-}
+}