From ef4427ba1e730f428ca79e8b3a83321effde4bc5 Mon Sep 17 00:00:00 2001
From: mawerb <maorbarzilay8@gmail.com>
Date: Fri, 9 Jan 2026 02:41:23 -0800
Subject: [PATCH 1/2] Fixed Graph staying on page after removing from encoding
 shelf

---
 package-lock.json                      | 12 --------
 src/components/ChartView/ChartView.tsx | 39 +++++++++++++-------------
 src/context/AppContext.tsx             |  3 +-
 3 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 79f8644..3dcadb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1404,7 +1403,6 @@
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1465,7 +1463,6 @@
       "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.49.0",
         "@typescript-eslint/types": "8.49.0",
@@ -1717,7 +1714,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1835,7 +1831,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2330,7 +2325,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3058,7 +3052,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3120,7 +3113,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3406,7 +3398,6 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3485,7 +3476,6 @@
       "resolved": "https://registry.npmjs.org/vega/-/vega-6.2.0.tgz",
       "integrity": "sha512-BIwalIcEGysJdQDjeVUmMWB3e50jPDNAMfLJscjEvpunU9bSt7X1OYnQxkg3uBwuRRI4nWfFZO9uIW910nLeGw==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "vega-crossfilter": "~5.1.0",
         "vega-dataflow": "~6.1.0",
@@ -3707,7 +3697,6 @@
       "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-6.4.1.tgz",
       "integrity": "sha512-KO3ybHNouRK4A0al/+2fN9UqgTEfxrd/ntGLY933Hg5UOYotDVQdshR3zn7OfXwQ7uj0W96Vfa5R+QxO8am3IQ==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "json-stringify-pretty-compact": "~4.0.0",
         "tslib": "~2.8.1",
@@ -3968,7 +3957,6 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
diff --git a/src/components/ChartView/ChartView.tsx b/src/components/ChartView/ChartView.tsx
index fda7797..41948de 100644
--- a/src/components/ChartView/ChartView.tsx
+++ b/src/components/ChartView/ChartView.tsx
@@ -67,7 +67,7 @@ export function ChartView() {
     };
 
     embedChart();
-  }, [spec]);
+  }, [spec, state.data, state.encodings]);
 
   const hasEncodings = Object.keys(state.encodings).length > 0;
 
@@ -251,7 +251,7 @@ export function ChartView() {
             </p>
           </div>
         </div>
-      ) : !spec ? (
+      ) : !spec && (
         <div
           style={{
             flex: 1,
@@ -342,25 +342,24 @@ export function ChartView() {
             </p>
           </div>
         </div>
-      ) : (
-        <div
-          ref={containerRef}
-          style={{
-            flex: 1,
-            backgroundColor: 'var(--color-bg-secondary)',
-            borderRadius: '16px',
-            padding: '24px',
-            border: '1px solid var(--color-border)',
-            position: 'relative',
-            zIndex: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            animation: 'fadeIn 0.4s ease-out',
-            overflow: 'hidden',
-          }}
-        />
       )}
+      <div
+        ref={containerRef}
+        style={{
+          flex: 1,
+          backgroundColor: 'var(--color-bg-secondary)',
+          borderRadius: '16px',
+          padding: '24px',
+          border: '1px solid var(--color-border)',
+          position: 'relative',
+          zIndex: 1,
+          display: spec ? 'flex' : 'none', // Hide the div when there is no graph
+          alignItems: 'center',
+          justifyContent: 'center',
+          animation: spec ? 'fadeIn 0.4s ease-out' : 'none', // Disable animation when hidden
+          overflow: 'hidden',
+        }}
+      />
 
       {/* Footer gradient line */}
       <div
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index b9299d7..9dc351b 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -23,8 +23,7 @@ function appReducer(state: AppState, action: AppAction): AppState {
         encodings: { ...state.encodings, [action.channel]: action.field },
       };
     case 'REMOVE_FIELD': {
-      const newEncodings = { ...state.encodings };
-      delete newEncodings[action.channel];
+      const {[action.channel]: removed, ...newEncodings} = state.encodings;
       return { ...state, encodings: newEncodings };
     }
     case 'CLEAR_ALL':

From b9eea6f084ab878c2d9b0d5fec420ba73b441ab1 Mon Sep 17 00:00:00 2001
From: mawerb <maorbarzilay8@gmail.com>
Date: Sat, 10 Jan 2026 16:45:59 -0800
Subject: [PATCH 2/2] Revert unnecessary changes to package-lock.json,
 AppContext.tsx and Chartview.tsx

---
 package-lock.json                      | 12 ++++++++++++
 src/components/ChartView/ChartView.tsx |  2 +-
 src/context/AppContext.tsx             |  3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3dcadb9..79f8644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1403,6 +1404,7 @@
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1463,6 +1465,7 @@
       "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.49.0",
         "@typescript-eslint/types": "8.49.0",
@@ -1714,6 +1717,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1831,6 +1835,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2325,6 +2330,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3052,6 +3058,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3113,6 +3120,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3398,6 +3406,7 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3476,6 +3485,7 @@
       "resolved": "https://registry.npmjs.org/vega/-/vega-6.2.0.tgz",
       "integrity": "sha512-BIwalIcEGysJdQDjeVUmMWB3e50jPDNAMfLJscjEvpunU9bSt7X1OYnQxkg3uBwuRRI4nWfFZO9uIW910nLeGw==",
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "vega-crossfilter": "~5.1.0",
         "vega-dataflow": "~6.1.0",
@@ -3697,6 +3707,7 @@
       "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-6.4.1.tgz",
       "integrity": "sha512-KO3ybHNouRK4A0al/+2fN9UqgTEfxrd/ntGLY933Hg5UOYotDVQdshR3zn7OfXwQ7uj0W96Vfa5R+QxO8am3IQ==",
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "json-stringify-pretty-compact": "~4.0.0",
         "tslib": "~2.8.1",
@@ -3957,6 +3968,7 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
diff --git a/src/components/ChartView/ChartView.tsx b/src/components/ChartView/ChartView.tsx
index 41948de..1e545bc 100644
--- a/src/components/ChartView/ChartView.tsx
+++ b/src/components/ChartView/ChartView.tsx
@@ -67,7 +67,7 @@ export function ChartView() {
     };
 
     embedChart();
-  }, [spec, state.data, state.encodings]);
+  }, [spec]);
 
   const hasEncodings = Object.keys(state.encodings).length > 0;
 
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index 9dc351b..b9299d7 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -23,7 +23,8 @@ function appReducer(state: AppState, action: AppAction): AppState {
         encodings: { ...state.encodings, [action.channel]: action.field },
       };
     case 'REMOVE_FIELD': {
-      const {[action.channel]: removed, ...newEncodings} = state.encodings;
+      const newEncodings = { ...state.encodings };
+      delete newEncodings[action.channel];
       return { ...state, encodings: newEncodings };
     }
     case 'CLEAR_ALL':