Merge pull request #697 from ral-facilities/add-labels-in-channels-for]-vectors

Add labels in channels for vectors

Author: joelvdavies

e2e/real/channels.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('should be able to view the channel summary', async ({ page }) => {
   test.skip(
@@ -71,6 +71,49 @@ test('should be able to view the channel summary', async ({ page }) => {
   ).toHaveScreenshot({
     maxDiffPixels: 150,
   });
+
+  // vectors channel
+
+  await page
+    .getByRole('combobox', { name: 'Search data channels' })
+    .fill('CM-202-CVC-WFS');
+
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('Enter');
+  await page
+    .getByRole('button', { name: 'Compressor output wavefront coefficients' })
+    .click();
+
+  await expect(page.getByText('Channel type: vector')).toBeVisible();
+  await expect(
+    page.getByText('First data date: 2023-06-05 08:03:00')
+  ).toBeVisible();
+  await expect(
+    page.getByText('Most recent data date: 2023-06-05 08:03:00')
+  ).toBeVisible();
+  await expect(
+    await page.getByRole('table', { name: 'recent data' })
+  ).toHaveScreenshot({
+    maxDiffPixels: 150,
+  });
+
+  // float image channel
+  await page
+    .getByRole('button', { name: 'Compressor output wavefront image' })
+    .click();
+
+  await expect(page.getByText('Channel type: float_image')).toBeVisible();
+  await expect(
+    page.getByText('First data date: 2023-06-05 08:03:00')
+  ).toBeVisible();
+  await expect(
+    page.getByText('Most recent data date: 2023-06-05 08:03:00')
+  ).toBeVisible();
+  await expect(
+    await page.getByRole('table', { name: 'recent data' })
+  ).toHaveScreenshot({
+    maxDiffPixels: 150,
+  });
 });
 
 // don't need to test selecting channels, as that gets tested in most other tests

e2e/real/channels.spec.ts-snapshots/should-be-able-to-view-the-channel-summary-2-E2E-tests-linux.png

@@ -107,6 +107,7 @@ export interface FullFloatImageChannelMetadata
 
 export interface FullVectorChannelMetadata extends FullCommonChannelMetadata {
   type: 'vector';
+  labels?: string[];
   units?: string;
 }
 

e2e/real/channels.spec.ts-snapshots/should-be-able-to-view-the-channel-summary-3-E2E-tests-linux.png

@@ -285,6 +285,43 @@ exports[`Channel Metadata Panel > should render correctly for vector channel wit
   >
     Units: cm
   </p>
+  <p
+    class="MuiTypography-root MuiTypography-body2 MuiTypography-gutterBottom css-ejgmvm-MuiTypography-root"
+  >
+    Labels:
+  </p>
+   
+  <div
+    class="MuiBox-root css-1vrkypf"
+  >
+    <div
+      class="MuiChip-root MuiChip-filled MuiChip-sizeSmall MuiChip-colorDefault MuiChip-filledDefault css-sk307n-MuiChip-root"
+    >
+      <span
+        class="MuiChip-label MuiChip-labelSmall css-wjsjww-MuiChip-label"
+      >
+        X
+      </span>
+    </div>
+    <div
+      class="MuiChip-root MuiChip-filled MuiChip-sizeSmall MuiChip-colorDefault MuiChip-filledDefault css-sk307n-MuiChip-root"
+    >
+      <span
+        class="MuiChip-label MuiChip-labelSmall css-wjsjww-MuiChip-label"
+      >
+        Y
+      </span>
+    </div>
+    <div
+      class="MuiChip-root MuiChip-filled MuiChip-sizeSmall MuiChip-colorDefault MuiChip-filledDefault css-sk307n-MuiChip-root"
+    >
+      <span
+        class="MuiChip-label MuiChip-labelSmall css-wjsjww-MuiChip-label"
+      >
+        Z
+      </span>
+    </div>
+  </div>
   <hr
     class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
   />

e2e/real/channels.spec.ts-snapshots/should-be-able-to-view-the-channel-summary-4-E2E-tests-linux.png

@@ -63,6 +63,7 @@ describe('Channel Metadata Panel', () => {
       systemName: 'CHANNEL_ABCDE',
       type: 'vector',
       units: 'cm',
+      labels: ['X', 'Y', 'Z'],
       path: '/test',
       description: 'Test description',
     };

src/app.types.tsx

@@ -1,7 +1,9 @@
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import {
+  Box,
   Button,
+  Chip,
   Divider,
   Stack,
   Table,
@@ -122,12 +124,39 @@ const ChannelMetadataPanel = (props: ChannelMetadataPanelProps) => {
           displayedChannel.units && (
             <Body>Units: {displayedChannel.units}</Body>
           )}
+        {isChannelMetadataVector(displayedChannel) &&
+          displayedChannel.labels && (
+            <>
+              <Body>Labels:</Body>{' '}
+              {
+                <Box display="flex" flexWrap="wrap" gap={1} mb={1}>
+                  {displayedChannel.labels.map((value) => {
+                    return (
+                      <Chip
+                        key={value}
+                        label={value}
+                        size="small"
+                        sx={{
+                          fontSize: '0.8125rem',
+                          backgroundColor: 'rgba(0, 0, 0, 0.08)',
+                        }}
+                      />
+                    );
+                  })}
+                </Box>
+              }
+            </>
+          )}
         {isChannelMetadataWaveform(displayedChannel) && (
           <>
-            <Body gutterBottom={false}>
-              X Units: {displayedChannel.x_units}
-            </Body>
-            <Body>Y Units: {displayedChannel.y_units}</Body>
+            {displayedChannel.x_units && (
+              <Body gutterBottom={false}>
+                X Units: {displayedChannel.x_units}
+              </Body>
+            )}
+            {displayedChannel.y_units && (
+              <Body>Y Units: {displayedChannel.y_units}</Body>
+            )}
           </>
         )}
         {displayedChannel?.historical && (