Analysis Dashboard Overview
Relevant source files
The following files were used as context for generating this wiki page:
- frontend/src/components/dashboard/Analyzer.tsx
- frontend/src/pages/class/[classId]/session/[sessionId]/analysis.tsx
- frontend/src/components/dashboard/Analysis.tsx
- e2e/tests/sessions/session-analysis.spec.ts
- frontend/src/components/dashboard/CodeComparison.tsx
- frontend/src/components/dashboard/CodeView.tsx
- frontend/src/components/dashboard/DissimilarityAnalysis.tsx
The Analysis Dashboard is an interactive visualization tool designed for educators to analyze student solutions for a specific task within a session. It provides a scatter plot to visualize solution metrics, enabling the identification of patterns, common strategies, and outliers. The dashboard includes features for filtering, grouping (both manual and automatic), and side-by-side code comparison. It is the central hub for understanding class-wide performance and individual student approaches.
The main analysis page is rendered at the route /class/[classId]/session/[sessionId]/analysis. Other related analysis features like finding dissimilar solutions are available under /dissimilar-solutions and /dissimilar-pairs.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/analysis.tsx, frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-solutions.tsx, frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-pairs.tsx
Architecture and Core Components
The dashboard is composed of several key React components that work together to provide a cohesive analysis experience. The Analyzer component acts as the main controller, managing state and data fetching, while child components like Analysis and CodeComparison handle specific UI sections.
Sources: frontend/src/components/dashboard/Analyzer.tsx, frontend/src/components/dashboard/Analysis.tsx, frontend/src/components/dashboard/CodeComparison.tsx
Component Hierarchy
The following diagram illustrates the primary component structure of the analysis dashboard.
Key Component Descriptions
| Component | File Path | Description |
|---|---|---|
Analyzer | frontend/src/components/dashboard/Analyzer.tsx | The main container component. It manages state via useReducer, fetches task and solution analysis data, and orchestrates interactions between the filter/parameter panel, the chart, and the code comparison view. |
Analysis | frontend/src/components/dashboard/Analysis.tsx | Renders the interactive scatter plot (bubble chart) using Chart.js. It handles data point aggregation, axis configuration, tooltips, and custom chart plugins for selection and splitting. |
CodeComparison | frontend/src/components/dashboard/CodeComparison.tsx | Provides a side-by-side view for comparing two selected solutions. It includes dropdowns for selecting groups and individual solutions. |
CodeView | frontend/src/components/dashboard/CodeView.tsx | An embedded application (e.g., Scratch) that displays the code for a single solution. It is used within CodeComparison and DissimilarityAnalysis. |
AnalyzerFilterForm | frontend/src/components/dashboard/filter/AnalyzerFilterForm.tsx | A form that allows users to apply various filters to the dataset, narrowing down the solutions shown on the chart. |
DissimilarityAnalysis | frontend/src/components/dashboard/DissimilarityAnalysis.tsx | A separate analysis tool that identifies and displays a set of the most programmatically dissimilar solutions for a given task. |
Sources: frontend/src/components/dashboard/Analyzer.tsx, frontend/src/components/dashboard/Analysis.tsx, frontend/src/components/dashboard/CodeComparison.tsx, frontend/src/components/dashboard/CodeView.tsx, frontend/src/components/dashboard/DissimilarityAnalysis.tsx
Data Flow and State Management
The dashboard's state is centrally managed within the Analyzer component using a reducer pattern (analyzerStateReducer). This ensures predictable state transitions as the user interacts with the UI.
Data Loading and Rendering Sequence
The following diagram shows the sequence of events from page load to rendering the analysis chart.
State Management (AnalyzerState)
The analyzerStateReducer manages a complex state object, AnalyzerState, which holds all UI and data configuration.
| Property | Type | Description |
|---|---|---|
selectedTask | number | The ID of the currently selected task. |
selectedSubTaskId | string | undefined | The ID of the selected sub-task, or undefined for all sub-tasks. |
isAutomaticGrouping | boolean | A flag to enable or disable automatic clustering of solutions. |
xAxis | AxesCriterionType | The criterion selected for the chart's X-axis. |
yAxis | AxesCriterionType | The criterion selected for the chart's Y-axis. |
filters | Filter[] | An array of active filter configurations. |
splits | Split[] | An array of horizontal or vertical lines for manual grouping. |
selectedSolutionIds | Set<string> | A set of solution IDs selected by the user on the chart. |
comparison | object | State for the code comparison view, including selected solutions for the left and right panes. |
Sources: frontend/src/components/dashboard/Analyzer.tsx:68-81, frontend/src/components/dashboard/Analyzer.state.ts
The Analysis Chart
The core of the dashboard is the interactive bubble chart, which plots student solutions based on selected metrics.
Sources: frontend/src/components/dashboard/Analysis.tsx
Chart Implementation
The chart is built using primereact/chart, a wrapper around Chart.js. It is configured as a bubble chart.
- Data Aggregation: Solutions with identical x and y values are aggregated into a single bubble. The bubble's radius is proportional to the number of solutions it represents.
Sources: frontend/src/components/dashboard/Analysis.tsx:313-316, frontend/src/components/dashboard/Analysis.tsx:288-301 - Custom Styling:
- Reference solutions are rendered with a special symbol (
createReferenceSymbol). - Bookmarked solutions are rendered as stars (
createStar). - Selected solutions are highlighted with a thicker border.
Sources: frontend/src/components/dashboard/Analysis.tsx:392-409
- Reference solutions are rendered with a special symbol (
- Custom Plugins:
SplitPlugin: Allows users to click on the chart to draw horizontal and vertical lines, which define manual groups.SelectPlugin: Enables users to draw a rectangle (box-select) to select multiple data points at once.
Sources: frontend/src/components/dashboard/Analysis.tsx:69-70, frontend/src/components/dashboard/Analysis.tsx:672-682, frontend/src/components/dashboard/Analysis.tsx:684-716
Axes and Criteria
Users can choose what metrics to plot on the X and Y axes. The available criteria are defined in frontend/src/components/dashboard/axes.ts.
| Criterion Type | Examples | Description |
|---|---|---|
AstCriterionType | statement, sprite, variable | Metrics derived from the Abstract Syntax Tree (AST) of the student's code. |
MetaCriterionType | test | Metrics related to the execution of the code, such as test case results. |
Sources: frontend/src/components/dashboard/Analysis.tsx:812-819, frontend/src/components/dashboard/axes.ts
An end-to-end test confirms that the chart can be rendered with 'statement' on the X-axis and 'test' on the Y-axis.
Sources: e2e/tests/sessions/session-analysis.spec.ts:150-151
Grouping and Filtering
The dashboard provides powerful tools for segmenting the solution data.
Grouping
- Manual Grouping: When
isAutomaticGroupingisfalse, users can create groups by adding "splits" (lines) to the chart. The areas defined by these splits are treated as distinct groups, which can then be selected in theCodeComparisoncomponent.
Sources: frontend/src/components/dashboard/Analysis.tsx:348, frontend/src/components/dashboard/Analysis.tsx:556-609 - Automatic Grouping: If
isAutomaticGroupingistrue, the system performs clustering to automatically group similar solutions. This is handled by theuseGroupinghook.
Sources: frontend/src/components/dashboard/Analyzer.tsx:159-165, frontend/src/components/dashboard/Analyzer.tsx:244-251
Filtering
The AnalyzerFilterForm component allows users to apply filters based on various criteria. The runFilter function processes these filters against the solution analyses, and only solutions that match all active filters are displayed.
Sources: frontend/src/components/dashboard/Analyzer.tsx:116-133, frontend/src/components/dashboard/Analyzer.tsx:253-264
Code Comparison
The CodeComparison component, located below the chart, allows for detailed inspection of two solutions side-by-side.
- Solution Selection: Users can select solutions for the left and right panes. Selections can be made from:
- All solutions (
Group: All solutions). - A specific manual or automatic group.
- The set of currently selected solutions on the chart (
Group: Selected solutions).
- All solutions (
- Code Rendering: The
CodeViewcomponent is used to render an iframe containing the solution's code, loaded from the appropriate application host (e.g.,scratchAppHostName). - Modal View: A "View" button opens a
ViewSolutionModal, providing a larger, focused view of a single solution's code and its axis values.
Sources: frontend/src/components/dashboard/CodeComparison.tsx, frontend/src/components/dashboard/CodeView.tsx:50-55
Conclusion
The Analysis Dashboard is a feature-rich system for educational data visualization. By combining an interactive scatter plot with flexible grouping, filtering, and code comparison tools, it empowers educators to gain deep insights into student problem-solving strategies. Its component-based architecture and centralized state management allow for a responsive and maintainable user experience.