Initial commit.

.gitattributes

+# Disable line-ending conversions for this repository.
+* -text

.gitignore

+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# environments
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# misc
+*~
+.DS_Store

.gitmodules

+[submodule "stylelint-config"]
+	path = stylelint-config
+	url = git@git.unl.edu:soft-core/soft-260/stylelint-config.git
+[submodule "eslint-config"]
+	path = eslint-config
+	url = git@git.unl.edu:soft-core/soft-260/eslint-config.git

eslint-config @ 24df42fb

+Subproject commit 24df42fb655d234b83c93b0fb24d012e4d9ecb58

graph-search-in-class.code-workspace

+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"files.eol": "LF",
+		"files.exclude": {
+			"**/node_modules": true
+		},
+		"files.trimFinalNewlines": true,
+		"files.trimTrailingWhitespace": true
+	}
+}

graph-search/.gitignore

+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# environments
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# misc
+*~
+.DS_Store

graph-search/notes.md

+Please recursively clone the starter code linked from Canvas, use `npm install` to install dependencies in both subprojects, and open the project in VSCode.  Please do not run the app yet—it contains spoilers.
+
+# Problem 1:
+
+For a certain puzzle played on a string of digits, each move may slide any digit `x` left `x` places or right `x` places, as long as there is room.  For example, the `4` in `123456789` can move right four spots:
+
+>  123456789
+>      >>>>
+
+which gives
+
+>  123567849
+
+but it cannot move left, because trying would move it past the end of the string:
+
+>  123456789
+> <<<<
+
+How many moves does it take to reverse the string `123`?
+
+# Problem 2:
+
+In the weighted directed graph on the right, what is the shortest path from `a` to `d`?
+
+---------------------------------------------------------------------
+
+# Worklist Algorithms for Graph Search
+
+*   Loop variable: *worklist* (to-do list)
+*   Result variable: *backpointers* (dictionary)
+
+## Depth-First Search (DFS)
+
+*   Worklist: …
+*   Guaranteed to find a path if one exists
+*   Not guaranteed to find a good path
+*   Can be made very memory efficient (topic for Thursday)
+
+    Worklist    Backpointers
+    --------    ------------
+    (⊥, a)
+
+    Reversed Path
+    ----
+    …
+
+## Breadth-First Search (BFS)
+
+*   Worklist: …
+*   Guaranteed to find a path with the fewest edges
+
+    Worklist    Backpointers
+    --------    ------------
+    (⊥, a)
+
+    Reversed Path
+    ----
+    …
+
+## Dijkstra's Algorithm
+
+*   Worklist: …
+*   Priority: …
+*   Guaranteed to find a path with least weight
+
+      Worklist       Backpointers
+    ------------    --------------
+    (⊥, a, 0)
+
+    Reversed Path
+    ----
+    …
+
+## Best-First Search
+
+*   Worklist: …
+*   Priority: …
+*   Guaranteed to find a path if one exists
+*   Not guaranteed to find a good path (but often does anyway)
+*   Can have good best- and average-case time efficiency
+
+      Worklist       Backpointers
+    ------------    --------------
+    (⊥, a, 0)
+
+    Reversed Path
+    ----
+    …
+
+## A*
+
+*   Worklist: …
+*   Priority: …
+*   Guaranteed to find a path with least weight
+*   Can have good best- and average-case time efficiency
+
+      Worklist       Backpointers
+    ------------    --------------
+    (⊥, a, 0)
+
+    Reversed Path
+    ----
+    …
+
+## Recursive Depth-First Search (DFS)
+
+*   Worklist: …
+
+             Activation Frames            Backpointers
+    -----------------------------------   ------------
+    edge = (⊥, a), incidence = …

graph-search/package.json

