Skip to content

Commit

Permalink
fix(ResourceExplorer): implement toggling on/off of properties visibi…
Browse files Browse the repository at this point in the history 
…lity
  • Loading branch information
@diehbria
diehbria committed Sep 30, 2023
1 parent e187898 commit 8666736
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 19 deletions.
2 changes: 1 addition & 1 deletion ...ashboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/sectionTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export type OnDeleteAssetQuery = (params: {
assetId: string;
propertyId: string;
siteWiseAssetQuery: IoTSiteWiseDataStreamQuery | StyledAssetQuery;
updateSiteWiseAssetQuery: (newQuery: IoTSiteWiseDataStreamQuery) => void;
updateSiteWiseAssetQuery: (newQuery: StyledAssetQuery) => void;
}) => () => void;

export type PropertiesAlarmsSectionProps = {
Expand Down
35 changes: 24 additions & 11 deletions .../customization/propertiesSections/propertiesAndAlarmsSettings/styledPropertyComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,20 @@ import type { FC } from 'react';
import './propertyComponent.css';
import { StyledAssetPropertyQuery, YAxisOptions } from '~/customization/widgets/types';
import { getPropertyDisplay } from './getPropertyDisplay';
import type { AssetSummary } from '../../../hooks/useAssetDescriptionQueries';
import type { AssetSummary } from '~/hooks/useAssetDescriptionQueries';
import {
colorBackgroundHomeHeader,
colorBackgroundLayoutMain,
colorBorderButtonNormalDisabled,
spaceScaledM,
spaceScaledXxxs,
spaceStaticXs,
} from '@cloudscape-design/design-tokens';
import {
StatusEyeHidden,
StatusEyeVisible,
} from '~/customization/propertiesSections/propertiesAndAlarmsSettings/icons';
import { ClickDetail, NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';

const YAxisPropertyConfig = ({
resetStyles,
Expand Down Expand Up @@ -88,19 +101,22 @@ export type StyledPropertyComponentProps = {
updateStyle: (newStyles: object) => void;
assetSummary: AssetSummary;
property: StyledAssetPropertyQuery;
onHideAssetQuery: () => void;
onDeleteAssetQuery?: () => void;
colorable: boolean;
isPropertyVisible: boolean;
};

export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
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;
Expand All @@ -127,7 +143,6 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
const handleMouseLeave = () => {
setOnMouseOver(false);
};
*/

const resetStyles = (styleToReset: object) => {
updateStyle(styleToReset); // as we add more sections, reset style values here
Expand All @@ -139,14 +154,12 @@ export const StyledPropertyComponent: FC<StyledPropertyComponentProps> = ({
<ColorPicker color={property.color || ''} updateColor={(newColor) => updateStyle({ color: newColor })} />
)}
<div style={{ fontWeight: 'normal' }}>{label}</div>
{/*
<div className='property-display-toggle' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Button onClick={onToggleAssetQuery} variant='icon' iconSvg={propertyVisibilityIcon} />
<span className='tooltiptext' style={tooltipStyle}>
{onMouseOver && isPropertyVisible ? 'hide' : 'unhide'}
</span>
</div>
*/}
<div className='property-display-toggle' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Button onClick={onToggleAssetQuery} variant='icon' iconSvg={propertyVisibilityIcon} />
<span className='tooltiptext' style={tooltipStyle}>
{onMouseOver && isPropertyVisible ? 'hide' : 'unhide'}
</span>
</div>

<Button onClick={onDeleteAssetQuery} variant='icon' iconName='remove' />
</SpaceBetween>
Expand Down
55 changes: 53 additions & 2 deletions ...hboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/styledSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { StyledPropertyComponent } from './styledPropertyComponent';
import { Box } from '@cloudscape-design/components';
import { StyledPropertiesAlarmsSectionProps } from './sectionTypes';
import { defaultOnDeleteQuery } from './onDeleteProperty';
import { IoTSiteWiseDataStreamQuery } from '~/types';
import { StyledAssetQuery } from '~/customization/widgets/types';

const NoComponents = () => <Box variant='p'>No properties or alarms found</Box>;

Expand Down Expand Up @@ -40,7 +40,7 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
const getComponents = () => {
if (mustEditAsSingle) return <SelectOneWidget />;

const updateSiteWiseAssetQuery = (newQuery: IoTSiteWiseDataStreamQuery) => {
const updateSiteWiseAssetQuery = (newQuery: StyledAssetQuery) => {
updateQueryConfig({
...queryConfig.value,
query: newQuery,
Expand Down Expand Up @@ -79,6 +79,51 @@ 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 visible ? property : { ...property, visible: false };
} else {
return property;
}
})) ??
[],
};

updateSiteWiseAssetQuery(newQuery);
};

const modeled =
styledAssetQuery?.assets?.flatMap(({ assetId, properties }) =>
Expand All @@ -96,6 +141,8 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
updateSiteWiseAssetQuery,
})}
colorable={colorable}
onHideAssetQuery={() => onHideAssetQuery(assetId, property.propertyId)}
isPropertyVisible={property.visible ?? true}
/>
) : null
)
Expand All @@ -116,6 +163,10 @@ export const StyledPropertiesAlarmsSection: FC<StyledPropertiesAlarmsSectionProp
updateSiteWiseAssetQuery,
})}
colorable={colorable}
onHideAssetQuery={() => {
onHidePropertyAliasQuery(property.propertyAlias);
}}
isPropertyVisible={property.visible ?? true}
/>
);
}) ?? [];
Expand Down
5 changes: 4 additions & 1 deletion packages/dashboard/src/customization/widgets/barChart/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
} = widget.properties;

