Wafer Analysis Chart

1import { IThemeProvider, SciChartJsNavyTheme } from "scichart";
2
3const getCssColor = (cssVar: string, fallback: string): string => {
4    if (typeof document === "undefined") {
5        return fallback;
6    }
7    const cssValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
8    return cssValue || fallback;
9};
10
11type TRgbColor = { r: number; g: number; b: number };
12
13const parseCssColorToRgb = (color: string): TRgbColor | undefined => {
14    const trimmed = color.trim();
15
16    if (trimmed.startsWith("#")) {
17        let hex = trimmed.slice(1);
18        if (hex.length === 3 || hex.length === 4) {
19            hex = hex
20                .slice(0, 3)
21                .split("")
22                .map((channel) => channel + channel)
23                .join("");
24        } else if (hex.length === 6 || hex.length === 8) {
25            hex = hex.slice(0, 6);
26        } else {
27            return undefined;
28        }
29
30        if (!/^[0-9a-fA-F]{6}$/.test(hex)) {
31            return undefined;
32        }
33
34        return {
35            r: Number.parseInt(hex.slice(0, 2), 16),
36            g: Number.parseInt(hex.slice(2, 4), 16),
37            b: Number.parseInt(hex.slice(4, 6), 16),
38        };
39    }
40
41    const rgbMatch = trimmed.match(/^rgba?\((.+)\)$/i);
42    if (!rgbMatch) {
43        return undefined;
44    }
45
46    const channels = rgbMatch[1]
47        .split(",")
48        .slice(0, 3)
49        .map((channel) => Number.parseFloat(channel.trim()));
50
51    if (channels.length !== 3 || channels.some((channel) => !Number.isFinite(channel))) {
52        return undefined;
53    }
54
55    const clamp = (value: number) => Math.max(0, Math.min(255, value));
56
57    return {
58        r: clamp(channels[0]),
59        g: clamp(channels[1]),
60        b: clamp(channels[2]),
61    };
62};
63
64const getPerceivedBrightness = (color: string): number | undefined => {
65    const rgb = parseCssColorToRgb(color);
66    if (!rgb) return undefined;
67
68    // WCAG-adjacent perceptual weighting for quick dark/light detection.
69    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
70};
71
72export interface AppThemeBase {
73    SciChartJsTheme: IThemeProvider;
74
75    // general colors
76    isDark: boolean;
77    ForegroundColor: string;
78    Background: string;
79
80    // Series colors
81    VividSkyBlue: string;
82    VividPink: string;
83    VividTeal: string;
84    VividOrange: string;
85    VividBlue: string;
86    VividPurple: string;
87    VividGreen: string;
88    VividRed: string;
89
90    MutedSkyBlue: string;
91    MutedPink: string;
92    MutedTeal: string;
93    MutedOrange: string;
94    MutedBlue: string;
95    MutedPurple: string;
96    MutedRed: string;
97
98    PaleSkyBlue: string;
99    PalePink: string;
100    PaleTeal: string;
101    PaleOrange: string;
102    PaleBlue: string;
103    PalePurple: string;
104}
105
106export class SciChart2022AppTheme implements AppThemeBase {
107    SciChartJsTheme = new SciChartJsNavyTheme();
108
109    // Dynamic colors
110    get isDark() {
111        const brightness = getPerceivedBrightness(this.Background);
112        return brightness === undefined || brightness < 128;
113    }
114    get TextColor() { return this.ForegroundColor; }
115    get ForegroundColor() {
116        return getCssColor("--text", "#F5F5F5");
117    }
118    get Background() {
119        return getCssColor("--bg-chart", this.SciChartJsTheme.sciChartBackground);
120    }
121
122    // Series colors
123    VividSkyBlue = "#50C7E0";
124    VividPink = "#EC0F6C";
125    VividTeal = "#30BC9A";
126    VividOrange = "#F48420";
127    VividBlue = "#364BA0";
128    VividPurple = "#882B91";
129    VividGreen = "#67BDAF";
130    VividRed = "#C52E60";
131
132    DarkIndigo = "#14233C";
133    Indigo = "#264B93";
134
135    MutedSkyBlue = "#83D2F5";
136    MutedPink = "#DF69A8";
137    MutedTeal = "#7BCAAB";
138    MutedOrange = "#E7C565";
139    MutedBlue = "#537ABD";
140    MutedPurple = "#A16DAE";
141    MutedRed = "#DC7969";
142
143    PaleSkyBlue = "#E4F5FC";
144    PalePink = "#EEB3D2";
145    PaleTeal = "#B9E0D4";
146    PaleOrange = "#F1CFB5";
147    PaleBlue = "#B5BEDF";
148    PalePurple = "#CFB4D5";
149}
150
151export const appTheme = new SciChart2022AppTheme();
152