+{
+  "name": "@unlsoft/graph-search",
+  "version": "1.0.0",
+  "description": "Starter code for the class on graph search.",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "lint:css": "stylelint \"**/*.css\" \"**/*.module.css\" \"!coverage/**\"",
+    "lint:js": "eslint --max-warnings 0 ./src",
+    "lint": "run-s --continue-on-error lint:**",
+    "test-once": "react-scripts test --watchAll=false --coverage",
+    "test": "react-scripts test --watchAll --coverage",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "homepage": ".",
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.6.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "classnames": "^2.3.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "workbox-background-sync": "^5.1.3",
+    "workbox-broadcast-update": "^5.1.3",
+    "workbox-cacheable-response": "^5.1.3",
+    "workbox-core": "^5.1.3",
+    "workbox-expiration": "^5.1.3",
+    "workbox-google-analytics": "^5.1.3",
+    "workbox-navigation-preload": "^5.1.3",
+    "workbox-precaching": "^5.1.3",
+    "workbox-range-requests": "^5.1.3",
+    "workbox-routing": "^5.1.3",
+    "workbox-strategies": "^5.1.3",
+    "workbox-streams": "^5.1.3"
+  },
+  "devDependencies": {
+    "@unlsoft/eslint-config": "file:../eslint-config",
+    "@unlsoft/stylelint-config": "file:../stylelint-config",
+    "eslint-plugin-jest-dom": "^3.9.0",
+    "stylelint": "^13.13.1"
+  },
+  "stylelint": {
+    "extends": "@unlsoft/stylelint-config"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "@unlsoft/eslint-config/react"
+    ]
+  },
+  "jest": {
+    "clearMocks": true,
+    "collectCoverageFrom": [
+      "src/features/**/*.js"
+    ],
+    "resetMocks": false,
+    "restoreMocks": false
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

graph-search/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta
+      name="description"
+      content="Starter code for the class on graph search."
+    />
+    <meta name="theme-color" content="rgba(208 0 0 / 100%)" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
+    <title>Graph Search in Class</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

graph-search/public/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152">
+  <rect x="0" y="0" width="152" height="152" fill="rgba(0 0 0 / 100%)" />
+  <path d="M147,1H90V42h10V75.673L53.532,2.393,52.648,1H2V42H12v66H2v41H62V108H52V74.336l46.467,73.271L99.351,149H150V108H140V42h10V1Z" stroke-width="3" stroke="rgba(255 255 255 / 100%)" fill="rgba(208 0 0 / 100%)">
+  </path>
+</svg>

graph-search/public/manifest.json

+{
+  "short_name": "Graph Search",
+  "name": "Graph Search in Class",
+  "description": "Starter code for the class on graph search.",
+  "icons": [
+    {
+      "src": "logo.svg",
+      "type": "image/svg+xml",
+      "sizes": "192x192 512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "rgba(208 0 0 / 100%)",
+  "background_color": "rgba(255 255 255 / 100%)"
+}

graph-search/src/app.js

+import { Route } from 'react-router-dom';
+
+import { Solution } from './features/search/solution.js';
+
+export function App() {
+  return (
+    <>
+      <Route exact path={'/'}>
+        <h1>Basic Graph Search</h1>
+        <Solution />
+      </Route>
+    </>
+  );
+}

graph-search/src/features/search/collections.js

+export class Queue {
+  constructor() {
+    this.head = undefined;
+    this.tail = undefined;
+    this._size = 0;
+  }
+
+  get size() {
+    return this._size;
+  }
+
+  insert(element) {
+    const oldTail = this.tail;
+    this.tail = {
+      element,
+      next: undefined,
+    };
+    if (oldTail === undefined) {
+      this.head = this.tail;
+    } else {
+      oldTail.next = this.tail;
+    }
+    ++this._size;
+  }
+
+  remove() {
+    console.assert(this.head !== undefined, 'Cannot remove an element from an empty queue');
+    const element = this.head.element;
+    this.head = this.head.next;
+    if (this.head === undefined) {
+      this.tail = undefined;
+    }
+    --this._size;
+    return element;
+  }
+}
+
+export class PriorityQueue {
+  constructor() {
+    this._vertices = [];
+  }
+
+  get size() {
+    return this._vertices.length;
+  }
+
+  insert(element, measure) {
+    let index = this._vertices.length;
+    while (index > 0) {
+      const parentIndex = Math.floor((index - 1) / 2);
+      const parent = this._vertices[parentIndex];
+      if (parent.measure < measure) {
+        break;
+      }
+      this._vertices[index] = parent;
+      index = parentIndex;
+    }
+    this._vertices[index] = {
+      element,
+      measure,
+    };
+  }
+
+  remove() {
+    console.assert(this._vertices.length > 0, 'Cannot remove an element from an empty priority queue');
+    const result = this._vertices[0].element;
+    const vertex = this._vertices[this._vertices.length - 1];
+    for (let index = 0; ;) {
+      this._vertices[index] = vertex;
+      let swapIndex = index;
+      for (const candidateIndex of [2 * index + 1, 2 * index + 2]) {
+        if (candidateIndex < this._vertices.length - 1 &&
+            this._vertices[candidateIndex].measure < this._vertices[swapIndex].measure) {
+          swapIndex = candidateIndex;
+        }
+      }
+      if (swapIndex === index) {
+        this._vertices[index] = vertex;
+        this._vertices.pop();
+        return result;
+      }
+      this._vertices[index] = this._vertices[swapIndex];
+      index = swapIndex;
+    }
+  }
+}

graph-search/src/features/search/graphs.js

+class WeightedEdge {
+  constructor(weight, destination) {
+    this.weight = weight;
+    this.destination = destination;
+  }
+}
+
+export class DirectedGraph {
+  constructor() {
+    this.incidences = new Map();
+  }
+
+  addIncidence(source, weight, destination) {
+    if (!this.incidences.has(source)) {
+      this.incidences.set(source, []);
+    }
+    this.incidences.get(source).push(new WeightedEdge(weight, destination));
+  }
+
+  getIncidences(source) {
+    return this.incidences.get(source);
+  }
+}
+
+export class PuzzleGraph {
+  getIncidences(source) {
+    const result = [];
+    for (let i = source.length; i--;) {
+      const digit = source.charAt(i);
+      const jump = Number(digit);
+      if (jump <= i) {
+        const rearranged =
+          source.substring(0, i - jump) +
+          digit +
+          source.substring(i - jump, i) +
+          source.substr(i + 1);
+        result.push(new WeightedEdge(1, rearranged));
+      }
+      if (jump <= source.length - i - 1) {
+        const rearranged =
+          source.substring(0, i) +
+          source.substring(i + 1, i + jump + 1) +
+          digit +
+          source.substring(i + jump + 1);
+        result.push(new WeightedEdge(1, rearranged));
+      }
+    }
+    return result;
+  }
+}

graph-search/src/features/search/images/secondExample.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116.0005pt" height="129.9233pt" viewBox="0 0 116.0005 129.9233" version="1.1">
+<defs>
+<g>
+<symbol overflow="visible" id="glyph0-0">
+<path style="stroke:none;" d=""/>
+</symbol>
+<symbol overflow="visible" id="glyph0-1">
+<path style="stroke:none;" d="M 2.9375 -6.375 C 2.9375 -6.625 2.9375 -6.640625 2.703125 -6.640625 C 2.078125 -6 1.203125 -6 0.890625 -6 L 0.890625 -5.6875 C 1.09375 -5.6875 1.671875 -5.6875 2.1875 -5.953125 L 2.1875 -0.78125 C 2.1875 -0.421875 2.15625 -0.3125 1.265625 -0.3125 L 0.953125 -0.3125 L 0.953125 0 C 1.296875 -0.03125 2.15625 -0.03125 2.5625 -0.03125 C 2.953125 -0.03125 3.828125 -0.03125 4.171875 0 L 4.171875 -0.3125 L 3.859375 -0.3125 C 2.953125 -0.3125 2.9375 -0.421875 2.9375 -0.78125 Z M 2.9375 -6.375 "/>
+</symbol>
+<symbol overflow="visible" id="glyph0-2">
+<path style="stroke:none;" d="M 1.265625 -0.765625 L 2.328125 -1.796875 C 3.875 -3.171875 4.46875 -3.703125 4.46875 -4.703125 C 4.46875 -5.84375 3.578125 -6.640625 2.359375 -6.640625 C 1.234375 -6.640625 0.5 -5.71875 0.5 -4.828125 C 0.5 -4.28125 1 -4.28125 1.03125 -4.28125 C 1.203125 -4.28125 1.546875 -4.390625 1.546875 -4.8125 C 1.546875 -5.0625 1.359375 -5.328125 1.015625 -5.328125 C 0.9375 -5.328125 0.921875 -5.328125 0.890625 -5.3125 C 1.109375 -5.96875 1.65625 -6.328125 2.234375 -6.328125 C 3.140625 -6.328125 3.5625 -5.515625 3.5625 -4.703125 C 3.5625 -3.90625 3.078125 -3.125 2.515625 -2.5 L 0.609375 -0.375 C 0.5 -0.265625 0.5 -0.234375 0.5 0 L 4.203125 0 L 4.46875 -1.734375 L 4.234375 -1.734375 C 4.171875 -1.4375 4.109375 -1 4 -0.84375 C 3.9375 -0.765625 3.28125 -0.765625 3.0625 -0.765625 Z M 1.265625 -0.765625 "/>
+</symbol>
+<symbol overflow="visible" id="glyph0-3">
+<path style="stroke:none;" d="M 2.890625 -3.515625 C 3.703125 -3.78125 4.28125 -4.46875 4.28125 -5.265625 C 4.28125 -6.078125 3.40625 -6.640625 2.453125 -6.640625 C 1.453125 -6.640625 0.6875 -6.046875 0.6875 -5.28125 C 0.6875 -4.953125 0.90625 -4.765625 1.203125 -4.765625 C 1.5 -4.765625 1.703125 -4.984375 1.703125 -5.28125 C 1.703125 -5.765625 1.234375 -5.765625 1.09375 -5.765625 C 1.390625 -6.265625 2.046875 -6.390625 2.40625 -6.390625 C 2.828125 -6.390625 3.375 -6.171875 3.375 -5.28125 C 3.375 -5.15625 3.34375 -4.578125 3.09375 -4.140625 C 2.796875 -3.65625 2.453125 -3.625 2.203125 -3.625 C 2.125 -3.609375 1.890625 -3.59375 1.8125 -3.59375 C 1.734375 -3.578125 1.671875 -3.5625 1.671875 -3.46875 C 1.671875 -3.359375 1.734375 -3.359375 1.90625 -3.359375 L 2.34375 -3.359375 C 3.15625 -3.359375 3.53125 -2.6875 3.53125 -1.703125 C 3.53125 -0.34375 2.84375 -0.0625 2.40625 -0.0625 C 1.96875 -0.0625 1.21875 -0.234375 0.875 -0.8125 C 1.21875 -0.765625 1.53125 -0.984375 1.53125 -1.359375 C 1.53125 -1.71875 1.265625 -1.921875 0.984375 -1.921875 C 0.734375 -1.921875 0.421875 -1.78125 0.421875 -1.34375 C 0.421875 -0.4375 1.34375 0.21875 2.4375 0.21875 C 3.65625 0.21875 4.5625 -0.6875 4.5625 -1.703125 C 4.5625 -2.515625 3.921875 -3.296875 2.890625 -3.515625 Z M 2.890625 -3.515625 "/>
+</symbol>
+</g>
+<clipPath id="clip1">
+  <path d="M 0 0 L 116 0 L 116 129.921875 L 0 129.921875 Z M 0 0 "/>
+</clipPath>
+</defs>
+<g id="surface1">
+<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
+  <use xlink:href="#glyph0-1" x="5.528" y="16.21016"/>
+  <use xlink:href="#glyph0-2" x="10.5093" y="16.21016"/>
+  <use xlink:href="#glyph0-3" x="15.4906" y="16.21016"/>
+</g>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 10 -0.00004 C 10 2.652304 8.945312 5.195273 7.070312 7.070273 C 5.195312 8.945273 2.652344 9.99996 0 9.99996 C -2.652344 9.99996 -5.195312 8.945273 -7.070312 7.070273 C -8.945312 5.195273 -10 2.652304 -10 -0.00004 C -10 -2.652384 -8.945312 -5.195352 -7.070312 -7.070352 C -5.195312 -8.945352 -2.652344 -10.00004 0 -10.00004 C 2.652344 -10.00004 5.195312 -8.945352 7.070312 -7.070352 C 8.945312 -5.195352 10 -2.652384 10 -0.00004 Z M 10 -0.00004 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
+  <use xlink:href="#glyph0-2" x="50.5282" y="42.19096"/>
+  <use xlink:href="#glyph0-1" x="55.5095" y="42.19096"/>
+  <use xlink:href="#glyph0-3" x="60.4908" y="42.19096"/>
+</g>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 55 -25.980509 C 55 -23.328165 53.945312 -20.785196 52.070312 -18.910196 C 50.195312 -17.035196 47.652344 -15.980509 45 -15.980509 C 42.347656 -15.980509 39.804688 -17.035196 37.929688 -18.910196 C 36.054688 -20.785196 35 -23.328165 35 -25.980509 C 35 -28.632852 36.054688 -31.175821 37.929688 -33.050821 C 39.804688 -34.925821 42.347656 -35.980509 45 -35.980509 C 47.652344 -35.980509 50.195312 -34.925821 52.070312 -33.050821 C 53.945312 -31.175821 55 -28.632852 55 -25.980509 Z M 55 -25.980509 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
+  <use xlink:href="#glyph0-2" x="95.5285" y="68.17186"/>
+  <use xlink:href="#glyph0-3" x="100.5098" y="68.17186"/>
+  <use xlink:href="#glyph0-1" x="105.4911" y="68.17186"/>
+</g>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 100 -51.960977 C 100 -49.308634 98.945312 -46.765665 97.070312 -44.890665 C 95.195312 -43.015665 92.652344 -41.960977 90 -41.960977 C 87.347656 -41.960977 84.804688 -43.015665 82.929688 -44.890665 C 81.054688 -46.765665 80 -49.308634 80 -51.960977 C 80 -54.613321 81.054688 -57.15629 82.929688 -59.03129 C 84.804688 -60.90629 87.347656 -61.960977 90 -61.960977 C 92.652344 -61.960977 95.195312 -60.90629 97.070312 -59.03129 C 98.945312 -57.15629 100 -54.613321 100 -51.960977 Z M 100 -51.960977 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
+  <use xlink:href="#glyph0-1" x="5.528" y="68.17186"/>
+  <use xlink:href="#glyph0-3" x="10.5093" y="68.17186"/>
+  <use xlink:href="#glyph0-2" x="15.4906" y="68.17186"/>
+</g>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 10 -51.960977 C 10 -49.308634 8.945312 -46.765665 7.070312 -44.890665 C 5.195312 -43.015665 2.652344 -41.960977 0 -41.960977 C -2.652344 -41.960977 -5.195312 -43.015665 -7.070312 -44.890665 C -8.945312 -46.765665 -10 -49.308634 -10 -51.960977 C -10 -54.613321 -8.945312 -57.15629 -7.070312 -59.03129 C -5.195312 -60.90629 -2.652344 -61.960977 0 -61.960977 C 2.652344 -61.960977 5.195312 -60.90629 7.070312 -59.03129 C 8.945312 -57.15629 10 -54.613321 10 -51.960977 Z M 10 -51.960977 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
+  <use xlink:href="#glyph0-3" x="50.5282" y="94.15266"/>
+  <use xlink:href="#glyph0-1" x="55.5095" y="94.15266"/>
+  <use xlink:href="#glyph0-2" x="60.4908" y="94.15266"/>
+</g>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 55 -77.941446 C 55 -75.289102 53.945312 -72.746134 52.070312 -70.871134 C 50.195312 -68.996134 47.652344 -67.941446 45 -67.941446 C 42.347656 -67.941446 39.804688 -68.996134 37.929688 -70.871134 C 36.054688 -72.746134 35 -75.289102 35 -77.941446 C 35 -80.59379 36.054688 -83.136759 37.929688 -85.011759 C 39.804688 -86.890665 42.347656 -87.941446 45 -87.941446 C 47.652344 -87.941446 50.195312 -86.890665 52.070312 -85.011759 C 53.945312 -83.136759 55 -80.59379 55 -77.941446 Z M 55 -77.941446 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
+  <use xlink:href="#glyph0-3" x="95.5285" y="120.13356"/>
+  <use xlink:href="#glyph0-2" x="100.5098" y="120.13356"/>
+  <use xlink:href="#glyph0-1" x="105.4911" y="120.13356"/>
+</g>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 100 -103.921915 C 100 -101.269571 98.945312 -98.726602 97.070312 -96.851602 C 95.195312 -94.976602 92.652344 -93.921915 90 -93.921915 C 87.347656 -93.921915 84.804688 -94.976602 82.929688 -96.851602 C 81.054688 -98.726602 80 -101.269571 80 -103.921915 C 80 -106.574259 81.054688 -109.117227 82.929688 -110.996134 C 84.804688 -112.871134 87.347656 -113.921915 90 -113.921915 C 92.652344 -113.921915 95.195312 -112.871134 97.070312 -110.996134 C 98.945312 -109.117227 100 -106.574259 100 -103.921915 Z M 100 -103.921915 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 8.660156 -5.00004 L 36.339844 -20.980509 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 53.660156 -30.980509 L 81.339844 -46.960977 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 36.339844 -30.980509 L 8.660156 -46.960977 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 81.339844 -56.960977 L 53.660156 -72.941446 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 8.660156 -56.960977 L 36.339844 -72.941446 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 53.660156 -82.941446 L 81.339844 -98.921915 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+<g clip-path="url(#clip1)" clip-rule="nonzero">
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M -12.5 -116.421915 L 102.5 -116.421915 L 102.5 12.49996 L -12.5 12.49996 Z M -12.5 -116.421915 " transform="matrix(1,0,0,-1,13,12.99996)"/>
+</g>
+</g>
+</svg>

graph-search/src/features/search/search.js

+import { Queue, PriorityQueue } from './collections.js';
+
+class Edge {
+  constructor(from, to, distance = undefined) {
+    this.from = from;
+    this.to = to;
+    this.distance = distance;
+  }
+}
+
+export function dfs(graph, source, destination) {
+  return undefined; // TODO: stub
+}
+
+export function bfs(graph, source, destination) {
+  return undefined; // TODO: stub
+}
+
+export function dijkstras(graph, source, destination) {
+  return undefined; // TODO: stub
+}
+
+function heuristic(vertex, destination) {
+  return 0; // TODO: stub
+}
+
+export function bestFirst(graph, source, destination) {
+  return undefined; // TODO: stub
+}
+
+export function recursiveDFS(graph, source, destination) {
+  return undefined; // TODO: stub
+}

graph-search/src/features/search/solution.js

+/* eslint-disable no-magic-numbers */
+
+import { DirectedGraph, PuzzleGraph } from './graphs.js';
+// eslint-disable-next-line no-unused-vars
+import { dfs, bfs, dijkstras, bestFirst, recursiveDFS } from './search.js';
+
+import firstExampleImage from './images/firstExample.svg';
+import secondExampleImage from './images/secondExample.svg';
+
+const firstExample = new DirectedGraph();
+firstExample.addIncidence('b', 9, 'e');
+firstExample.addIncidence('f', 8, 'c');
+firstExample.addIncidence('a', 7, 'c');
+firstExample.addIncidence('d', 6, 'b');
+firstExample.addIncidence('c', 5, 'e');
+firstExample.addIncidence('b', 4, 'a');
+firstExample.addIncidence('e', 3, 'd');
+firstExample.addIncidence('e', 2, 'f');
+firstExample.addIncidence('c', 1, 'b');
+firstExample.addIncidence('f', 0, 'd');
+
+const secondExample = new PuzzleGraph();
+
+function formatSolution(solution) {
+  if (solution === undefined) {
+    return '[no solution]';
+  }
+  return solution.join(' → ');
+}
+
+export function Solution(props) {
+  const search = dfs;
+  const firstSolution = search(firstExample, 'a', 'd');
+  const secondSolution = search(secondExample, '123', '321');
+  return (
+    <>
+      <div>
+        <figure>
+          <img src={firstExampleImage} alt="A weighted directed graph." />
+        </figure>
+        <label>
+          First example: <output>{formatSolution(firstSolution)}</output>
+        </label>
+      </div>
+      <div>
+        <figure>
+          <img src={secondExampleImage} alt="An undirected puzzle graph." />
+        </figure>
+        <label>
+          Second example: <output>{formatSolution(secondSolution)}</output>
+        </label>
+      </div>
+    </>
+  );
+}

graph-search/src/index.css

+:root {
+  /* Colors */
+  --letterbox-color: rgba(0 0 0 / 100%);
+  --app-background-color: rgba(239 239 239 / 100%);
+  --font-color: rgba(0 0 0 / 100%);
+
+  /* Sizes */
+  --minimum-app-size: 300px;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  text-align: center;
+  color: var(--font-color);
+}
+
+#root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--letterbox-color);
+}
+
+#portrait {
+  position: relative;
+  box-sizing: border-box;
+  margin: auto;
+  padding: 1em;
+  min-width: var(--minimum-app-size);
+  min-height: var(--minimum-app-size);
+  width: 100%;
+  height: 100%;
+  max-width: 62.5vh;
+  background: var(--app-background-color);
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transform: scale(1);
+}