feat(ui): remove counterLabel and hide element in header (#123)

* feat(ui): remove counterLabel component and hid Framework and Algoritm if they haven't valida data * feat(ui): remove all CountLabel add align category feature table
radicalbit · Jul 22, 2024 · c3a744c · c3a744c
1 parent 762e1ac
commit c3a744c
Show file tree

Hide file tree

Showing 18 changed files with 121 additions and 165 deletions.
diff --git a/ui/src/container/models/Details/binary-classification/current/data-drift/list/index.jsx b/ui/src/container/models/Details/binary-classification/current/data-drift/list/index.jsx
@@ -25,8 +25,6 @@ function DataDriftList() {
 
   return (
     <Spinner fullHeight fullWidth>
-      <CountLabel />
-
       <Virtuoso
         data={items}
         itemContent={(idx, item) => (<FeatureRow key={idx} item={item} />)}
@@ -36,17 +34,6 @@ function DataDriftList() {
   );
 }
 
-function CountLabel() {
-  const items = useGetFilteredFeatures();
-  const label = items.length <= 1 ? 'Record' : 'Records';
-
-  return (
-    <label>
-      {`${label} ${items.length}`}
-    </label>
-  );
-}
-
 function FeatureRow({ item }) {
   const pinType = (item.driftCalc.hasDrift) ? 'filled-error' : 'filled';
   const isError = (item.driftCalc.hasDrift) ? 'is-error' : '';

diff --git a/...classification/current/data-quality/data-quality-list/categorical/right-table/columns.jsx b/...classification/current/data-quality/data-quality-list/categorical/right-table/columns.jsx
@@ -9,18 +9,17 @@ const columns = [
   {
     title: 'Count',
     key: 'count',
-    width: '8rem',
+    width: '6rem',
     dataIndex: 'count',
   },
   {
     title: '',
     key: 'frequency',
-    width: '8rem',
-
-    render: (data) => {
-      const formattedFrequency = Math.floor(data.frequency * 100);
-      const formattedReferenceFrequency = (data.referenceFrequency) ? Math.floor(data.referenceFrequency * 100) : 0;
-
+    width: '5rem',
+    align: 'right',
+    render: ({ frequency, referenceFrequency }) => {
+      const formattedFrequency = Math.floor(frequency * 100);
+      const formattedReferenceFrequency = (referenceFrequency) ? Math.floor(referenceFrequency * 100) : 0;
       return (
         <div className="flex flex-col items-end gap-1">
           <div>
@@ -35,14 +34,15 @@ const columns = [
         </div>
       );
     },
+
   },
   {
     title: 'Frequency',
     key: 'frequency',
     width: '12rem',
-    render: (data) => {
-      const formattedFrequency = Math.floor(data.frequency * 100);
-      const formattedReferenceFrequency = (data.referenceFrequency) ? Math.floor(data.referenceFrequency * 100) : 0;
+    render: ({ frequency, referenceFrequency }) => {
+      const formattedFrequency = Math.floor(frequency * 100);
+      const formattedReferenceFrequency = (referenceFrequency) ? Math.floor(referenceFrequency * 100) : 0;
       return (
         <div className="flex flex-col gap-2">
           <BarChart
@@ -59,6 +59,7 @@ const columns = [
         </div>
       );
     },
+
   },
 ];
 

diff --git a/...ner/models/Details/binary-classification/current/data-quality/data-quality-list/index.jsx b/...ner/models/Details/binary-classification/current/data-quality/data-quality-list/index.jsx
@@ -28,8 +28,6 @@ function DataQualityList() {
 
   return (
     <Spinner className="mb-16" fullHeight fullWidth>
-      <CountLabel />
-
       <Virtuoso
         data={items}
         itemContent={(index, item) => {
@@ -50,17 +48,6 @@ function DataQualityList() {
   );
 }
 
-function CountLabel() {
-  const items = useGetFilteredFeatures();
-  const label = items.length <= 1 ? 'Record' : 'Records';
-
-  return (
-    <label>
-      {`${label} ${items.length}`}
-    </label>
-  );
-}
-
 function NumericalFeature({ item }) {
   const dataset = item?.histogram;
 

diff --git a/...assification/reference/data-quality/data-quality-list/categorical/right-table/columns.jsx b/...assification/reference/data-quality/data-quality-list/categorical/right-table/columns.jsx
@@ -9,18 +9,32 @@ const columns = [
   {
     title: 'Count',
     key: 'count',
-    width: '8rem',
+    width: '6rem',
     dataIndex: 'count',
   },
   {
-    title: 'Frequency (%)',
+    title: '',
+    key: 'frequency',
+    width: '5rem',
+    align: 'right',
+    render: ({ frequency }) => {
+      const formattedFrequency = Math.floor(frequency * 100);
+      return (
+        <div>
+          {formattedFrequency}
+          %
+        </div>
+      );
+    },
+  },
+  {
+    title: 'Frequency',
     key: 'frequency',
     width: '12rem',
     render: ({ frequency }) => {
       const formattedFrequency = Math.floor(frequency * 100);
       return (
         <BarChart
-          content={`${formattedFrequency}%`}
           type="secondary"
           value={formattedFrequency}
           width="100%"

diff --git a/...r/models/Details/binary-classification/reference/data-quality/data-quality-list/index.jsx b/...r/models/Details/binary-classification/reference/data-quality/data-quality-list/index.jsx
@@ -29,8 +29,6 @@ function DataQualityList() {
 
   return (
     <Spinner fullHeight fullWidth>
-      <CountLabel />
-
       <Virtuoso
         data={items}
         itemContent={(index, item) => {
@@ -51,17 +49,6 @@ function DataQualityList() {
   );
 }
 
-function CountLabel() {
-  const items = useGetFilteredFeatures();
-  const label = items.length <= 1 ? 'Record' : 'Records';
-
-  return (
-    <label>
-      {`${label} ${items.length}`}
-    </label>
-  );
-}
-
 function NumericalFeature({ item }) {
   const dataset = item?.histogram ?? [];
 

diff --git a/ui/src/container/models/Details/header.jsx b/ui/src/container/models/Details/header.jsx
@@ -107,7 +107,11 @@ function Framework() {
   const { uuid } = useParams();
 
   const { data } = useGetModelByUUIDQuery({ uuid });
-  const framework = data?.frameworks ?? '--';
+  const framework = data?.frameworks;
+
+  if (!framework) {
+    return false;
+  }
 
   if (framework.length > STATUS_SELECTOR_MAX_LEN) {
     return (
@@ -130,7 +134,11 @@ function Algorithm() {
   const { uuid } = useParams();
 
   const { data } = useGetModelByUUIDQuery({ uuid });
-  const algorithm = data?.algorithm ?? '--';
+  const algorithm = data?.algorithm;
+
+  if (!algorithm) {
+    return false;
+  }
 
   if (algorithm.length > STATUS_SELECTOR_MAX_LEN) {
     return (

diff --git a/ui/src/container/models/Details/multi-classification/current/data-drift/list/index.jsx b/ui/src/container/models/Details/multi-classification/current/data-drift/list/index.jsx
@@ -25,8 +25,6 @@ function DataDriftList() {
 
   return (
     <Spinner fullHeight fullWidth>
-      <CountLabel />
-
       <Virtuoso
         data={items}
         itemContent={(idx, item) => (<FeatureRow key={idx} item={item} />)}
@@ -36,17 +34,6 @@ function DataDriftList() {
   );
 }
 
-function CountLabel() {
-  const items = useGetFilteredFeatures();
-  const label = items.length <= 1 ? 'Record' : 'Records';
-
-  return (
-    <label>
-      {`${label} ${items.length}`}
-    </label>
-  );
-}
-
 function FeatureRow({ item }) {
   const pinType = (item.driftCalc.hasDrift) ? 'filled-error' : 'filled';
   const isError = (item.driftCalc.hasDrift) ? 'is-error' : '';

diff --git a/...classification/current/data-quality/data-quality-list/categorical/right-table/columns.jsx b/...classification/current/data-quality/data-quality-list/categorical/right-table/columns.jsx
@@ -9,18 +9,17 @@ const columns = [
   {
     title: 'Count',
     key: 'count',
-    width: '8rem',
+    width: '6rem',
     dataIndex: 'count',
   },
   {
     title: '',
     key: 'frequency',
-    width: '8rem',
-
-    render: (data) => {
-      const formattedFrequency = Math.floor(data.frequency * 100);
-      const formattedReferenceFrequency = (data.referenceFrequency) ? Math.floor(data.referenceFrequency * 100) : 0;
-
+    width: '5rem',
+    align: 'right',
+    render: ({ frequency, referenceFrequency }) => {
+      const formattedFrequency = Math.floor(frequency * 100);
+      const formattedReferenceFrequency = (referenceFrequency) ? Math.floor(referenceFrequency * 100) : 0;
       return (
         <div className="flex flex-col items-end gap-1">
           <div>
@@ -35,14 +34,15 @@ const columns = [
         </div>
       );
     },
+
   },
   {
     title: 'Frequency',
     key: 'frequency',
     width: '12rem',
-    render: (data) => {
-      const formattedFrequency = Math.floor(data.frequency * 100);
-      const formattedReferenceFrequency = (data.referenceFrequency) ? Math.floor(data.referenceFrequency * 100) : 0;
+    render: ({ frequency, referenceFrequency }) => {
+      const formattedFrequency = Math.floor(frequency * 100);
+      const formattedReferenceFrequency = (referenceFrequency) ? Math.floor(referenceFrequency * 100) : 0;
       return (
         <div className="flex flex-col gap-2">
           <BarChart
@@ -59,6 +59,7 @@ const columns = [
         </div>
       );
     },
+
   },
 ];
 

diff --git a/...iner/models/Details/multi-classification/current/data-quality/data-quality-list/index.jsx b/...iner/models/Details/multi-classification/current/data-quality/data-quality-list/index.jsx
@@ -28,8 +28,6 @@ function DataQualityList() {
 
   return (
     <Spinner className="mb-16" fullHeight fullWidth>
-      <CountLabel />
-
       <Virtuoso
         data={items}
         itemContent={(index, item) => {
@@ -50,17 +48,6 @@ function DataQualityList() {
   );
 }
 
-function CountLabel() {
-  const items = useGetFilteredFeatures();
-  const label = items.length <= 1 ? 'Record' : 'Records';
-
-  return (
-    <label>
-      {`${label} ${items.length}`}
-    </label>
-  );
-}
-
 function NumericalFeature({ item }) {
   const dataset = item?.histogram;
 

diff --git a/...ontainer/models/Details/multi-classification/current/model-quality/search-chart/index.jsx b/...ontainer/models/Details/multi-classification/current/model-quality/search-chart/index.jsx
@@ -24,7 +24,23 @@ function SearchChart() {
             mode="multiple"
             onChange={handleOnSelect}
             options={options}
-            placeholder={<FontAwesomeIcon icon={faSearch} />}
+            placeholder={(
+              <div className="flex flex-row items-center justify-between gap-4">
+                <div>
+                  Please select one or more of the
+                  {' '}
+
+                  {items.length}
+
+                  {' '}
+                  available class
+
+                </div>
+
+                <FontAwesomeIcon icon={faSearch} />
+
+              </div>
+            )}
           />
         </FormField>
       </div>

diff --git a/...assification/reference/data-quality/data-quality-list/categorical/right-table/columns.jsx b/...assification/reference/data-quality/data-quality-list/categorical/right-table/columns.jsx
@@ -9,18 +9,32 @@ const columns = [
   {
     title: 'Count',
     key: 'count',
-    width: '8rem',
+    width: '6rem',
     dataIndex: 'count',
   },
   {
-    title: 'Frequency (%)',
+    title: '',
+    key: 'frequency',
+    width: '5rem',
+    align: 'right',
+    render: ({ frequency }) => {
+      const formattedFrequency = Math.floor(frequency * 100);
+      return (
+        <div>
+          {formattedFrequency}
+          %
+        </div>
+      );
+    },
+  },
+  {
+    title: 'Frequency',
     key: 'frequency',
     width: '12rem',
     render: ({ frequency }) => {
       const formattedFrequency = Math.floor(frequency * 100);
       return (
         <BarChart
-          content={`${formattedFrequency}%`}
           type="secondary"
           value={formattedFrequency}
           width="100%"

diff --git a/...er/models/Details/multi-classification/reference/data-quality/data-quality-list/index.jsx b/...er/models/Details/multi-classification/reference/data-quality/data-quality-list/index.jsx
@@ -28,9 +28,7 @@ function DataQualityList() {
   }
 
   return (
-    <Spinner fullHeight fullWidth>
-      <CountLabel />
-
+    <Spinner className="mb-16" fullHeight fullWidth>
       <Virtuoso
         data={items}
         itemContent={(index, item) => {
@@ -51,17 +49,6 @@ function DataQualityList() {
   );
 }
 
-function CountLabel() {
-  const items = useGetFilteredFeatures();
-  const label = items.length <= 1 ? 'Record' : 'Records';
-
-  return (
-    <label>
-      {`${label} ${items.length}`}
-    </label>
-  );
-}
-
 function NumericalFeature({ item }) {
   const dataset = item?.histogram ?? [];