datajunction-ui 0.0.1-rc.9 → 0.0.3

package/src/app/pages/OverviewPage/ByStatusPanel.jsx

@@ -0,0 +1,69 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
+
+const COLOR_MAPPING = {
+  valid: '#00b368',
+  invalid: '#FF91A3', // '#b34b00',
+};
+
+export const ByStatusPanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodesByStatus, setNodesByStatus] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodesByStatus(await djClient.system.node_counts_by_status());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <>
+      <div className="chart-box" style={{ flex: '0 0 2%' }}>
+        <div className="horiz-box">
+          <div className="chart-title">Nodes By Status</div>
+          {nodesByStatus?.map(entry => (
+            <div
+              className="jss316 badge"
+              style={{ color: '#000', margin: '0.2em' }}
+              key={entry.name}
+            >
+              <span style={{ color: COLOR_MAPPING[entry.name.toLowerCase()] }}>
+                {entry.name === 'VALID' ? (
+                  <ValidIcon
+                    width={'45px'}
+                    height={'45px'}
+                    style={{ marginTop: '0.75em' }}
+                  />
+                ) : (
+                  <InvalidIcon
+                    width={'45px'}
+                    height={'45px'}
+                    style={{ marginTop: '0.75em' }}
+                  />
+                )}
+              </span>
+
+              <div style={{ display: 'inline-grid', alignItems: 'center' }}>
+                <strong
+                  className="horiz-box-value"
+                  style={{
+                    color: COLOR_MAPPING[entry.name.toLowerCase()],
+                  }}
+                >
+                  {entry.value}
+                </strong>
+                <span className={'horiz-box-label'}>
+                  {entry.name.toLowerCase()} nodes
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/app/pages/OverviewPage/DimensionNodeUsagePanel.jsx

@@ -0,0 +1,48 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export const DimensionNodeUsagePanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [dimensionNodes, setDimensionNodes] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setDimensionNodes(await djClient.system.dimensions());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <>
+      <div className="chart-box">
+        <div className="chart-title">Dimension Node Usage</div>
+        <table className="card-inner-table table" style={{ marginTop: '0' }}>
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Dimension</th>
+              <th className="a">Links</th>
+              <th className="a">Cubes</th>
+            </tr>
+          </thead>
+          <tbody>
+            {dimensionNodes
+              ?.sort(
+                (a, b) =>
+                  b.cube_count + b.indegree - (a.cube_count + a.indegree),
+              )
+              .slice(0, 6)
+              .map((dim, index) => (
+                <tr key={index}>
+                  <td className="a">
+                    <a href={`/nodes/${dim.name}`}>{dim.name}</a>
+                  </td>
+                  <td className="a">{dim.indegree}</td>
+                  <td className="a">{dim.cube_count}</td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};

package/src/app/pages/OverviewPage/GovernanceWarningsPanel.jsx

@@ -0,0 +1,107 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import '../../../styles/node-creation.scss';
+const COLOR_MAPPING = {
+  source: '#00C49F',
+  dimension: '#FFBB28', //'#FF8042',
+  transform: '#0088FE',
+  metric: '#ff91a3', //'#FFBB28',
+  cube: '#AA46BE',
+  valid: '#00b368',
+  invalid: '#b34b00',
+};
+
+export const GovernanceWarningsPanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodesWithoutDescription, setNodesWithoutDescription] = useState(null);
+  const [dimensionNodes, setDimensionNodes] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodesWithoutDescription(
+        await djClient.system.nodes_without_description(),
+      );
+      setDimensionNodes(await djClient.system.dimensions());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div className="chart-box" style={{ flex: '1 1 10%', maxWidth: '470px' }}>
+      <div className="chart-title">Governance Warnings</div>
+      <div
+        className="horiz-box"
+        style={{
+          padding: '5px 10px',
+          marginTop: '10px',
+          border: '1px solid #AA46BE30',
+        }}
+      >
+        <span style={{ color: '#FF804255', fontSize: '30px' }}>⚠</span>
+        <span style={{ padding: '10px 12px', fontSize: '18px' }}>
+          Missing Description
+        </span>
+        <div style={{ display: 'block' }}>
+          {nodesWithoutDescription?.map(entry => (
+            <div
+              className="jss316 badge"
+              style={{
+                margin: '5px 10px',
+                fontSize: '14px',
+                padding: '10px',
+                color: COLOR_MAPPING[entry.name.toLowerCase()],
+                backgroundColor: COLOR_MAPPING[entry.name.toLowerCase()] + '10',
+              }}
+              key={entry.name}
+            >
+              <strong>{Math.round(entry.value * 100)}%</strong>{' '}
+              <span>{entry.name.toLowerCase()}s</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div
+        className="horiz-box"
+        style={{
+          padding: '5px 10px',
+          marginTop: '10px',
+          border: '1px solid #AA46BE30',
+        }}
+      >
+        <div
+          style={{ width: '100%', display: 'inline-flex', marginTop: '-10px' }}
+        >
+          <span style={{ color: '#FF804255', fontSize: '40px' }}>∅</span>
+          <span
+            style={{
+              padding: '10px 12px',
+              fontSize: '18px',
+              marginTop: '10px',
+            }}
+          >
+            Orphaned Dimensions
+          </span>
+        </div>
+        <div style={{ display: 'block' }}>
+          <div
+            className="jss316 badge"
+            style={{
+              margin: '5px 10px',
+              fontSize: '14px',
+              padding: '10px',
+              color: COLOR_MAPPING.dimension,
+              backgroundColor: COLOR_MAPPING.dimension + '10',
+            }}
+          >
+            <strong>
+              {dimensionNodes?.filter(
+                dim => dim.indegree === 0 || dim.cube_count === 0,
+              ).length || '...'}
+            </strong>
+            <span> dimension nodes</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/app/pages/OverviewPage/Loadable.jsx

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the Overview page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const OverviewPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.OverviewPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

package/src/app/pages/OverviewPage/NodesByTypePanel.jsx

@@ -0,0 +1,63 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import NodeIcon from '../../icons/NodeIcon';
+import '../../../styles/overview.css';
+
+const COLOR_MAPPING = {
+  source: '#00C49F',
+  dimension: '#FFBB28', //'#FF8042',
+  transform: '#0088FE',
+  metric: '#FF91A3', //'#FFBB28',
+  cube: '#AA46BE',
+  valid: '#00B368',
+  invalid: '#B34B00',
+};
+
+export const NodesByTypePanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodesByType, setNodesByType] = useState(null);
+  const [materializationsByType, setMaterializationsByType] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodesByType(await djClient.system.node_counts_by_type());
+      setMaterializationsByType(
+        await djClient.system.materialization_counts_by_type(),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <>
+      <div className="chart-box" style={{ flex: '0 0 30%', maxWidth: '350px' }}>
+        <div className="chart-title">Nodes by Type</div>
+        <div className="horiz-box">
+          {nodesByType?.map(entry => (
+            <div className="vert-box" key={entry.name}>
+              <NodeIcon color={COLOR_MAPPING[entry.name]} />
+              <strong style={{ color: COLOR_MAPPING[entry.name] }}>
+                {entry.value}
+              </strong>
+              <span>{entry.name}s</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="chart-box" style={{ flex: '0 0 30%', maxWidth: '350px' }}>
+        <div className="chart-title">Materializations by Type</div>
+        <div className="horiz-box">
+          {materializationsByType?.map(entry => (
+            <div className="vert-box" key={entry.name}>
+              <NodeIcon color={COLOR_MAPPING[entry.name]} />
+              <strong style={{ color: COLOR_MAPPING[entry.name] }}>
+                {entry.value}
+              </strong>
+              <span>{entry.name}s</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/app/pages/OverviewPage/OverviewPanel.jsx

@@ -0,0 +1,94 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import NodeIcon from '../../icons/NodeIcon';
+
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
+
+const COLOR_MAPPING = {
+  valid: '#00b368',
+  invalid: '#FF91A3', // '#b34b00',
+};
+
+export const OverviewPanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodesByActive, setNodesByActive] = useState(null);
+  const [nodesByStatus, setNodesByStatus] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodesByActive(await djClient.system.node_counts_by_active());
+      setNodesByStatus(await djClient.system.node_counts_by_status());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div className="chart-box" style={{ flex: '0 0 2%' }}>
+      <div className="chart-title">Overview</div>
+      <div className="horiz-box">
+        {nodesByActive
+          ?.filter(entry => entry.name === 'true')
+          .map(entry => (
+            <div
+              className="jss316 badge"
+              style={{ color: '#000', margin: '0.2em' }}
+            >
+              <NodeIcon color="#FFBB28" style={{ marginTop: '0.75em' }} />
+              <div style={{ display: 'inline-grid', alignItems: 'center' }}>
+                <strong className="horiz-box-value">{entry.value}</strong>
+                <span className={'horiz-box-label'}>
+                  {entry.name === 'true' ? 'Active Nodes' : 'Deactivated'}
+                </span>
+              </div>
+            </div>
+          ))}
+      </div>
+      <div className="horiz-box">
+        {nodesByStatus?.map(entry => (
+          <div
+            className="jss316 badge"
+            style={{ color: '#000', margin: '0.2em', marginLeft: '1.2em' }}
+          >
+            ↳
+            <span
+              style={{
+                color: COLOR_MAPPING[entry.name.toLowerCase()],
+                margin: '0 0.2em 0 0.4em',
+              }}
+            >
+              {entry.name === 'VALID' ? (
+                <ValidIcon
+                  width={'25px'}
+                  height={'25px'}
+                  style={{ marginTop: '0.2em' }}
+                />
+              ) : (
+                <InvalidIcon
+                  width={'25px'}
+                  height={'25px'}
+                  style={{ marginTop: '0.2em' }}
+                />
+              )}
+            </span>
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <strong
+                style={{
+                  color: COLOR_MAPPING[entry.name.toLowerCase()],
+                  margin: '0 2px',
+                  fontSize: '16px',
+                  textAlign: 'left',
+                }}
+              >
+                {entry.value}
+              </strong>
+              <span style={{ fontSize: 'smaller', padding: '5px 2px' }}>
+                {entry.name.toLowerCase()}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/app/pages/OverviewPage/TrendsPanel.jsx

@@ -0,0 +1,66 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import {
+  Legend,
+  Tooltip,
+  ResponsiveContainer,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Bar,
+} from 'recharts';
+
+const COLOR_MAPPING = {
+  source: '#00C49F',
+  dimension: '#FFBB28',
+  transform: '#0088FE',
+  metric: '#FF91A3',
+  cube: '#AA46BE',
+};
+
+export const TrendsPanel = () => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [nodeTrends, setNodeTrends] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setNodeTrends(await djClient.system.node_trends());
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  return (
+    <div className="chart-box" style={{ maxWidth: '60%', flex: '1 1 20%' }}>
+      <div className="chart-title">Trends</div>
+      <ResponsiveContainer width="100%" height={400}>
+        <BarChart
+          width={1000}
+          height={400}
+          data={nodeTrends}
+          margin={{
+            top: 20,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="date" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          {Object.entries(COLOR_MAPPING).map(([key, color]) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              stackId="nodeCount"
+              fill={color}
+              name={key.charAt(0).toUpperCase() + key.slice(1)}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/src/app/pages/OverviewPage/__tests__/ByStatusPanel.test.jsx

@@ -0,0 +1,36 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { ByStatusPanel } from '../ByStatusPanel';
+import DJClientContext from '../../../providers/djclient';
+
+describe('<ByStatusPanel />', () => {
+  it('fetches nodes by status and displays them correctly', async () => {
+    const mockNodeCounts = [
+      { name: 'VALID', value: 10 },
+      { name: 'INVALID', value: 5 },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_counts_by_status: jest.fn().mockResolvedValue(mockNodeCounts),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <ByStatusPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_status).toHaveBeenCalled();
+    });
+
+    // Check that counts are rendered
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+
+    // Check that labels are rendered
+    expect(screen.getByText('valid nodes')).toBeInTheDocument();
+    expect(screen.getByText('invalid nodes')).toBeInTheDocument();
+  });
+});

package/src/app/pages/OverviewPage/__tests__/DimensionNodeUsagePanel.test.jsx

@@ -0,0 +1,76 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { DimensionNodeUsagePanel } from '../DimensionNodeUsagePanel';
+
+describe('<DimensionNodeUsagePanel />', () => {
+  it('fetches dimension nodes and displays them in sorted order', async () => {
+    const mockDimensions = [
+      { name: 'dimension_a', indegree: 2, cube_count: 5 }, // 7
+      { name: 'dimension_b', indegree: 1, cube_count: 10 }, // 11
+      { name: 'dimension_c', indegree: 3, cube_count: 3 }, // 6
+    ];
+
+    const mockDjClient = {
+      system: {
+        dimensions: jest.fn().mockResolvedValue(mockDimensions),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <DimensionNodeUsagePanel />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for the API to be called
+    await waitFor(() => {
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Check that rows are rendered
+    expect(screen.getByText('dimension_b')).toBeInTheDocument();
+    expect(screen.getByText('dimension_a')).toBeInTheDocument();
+    expect(screen.getByText('dimension_c')).toBeInTheDocument();
+
+    // Check that sorting is correct: b (11), a (7), c (6)
+    const rows = screen.getAllByRole('row').slice(1); // skip the header row
+    const names = rows.map(row => row.querySelector('a').textContent);
+    expect(names).toEqual(['dimension_b', 'dimension_a', 'dimension_c']);
+
+    // Check that links have correct hrefs
+    expect(screen.getByText('dimension_b').closest('a')).toHaveAttribute(
+      'href',
+      '/nodes/dimension_b',
+    );
+
+    // Check indegree and cube_count cells
+    expect(screen.getByText('1')).toBeInTheDocument(); // b indegree
+    expect(screen.getByText('10')).toBeInTheDocument(); // b cube_count
+    expect(screen.getByText('2')).toBeInTheDocument(); // a indegree
+    expect(screen.getByText('5')).toBeInTheDocument(); // a cube_count
+  });
+
+  it('handles empty dimensions gracefully', async () => {
+    const mockDjClient = {
+      system: {
+        dimensions: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <DimensionNodeUsagePanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Table should still be there, but no rows
+    expect(screen.getByText('Dimension Node Usage')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('row', { name: /dimension_/ }),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/app/pages/OverviewPage/__tests__/GovernanceWarningsPanel.test.jsx

@@ -0,0 +1,77 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { GovernanceWarningsPanel } from '../GovernanceWarningsPanel';
+
+describe('<GovernanceWarningsPanel />', () => {
+  it('fetches governance warnings and displays percentages and orphaned dimension count', async () => {
+    const mockNodesWithoutDescription = [
+      { name: 'SOURCE', value: 0.1 }, // 10%
+      { name: 'METRIC', value: 0.2 }, // 20%
+    ];
+
+    const mockDimensions = [
+      { name: 'dim_1', indegree: 0, cube_count: 1 }, // orphaned
+      { name: 'dim_2', indegree: 1, cube_count: 0 }, // orphaned
+      { name: 'dim_3', indegree: 2, cube_count: 1 }, // not orphaned
+    ];
+
+    const mockDjClient = {
+      system: {
+        nodes_without_description: jest
+          .fn()
+          .mockResolvedValue(mockNodesWithoutDescription),
+        dimensions: jest.fn().mockResolvedValue(mockDimensions),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <GovernanceWarningsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for both calls to be made and data rendered
+    await waitFor(() => {
+      expect(mockDjClient.system.nodes_without_description).toHaveBeenCalled();
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Check missing description badges
+    expect(screen.getByText('10%')).toBeInTheDocument();
+    expect(screen.getByText('20%')).toBeInTheDocument();
+    expect(screen.getByText('sources')).toBeInTheDocument();
+    expect(screen.getByText('metrics')).toBeInTheDocument();
+
+    // Check orphaned dimension count: should be 2
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText(/dimension nodes/)).toBeInTheDocument();
+
+    // Should show the title
+    expect(screen.getByText('Governance Warnings')).toBeInTheDocument();
+    expect(screen.getByText('Missing Description')).toBeInTheDocument();
+    expect(screen.getByText('Orphaned Dimensions')).toBeInTheDocument();
+  });
+
+  it('shows fallback if no data returned', async () => {
+    const mockDjClient = {
+      system: {
+        nodes_without_description: jest.fn().mockResolvedValue([]),
+        dimensions: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <GovernanceWarningsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.nodes_without_description).toHaveBeenCalled();
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Should show fallback value for orphaned nodes
+    expect(screen.getByText('...')).toBeInTheDocument();
+  });
+});