Wafer Analysis Chart

1import { IThemeProvider, SciChartJsNavyTheme } from "scichart";
2
3export interface AppThemeBase {
4    SciChartJsTheme: IThemeProvider;
5
6    // general colors
7    ForegroundColor: string;
8    Background: string;
9
10    // Series colors
11    VividSkyBlue: string;
12    VividPink: string;
13    VividTeal: string;
14    VividOrange: string;
15    VividBlue: string;
16    VividPurple: string;
17    VividGreen: string;
18    VividRed: string;
19
20    MutedSkyBlue: string;
21    MutedPink: string;
22    MutedTeal: string;
23    MutedOrange: string;
24    MutedBlue: string;
25    MutedPurple: string;
26    MutedRed: string;
27
28    PaleSkyBlue: string;
29    PalePink: string;
30    PaleTeal: string;
31    PaleOrange: string;
32    PaleBlue: string;
33    PalePurple: string;
34}
35
36export class SciChart2022AppTheme implements AppThemeBase {
37    SciChartJsTheme = new SciChartJsNavyTheme();
38
39    // General colors
40    ForegroundColor = "#FFFFFF";
41    Background = this.SciChartJsTheme.sciChartBackground;
42
43    // Series colors
44    VividSkyBlue = "#50C7E0";
45    VividPink = "#EC0F6C";
46    VividTeal = "#30BC9A";
47    VividOrange = "#F48420";
48    VividBlue = "#364BA0";
49    VividPurple = "#882B91";
50    VividGreen = "#67BDAF";
51    VividRed = "#C52E60";
52
53    DarkIndigo = "#14233C";
54    Indigo = "#264B93";
55
56    MutedSkyBlue = "#83D2F5";
57    MutedPink = "#DF69A8";
58    MutedTeal = "#7BCAAB";
59    MutedOrange = "#E7C565";
60    MutedBlue = "#537ABD";
61    MutedPurple = "#A16DAE";
62    MutedRed = "#DC7969";
63
64    PaleSkyBlue = "#E4F5FC";
65    PalePink = "#EEB3D2";
66    PaleTeal = "#B9E0D4";
67    PaleOrange = "#F1CFB5";
68    PaleBlue = "#B5BEDF";
69    PalePurple = "#CFB4D5";
70}
71
72export const appTheme = new SciChart2022AppTheme();
73

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.