[draft] feat: support reactive rendering

CONTRIBUTING.md

@@ -138,13 +138,35 @@ If there is an example you would like to add to the editor example library, plea
 
 ## Bumping Gosling.js
 
+The version should follow the [semver](https://semver.org/) convention. This includes release candidates (e.g., alpha).
+
 GitHub Action handles bumping the version of Gosling.js. The pattern looks like the following:
 
 ```
 pnpm version patch # or minor or major
 git push origin main --tags
 ```
 
+### Alpha or Beta Versions
+
+After updating the `version` in `package.json`:
+
+```
+# Add a pre-release tag to the commit
+git tag v2.0.0-alpha.1 [commit hash]
+
+# Push changes with the tag
+git push origin tag v2.0.0-alpha.1
+```
+
+You need to properly tag the `latest` and next versions in NPM. You can do this by:
+
+```
+npm dist-tag add [email protected] alpha
+```
+
+This will add the `alpha` tag to the `2.0.0-alpha.1` version of Gosling.js.
+
 # Internal Explanations  
 ## How does a Gosling spec get turned into a HiGlass spec?
 A Gosling schema goes through the following steps: 
@@ -170,4 +192,4 @@ tracks: [
          { ..., id: '4' }, // ← This track is included in a HiGlass view '2'
    ]}
 ]
-```
+```

demo/gosling-component.tsx

@@ -25,7 +25,16 @@ interface GoslingComponentProps {
 }
 
 export function GoslingComponent(props: GoslingComponentProps) {
-    const { spec, id, className, padding, urlToFetchOptions, theme = 'light', ref, visualized = () => { } } = props;
+    const {
+        spec,
+        id = 'gosling-component',
+        className = 'gosling-component',
+        padding,
+        urlToFetchOptions,
+        theme = 'light',
+        ref,
+        visualized = () => { }
+    } = props;
 
     const [compiledResults, setCompiledResults] = useState<ReturnType<typeof renderGosling>>();
 
@@ -44,29 +53,38 @@ export function GoslingComponent(props: GoslingComponentProps) {
 
     useEffect(() => {
         if (!spec) return;
-        const plotElement = document.getElementById('plot') as HTMLDivElement;
+        const plotElement = document.getElementById(id) as HTMLDivElement;
         // If the pixiManager doesn't exist, create a new one
         if (!pixiManager) {
-            const canvasWidth = 1000,
-                canvasHeight = 1000; // These initial sizes don't matter because the size will be updated
+            // These initial sizes don't matter because the size will be updated
+            const canvasWidth = 1000;
+            const canvasHeight = 1000;
             const pixiManager = new PixiManager(canvasWidth, canvasHeight, plotElement, () => { }, { padding });
-            const compileResult = renderGosling(spec, plotElement, pixiManager, theme, urlToFetchOptions);
+            const compileResult = renderGosling(
+                spec,
+                plotElement,
+                pixiManager,
+                theme,
+                compiledResults?.plots,
+                urlToFetchOptions
+            );
             setCompiledResults(compileResult);
             setPixiManager(pixiManager);
         } else {
-            pixiManager.clearAll();
-            const compileResult = renderGosling(spec, plotElement, pixiManager, theme, urlToFetchOptions);
+            // pixiManager.clearAll();
+            const compileResult = renderGosling(
+                spec,
+                plotElement,
+                pixiManager,
+                theme,
+                compiledResults?.plots,
+                urlToFetchOptions
+            );
             setCompiledResults(compileResult);
         }
     }, [spec]);
 
-    return (
-        <div
-            id={id ?? 'gosling-component'}
-            className={className ?? 'gosling-component'}
-            style={{ height: '100%' }}
-        ></div>
-    );
+    return <div id={id} className={className} style={{ height: '100%' }}></div>;
 }
 /**
  * This is the main function. It takes a Gosling spec and renders it using the PixiManager
@@ -76,6 +94,7 @@ export function renderGosling(
     container: HTMLDivElement,
     pixiManager: PixiManager,
     theme: Theme,
+    prevPlots: Record<string, unknown> = {},
     urlToFetchOptions?: UrlToFetchOptions
 ) {
     const themeDeep = getTheme(theme);
@@ -108,7 +127,7 @@ export function renderGosling(
                 );
                 // 4. Render the tracks
                 const trackDefs = createTrackDefs(rescaledTracks, themeDeep);
-                plots = renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOptions);
+                plots = renderTrackDefs(trackDefs, linkedEncodings, pixiManager, prevPlots, urlToFetchOptions);
                 // Resize the canvas to make sure it fits the tracks
                 const { width, height } = calculateWidthHeight(rescaledTracks);
                 pixiManager.resize(width, height);
@@ -119,7 +138,8 @@ export function renderGosling(
         // 4. If the spec is not responsive, we can just render the tracks
         const trackDefs = createTrackDefs(trackInfos, themeDeep);
 
-        plots = renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOptions);
+        plots = renderTrackDefs(trackDefs, linkedEncodings, pixiManager, prevPlots, urlToFetchOptions);
+
         // Resize the canvas to make sure it fits the tracks
         const { width, height } = calculateWidthHeight(trackInfos);
         pixiManager.resize(width, height);