Wafer Analysis Dashboard - React

Overview

Dashboard/Interface Layout

The Wafer Analysis dashboard presents a comprehensive semiconductor wafer testing interface organized in a two-panel layout:

Left Panel:

• Main wafer visualization chart displaying the circular wafer map with individual dies

• Variable selection dropdown for switching between different measurement variables (DEFECT, MR, HR, MR2, HDI)

• Legend area showing defect type classifications

Right Panel:

• Top section: Dual-variable scatter plot comparing MR vs MR2 and HR vs HDI relationships

• Bottom section: 2x2 grid of histogram charts with nested overview controls for each measurement variable (MR, HR, MR2, HDI)

User Interactions

Wafer Chart Interactions:

• Drag Selection: Users can drag to select rectangular regions on the wafer, which filters data by row/column position

• Single Click: Clears any active selection filters

• Right-Click Zoom/Pan: Navigate around the wafer visualization

• Mouse Wheel: Zoom in/out on the wafer

• Variable Selection: Dropdown allows switching color visualization between defect types and numeric variables

Measure Chart Interactions:

• Zoom/Pan Operations: Each histogram chart supports independent zooming and panning

• Range Selection: Zooming on any histogram automatically applies range filters to that measurement variable

• Overview Charts: Miniature overview charts beneath each histogram show the full data range and current zoom level

Scatter Plot Interactions:

• Standard Navigation: Zoom, pan, and mouse wheel operations

• Legend: Toggle visibility of MR vs MR2 and HR vs HDI data series

Interactive Features

The dashboard implements a sophisticated cross-filtering workflow where interactions in any chart component immediately update all other visualizations:

• Wafer Selection → Measurement Filtering: Selecting regions on the wafer filters all histogram and scatter plot data
• Histogram Zooming → Cross-Filter Updates: Zooming on any measurement histogram applies range filters that update the wafer visualization and scatter plot
• Variable Switching → Dynamic Recoloring: Changing the color variable dynamically updates the wafer chart's palette provider for real-time visualization changes
• Bidirectional Filtering: All filters work in combination, allowing users to drill down through multiple dimensions simultaneously

Primary Use Cases

This example demonstrates:

• Semiconductor Manufacturing Analysis: Visualizing die-level measurements across a wafer surface

• Multi-Dimensional Data Exploration: Cross-filtering capabilities for analyzing relationships between different measurement variables

• Defect Pattern Recognition: Color-coded visualization of defect types and measurement ranges

• Real-time Data Analytics: Live filtering and updating of large datasets using crossfilter technology

Technical Implementation

Architecture Overview

The application leverages SciChart React integration through the SciChartReact component pattern, where each chart is initialized via factory functions and managed through React refs. The architecture separates concerns between:

• Data Management: useDataStore Zustand store with crossfilter dimensions

• Chart Factories: Individual createInit* functions for each chart type

• Communication Layer: React callback patterns and ref-based method invocation

Individual Chart/Component Analysis

Wafer Chart Component

API Surface:

• Input Parameters: setRowFilter, setColFilter, selectedVariable, variableRange

• Return Values: updateWaferData(), updatePaletteProvider() methods

• Update Methods: updateWaferData(dataJSON: WaferData[]) for data refresh, updatePaletteProvider(newVariable: string, newRange?: [number, number]) for color scheme updates

