separate widget for each instance

diginlineprofiler/visualizer.py

@@ -110,5 +110,5 @@ def calculateChartData(self, dfName: str):
             "isPinned": False,
             "warnings": []
         }
-        # TODO save profile to trailet to sync with frontend
+        # save profile to trailet to sync with frontend
         self.dfProfile = profile

src/Widget.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-  import DFProfile from './components/DFProfile.svelte';
-  import { dfProfile } from './stores';
+    import DFProfile from './components/DFProfile.svelte';
+    import type { Writable } from 'svelte/store';
+    import type { IDFProfileWState } from './common/exchangeInterfaces';
+
+    export let dfProfileStore: Writable<IDFProfileWState>;
 </script>
 
 <DFProfile
-  dfName={$dfProfile.dfName}
-  dataframeProfile={$dfProfile}
-  isInFocus={false}
-  isPinned={$dfProfile.isPinned}
+    dfName={$dfProfileStore.dfName}
+    dataframeProfile={$dfProfileStore}
+    isInFocus={false}
+    isPinned={$dfProfileStore.isPinned}
 />

src/logger/Logger.ts

@@ -37,7 +37,7 @@ class Logger {
 
     save() {
         const allowSave = get(allowLogs)
-        this.printAllLogs()
+        // this.printAllLogs()
         if (this._notebook && allowSave) {
             this._notebook.saveToNotebookMetadata("AutoProfilerLogs", this._logs)
         }

src/stores.ts

@@ -1,17 +1,15 @@
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 import type { DOMWidgetModel } from '@jupyter-widgets/base';
-import type { IDFProfileWState } from './common/exchangeInterfaces'
-// import { Logger } from './logger/Logger';
 
-interface WidgetWritable<T> extends Writable<T> {
-  setModel: (m: DOMWidgetModel) => void;
-}
-
-export function WidgetWritable<T>(name_: string, value_: T): WidgetWritable<T> {
+export function WidgetWritable<T>(name_: string, value_: T, model: DOMWidgetModel): Writable<T> {
   const name: string = name_;
-  const internalWritable: Writable<any> = writable(value_);
-  let model: DOMWidgetModel;
+  const internalWritable: Writable<any> = writable(model.get(name_) || value_);
+  model.on(
+    'change:' + name,
+    () => internalWritable.set(model.get(name)),
+    null
+  );
 
   return {
     set: (v: any) => {
@@ -32,40 +30,11 @@ export function WidgetWritable<T>(name_: string, value_: T): WidgetWritable<T> {
         return output;
       });
     },
-    setModel: (m: DOMWidgetModel) => {
-      model = m;
-      const modelValue = model.get(name);
-      if (modelValue) {
-        internalWritable.set(modelValue);
-      }
-
-      model.on(
-        'change:' + name,
-        () => internalWritable.set(model.get(name)),
-        null
-      );
-    },
   };
 }
 
-// Declare stores with their associated Traitlets here.
-export const dfProfile = WidgetWritable<IDFProfileWState>('dfProfile', {
-  profile: [],
-  shape: [0, 0],
-  dfName: 'test',
-  lastUpdatedTime: 0,
-  isPinned: false,
-  warnings: [],
-});
-
-
-// Set the model for each store you create.
-export function setStoreModels(model: DOMWidgetModel): void {
-  dfProfile.setModel(model);
-}
-
-
 // UI stores
+// NOTE by default all the stores in this file are synced across all widget instances
 export const currentHoveredCol: Writable<string> = writable(undefined);
 export const allowLogs: Writable<boolean> = writable(false);
 export const showIndex: Writable<boolean> = writable(false);

src/widget.ts

@@ -6,9 +6,10 @@ import {
   DOMWidgetView,
   ISerializers,
 } from '@jupyter-widgets/base';
-import { setStoreModels } from './stores';
+import { WidgetWritable } from './stores';
 import { MODULE_NAME, MODULE_VERSION } from './version';
 import Widget from './Widget.svelte'
+import type { IDFProfileWState } from './common/exchangeInterfaces'
 
 export class VizualizerModel extends DOMWidgetModel {
   defaults() {
@@ -39,16 +40,20 @@ export class VizualizerModel extends DOMWidgetModel {
 
 export class VizualizerView extends DOMWidgetView {
   render() {
-    console.log("Rendering VisualizerView")
-    setStoreModels(this.model);
-    new Widget({ target: this.el });
-  }
 
-  // TODO figure out how to add a cell here?
+    const dfProfile = WidgetWritable<IDFProfileWState>(
+      'dfProfile',
+      {
+        profile: [],
+        shape: [0, 0],
+        dfName: 'test',
+        lastUpdatedTime: 0,
+        isPinned: false,
+        warnings: []
+      },
+      this.model
+    );
 
-  // public addCell(kind: 'code' | 'markdown', text: string) {
-  //   if (this.notebook) {
-  //     this.notebook.addCell(kind, text);
-  //   }
-  // }
+    new Widget({ target: this.el, props: { dfProfileStore: dfProfile } });
+  }
 }