feat(react-components): hide/show properties from legend

awslabs · Jan 5, 2024 · e666cf1 · e666cf1
1 parent d2cbaaf
commit e666cf1
Show file tree

Hide file tree

Showing 22 changed files with 377 additions and 263 deletions.
diff --git a/...mization/propertiesSections/propertiesAndAlarmsSettings/handleDeleteAssetModelProperty.ts b/...mization/propertiesSections/propertiesAndAlarmsSettings/handleDeleteAssetModelProperty.ts
@@ -30,39 +30,3 @@ export const handleDeleteAssetModelProperty = (
     ),
   };
 };
-
-//handles hide/show in AssetModelProperty
-
-export const handleToggleHideAssetModelProperty = (
-  { assetModels = [] }: StyledAssetQuery,
-  { assetModelId, propertyId }: { assetModelId: string; propertyId: string }
-) => {
-  return assetModels
-    .map((assetModel) => {
-      if (assetModel.assetModelId !== assetModelId) return assetModel;
-      const { properties } = assetModel;
-      return {
-        ...assetModel,
-        properties: properties.map((property) => {
-          if (property.propertyId === propertyId) {
-            const visible = property.visible !== undefined ? !property.visible : false;
-            return { ...property, visible };
-          } else {
-            return property;
-          }
-        }),
-      };
-    })
-    .filter((assetModel) => assetModel.properties.length > 0);
-};
-
-export const handleHideAssetModelProperty = (
-  siteWiseAssetQuery: StyledAssetQuery,
-  { assetModelId, propertyId }: { assetModelId: string; propertyId: string }
-): StyledAssetQuery => {
-  if (!siteWiseAssetQuery) return siteWiseAssetQuery;
-  return {
-    ...siteWiseAssetQuery,
-    assetModels: handleToggleHideAssetModelProperty(siteWiseAssetQuery, { assetModelId, propertyId }),
-  };
-};
diff --git a/.../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx b/.../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx
@@ -11,16 +11,11 @@ import {
   Input,
 } from '@cloudscape-design/components';
 import { spaceScaledXl, spaceStaticXxs } from '@cloudscape-design/design-tokens';
-import { ClickDetail, NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 
 import ColorPicker from '../shared/colorPicker';
 import { LineStyles, StyledAssetPropertyQuery, YAxisOptions } from '~/customization/widgets/types';
 import { getPropertyDisplay } from './getPropertyDisplay';
 import type { AssetSummary } from '~/hooks/useAssetDescriptionQueries';
-import {
-  StatusEyeHidden,
-  StatusEyeVisible,
-} from '~/customization/propertiesSections/propertiesAndAlarmsSettings/icons';
 import { Tooltip } from '@iot-app-kit/react-components';
 import { LineTypeSection } from '../components/lineTypeDropdown';
 import { LineStyleDropdown } from '../components/lineStyleDropdown';
@@ -199,42 +194,21 @@ export type StyledPropertyComponentProps = {
   updateStyle: (newStyles: object) => void;
   assetSummary: AssetSummary;
   property: StyledAssetPropertyQuery;
-  onHideAssetQuery: () => void;
   onDeleteAssetQuery?: () => void;
   colorable: boolean;
-  isPropertyVisible: boolean;
 };
 
 export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
   index,
   assetSummary,
   property,
   updateStyle,
-  onHideAssetQuery,
   onDeleteAssetQuery,
   colorable,
-  isPropertyVisible,
 }) => {
   const { display, label } = getPropertyDisplay(property.propertyId, assetSummary);
-  const [onMouseOver, setOnMouseOver] = useState(false);
-  const isAssetQueryVisible = !onMouseOver ? isPropertyVisible : !isPropertyVisible;
-  const propertyVisibilityIcon = isAssetQueryVisible ? StatusEyeVisible : StatusEyeHidden;
   const labelRef = useRef<HTMLDivElement | null>(null);
   const [isNameTruncated, setIsNameTruncated] = useState(false);
-
-  const onToggleAssetQuery: NonCancelableEventHandler<ClickDetail> = (e) => {
-    e.stopPropagation();
-    onHideAssetQuery();
-  };
-
-  const handleMouseEnter = () => {
-    setOnMouseOver(true);
-  };
-
-  const handleMouseLeave = () => {
-    setOnMouseOver(false);
-  };
-
   const resetStyles = (styleToReset: object) => {
     updateStyle(styleToReset); // as we add more sections, reset style values here
   };
@@ -246,45 +220,34 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
   }, [label]);
 
   const YAxisHeader = (
-    <SpaceBetween size='s' direction='horizontal'>
-      {colorable && display === 'property' && (
-        <ColorPicker color={property.color || ''} updateColor={(newColor) => updateStyle({ color: newColor })} />
-      )}
-      <Tooltip content={isNameTruncated ? label : ''} position={index == 0 ? 'bottom' : 'top'}>
-        <div className='property-display-label' style={{ marginBlock: spaceStaticXxs }} ref={labelRef}>
-          {label}
-        </div>
-      </Tooltip>
-      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        <Tooltip content={onMouseOver && isPropertyVisible ? 'hide' : 'unhide'} position='top'>
-          <Button
-            ariaLabel='hide un-hide property'
-            onClick={onToggleAssetQuery}
-            variant='icon'
-            iconSvg={propertyVisibilityIcon}
-          />
+    <div style={{ display: 'flex', width: '100%' }}>
+      <SpaceBetween size='s' direction='horizontal'>
+        {colorable && display === 'property' && (
+          <ColorPicker color={property.color || ''} updateColor={(newColor) => updateStyle({ color: newColor })} />
+        )}
+        <Tooltip content={isNameTruncated ? label : ''} position={index == 0 ? 'bottom' : 'top'}>
+          <div className='property-display-label' style={{ marginBlock: spaceStaticXxs }} ref={labelRef}>
+            {label}
+          </div>
         </Tooltip>
-      </div>
-
-      <Button ariaLabel='delete property' onClick={onDeleteAssetQuery} variant='icon' iconName='remove' />
-    </SpaceBetween>
+        <div style={{ float: 'right' }}>
+          <Button ariaLabel='delete property' onClick={onDeleteAssetQuery} variant='icon' iconName='remove' />
+        </div>
+      </SpaceBetween>
+    </div>
   );
 
   return (
     <div className='property-display'>
       <div className='property-display-summary'>
-        <SpaceBetween size='xxxs'>
-          <Box padding={{ top: 'xxs' }}>
-            <SpaceBetween size='xs'>
-              <ExpandableSection headerText={YAxisHeader}>
-                <div style={{ padding: '0 24px', backgroundColor: '#fbfbfb' }}>
-                  <LineStylePropertyConfig resetStyles={resetStyles} onUpdate={updateStyle} property={property} />
-                  <YAxisPropertyConfig resetStyles={resetStyles} onUpdate={updateStyle} property={property} />
-                </div>
-              </ExpandableSection>
-            </SpaceBetween>
-          </Box>
-        </SpaceBetween>
+        <Box color='text-body-secondary'>
+          <ExpandableSection headerText={YAxisHeader} disableContentPaddings={true}>
+            <div style={{ padding: '0 24px', backgroundColor: '#fbfbfb' }}>
+              <LineStylePropertyConfig resetStyles={resetStyles} onUpdate={updateStyle} property={property} />
+              <YAxisPropertyConfig resetStyles={resetStyles} onUpdate={updateStyle} property={property} />
+            </div>
+          </ExpandableSection>
+        </Box>
       </div>
     </div>
   );

