Graph: color schema nodes and attestation edges by hashed entity IDs

src/routes/+layout.svelte

@@ -17,6 +17,10 @@
 	} = data
 
 
+	// Functions
+	import { hashStringToColor } from '$/utils/hashStringToColor'
+
+
 	// Internal state
 	import Graph from 'graphology'
 
@@ -36,7 +40,7 @@
 				x: Math.random() * 100,
 				y: Math.random() * 100,
 				size: Math.log(schema.attestationCount) * 5,
-				color: `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`,
+				color: hashStringToColor(id),
 			})
 	}
 
@@ -80,7 +84,7 @@
 					x: Math.random() * 100,
 					y: Math.random() * 100,
 					size: 10,
-					color: `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`,
+					color: hashStringToColor(id),
 				})
 		}
 
@@ -91,19 +95,21 @@
 		for (const [attestationId, attestation] of allAttestations.entries()) {
 			for (const recipient of attestation.recipients) {
 				// Attester → Recipient
-				// {
-				// 	const id = `account/${attestation.attester}|account/${recipient}`
-
-				// 	if(!graph.hasEdge(id))
-				// 		graph.addEdge(
-				// 			`account/${attestation.attester}`,
-				// 			`account/${recipient}`,
-				// 			{
-				// 				id,
-				// 				label: attestationId,
-				// 			},
-				// 		)
-				// }
+				{
+					const id = `account/${attestation.attester}|account/${recipient}`
+
+					if(!graph.hasEdge(id))
+						graph.addEdge(
+							`account/${attestation.attester}`,
+							`account/${recipient}`,
+							{
+								id,
+								label: attestationId,
+								color: hashStringToColor(`schema/${attestation.schemaId}`),
+								size: 3,
+							},
+						)
+				}
 
 				// Attester → Schema
 				{

src/utils/hashStringToColor.ts

@@ -0,0 +1,14 @@
+export const hashStringToColor = (str: string) => {
+	let hash = 0
+	for (let i = 0; i < str.length; i++) {
+		hash = str.charCodeAt(i) + ((hash << 5) - hash)
+	}
+
+	let color = '#'
+	for (let i = 0; i < 3; i++) {
+		const value = (hash >> (i * 8)) & 0xFF
+		color += ('00' + value.toString(16)).slice(-2)
+	}
+
+	return color
+}