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

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

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

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { NodesByTypePanel } from '../NodesByTypePanel';
+
+describe('<NodesByTypePanel />', () => {
+  it('fetches nodes & materializations by type and renders them correctly', async () => {
+    const mockNodesByType = [
+      { name: 'source', value: 5 },
+      { name: 'cube', value: 2 },
+    ];
+    const mockMaterializationsByType = [
+      { name: 'transform', value: 3 },
+      { name: 'metric', value: 1 },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_counts_by_type: jest.fn().mockResolvedValue(mockNodesByType),
+        materialization_counts_by_type: jest
+          .fn()
+          .mockResolvedValue(mockMaterializationsByType),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NodesByTypePanel />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for async calls to complete
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_type).toHaveBeenCalled();
+      expect(
+        mockDjClient.system.materialization_counts_by_type,
+      ).toHaveBeenCalled();
+    });
+
+    // Check that nodes by type appear
+    expect(screen.getByText('Nodes by Type')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('sources')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('cubes')).toBeInTheDocument();
+
+    // Check that materializations by type appear
+    expect(screen.getByText('Materializations by Type')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('transforms')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('metrics')).toBeInTheDocument();
+
+    // Should render an icon for each entry
+    const icons = screen.getAllByTestId('node-icon');
+    expect(icons).toHaveLength(
+      mockNodesByType.length + mockMaterializationsByType.length,
+    );
+  });
+
+  it('renders nothing if no data returned', async () => {
+    const mockDjClient = {
+      system: {
+        node_counts_by_type: jest.fn().mockResolvedValue([]),
+        materialization_counts_by_type: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NodesByTypePanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_type).toHaveBeenCalled();
+      expect(
+        mockDjClient.system.materialization_counts_by_type,
+      ).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText('Nodes by Type')).toBeInTheDocument();
+    expect(screen.getByText('Materializations by Type')).toBeInTheDocument();
+    expect(screen.queryByText('sources')).not.toBeInTheDocument();
+    expect(screen.queryByText('metrics')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,78 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { OverviewPanel } from '../OverviewPanel';
+
+describe('<OverviewPanel />', () => {
+  it('renders Active Nodes and Valid/Invalid nodes correctly', async () => {
+    const mockNodesByActive = [
+      { name: 'true', value: 7 },
+      { name: 'false', value: 2 }, // Should be filtered out
+    ];
+
+    const mockNodesByStatus = [
+      { name: 'VALID', value: 5 },
+      { name: 'INVALID', value: 3 },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_counts_by_active: jest.fn().mockResolvedValue(mockNodesByActive),
+        node_counts_by_status: jest.fn().mockResolvedValue(mockNodesByStatus),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <OverviewPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_active).toHaveBeenCalled();
+      expect(mockDjClient.system.node_counts_by_status).toHaveBeenCalled();
+    });
+
+    // Chart title
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+
+    // Active Nodes section
+    expect(screen.getByText('7')).toBeInTheDocument();
+    expect(screen.getByText('Active Nodes')).toBeInTheDocument();
+    expect(screen.getAllByTestId('node-icon')).toHaveLength(1);
+
+    // Valid/Invalid status section
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('valid')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('invalid')).toBeInTheDocument();
+
+    // Should render one ValidIcon and one InvalidIcon
+    expect(screen.getAllByTestId('valid-icon')).toHaveLength(1);
+    expect(screen.getAllByTestId('invalid-icon')).toHaveLength(1);
+  });
+
+  it('renders no badges if data is empty', async () => {
+    const mockDjClient = {
+      system: {
+        node_counts_by_active: jest.fn().mockResolvedValue([]),
+        node_counts_by_status: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <OverviewPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_active).toHaveBeenCalled();
+      expect(mockDjClient.system.node_counts_by_status).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-icon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('valid-icon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('invalid-icon')).not.toBeInTheDocument();
+  });
+});