const { iotSiteWiseQuery } = useQueries();
const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
const queries =
iotSiteWiseQuery && queryConfig.query
? [iotSiteWiseQuery?.timeSeriesData({ assets: [], ...queryConfig.query })]
: [];
const key = computeQueryConfigKey(undefined, queryConfig);
const aggregation = getAggregation(widget);
const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
Expand Down
23 changes: 22 additions & 1 deletion packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,28 @@ const convertAxis = (axis: ChartAxisOptions | undefined) => ({
yMax: axis?.yMax,
});

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),
},
},
},
});

const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (widget) => {
const widgetToDisplay = removeHiddenDataStreams(widget);
const { viewport } = useViewport();
const readOnly = useSelector((state: DashboardState) => state.readOnly);
const chartSize = useChartSize(widget);
Expand All @@ -121,7 +142,7 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (widge
line,
symbol,
significantDigits: widgetSignificantDigits,
} = widget.properties;
} = widgetToDisplay.properties;

//debugger;
const query = queryConfig.query;
Expand Down
5 changes: 3 additions & 2 deletions packages/dashboard/src/customization/widgets/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type {
SiteWiseAssetQuery,
SiteWisePropertyAliasQuery,
} from '@iot-app-kit/source-iotsitewise';
import type { DashboardWidget, IoTSiteWiseDataStreamQuery } from '~/types';
import type { DashboardWidget } from '~/types';
import type { AxisSettings, ComplexFontSettings, SimpleFontSettings, ThresholdWithId } from '../settings';
import type { TableColumnDefinition, TableItem } from '@iot-app-kit/react-components/src';
import { AggregateType } from '@aws-sdk/client-iotsitewise';
Expand Down Expand Up @@ -65,6 +65,7 @@ export type LineAndScatterStyles = {
line?: LineStyles;
aggregationType?: AggregateType;
resolution?: string;
visible?: boolean; // defaults to true
};
export type LineStyles = {
connectionStyle?: 'none' | 'linear' | 'curve' | 'step-start' | 'step-middle' | 'step-end';
Expand Down Expand Up @@ -118,7 +119,7 @@ type ChartLegend = {
visible?: boolean;
};

export type StyledSiteWiseQueryConfig = QueryConfig<'iotsitewise', IoTSiteWiseDataStreamQuery | undefined>;
export type StyledSiteWiseQueryConfig = QueryConfig<'iotsitewise', StyledAssetQuery | undefined>;

export type LineScatterChartProperties = LineAndScatterStyles & {
title?: string;
Expand Down
1 change: 0 additions & 1 deletion packages/source-iotsitewise/src/time-series-data/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export type AssetPropertyQuery = {
cacheSettings?: CacheSettings;
aggregationType?: AggregateType;
alarms?: boolean;
visible?: boolean;
};

export type PropertyAliasQuery = {
Expand Down

0 comments on commit 8666736

Please sign in to comment.