Merge pull request #45 from Leo-Nicolle/heatmap

Heatmap

.github/workflows/ci.yml

@@ -13,34 +13,19 @@ jobs:
           node-version: ${{ matrix.node-version }}
         run: npm i
 
-      - name: Create changelog
-        id: changelog
-        uses: dragonraid/[email protected]
-          run: node ./scripts/changelog.js
-
       - name: Build
         id: build
         run: npm run build
-
-      - name: Bump tag
-        if: steps.changelog.outputs.isEmpty == 'false'
-        id: tag
-        uses: mathieudutour/[email protected]
-        with:
-          github_token: ${{ github.token }}
-          release_branches: develop
-          default_bump: ${{ github.event.pull_request.title }}
-
-      - name: Create Release With Asset
-        id: release
-        uses: Hs1r1us/[email protected]
         env:
-          GITHUB_TOKEN: ${{ github.token }}
+          supabase: ${{ secrets.supabase }}
+      - name: Docs
+        env:
+          supabase: ${{ github.secrets.supabase }}
+        id: build
+        run: npm run build
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@releases/v3
         with:
-          tag_name: ${{ steps.tag.outputs.new_tag }}
-          release_name: ${{ steps.tag.outputs.new_tag }}
-          body: ${{ steps.changelog.outputs.changelog }}
-          asset_files: './dist'
-          draft: false
-          prerelease: false
-          commitish: ${{ steps.last_git_commit_data.outputs.hash }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN_KEY }}
+          BRANCH: gh-pages
+          FOLDER: docs/.vuepress/dist

.vscode/launch.json

@@ -12,7 +12,7 @@
       "args": ["--config", "vitest.config.ts", "run", "${relativeFile}", "-u"],
       "smartStep": true,
       "console": "integratedTerminal"
-    }
+    },
     {
       "type": "node",
       "request": "launch",

client/package.json

@@ -17,6 +17,7 @@
     "@vueuse/core": "^9.13.0",
     "axios": "^0.26.1",
     "cancelable-promise": "^4.3.1",
+    "chroma-js": "^2.4.2",
     "core-js": "^3.8.3",
     "crypto": "^1.0.1",
     "grid": "file:../grid",

client/src/App.vue

@@ -35,11 +35,11 @@ function ping(retry = 0): Promise<any> {
     });
 }
 onMounted(async () => {
-  const i = setInterval(() => {
-    ping().catch(() => {
-      alert.value = {type: 'error', id: "disconnected"};
-    });
-  }, 500);
+  // const i = setInterval(() => {
+  //   ping().catch(() => {
+  //     alert.value = {type: 'error', id: "disconnected"};
+  //   });
+  // }, 500);
 });
 </script>
 <style>

client/src/components/Editor.vue

@@ -13,7 +13,9 @@
         />
       </span>
       <span>
-        <n-button @click="onCheck"> Check </n-button>
+        <n-button @click="onModeClick">
+          {{ $t(`modes.${highlightMode}`) }}
+        </n-button>
       </span>
       <Suggestion
         v-if="!focus.definition"
@@ -23,12 +25,26 @@
         :grid-id="grid.id"
         :method="method"
         :ordering="ordering"
+        :cellProbas="cellProbas"
+        :searchResult="searchResult"
+        :loading="method==='accurate' && refreshingRun"
         @hover="onHover"
         @click="onClick"
         @dir="(d) => (dir = d)"
         @mouseout="onMouseOut"
-        @methodswitch="method = method === 'simple' ? 'fastest' : 'simple'"
-        @orderswitch="ordering = ordering === 1 ? -1 : 1"
+        @methodswitch="
+          method =
+            methods[
+              (methods.findIndex((o) => o === method) + 1) % methods.length
+            ]
+        "
+        @orderswitch="
+          ordering =
+            orderings[
+              (orderings.findIndex((o) => o === ordering) + 1) %
+                orderings.length
+            ]
+        "
       >
       </Suggestion>
     </template>
@@ -73,10 +89,7 @@
           :offset="offset"
           :zoom="zoom"
           @focus="(point) => (focus = point)"
-          @update="
-            emit('update');
-            refresh();
-          "
+          @update="onGridUpdate()"
           @keyup="onKeyUp"
         >
         </GridInput>
@@ -85,13 +98,13 @@
           :options="options"
           :cell="hoveredCell"
           :validity="validity"
+          :cellProbas="cellProbas"
           :zoom="zoom"
+          :mode="highlightMode"
+          :gridVersion="gridVersion"
           :offset="offset"
           :dir="dir"
-          @update="
-            emit('update');
-            refresh();
-          "
+          @update="onGridUpdate()"
         />
       </div>
     </template>
@@ -106,30 +119,37 @@ import {
   watchEffect,
   onMounted,
   computed,
+  onBeforeUnmount,
+  watch,
 } from "vue";
 import {
   AddCircleOutline,
   RemoveCircleOutline,
   SwapVertical,
 } from "@vicons/ionicons5";
+import throttle from "lodash.throttle";
 import {
   Grid,
   Cell,
   Direction,
   nullCell,
   GridOptions,
   GridValidity,
+  CellProba,
 } from "grid";
 import Layout from "../layouts/Main.vue";
 import SVGGrid from "./svg-renderer/Grid.vue";
 import GridInput from "./svg-renderer/GridInput.vue";
-import { defaultExportOptions } from "../types";
+import { defaultExportOptions, Method, Ordering } from "../types";
 import ModalOptions from "./forms/ModalOptions.vue";
