k means now uses VisNDArray

irdkwmnsb · May 13, 2024 · 027469a · 027469a
1 parent f664c8d
commit 027469a
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 6 deletions.
diff --git a/README.ru.md b/README.ru.md
@@ -50,3 +50,34 @@ TODO
 
 На момент написания документации проект умеет запускать только алгоритм сортировки пузырьком.
 Чтобы поменять запускаемый алгоритм необходимо изменить файл [./src/lib/index.tsx](./src/lib/index.tsx) и [./src/App.tsx](./src/App.tsx) в местах где явно используется bubble sort.
+
+
+```plantuml
+@startuml
+actor Пользователь  as user
+participant Браузер as browser
+participant Фреймворк as framework
+participant Алгоритм as algorithm
+participant Визуализатор as visualizer
+autonumber 1
+user -> browser : Нажатие на "Start"
+browser -> framework : Обработка события
+framework -> algorithm : Запуск алгоритма
+algorithm -> framework : Объекты состояния
+algorithm -> framework : await here
+framework -> visualizer : Состояние алгоритма
+visualizer -> browser : Состояние интерфейса
+
+user -> browser : Нажатие на "Next"
+browser -> framework : Обработка события
+framework -> algorithm : Promise.resolve
+algorithm -> framework : await here
+framework -> visualizer : Состояние алгоритма
+visualizer -> browser : Состояние интерфейса
+
+user -> browser : Нажатие на "Prev"
+browser -> framework : Обработка события
+framework -> visualizer : Предыдущее состояние алгоритма
+visualizer -> browser : Состояние интерфейса
+@enduml
+```
diff --git a/src/components/array/ndarray.module.scss b/src/components/array/ndarray.module.scss
@@ -0,0 +1,22 @@
+.table {
+    border-left: 1px solid black;
+    border-collapse: collapse;
+    thead {
+        color: #777;
+        tr {
+            td {
+                border: 1px solid black;
+            }
+        }
+    }
+    tbody {
+        tr {
+            td {
+                border: 1px solid black;
+                &:first-child {
+                    color: #777;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/array/ndarray.tsx b/src/components/array/ndarray.tsx
@@ -0,0 +1,46 @@
+import { RenderableData } from "../../temp"
+import styles from "./ndarray.module.scss"
+
+type VisNDArrayProps<T> = {
+    array: T[][],
+    label: string
+} & (
+    T extends number ? {
+        roundTo?: number
+    } 
+    : unknown)
+
+export const VisNDArray = <T extends RenderableData,>(props: VisNDArrayProps<T>) => {
+    const maxElems = props.array.reduce((a, b) => Math.max(a, b.length), 0)
+    return <div>
+        {props.label}
+        <table className={styles.table}>
+            <thead>
+                <tr>
+                    <td></td>
+                    {new Array(maxElems).fill(null).map((_, index) => 
+                        <td key={index}>
+                            {index}
+                        </td>)
+                    }
+                </tr>
+            </thead>
+            <tbody>
+                {props.array.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                        <td>
+                            {rowIndex}
+                        </td>
+                        {row.map((el, colIndex) => (
+                            <td key={rowIndex + "-" + colIndex}>
+                                {
+                                    typeof el === "number" ? el.toFixed((props as VisNDArrayProps<typeof el>).roundTo ?? 2) : el
+                                }
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    </div>
+}
diff --git a/src/visualizers/k-means/k-means.ts b/src/visualizers/k-means/k-means.ts
@@ -1,6 +1,5 @@
 import _ from "lodash"
 import { bind, here, update } from "."
-import cluster from "cluster"
 
 type Point = [number, number]
 
@@ -13,11 +12,8 @@ export const kMeans = async (k: number, points: Point[]) => {
     const distance = (a: Point, b: Point) => Math.sqrt(Math.pow((b[0] - a[0]), 2) + Math.pow((b[1] - a[1]), 2))
 
     let converged = false
-    while (true) {
-        const clusters: number[] = points.map((point) => {
-            const closestCenter: number = _.minBy(_.range(0, centers.length), (centerIndex: number) => distance(centers[centerIndex], point))!
-            return closestCenter
-        })
+    for (;;) {
+        const clusters: number[] = points.map((point) => _.minBy(_.range(0, centers.length), (centerIndex: number) => distance(centers[centerIndex], point))!)
         await here("assign", clusters)
         if (converged) {
             break

diff --git a/src/visualizers/k-means/render.tsx b/src/visualizers/k-means/render.tsx
@@ -7,6 +7,7 @@ import _ from "lodash"
 import { createColorMap, linearScale } from "@colormap/core"
 import { viridis } from "@colormap/presets"
 import { Point } from "../../data/points"
+import { VisNDArray } from "../../components/array/ndarray"
 
 
 Chart.register(Colors)
@@ -88,5 +89,6 @@ export const BubbleSortRender = ({ curState, curEvent }: RenderProps<KMeansState
     }, [curState, curEvent])
     return <div>
         <canvas ref={divref} width="500" height="500"></canvas>
+        <VisNDArray array={curState.centers} label="Centers"/>
     </div>
 }