datajunction-ui 0.0.1-a109 → 0.0.1-a110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a109",
+  "version": "0.0.1a110",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -83,6 +83,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-test-renderer": "18.2.0",
     "reactflow": "^11.7.0",
+    "recharts": "3.0.2",
     "redux-injectors": "2.1.0",
     "redux-saga": "1.2.1",
     "rimraf": "3.0.2",
@@ -97,7 +98,7 @@
     "stylelint-config-recommended": "9.0.0",
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
-    "typescript": "4.6.4",
+    "typescript": "5.8.3",
     "unidiff": "1.0.4",
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",

package/src/app/icons/AlertIcon.jsx

@@ -5,6 +5,7 @@ const AlertIcon = props => (
     viewBox="0 0 24 24"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <title>alert_fill</title>
     <g id="page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/app/icons/InvalidIcon.jsx

@@ -1,11 +1,13 @@
-const InvalidIcon = props => (
+const InvalidIcon = ({ width = '25px', height = '25px', style = {} }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="25"
-    height="25"
+    width={width}
+    height={height}
+    style={style}
     fill="currentColor"
     className="bi bi-x-circle-fill"
     viewBox="0 0 16 16"
+    data-testid="invalid-icon"
   >
     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
   </svg>

package/src/app/icons/NodeIcon.jsx

@@ -0,0 +1,49 @@
+const NodeIcon = ({
+  width = '45px',
+  height = '45px',
+  color = '#cccccc',
+  style = {},
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+    data-testid="node-icon"
+  >
+    <path
+      opacity="0.317243"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z"
+      fill={color}
+    ></path>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z"
+      fill={color}
+    ></path>
+    <mask
+      id="mask0"
+      type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="9"
+      y="7"
+      width="12"
+      height="16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z"
+        fill="white"
+      ></path>
+    </mask>
+    <g mask="url(#mask0)"></g>
+  </svg>
+);
+
+export default NodeIcon;

package/src/app/icons/ValidIcon.jsx

@@ -1,11 +1,13 @@
-const ValidIcon = props => (
+const ValidIcon = ({ width = '25px', height = '25px', style = {} }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="25"
-    height="25"
+    width={width}
+    height={height}
+    style={style}
     fill="currentColor"
     className="bi bi-check-circle-fill"
     viewBox="0 0 16 16"
+    data-testid="valid-icon"
   >
     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
   </svg>

package/src/app/index.tsx

@@ -8,6 +8,7 @@ import { Helmet } from 'react-helmet-async';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import { NamespacePage } from './pages/NamespacePage/Loadable';
+import { OverviewPage } from './pages/OverviewPage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
 import RevisionDiff from './pages/NodePage/RevisionDiff';
 import { SQLBuilderPage } from './pages/SQLBuilderPage/Loadable';
@@ -116,6 +117,11 @@ export function App() {
                       <Route path="tags" key="tags">
                         <Route path=":name" element={<TagPage />} />
                       </Route>
+                      <Route
+                        path="overview"
+                        key="overview"
+                        element={<OverviewPage />}
+                      />
                     </>
                   }
                 />

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