-import GridHighlight from "./svg-renderer/GridHighlight.vue";
+import GridHighlight, { Mode } from "./svg-renderer/GridHighlight.vue";
 import Suggestion from "./Suggestion.vue";
 import { getUrl } from "../js/utils";
 import axios from "axios";
-import { Bounds } from "grid";
+import SearchWorker from "../search-worker/index";
+const runWorker = new SearchWorker();
+const searchWorker = new SearchWorker();
+
 /**
  * Component to edit a grid
  */
@@ -157,18 +177,36 @@ const dir = ref<Direction>("horizontal");
 const focus = ref<Cell>(nullCell);
 const hoveredCell = ref<Cell>(nullCell);
 const validity = ref<GridValidity>();
-const version = ref(1);
+const gridVersion = ref(1);
 const container = ref(null as unknown as HTMLDivElement);
 const offset = ref<[number, number]>([-10, 0]);
-const method = ref<"simple" | "fastest">("fastest");
-const ordering = ref<number>(1);
+const method = ref<Method>("accurate");
+const methods = ref<Method[]>(["accurate", "simple"]);
+const ordering = ref<Ordering>("best");
+const orderings= ref<Ordering[]>(["best", "alpha", "inverse-alpha", "random"]);
 const zoom = ref(1);
 const highlights = ref(new Map());
-const highlightModes = ["", "invalids"];
-const highlightMode = ref(highlightModes[0]);
+const highlightModes = ["normal", "check", "heatmap"] as Mode[];
+const highlightMode = ref<Mode>(highlightModes[2]);
+const cellProbas = ref<CellProba[][]>([]);
+const searchResult = ref<number[]>([]);
+const refreshingRun = ref(false);
 
-function refresh() {
-  version.value++;
+function refreshCellProba() {
+  refreshingRun.value = true;
+  runWorker.run(props.grid);
+}
+function refreshSimpleSearch() {
+  searchWorker.search(props.grid, focus.value, dir.value);
+}
+const throttledRefresCellProba = throttle(refreshCellProba, 200);
+const throttledRefresSimpleSearch = throttle(refreshSimpleSearch, 60);
+
+function onGridUpdate() {
+  //refresh the children components that need it.
+  gridVersion.value = gridVersion.value + 1;
+  throttledRefresCellProba();
+  emit("update");
 }
 function computeOffset(e) {
   const topOffset =
@@ -185,16 +223,36 @@ function onScroll(e) {
 watchEffect(() => {
   props.grid.highlight(props.grid.getBounds(focus.value, dir.value).cells);
 });
+watch(method, () => {
+  if (method.value === "accurate") {
+    if (ordering.value !== "best") {
+      ordering.value = "best";
+    }
+    orderings.value = ["best", "alpha", "inverse-alpha", "random"];
+    return throttledRefresCellProba();
+  }
+  if (ordering.value === "best") {
+    ordering.value = "alpha";
+  }
+  orderings.value = ["alpha", "inverse-alpha", "random"];
+  throttledRefresSimpleSearch();
+});
 onMounted(() => {
   computeOffset(null);
+  throttledRefresCellProba();
+});
+
+onBeforeUnmount(() => {
+  searchWorker.destroy();
+  runWorker.destroy();
 });
 function onZoomIn() {
   zoom.value = zoom.value + 0.1;
 }
 function onZoomOut() {
   zoom.value = Math.max(1, zoom.value - 0.1);
 }
-function onCheck() {
+function onModeClick() {
   const newIndex =
     (highlightModes.findIndex((m) => m === highlightMode.value) + 1) %
     highlightModes.length;
@@ -205,17 +263,15 @@ function onHover(value: string) {
   const cells = props.grid.getBounds(focus.value, dir.value).cells;
   if (!cells || !cells.length) return;
   props.grid.suggest([value], [cells[0]], [dir.value]);
-  refresh();
 }
 function onMouseOut(value: string) {
   props.grid.suggest([], [], []);
-  refresh();
 }
 function onClick(value: string) {
   const cells = props.grid.getBounds(focus.value, dir.value).cells;
   if (!cells || !cells.length) return;
   props.grid.setWord(value, cells[0], dir.value);
-  emit("update");
+  onGridUpdate();
 }
 function onKeyUp(evt: KeyboardEvent) {
   if (!evt.ctrlKey) return;
@@ -229,7 +285,7 @@ function onKeyUp(evt: KeyboardEvent) {
     consumed = true;
   }
   if (evt.key === ">" || evt.key === "<") {
-    ordering.value = ordering.value * -1;
+    // ordering.value = ordering.value * -1;
     consumed = true;
   }
   if (evt.code === "Space") {
@@ -240,8 +296,8 @@ function onKeyUp(evt: KeyboardEvent) {
   evt.canceled = consumed;
 }
 watchEffect(async () => {
-  if (!props.grid || !dir.value || !version.value) return;
-  if (highlightMode.value === "invalids") {
+  if (!props.grid || !dir.value) return;
+  if (highlightMode.value === "check") {
     const gridValidity = await axios
       .post(getUrl(`word-check`), {
         grid: props.grid.serialize(),
@@ -258,6 +314,25 @@ watchEffect(async () => {
     validity.value = { horizontal: {}, vertical: {} };
   }
 });
+
+watchEffect(async () => {
+});
+runWorker.on("run-result", (data) => {
+  cellProbas.value = data;
+  refreshingRun.value = false;
+});
+runWorker.on("bail-result", () => {
+  cellProbas.value = [];
+  refreshingRun.value = false;
+});
+searchWorker.on("search-result", (data) => {
+  searchResult.value = data;
+});
+
+watchEffect(() => {
+  if (!focus.value || !dir.value) return;
+  throttledRefresSimpleSearch();
+});
 </script>
 
 <style>