Dashboard: Dissimilarity Analysis

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/components/dashboard/DissimilarityAnalysis.tsx
• frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-solutions.tsx
• frontend/src/components/dashboard/DissimilarPairs.tsx
• frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-pairs.tsx
• frontend/src/components/dashboard/hooks/useDissimilarAnalyses/pairs.ts
• frontend/src/components/dashboard/CodeView.tsx
• frontend/src/components/dashboard/Analyzer.tsx
• frontend/src/components/dashboard/Analysis.tsx

The Dissimilarity Analysis feature provides instructors with a tool to identify and view student solutions that are structurally different from one another. This is useful for quickly understanding the variety of approaches students have taken to solve a given programming task. By highlighting diverse solutions, instructors can select representative examples for classroom discussion or grading.

The feature is accessible within a session's dashboard and offers two main views:

1. Dissimilar Solutions: Displays a specified number of individual solutions that are most dissimilar from each other.
2. Dissimilar Pairs: Displays a specified number of pairs of solutions, where each pair represents the two most dissimilar solutions found.

This functionality is part of the broader session analysis tools, which also include a scatter plot visualization of all solutions.

Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx, frontend/src/components/dashboard/DissimilarPairs.tsx, frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-solutions.tsx, frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-pairs.tsx

System Architecture

The Dissimilarity Analysis system is composed of page components that handle routing and data fetching, UI components that manage user interaction and display, and custom hooks that encapsulate the core logic.

Component and Data Flow

The diagram below illustrates the flow of data from API calls through React components and hooks to the final rendered view.

This diagram shows how page components like /dissimilar-solutions use DissimilarityAnalysis and DissimilarPairs components. These components, in turn, use API hooks to fetch data, custom hooks to process it, and UI components like AnalysisParameters and CodeView to interact with the user and display results.

Sources: frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-solutions.tsx:43, frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-pairs.tsx:43, frontend/src/components/dashboard/DissimilarityAnalysis.tsx:61-75, frontend/src/components/dashboard/DissimilarPairs.tsx:63-77

Core Components

The feature is primarily implemented through two sets of components: page components for routing and main components for logic and rendering.

Page Components

• DissimilarSolutions.tsx: The page located at /class/[classId]/session/[sessionId]/dissimilar-solutions. It fetches class and session data and renders the DissimilarityAnalysis component.
• DissimilarPairs.tsx: The page located at /class/[classId]/session/[sessionId]/dissimilar-pairs. It fetches class and session data and renders the DissimilarPairs component.

Both pages use useClass and useClassSession hooks to retrieve the necessary context before rendering the main analysis component.

Sources: frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-solutions.tsx, frontend/src/pages/class/[classId]/session/[sessionId]/dissimilar-pairs.tsx

Main UI Components

• DissimilarityAnalysis.tsx: This component is responsible for the "Dissimilar Solutions" view. It orchestrates data fetching, state management, and rendering of the most dissimilar individual solutions.
• DissimilarPairs.tsx: This component handles the "Dissimilar Pairs" view. It is structured similarly to DissimilarityAnalysis but uses a different hook (useDissimilarPairs) to find and display pairs of solutions.
• CodeView.tsx: A reusable component that displays the code for a single solution. It receives identifiers like classId, sessionId, taskId, and solutionHash to fetch and render the appropriate solution file within an EmbeddedApp (e.g., a Scratch iframe).
• AnalysisParameters.tsx: A container for the user-configurable options, such as task selection and the number of solutions to display.

Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx, frontend/src/components/dashboard/DissimilarPairs.tsx, frontend/src/components/dashboard/CodeView.tsx

User Interaction and Parameters

A set of controls allows the user to configure the analysis. These are managed within the DissimilarityAnalysis and DissimilarPairs components using React's useState hook.

Control	Description	State Variable	Component
Task Selection	A dropdown to select which task within the session to analyze.	selectedTask	DissimilarityAnalysis, DissimilarPairs
Sub-task Selection	A dropdown to filter solutions by a specific sub-task, or analyze all sub-tasks.	selectedSubTaskId	DissimilarityAnalysis, DissimilarPairs
Number of dissimilar solutions	A number input to specify how many unique, dissimilar solutions to find. Min value is 2.	numberOfSolutions	DissimilarityAnalysis
Number of dissimilar pairs	A number input to specify how many pairs of dissimilar solutions to find. Min value is 1.	numberOfSolutions	DissimilarPairs
Student Anonymization	A toggle to show or hide student real names.	(global state)	StudentAnonymizationToggle

Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx:43-51, 110-117, 142-149, frontend/src/components/dashboard/DissimilarPairs.tsx:45-53, 112-119, 144-151

The following sequence diagram shows a typical user interaction flow for finding dissimilar solutions.

Data Processing and Logic

The core logic for identifying dissimilar solutions is handled by a set of custom React hooks.

Custom Hooks

• useCurrentSessionTaskSolutions(classId, sessionId, taskId): Fetches all solution analyses for a given task in a session. This is the primary data source.
  Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx:68-73
• useSubtasks(analyses): Extracts a unique list of sub-task IDs from the fetched analyses, populating the "Sub-task Selection" dropdown.
  Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx:75, frontend/src/components/dashboard/Analyzer.tsx:111
• useSubtaskAnalyses(analyses, selectedSubTaskId): Filters the main list of analyses to include only those matching the selected sub-task ID. If no sub-task is selected, it returns all analyses.
  Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx:76, frontend/src/components/dashboard/Analyzer.tsx:112
• useDissimilarAnalyses(subTaskAnalyses, numberOfSolutions): The main hook for the "Dissimilar Solutions" view. It takes the filtered analyses and the desired number of solutions, and returns an array of the most dissimilar analyses. It also returns a tooManyCombinations boolean flag to prevent performance issues with large datasets.
  Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx:77-79
• useDissimilarPairs(subTaskAnalyses, numberOfSolutions): The main hook for the "Dissimilar Pairs" view. It takes the filtered analyses and the desired number of pairs, and returns an array of [analysisA, analysisB] tuples.
  Sources: frontend/src/components/dashboard/DissimilarPairs.tsx:75-78, frontend/src/components/dashboard/hooks/useDissimilarAnalyses/pairs.ts.

Rendering Logic

Once the dissimilar solutions are identified by the hooks, the components map over the results to render them.

• The DissimilarityAnalysis component maps the dissimilarAnalyses array to a series of CodeView components, each displayed in a column.
• The DissimilarPairs component maps the dissimilarPairs array to a series of Rows, with each row containing two CodeView components for the pair.

In both cases, student identity is rendered using the StudentName component, which respects the anonymization setting.

Sources: frontend/src/components/dashboard/DissimilarityAnalysis.tsx:156-176, frontend/src/components/dashboard/DissimilarPairs.tsx:158-188