From 2e9e79dc7ad3cd95e63ef8a0ce73c5a84960399f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 21 Jan 2024 20:02:36 +0100
Subject: [PATCH] fix: use hash on objects instead of shallow equal comparison
 to improve trigger reliability of apps

---
 frontend/package-lock.json                        | 15 ++++++++++++++-
 frontend/package.json                             |  1 +
 .../components/helpers/RunnableComponent.svelte   |  2 +-
 .../contextPanel/ComponentOutputViewer.svelte     |  2 +-
 .../editor/settingsPanel/QuickAddColumn.svelte    |  2 +-
 frontend/src/lib/components/apps/rx.ts            |  7 +++++--
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c821c98870..4f86165a18 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29,12 +29,14 @@
 				"esm-env": "^1.0.0",
 				"fast-equals": "^5.0.1",
 				"graphql": "^16.7.1",
+				"hash-sum": "^2.0.0",
 				"highlight.js": "^11.8.0",
 				"lodash": "^4.17.21",
 				"lucide-svelte": "^0.293.0",
 				"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
 				"monaco-graphql": "^1.3.0",
 				"monaco-languageclient": "~7.0.1",
+				"object-hash": "^3.0.0",
 				"openai": "^4.3.0",
 				"quill": "^1.3.7",
 				"svelte-autosize": "^1.0.1",
@@ -69,6 +71,7 @@
 				"@types/d3-zoom": "^3.0.3",
 				"@types/lodash": "^4.14.195",
 				"@types/node": "^20.3.3",
+				"@types/object-hash": "^3.0.6",
 				"@types/vscode": "^1.83.5",
 				"@typescript-eslint/eslint-plugin": "^5.59.8",
 				"@typescript-eslint/parser": "^5.60.0",
@@ -1409,6 +1412,12 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/@types/object-hash": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/object-hash/-/object-hash-3.0.6.tgz",
+			"integrity": "sha512-fOBV8C1FIu2ELinoILQ+ApxcUKz4ngq+IWUYrxSGjXzzjUALijilampwkMgEtJ+h2njAW3pi853QpzNVCHB73w==",
+			"dev": true
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.9",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.9.tgz",
@@ -4204,6 +4213,11 @@
 			"dev": true,
 			"optional": true
 		},
+		"node_modules/hash-sum": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+			"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
+		},
 		"node_modules/hasown": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
@@ -6322,7 +6336,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
 			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
diff --git a/frontend/package.json b/frontend/package.json
index bd3dc0f723..f38c4d1980 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -112,6 +112,7 @@
 		"esm-env": "^1.0.0",
 		"fast-equals": "^5.0.1",
 		"graphql": "^16.7.1",
+		"hash-sum": "^2.0.0",
 		"highlight.js": "^11.8.0",
 		"lodash": "^4.17.21",
 		"lucide-svelte": "^0.293.0",
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index f3c1612ecd..bb8238452e 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -134,7 +134,7 @@
 		const refreshEnabled =
 			autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0)
 		if (refreshEnabled && $initialized.initialized) {
-			console.debug(`Refreshing ${id} because ${_src} (enabled)`)
+			// console.debug(`Refreshing ${id} because ${_src} (enabled)`)
 			setDebouncedExecute()
 		}
 	}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index faefb903d4..77d6ff3b82 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -20,7 +20,7 @@
 				object[k] = undefined
 				output?.subscribe(
 					{
-						id: 'alloutputs' + suffix + componentId + '-' + k,
+						id: 'alloutputs-' + suffix + componentId + '-' + k,
 						next: (value) => {
 							if (!hasContent) {
 								hasContent = true
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
index 2dff284a21..ad922d29dd 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
@@ -20,7 +20,7 @@
 		if (observableOutputs) {
 			observableOutputs?.['result']?.subscribe(
 				{
-					id: 'alloutputs-quickadd-' + id + '-result',
+					id: 'quickadd-' + id + '-result',
 					next: (value) => {
 						result = value
 					}
diff --git a/frontend/src/lib/components/apps/rx.ts b/frontend/src/lib/components/apps/rx.ts
index 116a12afbe..a8ff8308a4 100644
--- a/frontend/src/lib/components/apps/rx.ts
+++ b/frontend/src/lib/components/apps/rx.ts
@@ -1,7 +1,7 @@
 import type { InputConnectionEval } from './inputType'
 import { writable, type Writable } from 'svelte/store'
 import { deepEqual } from 'fast-equals'
-
+import sum from 'hash-sum'
 export interface Subscriber<T> {
 	id?: string
 	next(v: T): void
@@ -156,8 +156,11 @@ export function settableOutput<T>(state: Writable<number>, previousValue: T): Ou
 		}
 	}
 
+	let lastHash: any = undefined
 	function set(x: T, force: boolean = false) {
-		if (!deepEqual(value, x) || force) {
+		let newHash = typeof x === 'object' ? sum(x) : x
+		if (lastHash != newHash || force) {
+			lastHash = newHash
 			state.update((x) => x + 1)
 
 			if (typeof x === 'object') {