fix: widget types

apps/dev-env/e2e/dashboard/assistant/assistant.spec.ts

@@ -10,7 +10,7 @@ test('dashboard has assistant enabled', async ({ page }) => {
   ).toBeVisible();
 });
 
-test('enable assistant mode and selects widgets', async ({ page }) => {
+test('enable assistant mode and selects widget-instance', async ({ page }) => {
   await page.goto(TEST_PAGE);
 
   const assistantBtn = await page.getByRole('button', {
@@ -31,7 +31,7 @@ test('enable assistant mode and selects widgets', async ({ page }) => {
   expect(await summaryBtn.isDisabled()).toBeFalsy();
 });
 
-test('disable assistant buttons when selects more than 3 widgets', async ({
+test('disable assistant buttons when selects more than 3 widget-instance', async ({
   page,
 }) => {
   await page.goto(TEST_PAGE);

apps/dev-env/e2e/dashboard/dashboard/dashboard.spec.ts

@@ -101,7 +101,7 @@ test.skip('dashboard resize, move, and select gestures', async ({ page }) => {
   await expect(grid.selection()).toBeVisible();
 });
 
-test('dashboard add and remove multiple widgets', async ({ page }) => {
+test('dashboard add and remove multiple widget-instance', async ({ page }) => {
   await page.goto(TEST_PAGE);
 
   const grid = gridUtil(page);

apps/dev-env/e2e/dashboard/resourceExplorer/resourceExplorer.spec.ts

@@ -248,7 +248,7 @@ test(' adding properties to widget clears selection on resource explorer (modele
   await expect(checkedProperty).not.toBeChecked();
 });
 
-test(' changing widgets filters properties correctly (modeled)', async ({
+test(' changing widget-instance filters properties correctly (modeled)', async ({
   page,
 }) => {
   await page.goto(TEST_PAGE);

apps/dev-env/e2e/dashboard/widgets/line.spec.ts

@@ -67,7 +67,7 @@ test.describe('test Line Widget Styling changes', () => {
   });
 
   test.describe('Y Axis', () => {
-    test('verify y-axis text change is reflects on the widgets', async ({
+    test('verify y-axis text change is reflects on the widget-instance', async ({
       page,
       browser,
     }) => {

apps/dev-env/e2e/dashboard/widgets/text.spec.ts

@@ -85,7 +85,7 @@ test.describe('Test Text Widget', () => {
     // confirm delete modal
     await dashboardWithTextWidget.confirmModalDeleteButton.click();
 
-    // verify no widgets
+    // verify no widget-instance
     widget = dashboardWithTextWidget.gridArea.locator('[data-gesture=widget]');
     await expect(widget).not.toBeVisible();
   });

packages/component-core/src/data/types.ts

@@ -1,5 +1,5 @@
 /**
- * Types for transformed data to be used in our widgets
+ * Types for transformed data to be used in our widget-instance
  */
 // extension of the Primitive value used in DataPoint
 export type DataValue = number | string | boolean | Date;
@@ -20,6 +20,8 @@ export type DataSource<Value = unknown> = {
 
 export interface DataSourceTransformer<TransformedData, Description> {
   canTransform: (dataSource: DataSource) => boolean;
+
   transform(dataSource: DataSource): TransformedData;
+
   describe(dataSource: DataSource): Description;
 }

packages/component-core/src/hooks/useAlarmsFromQueries/useAlarmsFromQueries.ts

@@ -16,7 +16,7 @@ import { createNonNullableList } from '@iot-app-kit/core';
  * into useAlarms hook request objects and settings
  *
  * This hook is meant to be used within react-components
- * charts and widgets to make it easy to call useAlarms
+ * charts and widget-instance to make it easy to call useAlarms
  * without having to filter different query types
  * and map clients / settings into the correct
  * options object.

packages/component-core/src/hooks/useSingleQueryAlarm/useSingleQueryAlarm.ts

@@ -31,7 +31,7 @@ export type SingleQueryAlarm = {
 /**
  * Wrapper for useAlarms that sets up the transform function and memoizes the alarm response.
  *
- * Built for widgets that support a single query like KPI and Gauge.
+ * Built for widget-instance that support a single query like KPI and Gauge.
  *
  * The transform function extracts the alarmContent for connecting with the assistant, the
  * alarm query status, the alarm threshold, and the input property data stream generated

packages/component-core/src/queries/useSiteWiseAnomalyDataSource/useSiteWiseAnomalyDataSource.ts

@@ -43,7 +43,7 @@ export type SiteWiseAnomalyDataSourceOptions = {
 /**
  * Query to get parsed Anomaly Results from SiteWise
  * These events are mapped into an Anomaly datasource
- * to be used within appkit charts / widgets
+ * to be used within appkit charts / widget-instance
  *
  * Events are fetched by asset or assetModel.
  * The anomnaly model is determined by using the assetId

packages/core/src/common/types.ts

@@ -101,9 +101,9 @@ export interface Annotation<T extends AnnotationValue> {
   // false or undefined = annotation is not draggable
   isEditable?: boolean;
 
-  // optional id that can be set to identify annotations
+  // set to identify annotations
   // for example, this id can be used by an application to identify and update annotations when a widgetConfigurationUpdate is emitted from SynchroCharts
-  id?: string;
+  id: string;
 }
 
 export interface Threshold<T extends ThresholdValue = ThresholdValue>

packages/core/src/data-module/data-cache/bestStreamStore.ts

@@ -9,7 +9,7 @@ const ascendingSort = (a: number, b: number): number => a - b;
  * Get Best Stream Store
  *
  * Returns the best data stream store based on what resolution and/or aggregation we would like to visualize
- * on connected widgets
+ * on connected widget-instance
  * This will be the store with the smallest resolution which is not smaller than the requested resolution,
  * that is not in a loading or error state.
  */

packages/core/src/data-module/data-cache/requestTypes.ts

@@ -12,8 +12,9 @@ export type DataRequest = {
   viewport?: Viewport;
   settings?: TimeSeriesDataRequestSettings;
 };
+
 /**
- * Request Information utilized by consumers of the widgets to connect the `data-provider` to their data source.
+ * Request Information utilized by consumers of the widget-instance to connect the `data-provider` to their data source.
  */
 export interface TimeSeriesDataRequest extends DataRequest {
   viewport: Viewport;

packages/core/src/mockWidgetProperties.ts

@@ -72,6 +72,7 @@ export const ALARM_STREAM: DataStream<string> = {
 };
 
 export const ALARM_THRESHOLD: Threshold<string> = {
+  id: 'alarm-threshold',
   value: ALARM,
   color: 'orange',
   comparisonOperator: COMPARISON_OPERATOR.EQ,

packages/core/src/plugins/pluginsRegistry.ts

@@ -7,7 +7,7 @@ interface PluginsRegistry {
 }
 
 /**
- * Internal object to hold all of the plugins.
+ * Internal object to hold all of the widget-plugins.
  *
  * @emarks Not exported to encapsulate the registry
  */

packages/core/src/viewportManager/viewportManager.ts

@@ -9,7 +9,7 @@ const viewportMap: Map<string, Viewport> = new Map();
  * Publicly exposed manager of viewport groups. Allows components, both internally to IoT App Kit,
  * and external components / code to broadcast updates to viewports within a group.
  *
- * Utilized to allow widgets to provide a synchronized view into data - an example can be
+ * Utilized to allow widget-instance to provide a synchronized view into data - an example can be
  * found at https://synchrocharts.com/#/Features/Synchronization
  */
 export const viewportManager = {

packages/dashboard/custom.d.ts

@@ -1,11 +1,4 @@
-//https://stackoverflow.com/questions/58726319/typescript-cannot-find-module-when-import-svg-file
 declare module '*.svg' {
-  import type * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement>
-  >;
-
-  const src: string;
-  export default src;
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
 }

packages/dashboard/src/components/actions/index.tsx

@@ -1,30 +1,21 @@
-import isEqual from 'lodash-es/isEqual';
-import { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { Box, Button, SpaceBetween } from '@cloudscape-design/components';
-import { getPlugin } from '@iot-app-kit/core';
-
+import Box from '@cloudscape-design/components/box';
+import Button from '@cloudscape-design/components/button';
+import SpaceBetween from '@cloudscape-design/components/space-between';
 import {
   colorChartsLineGrid,
   spaceScaledXs,
   spaceScaledXxxl,
   spaceScaledXxxs,
 } from '@cloudscape-design/design-tokens';
+import isEqual from 'lodash-es/isEqual';
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { onSelectWidgetsAction, onToggleReadOnly } from '~/store/actions';
-import { type DashboardSave } from '~/types';
-import CustomOrangeButton from '../customOrangeButton';
+import type { DashboardSave } from '~/types/saving';
+import { convertToDashboardConfiguration } from '~/util/convertToDashboardConfiguration';
+import { CustomOrangeButton } from '../customOrangeButton';
 import { RefreshRateDropDown } from '../refreshRate/refreshRateDropdown';
-import DashboardSettings from './settings';
-
-import { convertToDashboardConfiguration } from '~/util/convertToDashbaoardConfiguration';
-
-export type ActionsProps = {
-  readOnly: boolean;
-  defaultToolbar?: boolean;
-  onSave?: DashboardSave;
-  editable?: boolean;
-};
+import { DashboardSettings } from './settings';
 
 const Divider = () => (
   <div
@@ -36,13 +27,19 @@ const Divider = () => (
     }}
   />
 );
+export interface ActionsProps {
+  readOnly: boolean;
+  defaultToolbar?: boolean;
+  onSave?: DashboardSave;
+  editable?: boolean;
+}
 
-const Actions: React.FC<ActionsProps> = ({
+export const Actions = ({
   editable,
   defaultToolbar = true,
   readOnly,
   onSave,
-}) => {
+}: ActionsProps) => {
   const mappedDashboardConfiguration = useSelector(
     convertToDashboardConfiguration,
     isEqual
@@ -52,16 +49,9 @@ const Actions: React.FC<ActionsProps> = ({
     useState(false);
   const dispatch = useDispatch();
 
-  const metricsRecorder = getPlugin('metricsRecorder');
-
   const handleOnSave = () => {
     if (!onSave) return;
     onSave(mappedDashboardConfiguration, readOnly ? 'preview' : 'edit');
-
-    metricsRecorder?.record({
-      metricName: 'DashboardSave',
-      metricValue: 1,
-    });
   };
 
   const handleOnReadOnly = () => {
@@ -72,21 +62,10 @@ const Actions: React.FC<ActionsProps> = ({
         union: false,
       })
     );
-
-    metricsRecorder?.record({
-      // When it is readOnly, it is toggled to Edit; Preview otherwise
-      metricName: readOnly ? 'DashboardEdit' : 'DashboardPreview',
-      metricValue: 1,
-    });
   };
 
   const setSettingVisibility = (visibility: boolean) => {
     setDashboardSettingsVisible(visibility);
-
-    metricsRecorder?.record({
-      metricName: visibility ? 'DashboardSettingOpen' : 'DashboardSettingClose',
-      metricValue: 1,
-    });
   };
 
   return (
@@ -126,5 +105,3 @@ const Actions: React.FC<ActionsProps> = ({
     </Box>
   );
 };
-
-export default Actions;

packages/dashboard/src/components/actions/settings.tsx

@@ -1,30 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  Box,
-  Button,
-  Modal,
-  SpaceBetween,
-} from '@cloudscape-design/components';
-import { useEffect, useState } from 'react';
-
 import { type Viewport } from '@iot-app-kit/core';
-import { isNumeric } from '@iot-app-kit/core-util';
-import { numberFromDetail } from '~/util/inputEvent';
-import DecimalPlaces from '../decimalPlaces';
-import { DefaultViewport } from '../defaultViewport';
-import { useDefaultViewport } from '../defaultViewport/useDefaultViewport';
-import LabeledInput from '../util/labeledInput';
+import Box from '@cloudscape-design/components/box';
+import Button from '@cloudscape-design/components/button';
+import Modal from '@cloudscape-design/components/modal';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+import { useEffect, useState } from 'react';
+import { DefaultViewportField } from '~/components/default-viewport/default-viewport-field';
+import { useDefaultViewport } from '~/components/default-viewport/use-default-viewport';
 import { useGridSettings } from './useGridSettings';
+import { DecimalPlacesField } from '~/features/widget-customization/common/decimal-places-field';
+import { NumberField } from '~/features/widget-customization/atoms/number-input';
 
-export type DashboardSettingsProps = {
-  onClose: () => void;
+export interface DashboardSettingsProps {
+  onClose: VoidFunction;
   isVisible: boolean;
-};
+}
 
-const DashboardSettings: React.FC<DashboardSettingsProps> = ({
+export const DashboardSettings = ({
   onClose,
   isVisible,
-}) => {
+}: DashboardSettingsProps) => {
   const { defaultViewport, onUpdateDefaultViewport } = useDefaultViewport();
   const {
     rows,
@@ -37,8 +32,9 @@ const DashboardSettings: React.FC<DashboardSettingsProps> = ({
     onChangeSignificantDigits,
   } = useGridSettings();
 
-  const [changedSignificantDigits, setSignificantDigits] =
-    useState<number>(significantDigits);
+  const [changedSignificantDigits, setSignificantDigits] = useState<
+    number | undefined
+  >(significantDigits);
   const [changedCellSize, setCellSize] = useState<number>(cellSize);
   const [changedNumberRows, setNumberRows] = useState<number>(rows);
   const [changedNumberColumns, setNumberColumns] = useState<number>(columns);
@@ -50,13 +46,6 @@ const DashboardSettings: React.FC<DashboardSettingsProps> = ({
     setViewport(defaultViewport);
   }, [JSON.stringify(defaultViewport), setViewport]);
 
-  const onSignificantDigitsChange = (value: string) => {
-    const newValue = (isNumeric(value) && parseInt(value)) || 0;
-    if (newValue >= 0 && newValue <= 100) {
-      setSignificantDigits(newValue);
-    }
-  };
-
   const onApplyChanges = () => {
     changedSignificantDigits !== significantDigits &&
       onChangeSignificantDigits(changedSignificantDigits);
@@ -90,38 +79,31 @@ const DashboardSettings: React.FC<DashboardSettingsProps> = ({
     >
       <Box>
         <SpaceBetween direction='vertical' size='l'>
-          <DefaultViewport
+          <DefaultViewportField
             defaultViewport={changedViewport}
             onViewportChange={(viewport) => setViewport(viewport)}
           />
-          <DecimalPlaces
-            showFormFieldLabel={true}
-            onSignificantDigitsChange={onSignificantDigitsChange}
-            significantDigits={changedSignificantDigits}
-            shouldClearErrors={isVisible}
+          <DecimalPlacesField
+            decimalPlaces={changedSignificantDigits}
+            setDecimalPlaces={setSignificantDigits}
           />
-          <LabeledInput
+          <NumberField
             label='Cell size'
-            type='number'
-            value={changedCellSize.toFixed()}
-            onChange={(event) => setCellSize(numberFromDetail(event))}
+            settingValue={changedCellSize}
+            setSettingValue={setCellSize}
           />
-          <LabeledInput
+          <NumberField
             label='Number of rows'
-            type='number'
-            value={changedNumberRows.toFixed()}
-            onChange={(event) => setNumberRows(numberFromDetail(event))}
+            settingValue={changedNumberRows}
+            setSettingValue={setNumberRows}
           />
-          <LabeledInput
+          <NumberField
             label='Number of columns'
-            type='number'
-            value={changedNumberColumns.toFixed()}
-            onChange={(event) => setNumberColumns(numberFromDetail(event))}
+            settingValue={changedNumberColumns}
+            setSettingValue={setNumberColumns}
           />
         </SpaceBetween>
       </Box>
     </Modal>
   );
 };
-
-export default DashboardSettings;