WaferMap component - basic storybook implementation

change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Finished first iteration of the wafermap component and its storybook",
+  "packageName": "@ni/nimble-components",
+  "email": "denis.stavila@ni.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/wafer-map/index.ts

@@ -58,6 +58,20 @@ export class WaferMap extends FoundationElement {
         colors: [],
         values: []
     };
+
+    @observable public renderReady = false;
+
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        // The component has been attached to the DOM and the attributes, properties are available
+        // Use this for initialization/initial render
+
+        // Simulate the time required until render is complete, before displaying the wafermap
+        // User this for conditional rendering
+        setTimeout((): void => {
+            this.renderReady = true;
+        }, 2000);
+    }
 }
 
 const nimbleWaferMap = WaferMap.compose({

packages/nimble-components/src/wafer-map/template.ts

@@ -1,4 +1,36 @@
-import { html } from '@microsoft/fast-element';
+import { html, repeat } from '@microsoft/fast-element';
 import type { WaferMap } from '.';
+import type { WaferMapDie } from './types';
 
-export const template = html<WaferMap>``;
+const notReadyTemplate = html<WaferMap>` <div>Loading....</div> `;
+
+const waferTemplate = html<WaferMap>`
+    <div>
+        <ul>
+            ${repeat(
+        x => x.dies,
+        html`
+                    <li>
+                        ${(x: WaferMapDie) => {
+        return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`;
+    }}
+                    </li>
+                `
+    )}
+            <ul>
+                <div></div>
+            </ul>
+        </ul>
+    </div>
+`;
+
+export const template = html<WaferMap>`
+    <div>
+        ${x => {
+        if (x.renderReady) {
+            return waferTemplate;
+        }
+        return notReadyTemplate;
+    }}
+    </div>
+`;

packages/nimble-components/src/wafer-map/tests/sets.ts

@@ -0,0 +1,54 @@
+import type { WaferMapDie, WaferMapColorsScale } from '../types';
+
+export const HIGHLIGHTEDVALUESETS = [
+    [0, 1, 2, 3],
+    [4, 5, 6, 7],
+    [1, 5, 7, 15],
+    [0, 2, 7, 10]
+];
+
+export const WAFERMAPDIESETS: WaferMapDie[][] = [
+    [
+        { x: 0, y: 0, value: 100 },
+        { x: 0, y: 1, value: 50 },
+        { x: 0, y: 2, value: 12 },
+        { x: 0, y: 3, value: 99 },
+        { x: 1, y: 0, value: 78 },
+        { x: 1, y: 1, value: 88 },
+        { x: 1, y: 2, value: 68 },
+        { x: 1, y: 3, value: 99 },
+        { x: 2, y: 0, value: 99 },
+        { x: 2, y: 1, value: 80 },
+        { x: 2, y: 2, value: 99 },
+        { x: 2, y: 3, value: 100 },
+        { x: 3, y: 0, value: 40 },
+        { x: 3, y: 1, value: 10 },
+        { x: 3, y: 2, value: 15 },
+        { x: 3, y: 3, value: 30 }
+    ],
+    [
+        { x: 0, y: 0, value: 16 },
+        { x: 0, y: 1, value: 50 },
+        { x: 0, y: 2, value: 13 },
+        { x: 0, y: 3, value: 65 },
+        { x: 1, y: 0, value: 78 },
+        { x: 1, y: 1, value: 88 },
+        { x: 1, y: 2, value: 99 },
+        { x: 1, y: 3, value: 99 },
+        { x: 2, y: 0, value: 99 },
+        { x: 2, y: 1, value: 80 },
+        { x: 2, y: 2, value: 99 },
+        { x: 2, y: 3, value: 100 },
+        { x: 3, y: 0, value: 70 },
+        { x: 3, y: 1, value: 75 },
+        { x: 3, y: 2, value: 70 },
+        { x: 3, y: 3, value: 72 }
+    ]
+];
+
+export const WAFERMAPCOLORSCALESETS: WaferMapColorsScale[] = [
+    {
+        colors: ['red', 'orange', 'green'],
+        values: [1, 50, 100]
+    }
+];

packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts

@@ -0,0 +1,178 @@
+import { html } from '@microsoft/fast-element';
+import type { Meta, StoryObj } from '@storybook/html';
+import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
+
+import '../../all-components';
+import type { WaferMapDie, WaferMapColorsScale } from '../types';
+import {
+    WaferMapQuadrant,
+    WaferMapOrientation,
+    WaferMapColorsScaleMode
+} from '../types';
+import {
+    HIGHLIGHTEDVALUESETS,
+    WAFERMAPDIESETS,
+    WAFERMAPCOLORSCALESETS
+} from './sets';
+
+interface WafermapArgs {
+    quadrant: WaferMapQuadrant;
+    orientation: WaferMapOrientation;
+    maxCharacters: number;
+    dieLabelsHidden: boolean;
+    dieLabelsSuffix: string;
+    colorsScaleMode: WaferMapColorsScaleMode;
+    highlightedValues: number[];
+    dies: WaferMapDie[];
+    colorScale: WaferMapColorsScale;
+}
+
+const metadata: Meta<WafermapArgs> = {
+    title: 'Wafermap',
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Wafermap description'
+            }
+        },
+        actions: {
+            handles: ['click', 'mouseover']
+        }
+    },
+    render: createUserSelectedThemeStory(html`
+        <nimble-wafer-map
+            id="wafermapEl"
+            quadrant="${x => x.quadrant}"
+            orientation="${x => x.orientation}"
+            maxCharacters="${x => x.maxCharacters}"
+            dieLabelsHidden="${x => x.dieLabelsHidden}"
+            dieLabelsSuffix="${x => x.dieLabelsSuffix}"
+            colorsScaleMode="${x => x.colorsScaleMode}"
+            :highlightedValues="${x => x.highlightedValues}"
+            :colorScale="${x => x.colorScale}"
+            :dies=${x => x.dies}
+        >
+        </nimble-wafer-map>
+    `),
+    args: {
+        dies: WAFERMAPDIESETS[0],
+        quadrant: WaferMapQuadrant.bottomLeft,
+        orientation: WaferMapOrientation.left,
+        colorScale: WAFERMAPCOLORSCALESETS[0],
+        maxCharacters: 4,
+        dieLabelsHidden: false,
+        dieLabelsSuffix: '',
+        colorsScaleMode: WaferMapColorsScaleMode.linear,
+        highlightedValues: HIGHLIGHTEDVALUESETS[0]
+    },
+    argTypes: {
+        dies: {
+            description:
+                'Represents the input data, an array of WaferMapDie, which will be renedered by the Wafermap',
+            options: ['set1', 'set2'],
+            control: {
+                type: 'select',
+                labels: {
+                    set1: 'Dies Set 1',
+                    set2: 'Dies Set 2'
+                }
+            },
+            mapping: {
+                set1: WAFERMAPDIESETS[0],
+                set2: WAFERMAPDIESETS[1]
+            }
+        },
+        quadrant: {
+            description:
+                'Represents the orientation of the dies on the wafer map',
+            options: Object.values(WaferMapQuadrant),
+            control: {
+                type: 'select',
+                labels: {
+                    [WaferMapQuadrant.bottomLeft]: 'BottomLeft',
+                    [WaferMapQuadrant.bottomRight]: 'BottomRight',
+                    [WaferMapQuadrant.topLeft]: 'TopLeft',
+                    [WaferMapQuadrant.topRight]: 'TopRight'
+                }
+            }
+        },
+        orientation: {
+            description: 'Notch orientation',
+            options: Object.values(WaferMapOrientation),
+            control: {
+                type: 'select',
+                labels: {
+                    [WaferMapOrientation.left]: 'Left',
+                    [WaferMapOrientation.top]: 'Top',
+                    [WaferMapOrientation.right]: 'Right',
+                    [WaferMapOrientation.bottom]: 'Bottom'
+                }
+            }
+        },
+        maxCharacters: {
+            description:
+                'Represents the number of characters allowed to be displayed within a single die. As the die values are represented by Floating point numbers, we must have the liberty of limiting how many characters we are willing to display within a single die.',
+            control: { type: 'number' }
+        },
+        dieLabelsHidden: {
+            description:
+                'Boolean value that determines if the dies labels in the wafer map view are shown or not. Default value is false.',
+            control: { type: 'boolean' }
+        },
+        dieLabelsSuffix: {
+            description:
+                'String that can be added as a label at the end of each wafer map die value',
+            control: { type: 'string' }
+        },
+        colorsScaleMode: {
+            description:
+                'Enum value that determines if the colorScale represents continuous gradient values (linear), or is set categorically (ordinal).',
+            options: Object.values(WaferMapColorsScaleMode),
+            control: {
+                type: 'select',
+                labels: {
+                    [WaferMapColorsScaleMode.linear]: 'Linear',
+                    [WaferMapColorsScaleMode.ordinal]: 'Ordinal'
+                }
+            }
+        },
+        highlightedValues: {
+            description:
+                'Represents an array of die indexes that will be highlighted in the wafer map view',
+            options: ['set1', 'set2', 'set3', 'set4'],
+            control: {
+                type: 'select',
+                labels: {
+                    set1: 'Highlighted Values Set 1',
+                    set2: 'Highlighted Values Set 2',
+                    set3: 'Highlighted Values Set 3',
+                    set4: 'Highlighted Values Set 4'
+                }
+            },
+            mapping: {
+                set1: HIGHLIGHTEDVALUESETS[0],
+                set2: HIGHLIGHTEDVALUESETS[1],
+                set3: HIGHLIGHTEDVALUESETS[2],
+                set4: HIGHLIGHTEDVALUESETS[3]
+            }
+        },
+        colorScale: {
+            description:
+                'Represents the color spectrum which shows the status of the dies on the wafer.',
+            options: ['set1'],
+            control: {
+                type: 'select',
+                labels: {
+                    set1: 'Color Scale 1'
+                }
+            },
+            mapping: {
+                set1: WAFERMAPCOLORSCALESETS[0]
+            }
+        }
+    }
+};
+
+export default metadata;
+
+export const waferMap: StoryObj<WafermapArgs> = {};

packages/nimble-components/src/wafer-map/types.ts

@@ -5,6 +5,39 @@ export const WaferMapQuadrant = {
     topRight: 'top-right'
 } as const;
 
+export const HighlightedValuesSets = [
+    [0, 1, 2, 3],
+    [4, 5, 6, 7],
+    [1, 5, 7, 15],
+    [0, 2, 7, 10]
+];
+
+export const WafermapDiesSet: WaferMapDie[] = [
+    { x: 0, y: 0, value: 100 },
+    { x: 0, y: 1, value: 50 },
+    { x: 0, y: 2, value: 12 },
+    { x: 0, y: 3, value: 99 },
+    { x: 1, y: 0, value: 78 },
+    { x: 1, y: 1, value: 88 },
+    { x: 1, y: 2, value: 68 },
+    { x: 1, y: 3, value: 99 },
+    { x: 2, y: 0, value: 99 },
+    { x: 2, y: 1, value: 80 },
+    { x: 2, y: 2, value: 99 },
+    { x: 2, y: 3, value: 100 },
+    { x: 3, y: 0, value: 40 },
+    { x: 3, y: 1, value: 10 },
+    { x: 3, y: 2, value: 15 },
+    { x: 3, y: 3, value: 30 }
+];
+
+export const WaferMapColorsScaleSets: WaferMapColorsScale[] = [
+    {
+        colors: ['red', 'orange', 'green'],
+        values: [1, 50, 100]
+    }
+];
+
 export type WaferMapQuadrant =
     typeof WaferMapQuadrant[keyof typeof WaferMapQuadrant];