Key Technical Features:

• Custom Palette Provider: RectanglePaletteProvider implements IFillPaletteProvider for dynamic coloring based on defect types or measurement ranges

• Custom Selection Modifier: WaferRangeSelectionModifier extends DataPointSelectionModifier to translate rectangle selections into row/column filter ranges

• FastRectangleRenderableSeries: Uses FastRectangleRenderableSeries with XyzDataSeries for efficient wafer die rendering

• Color Interpolation: Implements uintArgbColorLerp() for smooth color transitions between measurement value ranges

Measure Chart Components

API Surface:

• Input Parameters: xValues: number[], yValues: number[], setFilter: Dispatch<[number, number]>, fill: string

• Return Values: updateMeasureChartData(xValues: number[], yValues: number[]) method

• Callback Interfaces: setFilter callback triggered on visibleRangeChanged events

Key Technical Features:

• Custom Delta Calculator: IntegerDeltaCalculator extends NumericDeltaCalculator to ensure integer-only axis tick marks

• Nested Overview Integration: overviewOptions configuration with transformRenderableSeries for series cloning

• Auto-Range Animation: autoRangeAnimation with easing.outExpo for smooth transitions

• Range-Based Filtering: visibleRangeChanged.subscribe() automatically updates filter state

Scatter Plot Component

API Surface:

• Input Parameters: No external parameters required

• Return Values: updateScatterPlotData(values: readonly WaferData[]) method

• Update Methods: updateScatterPlotData() handles dual data series updates

Key Technical Features:

• Dual Data Series: Manages two XyDataSeries for MR vs MR2 and HR vs HDI correlations

• Custom Point Markers: EllipsePointMarker with opacity settings for data density visualization

• Legend Integration: LegendModifier with ELegendPlacement.TopRight

Component Communication

Cross-Filter Architecture: The communication system centers on crossfilter dimensions and groups managed by useDataStore:

• Dimension Creation: dies.dimension() creates filterable dimensions for each measurement variable

• Group Aggregation: dimension.group(Math.floor) creates histogram bins for each measurement

• Filter Application: Dimensions support filter(range) and filterAll() operations

Update Propagation:

• Filter State Changes: React useState hooks trigger useEffect reactions

• Data Flow: dies.allFiltered() provides filtered data to all chart components

• Method Invocation: Chart refs expose updateWaferData(), updateScatterPlotData(), and updateMeasureChartData() methods

Callback Patterns:

• Range Filters: Measure charts invoke setFilter([min, max]) on zoom operations

• Spatial Filters: Wafer selection calls setRowFilter() and setColFilter()

• Variable Selection: Dropdown changes trigger updatePaletteProvider() calls

Performance Optimizations & Advanced Features

Memory Management:

• Memoized Calculations: useMemo() for data transformations and factory function creation

• Callback Stabilization: useCallback() for chart initialization handlers

• Efficient Updates: dataSeries.clear() and appendRange() for minimal memory allocation

Data Processing Optimizations:

• Crossfilter Integration: Leverages crossfilter's optimized filtering and grouping algorithms

• Selective Filtering: dies.allFiltered([Row, Col]) excludes specific dimensions from wafer data filtering

• Integer Grouping: Math.floor grouping functions for histogram binning

Rendering Performance:

• Fast Series Types: FastRectangleRenderableSeries, FastColumnRenderableSeries for high-performance rendering

• Efficient Data Series: dataIsSortedInX: true optimization hints

• Palette Provider Caching: RectanglePaletteProvider with cached color calculations

Advanced Features:

• Dynamic Theming: Integration with appTheme for consistent color schemes

• Seeded Data Generation: generateWaferDataByValues() from URL parameters for reproducible examples

• Manual Legend: ManualLegend with placementDivId for external legend positioning

• Overview Charts: SciChartNestedOverview components with automatic series transformation

The implementation demonstrates advanced SciChart.js capabilities including custom modifiers, palette providers, and sophisticated data binding patterns optimized for real-time multi-dimensional data analysis.