Python-side structure selection

python/jupyter/src/widget.ts

@@ -86,6 +86,8 @@ class ChemiscopeBaseView extends DOMWidgetView {
 
                 const selection = this.model.get('selection') as Indexes;
                 console.log("selection update", selection);
+
+                (this.visualizer as DefaultVisualizer).select(selection);
                 // for the moment does nothing
             },
             this
@@ -95,7 +97,7 @@ class ChemiscopeBaseView extends DOMWidgetView {
     protected _updatePythonSelection(): void {
         if (this.visualizer !== undefined) {
             const selection = this.visualizer.getSelected();
-
+            console.log("getting selection ", selection);
             // save current settings of settings_sync
             const sync_state = this.model.get('_settings_sync') as unknown;
 
@@ -175,13 +177,14 @@ export class ChemiscopeView extends ChemiscopeBaseView {
 
         const data = JSON.parse(this.model.get('value') as string) as Dataset;
         void DefaultVisualizer.load(config, data)
-            .then((visualizer) => {
+            .then((visualizer) => {                
                 this.visualizer = visualizer;
                 // update the Python side settings whenever a setting changes
-                this.visualizer.onSettingChange(() => this._updatePythonSettings());
-                this.visualizer.onSelection = (() => this._updatePythonSelection());
+                this.visualizer.onSettingChange(() => this._updatePythonSettings());                
+                this.visualizer.info.onselection = (() => this._updatePythonSelection());
                 // and set them to the initial value right now
                 this._updatePythonSettings();
+                this._updatePythonSelection();
             })
             .catch((e: Error) => {
                 // eslint-disable-next-line no-console

src/index.ts

@@ -171,7 +171,7 @@ class DefaultVisualizer {
     public map: PropertiesMap;
     public info: EnvironmentInfo;
     public meta: MetadataPanel;
-    public structure: ViewersGrid;
+    public structure: ViewersGrid;    
 
     private _indexer: EnvironmentIndexer;
     // Stores raw input input so we can give it back later
@@ -214,7 +214,7 @@ class DefaultVisualizer {
 
         this.structure.onselect = (indexes) => {
             this.map.select(indexes);
-            this.info.show(indexes);
+            this.info.show(indexes);            
         };
 
         this.structure.onremove = (guid) => {
@@ -240,8 +240,9 @@ class DefaultVisualizer {
         );
 
         this.map.onselect = (indexes) => {
+            console.log("map onselect");
             this.info.show(indexes);
-            this.structure.show(indexes);
+            this.structure.show(indexes);            
         };
 
         this.map.activeChanged = (guid, indexes) => {
@@ -256,9 +257,14 @@ class DefaultVisualizer {
             this._indexer,
             dataset.parameters
         );
+
         this.info.onchange = (indexes) => {
             this.map.select(indexes);
             this.structure.show(indexes);
+            if (this.info.onselection !== undefined) {
+                console.log("info onchange", indexes);
+                this.info.onselection();
+            }
         };
 
         this.structure.delayChanged = (delay) => {
@@ -407,6 +413,11 @@ class DefaultVisualizer {
         return this.info.getSelected();
     }
 
+    public select(indexes: Indexes) {
+        console.log("selecting"); 
+        this.map.select(indexes);        
+        this.info.show(indexes);
+    }
     /*public onSelectedChange(callback: (keys: string[], value: unknown) => void): void {
         this.info.onSelectedChange( (keys, value) ==> {
             callback(keys, value);

src/info/info.ts

@@ -51,6 +51,10 @@ interface Info {
 export class EnvironmentInfo {
     /** Callback used when the user changes one of the sliders value */
     public onchange: (indexes: Indexes) => void;
+
+    /** Callback used when the selection is changed, no matter the source */
+    public onselection?: () => void;;
+
     /** delay in ms between "frames" during playback over structures/atoms */
     public playbackDelay: number;
 
@@ -138,6 +142,7 @@ export class EnvironmentInfo {
 
     /** Show properties for the given `indexes`, and update the sliders values */
     public show(indexes: Indexes): void {
+        console.log("info/show");
         const previousStructure = this._indexes().structure;
 
         this._structure.number.value = `${indexes.structure + 1}`;
@@ -163,6 +168,11 @@ export class EnvironmentInfo {
                 this._atom.table.show(indexes);
             }
         }
+
+        if (this.onselection !== undefined) {
+            console.log("info show trigger onselection");
+            this.onselection();
+        }
     }
 
     /**
@@ -220,6 +230,7 @@ export class EnvironmentInfo {
         };
 
         slider.onchange = () => {
+            console.log("slider/onchange");
             const structure = this._structure.slider.value();
 
             if (this._atom !== undefined) {
@@ -256,6 +267,7 @@ export class EnvironmentInfo {
         number.max = this._indexer.structuresCount().toString();
 
         number.onchange = () => {
+            console.log("number/onchange");
             const value = parseInt(number.value, 10) - 1;
             if (isNaN(value) || value < 0 || value >= parseInt(number.max, 10)) {
                 // reset to the current slider value if we got an invalid value