From bac09266c4c56b97641dbdba49667a6fc1109f0d Mon Sep 17 00:00:00 2001
From: Matthieu Jouis <matthieu@probabl.ai>
Date: Fri, 26 Jul 2024 09:29:29 +0200
Subject: [PATCH] use sha1 to generate colors constantly

---
 frontend/src/components/FileTreeItem.vue | 19 ++++++++++++-------
 frontend/src/services/utils.ts           | 17 +++++++++++++++++
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FileTreeItem.vue b/frontend/src/components/FileTreeItem.vue
index fddce9364..db7a59d18 100644
--- a/frontend/src/components/FileTreeItem.vue
+++ b/frontend/src/components/FileTreeItem.vue
@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeMount, ref } from "vue";
 import { useRouter } from "vue-router";
-import { type FileTreeNode } from "./FileTree.vue";
+
+import { type FileTreeNode } from "@/components/FileTree.vue";
+import { remap, sha1 } from "@/services/utils";
 
 const router = useRouter();
 const props = defineProps<FileTreeNode>();
 
+const randomColor = ref("");
 const hasChildren = computed(() => props.children?.length);
 const label = computed(() => {
   const segment = props.uri.split("/");
   return segment[segment.length - 1];
 });
 
-const randomColor = computed(() => {
-  const hue = Math.random() * 360;
-  return `background-color: hsl(${hue}deg 97 75);`;
-});
-
 function onClick() {
   router.push({
     name: "dashboard",
@@ -25,6 +23,13 @@ function onClick() {
     },
   });
 }
+
+onBeforeMount(async () => {
+  const hash = await sha1(props.uri);
+  const hashAsNumber = Number(`0x${hash.slice(0, 7)}`);
+  const hue = remap(hashAsNumber, 0x0000000, 0xffff, 0, 360);
+  randomColor.value = `background-color: hsl(${hue}deg 97 75);`;
+});
 </script>
 
 <template>
diff --git a/frontend/src/services/utils.ts b/frontend/src/services/utils.ts
index 6742d8e56..c9943b217 100644
--- a/frontend/src/services/utils.ts
+++ b/frontend/src/services/utils.ts
@@ -5,3 +5,20 @@ export function sleep(delay: number): Promise<void> {
 export function isString(s: any) {
   return typeof s === "string" || s instanceof String;
 }
+
+export function remap(
+  x: number,
+  fromMin: number,
+  fromMax: number,
+  toMin: number,
+  toMax: number
+): number {
+  return ((x - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;
+}
+
+export async function sha1(message: string) {
+  const msgUint8 = new TextEncoder().encode(message);
+  const hashBuffer = await crypto.subtle.digest("SHA-1", msgUint8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+}