feat: added data quality icon and text next to value in table #2664

awslabs · Mar 21, 2024 · 91cd12f · 91cd12f
1 parent a629d3a
commit 91cd12f
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 6 deletions.
diff --git a/packages/react-components/src/components/table/createCellItem.ts b/packages/react-components/src/components/table/createCellItem.ts
@@ -5,7 +5,7 @@ export const createCellItem: (
   props: Partial<CellProps>,
   messageOverrides: TableMessages
 ) => CellItem = (
-  { value, error, isLoading, threshold } = {},
+  { value, error, isLoading, threshold, quality } = {},
   messageOverrides
 ) => {
   const valueOf = () => {
@@ -29,5 +29,6 @@ export const createCellItem: (
     threshold,
     valueOf,
     toString,
+    quality,
   };
 };
diff --git a/packages/react-components/src/components/table/createTableItems.ts b/packages/react-components/src/components/table/createTableItems.ts
@@ -44,6 +44,7 @@ export const createTableItems: (
           if ('end' in viewport && dataPoints) {
             const point = getDataBeforeDate(dataPoints, viewport.end).pop();
             const value = point?.y;
+            const quality = point?.quality;
             const threshold = breachedThreshold({
               dataStream,
               dataStreams,
@@ -54,13 +55,14 @@ export const createTableItems: (
             return {
               key,
               data: createCellItem(
-                { value, error, isLoading, threshold },
+                { value, error, isLoading, threshold, quality },
                 messageOverrides
               ),
             };
           }
 
           const value = dataPoints.slice(-1)[0]?.y;
+          const quality = dataPoints.slice(-1)[0]?.quality;
           const threshold = breachedThreshold({
             dataStream,
             dataStreams,
@@ -72,7 +74,7 @@ export const createTableItems: (
           return {
             key,
             data: createCellItem(
-              { value, error, isLoading, threshold },
+              { value, error, isLoading, threshold, quality },
               messageOverrides
             ),
           };

diff --git a/packages/react-components/src/components/table/tableHelpers.spec.tsx b/packages/react-components/src/components/table/tableHelpers.spec.tsx
@@ -49,6 +49,48 @@ describe('default cell function', () => {
     expect(container.textContent).toContain('10');
   });
 
+  it('does not return quality text for good value', () => {
+    const item: TableItemHydrated = {
+      data: {
+        value: 10,
+        error: undefined,
+        isLoading: undefined,
+        valueOf: jest.fn(),
+        quality: 'GOOD',
+      },
+    };
+    const { container } = render(<div>{firstColumnDef.cell(item)}</div>);
+    expect(container.textContent).not.toContain('Quality');
+  });
+
+  it('returns uncertain quality text for uncertain value', () => {
+    const item: TableItemHydrated = {
+      data: {
+        value: 10,
+        error: undefined,
+        isLoading: undefined,
+        valueOf: jest.fn(),
+        quality: 'UNCERTAIN',
+      },
+    };
+    const { container } = render(<div>{firstColumnDef.cell(item)}</div>);
+    expect(container.textContent).toContain('Uncertain Quality');
+  });
+
+  it('returns bad quality text for bad value', () => {
+    const item: TableItemHydrated = {
+      data: {
+        value: 10,
+        error: undefined,
+        isLoading: undefined,
+        valueOf: jest.fn(),
+        quality: 'BAD',
+      },
+    };
+    const { container } = render(<div>{firstColumnDef.cell(item)}</div>);
+    expect(container.textContent).toContain('Bad Quality');
+  });
+
   it('return hyphen when property not found in tableItem', () => {
     const item: TableItemHydrated = {
       data: {

diff --git a/packages/react-components/src/components/table/tableHelpers.tsx b/packages/react-components/src/components/table/tableHelpers.tsx
@@ -1,12 +1,48 @@
 import React from 'react';
 import { round } from '@iot-app-kit/core-util';
 import { STATUS_ICON_TYPE } from '@iot-app-kit/core';
+import type { DataPoint } from '@iot-app-kit/core';
 
-import { TableProps as CloudscapeTableProps } from '@cloudscape-design/components';
+import {
+  TableProps as CloudscapeTableProps,
+  Icon,
+} from '@cloudscape-design/components';
 
 import { LoadingSpinner } from './spinner';
 import { getIcons } from '../../common/iconUtils';
 import type { TableColumnDefinition, TableItemHydrated } from './types';
+import {
+  colorTextStatusWarning,
+  spaceStaticS,
+  spaceStaticXxs,
+} from '@cloudscape-design/design-tokens';
+
+const dataQuality = ({ quality }: { quality: DataPoint['quality'] }) => {
+  return (
+    <span
+      style={{
+        color: `${colorTextStatusWarning}`,
+        borderBottom: `1px dotted ${colorTextStatusWarning}`,
+        marginLeft: `${spaceStaticS}`,
+      }}
+    >
+      {quality === 'BAD' && (
+        <>
+          <Icon name='status-negative' variant='error' />
+          <span style={{ marginLeft: `${spaceStaticXxs}` }}>Bad Quality</span>
+        </>
+      )}
+      {quality === 'UNCERTAIN' && (
+        <>
+          <Icon name='status-warning' variant='warning' />
+          <span style={{ marginLeft: `${spaceStaticXxs}` }}>
+            Uncertain Quality
+          </span>
+        </>
+      )}
+    </span>
+  );
+};
 
 export const getDefaultColumnDefinitions: (
   columnDefinitions: TableColumnDefinition[],
@@ -19,7 +55,7 @@ export const getDefaultColumnDefinitions: (
         return '-';
       }
 
-      const { error, isLoading, value, threshold } = item[colDef.key];
+      const { error, isLoading, value, threshold, quality } = item[colDef.key];
       const { color = 'unset', icon } = threshold || {};
       if (error) {
         return (
@@ -57,6 +93,7 @@ export const getDefaultColumnDefinitions: (
           >
             {icon ? <div className='icon'>{getIcons(icon)}</div> : null}{' '}
             {round(value, precision)}
+            {quality && dataQuality({ quality })}
           </div>
         );
       }
@@ -70,6 +107,7 @@ export const getDefaultColumnDefinitions: (
           }}
         >
           {icon ? <div className='icon'>{getIcons(icon)}</div> : null} {value}
+          {quality && dataQuality({ quality })}
         </div>
       );
     },

diff --git a/packages/react-components/src/components/table/types.ts b/packages/react-components/src/components/table/types.ts
@@ -1,5 +1,10 @@
 import { TableProps as CloudscapeTableProps } from '@cloudscape-design/components';
-import type { ErrorDetails, Primitive, Threshold } from '@iot-app-kit/core';
+import type {
+  DataPoint,
+  ErrorDetails,
+  Primitive,
+  Threshold,
+} from '@iot-app-kit/core';
 import type { UseCollectionOptions } from '@cloudscape-design/collection-hooks';
 import type { TableMessages } from './messages';
 
@@ -28,6 +33,7 @@ export type CellItem = {
   threshold?: Threshold;
   valueOf: () => Primitive | undefined;
   toString: () => string;
+  quality?: DataPoint['quality'];
 };
 
 export type TableItemHydrated = { [k: string]: CellItem };
@@ -46,6 +52,7 @@ export type CellProps = {
   error: ErrorDetails;
   isLoading: boolean;
   threshold: Threshold;
+  quality?: DataPoint['quality'];
 };
 
 export interface TableProps