diff --git a/...hboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/styledSection.tsx b/...hboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/styledSection.tsx
@@ -9,7 +9,7 @@ import { StyledPropertiesAlarmsSectionProps } from './sectionTypes';
 import { defaultOnDeleteQuery } from './onDeleteProperty';
 import { StyledAssetQuery } from '~/customization/widgets/types';
 import { useAssetModel } from '~/hooks/useAssetModel/useAssetModel';
-import { handleDeleteAssetModelProperty, handleHideAssetModelProperty } from './handleDeleteAssetModelProperty';
+import { handleDeleteAssetModelProperty } from './handleDeleteAssetModelProperty';
 
 const NoComponents = () => <Box variant='p'>No properties or alarms found</Box>;
 
@@ -110,51 +110,6 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
 
       updateSiteWiseAssetQuery(newQuery);
     };
-    const onHideAssetQuery = (updatedAssetId: string, updatedPropertyId: string) => {
-      const newQuery = {
-        ...styledAssetQuery,
-        assets:
-          styledAssetQuery?.assets?.map((asset) => {
-            if (asset.assetId === updatedAssetId) {
-              return {
-                ...asset,
-                properties: asset.properties.map((property) => {
-                  if (property.propertyId === updatedPropertyId) {
-                    const visible = property.visible !== undefined ? !property.visible : false;
-                    return { ...property, visible };
-                  } else {
-                    return property;
-                  }
-                }),
-              };
-            } else {
-              return asset;
-            }
-          }) ?? [],
-      };
-
-      updateSiteWiseAssetQuery(newQuery);
-    };
-
-    const onHidePropertyAliasQuery = (propertyAlias: string) => {
-      const newQuery = {
-        ...styledAssetQuery,
-        assets: styledAssetQuery?.assets || [],
-        properties:
-          (styledAssetQuery &&
-            styledAssetQuery?.properties?.map((property) => {
-              if (property.propertyAlias === propertyAlias) {
-                const visible = property.visible !== undefined ? !property.visible : false;
-                return { ...property, visible };
-              } else {
-                return property;
-              }
-            })) ??
-          [],
-      };
-
-      updateSiteWiseAssetQuery(newQuery);
-    };
 
     const modeled =
       styledAssetQuery?.assets?.flatMap(({ assetId, properties }) =>
@@ -175,8 +130,6 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
                 updateSiteWiseAssetQuery,
               })}
               colorable={colorable}
-              onHideAssetQuery={() => onHideAssetQuery(assetId, property.propertyId)}
-              isPropertyVisible={property.visible ?? true}
             />
           ) : null
         )
