feat: parallelization for sorting networks

Author: Oskar Widmark

TODO.md

@@ -1,7 +1,7 @@
 Features:
 
 - [x] Sub 1ms draw times
-- [ ] Parallelization for algorithms
+- [x] Parallelization for algorithms
 - [ ] Merge sort
 - [x] 2D color matrix visualization
 - [ ] Spiral visualization
@@ -14,3 +14,6 @@ Fixes:
 - [x] Improve Bully Sort
 - [x] Cleaner draw logic with no gaps
 - [ ] Handle resizing to smaller height correctly
+- [ ] Make parallel highlight work for recursive sorting networks
+- [ ] Separate highlight types for parallel highlighting to work properly
+- [ ] Optimize current 2D color matrix visualization

src/App.tsx

@@ -189,7 +189,12 @@ class App extends React.Component<Props> {
     this.props.stopSounds();
   };
 
-  drawAndSwap = async (arr: SortValue[], i1: number, i2: number) => {
+  drawAndSwap = async (
+    arr: SortValue[],
+    i1: number,
+    i2: number,
+    drawIteration?: number,
+  ) => {
     if (!this.state.isSorting) throw Error('isSorting is false!');
 
     this.swap(arr, i1, i2);
@@ -205,7 +210,7 @@ class App extends React.Component<Props> {
       this.setState((prevState: AppState) => ({
         nbrOfSwaps: prevState.nbrOfSwaps + 1,
       }));
-      this.canvasController.highlight(arr, [i1, i2]);
+      this.canvasController.highlight(arr, [i1, i2], drawIteration);
       await sleep(this.state.settings.swapTime, this.swapCounter++);
     }
   };
@@ -215,12 +220,14 @@ class App extends React.Component<Props> {
     i1: number,
     operator: Operator,
     i2: number,
+    drawIteration?: number,
   ): Promise<boolean> => {
     return this._compare({
       arr,
       i1,
       operator,
       i2,
+      drawIteration,
     });
   };
 
@@ -229,22 +236,26 @@ class App extends React.Component<Props> {
     i: number,
     operator: Operator,
     value: number,
+    drawIteration?: number,
   ): Promise<boolean> => {
     return this._compare({
       arr,
       i1: i,
       operator,
       value,
+      drawIteration,
     });
   };
 
   async _compare(
-    params: { arr: SortValue[]; i1: number; operator: Operator } & (
-      | { value: number }
-      | { i2: number }
-    ),
+    params: {
+      arr: SortValue[];
+      i1: number;
+      operator: Operator;
+      drawIteration?: number;
+    } & ({ value: number } | { i2: number }),
   ) {
-    const { arr, i1, operator } = params;
+    const { arr, i1, operator, drawIteration } = params;
     if (!this.state.isSorting) throw Error('isSorting is false!');
     this.nbrOfComparisons++;
     if (this.state.settings.compareTime) {
@@ -257,7 +268,7 @@ class App extends React.Component<Props> {
         nbrOfComparisons: prevState.nbrOfComparisons + 1,
       }));
       const indexes = 'value' in params ? [i1] : [i1, params.i2];
-      this.canvasController.highlight(arr, indexes);
+      this.canvasController.highlight(arr, indexes, drawIteration);
       await sleep(this.state.settings.compareTime, this.comparisonCounter++);
     }
 
@@ -285,7 +296,11 @@ class App extends React.Component<Props> {
     [arr[i1], arr[i2]] = [arr[i2], arr[i1]];
   }
 
