datajunction-ui 0.0.1-a108 → 0.0.1-a110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a108",
+  "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/CubeBuilderPage/DimensionsSelect.jsx

@@ -30,16 +30,14 @@ export const DimensionsSelect = ({ cube }) => {
     const fetchData = async () => {
       let cubeDimensions = undefined;
       if (cube) {
-        cubeDimensions = cube?.cube_elements
-          .filter(element => element.type === 'dimension')
-          .map(cubeDim => {
-            return {
-              value: cubeDim.node_name + '.' + cubeDim.name,
-              label:
-                labelize(cubeDim.name) +
-                (cubeDim.properties?.includes('primary_key') ? ' (PK)' : ''),
-            };
-          });
+        cubeDimensions = cube?.current.cubeDimensions.map(cubeDim => {
+          return {
+            value: cubeDim.name,
+            label:
+              labelize(cubeDim.attribute) +
+              (cubeDim.properties?.includes('primary_key') ? ' (PK)' : ''),
+          };
+        });
         setDefaultDimensions(cubeDimensions);
         setValue(cubeDimensions.map(m => m.value));
       }

package/src/app/pages/CubeBuilderPage/MetricsSelect.jsx

@@ -24,14 +24,12 @@ export const MetricsSelect = ({ cube }) => {
   useEffect(() => {
     const fetchData = async () => {
       if (cube) {
-        const cubeMetrics = cube?.cube_elements
-          .filter(element => element.type === 'metric')
-          .map(metric => {
-            return {
-              value: metric.node_name,
-              label: metric.node_name,
-            };
-          });
+        const cubeMetrics = cube?.current.cubeMetrics.map(metric => {
+          return {
+            value: metric.name,
+            label: metric.name,
+          };
+        });
         setDefaultMetrics(cubeMetrics);
         await setValue(cubeMetrics.map(m => m.value));
       }

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

@@ -10,10 +10,13 @@ const mockDjClient = {
   createCube: jest.fn(),
   namespaces: jest.fn(),
   cube: jest.fn(),
+  getCubeForEditing: jest.fn(),
   node: jest.fn(),
   listTags: jest.fn(),
   tagsNode: jest.fn(),
   patchCube: jest.fn(),
+  users: jest.fn(),
+  whoami: jest.fn(),
 };
 
 const mockMetrics = [
@@ -23,81 +26,44 @@ const mockMetrics = [
 ];
 
 const mockCube = {
-  node_revision_id: 102,
-  node_id: 33,
-  type: 'cube',
   name: 'default.repair_orders_cube',
-  display_name: 'Default: Repair Orders Cube',
-  version: 'v4.0',
-  description: 'Repairs cube',
-  availability: null,
-  cube_elements: [
+  type: 'CUBE',
+  owners: [
     {
-      name: 'default_DOT_total_repair_cost',
-      display_name: 'Total Repair Cost',
-      node_name: 'default.total_repair_cost',
-      type: 'metric',
-      partition: null,
-    },
-    {
-      name: 'default_DOT_num_repair_orders',
-      display_name: 'Num Repair Orders',
-      node_name: 'default.num_repair_orders',
-      type: 'metric',
-      partition: null,
-    },
-    {
-      name: 'country',
-      display_name: 'Country',
-      node_name: 'default.hard_hat',
-      type: 'dimension',
-      partition: null,
-    },
-    {
-      name: 'state',
-      display_name: 'State',
-      node_name: 'default.hard_hat',
-      type: 'dimension',
-      partition: null,
+      username: 'someone@example.com',
     },
   ],
-  query: '',
-  columns: [
-    {
-      name: 'default.total_repair_cost',
-      display_name: 'Total Repair Cost',
-      type: 'double',
-      attributes: [],
-      dimension: null,
-      partition: null,
-    },
-    {
-      name: 'default.num_repair_orders',
-      display_name: 'Num Repair Orders',
-      type: 'bigint',
-      attributes: [],
-      dimension: null,
-      partition: null,
-    },
-    {
-      name: 'default.hard_hat.country',
-      display_name: 'Country',
-      type: 'string',
-      attributes: [],
-      dimension: null,
-      partition: null,
-    },
+  current: {
+    displayName: 'Default: Repair Orders Cube',
+    description: 'Repairs cube',
+    mode: 'DRAFT',
+    cubeMetrics: [
+      {
+        name: 'default.total_repair_cost',
+      },
+      {
+        name: 'default.num_repair_orders',
+      },
+    ],
+    cubeDimensions: [
+      {
+        name: 'default.hard_hat.country',
+        attribute: 'country',
+        properties: ['dimension'],
+      },
+      {
+        name: 'default.hard_hat.state',
+        attribute: 'state',
+        properties: ['dimension'],
+      },
+    ],
+  },
+  tags: [
     {
-      name: 'default.hard_hat.state',
-      display_name: 'State',
-      type: 'string',
-      attributes: [],
-      dimension: null,
-      partition: null,
+      name: 'repairs',
+      displayName: 'Repairs Domain',
     },
   ],
-  updated_at: '2023-12-03T06:51:09.598532+00:00',
-  materializations: [],
 };
 
 const mockCommonDimensions = [
@@ -205,11 +171,12 @@ describe('CubeBuilderPage', () => {
     mockDjClient.commonDimensions.mockResolvedValue(mockCommonDimensions);
     mockDjClient.createCube.mockResolvedValue({ status: 201, json: {} });
     mockDjClient.namespaces.mockResolvedValue(['default']);
-    mockDjClient.cube.mockResolvedValue(mockCube);
-    mockDjClient.node.mockResolvedValue(mockCube);
+    mockDjClient.getCubeForEditing.mockResolvedValue(mockCube);
     mockDjClient.listTags.mockResolvedValue([]);
     mockDjClient.tagsNode.mockResolvedValue([]);
     mockDjClient.patchCube.mockResolvedValue({ status: 201, json: {} });
+    mockDjClient.users.mockResolvedValue([{ username: 'dj' }]);
+    mockDjClient.whoami.mockResolvedValue({ username: 'dj' });
 
     window.scrollTo = jest.fn();
   });
@@ -342,7 +309,7 @@ describe('CubeBuilderPage', () => {
     );
     expect(screen.getAllByText('Edit')[0]).toBeInTheDocument();
     await waitFor(() => {
-      expect(mockDjClient.cube).toHaveBeenCalled();
+      expect(mockDjClient.getCubeForEditing).toHaveBeenCalled();
     });
     await waitFor(() => {
       expect(mockDjClient.metrics).toHaveBeenCalled();
@@ -399,6 +366,7 @@ describe('CubeBuilderPage', () => {
           'default.date_dim.dateint',
         ],
         [],
+        [],
       );
     });
   });

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

@@ -12,6 +12,7 @@ import NodeNameField from '../../components/forms/NodeNameField';
 import { MetricsSelect } from './MetricsSelect';
 import { DimensionsSelect } from './DimensionsSelect';
 import { TagsField } from '../AddEditNodePage/TagsField';
+import { OwnersField } from '../AddEditNodePage/OwnersField';
 
 export function CubeBuilderPage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -30,6 +31,7 @@ export function CubeBuilderPage() {
     dimensions: [],
     filters: [],
     tags: [],
+    owners: [],
   };
 
   const handleSubmit = (values, { setSubmitting, setStatus }) => {
@@ -85,6 +87,7 @@ export function CubeBuilderPage() {
       values.metrics,
       values.dimensions,
       values.filters || [],
+      values.owners,
     );
     const tagsResponse = await djClient.tagsNode(
       values.name,
@@ -106,10 +109,15 @@ export function CubeBuilderPage() {
     }
   };
 
-  const updateFieldsWithNodeData = (data, setFieldValue, setSelectTags) => {
-    setFieldValue('display_name', data.display_name || '', false);
-    setFieldValue('description', data.description || '', false);
-    setFieldValue('mode', data.mode || 'draft', false);
+  const updateFieldsWithNodeData = (
+    data,
+    setFieldValue,
+    setSelectTags,
+    setSelectOwners,
+  ) => {
+    setFieldValue('display_name', data.current.displayName || '', false);
+    setFieldValue('description', data.current.description || '', false);
+    setFieldValue('mode', data.current.mode.toLowerCase() || 'draft', false);
     setFieldValue(
       'tags',
       data.tags.map(tag => tag.name),
@@ -119,10 +127,19 @@ export function CubeBuilderPage() {
     setSelectTags(
       <TagsField
         defaultValue={data.tags.map(t => {
-          return { value: t.name, label: t.display_name };
+          return { value: t.name, label: t.displayName };
         })}
       />,
     );
+    if (data.owners) {
+      setSelectOwners(
+        <OwnersField
+          defaultValue={data.owners.map(owner => {
+            return { value: owner.username, label: owner.username };
+          })}
+        />,
+      );
+    }
   };
 
   const staticFieldsInEdit = () => (
@@ -159,14 +176,20 @@ export function CubeBuilderPage() {
           {function Render({ isSubmitting, status, setFieldValue, props }) {
             const [node, setNode] = useState([]);
             const [selectTags, setSelectTags] = useState(null);
+            const [selectOwners, setSelectOwners] = useState(null);
 
             // Get cube
             useEffect(() => {
               const fetchData = async () => {
                 if (name) {
-                  const cube = await djClient.cube(name);
+                  const cube = await djClient.getCubeForEditing(name);
                   setNode(cube);
-                  updateFieldsWithNodeData(cube, setFieldValue, setSelectTags);
+                  updateFieldsWithNodeData(
+                    cube,
+                    setFieldValue,
+                    setSelectTags,
+                    setSelectOwners,
+                  );
                 }
               };
               fetchData().catch(console.error);
@@ -243,6 +266,7 @@ export function CubeBuilderPage() {
                       </Field>
                     </div>
                     {action === Action.Edit ? selectTags : <TagsField />}
+                    {action === Action.Edit ? selectOwners : <OwnersField />}
                     <button
                       type="submit"
                       disabled={isSubmitting}

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