@@ -200,10 +153,6 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
               updateSiteWiseAssetQuery,
             })}
             colorable={colorable}
-            onHideAssetQuery={() => {
-              onHidePropertyAliasQuery(property.propertyAlias);
-            }}
-            isPropertyVisible={property.visible ?? true}
           />
         );
       }) ?? [];
@@ -249,15 +198,6 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
                 )
               }
               colorable={colorable}
-              isPropertyVisible={property.visible ?? true}
-              onHideAssetQuery={() => {
-                updateSiteWiseAssetQuery(
-                  handleHideAssetModelProperty(styledAssetQuery, {
-                    assetModelId,
-                    propertyId: property.propertyId,
-                  }) as StyledAssetQuery
-                );
-              }}
             />
           );
         })

diff --git a/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx b/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx
@@ -118,35 +118,7 @@ const convertAxis = (axis: ChartAxisOptions | undefined) => ({
   yLabel: axis?.yLabel,
 });
 
-const removeHiddenDataStreams = (widget: LineScatterChartWidget): LineScatterChartWidget => ({
-  ...widget,
-  properties: {
-    ...widget.properties,
-    queryConfig: {
-      ...widget.properties.queryConfig,
-      query: {
-        assets:
-          widget.properties.queryConfig?.query?.assets?.map((asset) => ({
-            ...asset,
-            properties: asset.properties.filter((property) => {
-              return property.visible !== false;
-            }),
-          })) || [],
-        properties: widget.properties.queryConfig?.query?.properties?.filter((property) => property.visible !== false),
-        assetModels:
-          widget.properties.queryConfig?.query?.assetModels?.map((assetModel) => ({
-            ...assetModel,
-            properties: assetModel.properties.filter((property) => {
-              return property.visible !== false;
-            }),
-          })) || [],
-      },
-    },
-  },
-});
-
 const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (widget) => {
-  const widgetToDisplay = removeHiddenDataStreams(widget);
   const { viewport } = useViewport();
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
   const chartSize = useChartSize(widget);
@@ -161,35 +133,10 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (widge
     symbol,
     legend,
     significantDigits: widgetSignificantDigits,
-  } = widgetToDisplay.properties;
+  } = widget.properties;
 
   const query = queryConfig.query;
-  const filteredQuery = {
-    ...query,
-    assets:
-      query?.assets
-        ?.map((asset) => {
-          const { assetId, properties } = asset;
-          return {
-            assetId,
-            properties: properties.filter((p) => p.visible ?? true),
-          };
-        })
-        .filter((asset) => asset.properties.length > 0) ?? [],
-    assetModels:
-      query?.assetModels
-        ?.map((assetModel) => {
-          const { assetModelId, assetIds, properties } = assetModel;
-          return {
-            assetModelId,
-            assetIds,
-            properties: properties.filter((p) => p.visible ?? true),
-          };
-        })
-        .filter((assetModel) => assetModel.properties.length > 0) ?? [],
-  };
-
-  const queries = useQueries(filteredQuery);
+  const queries = useQueries(query);
 
   const mappedQuery = assetModelQueryToSiteWiseAssetQuery(query);
   const styleSettings = useAdaptedStyleSettings({ line, symbol }, mappedQuery);

diff --git a/packages/dashboard/src/customization/widgets/types.ts b/packages/dashboard/src/customization/widgets/types.ts
@@ -72,7 +72,6 @@ export type LineAndScatterStyles = {
   line?: LineStyles;
   aggregationType?: AggregateType;
   resolution?: string;
-  visible?: boolean; // defaults to true
 };
 
 export type LineStyles = {

diff --git a/packages/react-components/jest.config.ts b/packages/react-components/jest.config.ts
@@ -6,8 +6,8 @@ const config = {
   coverageThreshold: {
     global: {
       statements: 80,
-      branches: 69,
-      functions: 70,
+      branches: 65,
+      functions: 65,
       lines: 80,
     },
   },

diff --git a/...eact-components/src/components/chart/chartOptions/seriesAndYAxis/convertSeriesAndYAxis.ts b/...eact-components/src/components/chart/chartOptions/seriesAndYAxis/convertSeriesAndYAxis.ts
@@ -58,13 +58,16 @@ const convertSeries = (
     lineThickness,
     emphasis,
     significantDigits,
+    hidden,
   }: ChartStyleSettingsWithDefaults,
   { performanceMode }: { performanceMode?: boolean }
 ) => {
-  const opacity = emphasis === 'de-emphasize' ? DEEMPHASIZE_OPACITY : 1;
+  let opacity = emphasis === 'de-emphasize' ? DEEMPHASIZE_OPACITY : 1;
+  if (hidden) {
+    opacity = 0;
+  }
   const scaledSymbolSize = emphasis === 'emphasize' ? symbolSize + EMPHASIZE_SCALE_CONSTANT : symbolSize;
   const scaledLineThickness = emphasis === 'emphasize' ? lineThickness + EMPHASIZE_SCALE_CONSTANT : lineThickness;
-
   const symbolStyle = visualizationType !== 'scatter' && performanceMode ? 'none' : symbol;
 
   const genericSeries = {