-  registerAuxWrite = async (arr: SortValue[], i: number) => {
+  registerAuxWrite = async (
+    arr: SortValue[],
+    i: number,
+    drawIteration?: number,
+  ) => {
     if (!this.state.isSorting) throw Error('isSorting is false!');
 
     this.nbrOfAuxWrites++;
@@ -298,7 +313,7 @@ class App extends React.Component<Props> {
       this.setState((prevState: AppState) => ({
         nbrOfAuxWrites: prevState.nbrOfAuxWrites + 1,
       }));
-      this.canvasController.highlight(arr, [i]);
+      this.canvasController.highlight(arr, [i], drawIteration);
       await sleep(this.state.settings.auxWriteTime, this.auxWriteCounter++);
     }
   };

src/Options.tsx

@@ -7,14 +7,17 @@ import {
 } from '@mui/material';
 import { AlgorithmOptions, SortName } from './types';
 import { useCallback, useState } from 'react';
+import { LabeledCheckbox } from './components/LabeledCheckbox';
 
 const getAlgorithmOptionFields = (
   sortName: SortName,
 ): (keyof AlgorithmOptions)[] => {
   switch (sortName) {
     case SortName.BitonicSort:
     case SortName.OddEvenMergesort:
-      return ['type'];
+      return ['type', 'parallel'];
+    case SortName.OddEvenSort:
+      return ['parallel'];
     case SortName.RadixSortLSD:
     case SortName.RadixSortMSD:
       return ['base'];
@@ -46,6 +49,7 @@ const ALGORITHM_OPTION_LABELS: Record<keyof AlgorithmOptions, string> = {
   base: 'Base',
   shrinkFactor: 'Shrink Factor',
   heapType: 'Heap Type',
+  parallel: 'Run in parallel',
 };
 
 const ALGORITHM_OPTION_TEXT_FIELD_TYPES: Record<
@@ -56,20 +60,22 @@ const ALGORITHM_OPTION_TEXT_FIELD_TYPES: Record<
   base: 'number',
   shrinkFactor: 'number',
   heapType: 'select',
+  parallel: 'checkbox',
 };
 
 const ALGORITHM_OPTION_VALUES: Record<
   keyof AlgorithmOptions,
-  AlgorithmOptions[keyof AlgorithmOptions][]
+  AlgorithmOptions['type' | 'heapType'][]
 > = {
   type: ['iterative', 'recursive'],
   base: [],
   shrinkFactor: [],
   heapType: ['max', 'min'],
+  parallel: [],
 };
 
 const ALGORITHM_OPTION_VALUE_LABELS: Record<
-  AlgorithmOptions[keyof AlgorithmOptions],
+  AlgorithmOptions['type' | 'heapType'],
   string
 > = {
   iterative: 'Iterative',
@@ -124,41 +130,64 @@ export function Options({
       >
         Options
       </Typography>
-      <Grid2 container spacing={2}>
+      <Grid2 container>
         {algorithmOptionFields.map((field) => (
-          <FormControl component="fieldset">
-            <TextField
-              key={field}
-              select={ALGORITHM_OPTION_TEXT_FIELD_TYPES[field] === 'select'}
-              label={ALGORITHM_OPTION_LABELS[field]}
-              value={nonValidatedOptions[field]}
-              onChange={(event) =>
-                handleOptionChange(field, event.target.value)
-              }
-              error={!isValidOption(field, nonValidatedOptions[field])}
-              size="small"
-              sx={{ width: 120 }}
-              type={
-                ALGORITHM_OPTION_TEXT_FIELD_TYPES[field] === 'select'
-                  ? undefined
-                  : ALGORITHM_OPTION_TEXT_FIELD_TYPES[field]
-              }
-            >
-              {Object.values(ALGORITHM_OPTION_VALUES[field]).map((v) => (
-                <MenuItem key={v} value={v}>
-                  <Typography
-                    align="left"
-                    variant="body2"
-                    color="textSecondary"
-                  >
-                    {ALGORITHM_OPTION_VALUE_LABELS[v] ?? v}
-                  </Typography>
-                </MenuItem>
-              ))}
-            </TextField>
-          </FormControl>
+          <OptionField
+            key={field}
+            field={field}
+            nonValidatedOptions={nonValidatedOptions}
+            handleOptionChange={handleOptionChange}
+          />
         ))}
       </Grid2>
     </div>
   );
 }
+
+const OptionField = (props: {
+  field: keyof AlgorithmOptions;
+  nonValidatedOptions: AlgorithmOptions;
+  handleOptionChange: (field: keyof AlgorithmOptions, value: unknown) => void;
+}) => {
+  const { field, nonValidatedOptions, handleOptionChange } = props;
+  switch (ALGORITHM_OPTION_TEXT_FIELD_TYPES[field]) {
+    case 'checkbox':
+      return (
+        <FormControl key={field} component="fieldset">
+          <LabeledCheckbox
+            label={ALGORITHM_OPTION_LABELS[field]}
+            checked={Boolean(nonValidatedOptions[field])}
+            onChecked={(checked) => handleOptionChange(field, checked)}
+          />
+        </FormControl>
+      );
+    default:
+      return (
+        <FormControl component="fieldset">
+          <TextField
+            key={field}
+            select={ALGORITHM_OPTION_TEXT_FIELD_TYPES[field] === 'select'}
+            label={ALGORITHM_OPTION_LABELS[field]}
+            value={nonValidatedOptions[field]}
+            onChange={(event) => handleOptionChange(field, event.target.value)}
+            error={!isValidOption(field, nonValidatedOptions[field])}
+            size="small"
+            sx={{ width: 120 }}
+            type={
+              ALGORITHM_OPTION_TEXT_FIELD_TYPES[field] === 'select'
+                ? undefined
+                : ALGORITHM_OPTION_TEXT_FIELD_TYPES[field]
+            }
+          >
+            {Object.values(ALGORITHM_OPTION_VALUES[field]).map((v) => (
+              <MenuItem key={v} value={v}>
+                <Typography align="left" variant="body2" color="textSecondary">
+                  {ALGORITHM_OPTION_VALUE_LABELS[v] ?? v}
+                </Typography>
+              </MenuItem>
+            ))}
+          </TextField>
+        </FormControl>
+      );
+  }
+};

src/canvas-controller.ts

@@ -9,7 +9,8 @@ import {
 import { hsvToRgbHex, rgbHexToHsv } from './utils';
 
 export class CanvasController {
-  private prevHighlightIndices: number[] | null = null;
+  private highlightIndices: number[] = [];
+  private currentDrawIteration: number | null = null;
   prevDrawIndex: number | null = null;
   prevDrawHeight: number | null = null;
   isDrawing: boolean = false;
@@ -172,18 +173,22 @@ export class CanvasController {
     this.drawAll(arr);
   };
 
-  highlight = (arr: SortValue[], indices: number[]) => {
-    if (this.prevHighlightIndices) {
-      for (const idx of this.prevHighlightIndices) {
-        if (this.context.visualizationType === VisualizationType.Matrix) {
-          this.redrawCellRow(arr, idx);
-          this.redrawCellColumn(arr, idx);
-          continue;
+  highlight = (arr: SortValue[], indices: number[], drawIteration?: number) => {
+    if (drawIteration == null || drawIteration !== this.currentDrawIteration) {
+      if (this.highlightIndices.length) {
+        for (const idx of this.highlightIndices) {
+          if (this.context.visualizationType === VisualizationType.Matrix) {
+            this.redrawCellRow(arr, idx);
+            this.redrawCellColumn(arr, idx);
+            continue;
+          }
+          this.redrawColumn(arr, idx);
         }
-        this.redrawColumn(arr, idx);
       }
+      this.currentDrawIteration = drawIteration ?? null;
+      this.highlightIndices = [];
     }
-    this.prevHighlightIndices = indices;
+    this.highlightIndices.push(...indices);
 
     for (const idx of indices) {
       if (this.context.visualizationType === VisualizationType.Matrix) {
@@ -266,14 +271,14 @@ export class CanvasController {
   };
 
   stopSorting = (arr: SortValue[]) => {
-    if (this.prevHighlightIndices) {
+    if (this.highlightIndices) {
       this.removeHighlight(arr);
     }
-    this.prevHighlightIndices = null;
+    this.highlightIndices = [];
   };
 
   private removeHighlight = (arr: SortValue[]) => {
-    this.highlight(arr, []);
+    this.highlight(arr, [], -1);
   };
 
   private redrawColumn = (arr: SortValue[], i: number, color?: string) => {

src/constants.ts

@@ -35,6 +35,7 @@ export const INIT_SETTINGS: Settings = {
     base: 4,
     shrinkFactor: 1.3,
     heapType: 'max',
+    parallel: false,
   },
   colorPreset: ColorPreset.Rainbow,
   columnColor1: '#ffffff',