feat(ui): add percentage in model list (#173)

* feat(ui): add percentage in model list * connect api * fix percentages * fix alert launchPad layout * replace toFixed with numberFormatter * fixies after api review * fix empty layout of launchPad
radicalbit · Oct 30, 2024 · 67af031 · 67af031
1 parent 2d2a015
commit 67af031
Show file tree

Hide file tree

Showing 28 changed files with 437 additions and 193 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -17,7 +17,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@grafana/faro-react": "^1.8.2",
     "@radicalbit/formbit": "1.0.0",
-    "@radicalbit/radicalbit-design-system": "1.1.0",
+    "@radicalbit/radicalbit-design-system": "^1.2.0",
     "@reduxjs/toolkit": "^2.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "ace-builds": "^1.33.2",

diff --git a/ui/src/components/charts/line-chart/index.jsx b/ui/src/components/charts/line-chart/index.jsx
@@ -27,6 +27,7 @@ function LineChart({
   title, color, currentData, referenceData = [],
 }) {
   const handleOnChartReady = (echart) => {
+    console.debug('🚀 ~ handleOnChartReady ~ echart:', echart);
     // To handle the second opening of a modal when the rtkq hook read from cache
     // and the echart graph will render immediately.
     setTimeout(echart.resize);

diff --git a/ui/src/components/charts/pie-chart/index.jsx b/ui/src/components/charts/pie-chart/index.jsx
@@ -9,6 +9,7 @@ import {
 import { PieChart as PieChartEchart } from 'echarts/charts';
 import * as echarts from 'echarts/lib/echarts';
 
+import { numberFormatter } from '@Src/constants';
 import pieChartOptions from './options';
 
 echarts.use([
@@ -21,31 +22,69 @@ echarts.use([
 ]);
 
 function PieChart({ title, data }) {
+  const splittedTitle = title.split(' ');
+
+  if (data <= 0) {
+    return (
+      <div className="flex flex-row items-center gap-2">
+        <EmptyPieChart />
+
+        <Label splittedTitle={splittedTitle} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <EvaluatedPieChart data={data} />
+
+      <Label splittedTitle={splittedTitle} />
+    </div>
+  );
+}
+
+function EmptyPieChart() {
   const handleOnChartReady = (echart) => {
     // To handle the second opening of a modal when the rtkq hook read from cache
     // and the echart graph will render immediately.
     setTimeout(echart.resize);
   };
 
-  const splittedTitle = title.split(' ');
+  return (
+    <ReactEchartsCore
+      echarts={echarts}
+      onChartReady={handleOnChartReady}
+      option={pieChartOptions({ currentData: 0, referenceData: 100 })}
+      style={{ height: '8rem', width: '100%' }}
+    />
+  );
+}
 
-  const currentData = data?.current;
-  const referenceData = data?.reference;
+function EvaluatedPieChart({ data }) {
+  const handleOnChartReady = (echart) => {
+    // To handle the second opening of a modal when the rtkq hook read from cache
+    // and the echart graph will render immediately.
+    setTimeout(echart.resize);
+  };
 
+  const currentData = numberFormatter({ maximumSignificantDigits: 4 }).format(data * 100);
+  const referenceData = numberFormatter({ maximumSignificantDigits: 4 }).format((1 - data) * 100);
   return (
-    <div className="flex flex-row items-center gap-2">
-      <ReactEchartsCore
-        echarts={echarts}
-        onChartReady={handleOnChartReady}
-        option={pieChartOptions({ currentData, referenceData })}
-        style={{ height: '8rem', width: '100%' }}
-      />
+    <ReactEchartsCore
+      echarts={echarts}
+      onChartReady={handleOnChartReady}
+      option={pieChartOptions({ currentData, referenceData })}
+      style={{ height: '8rem', width: '100%' }}
+    />
+  );
+}
 
-      <div className="flex flex-col items-start justify-center">
-        <p className="font-bold text-3xl" style={{ marginBottom: '-0.6rem' }}>{splittedTitle[0]}</p>
+function Label({ splittedTitle }) {
+  return (
+    <div className="flex flex-col items-start justify-center">
+      <p className="font-bold text-3xl" style={{ marginBottom: '-0.6rem' }}>{splittedTitle[0]}</p>
 
-        <p className="m-0 text-2xl tracking-wider">{splittedTitle[1]}</p>
-      </div>
+      <p className="m-0 text-2xl tracking-wider">{splittedTitle[1]}</p>
     </div>
   );
 }

diff --git a/ui/src/components/charts/pie-chart/options.js b/ui/src/components/charts/pie-chart/options.js
@@ -2,27 +2,36 @@ import { CHART_COLOR } from '@Helpers/common-chart-options';
 
 export default function pieChartOptions({ currentData, referenceData }) {
   const options = {
-
     series: [
       {
         percentPrecision: 2,
         type: 'pie',
         radius: ['50%', '80%'],
-        label: {
-          show: true,
-          fontSize: '14',
-          fontWeight: 'bold',
-          color: CHART_COLOR.WHITE,
-          position: 'center',
-          formatter: ({ data: { value } }) => `${value}%`,
-        },
         labelLine: {
           show: false,
         },
         emphasis: { disabled: true },
         data: [
-          { value: currentData, name: 'Current', itemStyle: { color: CHART_COLOR.CURRENT } },
-          { value: referenceData, name: 'Reference', itemStyle: { color: '#f60000' } },
+          {
+            value: currentData,
+            name: 'Current',
+            itemStyle: { color: CHART_COLOR.CURRENT },
+            selected: true,
+            label: {
+              show: true,
+              fontSize: '14',
+              fontWeight: 'bold',
+              color: CHART_COLOR.WHITE,
+              position: 'center',
+              formatter: ({ data: { value } }) => value === 0 ? '--' : `${value}%`,
+            },
+          },
+          {
+            value: referenceData,
+            name: 'Reference',
+            itemStyle: { color: referenceData === 100 ? '#1e2b43' : '#f60000' },
+            label: { show: false },
+          },
         ],
       },
 

diff --git a/ui/src/components/modals/current-import-detail-modal/body.jsx b/ui/src/components/modals/current-import-detail-modal/body.jsx
@@ -55,8 +55,8 @@ function useGetTabs() {
     case ModelTypeEnum.BINARY_CLASSIFICATION:
       return [
         {
-          label: METRICS_TABS.DATA_QUALITIY,
-          key: METRICS_TABS.DATA_QUALITIY,
+          label: METRICS_TABS.DATA_QUALITY,
+          key: METRICS_TABS.DATA_QUALITY,
           children: <BinaryClassificationDataQualityMetrics />,
         },
         {
@@ -74,8 +74,8 @@ function useGetTabs() {
     case ModelTypeEnum.MULTI_CLASSIFICATION:
       return [
         {
-          label: METRICS_TABS.DATA_QUALITIY,
-          key: METRICS_TABS.DATA_QUALITIY,
+          label: METRICS_TABS.DATA_QUALITY,
+          key: METRICS_TABS.DATA_QUALITY,
           children: <MultiClassificationDataQualityMetrics />,
         },
         {
@@ -93,8 +93,8 @@ function useGetTabs() {
     case ModelTypeEnum.REGRESSION:
       return [
         {
-          label: METRICS_TABS.DATA_QUALITIY,
-          key: METRICS_TABS.DATA_QUALITIY,
+          label: METRICS_TABS.DATA_QUALITY,
+          key: METRICS_TABS.DATA_QUALITY,
           children: <RegressionDataQualityMetrics />,
         },
         {

diff --git a/ui/src/container/launchpad/central-row/columns.jsx b/ui/src/container/launchpad/central-row/columns.jsx
@@ -1,6 +1,6 @@
 import JobStatusPin from '@Components/JobStatus/job-status-pin';
 import { columnFactory } from '@Src/components/smart-table/utils';
-import { JOB_STATUS } from '@Src/constants';
+import { JOB_STATUS, numberFormatter } from '@Src/constants';
 import { ModelTypeEnumLabel } from '@Src/store/state/models/constants';
 import { RelativeDateTime, Truncate } from '@radicalbit/radicalbit-design-system';
 
@@ -39,8 +39,8 @@ export const getColumns = (
     activeFilters,
     activeSorter,
     align: 'left',
-    width: '23%',
-    render: (type) => <div className="font-[var(--coo-font-weight-bold)]">{ModelTypeEnumLabel[type]}</div>,
+    width: '21%',
+    render: (type) => <div>{ModelTypeEnumLabel[type]}</div>,
   }),
 
   columnFactory({
@@ -50,10 +50,12 @@ export const getColumns = (
     activeSorter,
     align: 'left',
     width: '10%',
-    render: ({ dataQuality: { current } }) => {
-      const data = (current) ? `${current}%` : '--';
+    render: ({ percentages }) => {
+      const value = percentages?.dataQuality.value;
+      const data = (value && value !== -1) ? `${numberFormatter({ maximumSignificantDigits: 4 }).format(parseFloat(value) * 100)}%` : '--';
+
       return (
-        <div className="font-[var(--coo-font-weight-bold)]">
+        <div>
           {data}
         </div>
       );
@@ -67,10 +69,12 @@ export const getColumns = (
     activeSorter,
     align: 'left',
     width: '10%',
-    render: ({ modelQuality: { current } }) => {
-      const data = (current) ? `${current}%` : '--';
+    render: ({ percentages }) => {
+      const value = percentages?.modelQuality.value;
+      const data = (value && value !== -1) ? `${numberFormatter({ maximumSignificantDigits: 4 }).format(parseFloat(value) * 100)}%` : '--';
+
       return (
-        <div className="font-[var(--coo-font-weight-bold)]">
+        <div>
           {data}
         </div>
       );
@@ -84,10 +88,12 @@ export const getColumns = (
     activeSorter,
     align: 'left',
     width: '10%',
-    render: ({ dataDrift: { current } }) => {
-      const data = (current) ? `${current}%` : '--';
+    render: ({ percentages }) => {
+      const value = percentages?.drift.value;
+      const data = (value && value !== -1) ? `${numberFormatter({ maximumSignificantDigits: 4 }).format(parseFloat(value) * 100)}%` : '--';
+
       return (
-        <div className="font-[var(--coo-font-weight-bold)]">
+        <div>
           {data}
         </div>
       );
@@ -102,7 +108,7 @@ export const getColumns = (
     activeSorter,
     sorter: true,
     align: 'right',
-    width: '10%',
+    width: '13%',
     render: (date) => date && <RelativeDateTime timestamp={date} withTooltip />,
   }),
 ];
diff --git a/ui/src/container/launchpad/central-row/index.jsx b/ui/src/container/launchpad/central-row/index.jsx
@@ -1,9 +1,10 @@
 import PieChart from '@Components/charts/pie-chart';
 import SmartTable from '@Components/smart-table';
 import useModals from '@Hooks/use-modals';
-import { Button, Spinner } from '@radicalbit/radicalbit-design-system';
+import { Button, Spinner, Void } from '@radicalbit/radicalbit-design-system';
 import { ModalsEnum, NamespaceEnum } from '@Src/constants';
 import { modelsApiSlice } from '@Src/store/state/models/api';
+import { useGetOverallModelListQueryWithPolling } from '@Src/store/state/models/polling-hook';
 import { memo } from 'react';
 import { useNavigate } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
@@ -13,6 +14,8 @@ const { useGetOverallStatsQuery } = modelsApiSlice;
 
 function ModelStatsList() {
   const { isLoading } = useGetOverallStatsQuery();
+  const { data } = useGetOverallModelListQueryWithPolling();
+  const count = data?.length;
 
   if (isLoading) {
     <Spinner spinning />;
@@ -23,7 +26,7 @@ function ModelStatsList() {
       <div className="flex flex-row justify-between items-end">
         <OverallCharts />
 
-        <AddNewModel />
+        {count > 0 && <AddNewModel />}
 
       </div>
 
@@ -34,10 +37,9 @@ function ModelStatsList() {
 
 function OverallCharts() {
   const { data } = useGetOverallStatsQuery();
-
-  const dataQualityStats = data?.overallStats.dataQuality;
-  const modelQualityStats = data?.overallStats.modelQuality;
-  const dataDriftStats = data?.overallStats.dataDrift;
+  const dataQualityStats = data?.dataQuality || 0;
+  const modelQualityStats = data?.modelQuality || 0;
+  const dataDriftStats = data?.drift || 0;
 
   return (
     <div className="flex flex-row gap-16 items-start justify-start ">
@@ -55,20 +57,27 @@ function OverallList() {
   const { search } = useSearchParams();
   const navigate = useNavigate();
 
-  const { data } = useGetOverallStatsQuery();
-
-  const modelStats = data?.modelStats.items;
-  const count = data?.modelStats.count;
+  const { data } = useGetOverallModelListQueryWithPolling();
+  const count = data?.length;
 
   const handleOnClick = ({ uuid }) => {
     navigate({ pathname: `/models/${uuid}`, search });
   };
 
+  if (count === 0) {
+    return (
+      <Void
+        actions={<AddNewModel />}
+        description="No models are available."
+      />
+    );
+  }
+
   return (
     <SmartTable
       clickable
       columns={getColumns}
-      dataSource={modelStats}
+      dataSource={data}
       fixedHeader="30rem"
       namespace={NamespaceEnum.MODELS_STATS}
       onRow={({ uuid }) => ({

diff --git a/ui/src/container/launchpad/index.jsx b/ui/src/container/launchpad/index.jsx
@@ -1,10 +1,10 @@
-import Right from './right';
-import TopRow from './top-row';
 import ModelStatsList from './central-row';
+import RightColumn from './right-column';
+import TopRow from './top-row';
 
 export default function Launchpad() {
   return (
-    <div className="flex flex-col p-4 gap-4">
+    <div className="flex flex-col p-4 gap-4 h-full">
       <TopRow />
 
       <div className="grid grid-cols-[1.2fr,1.2fr,1fr,1.2fr] gap-4 h-full">
@@ -17,9 +17,3 @@ export default function Launchpad() {
     </div>
   );
 }
-
-function RightColumn() {
-  return (
-    <Right />
-  );
-}