Make selected structure a traitlet accessible from python

Currently broken...

python/chemiscope/jupyter.py

@@ -25,8 +25,9 @@ class ChemiscopeWidgetBase(ipywidgets.DOMWidget, ipywidgets.ValueWidget):
     # change what's being displayed by chemiscope, but you need to assign a full
     # dictionary (`widget.settings["map"]["x"]["property"] = "foo"` will not
     # work, but `widget.settings = updated_settings` will).
-    settings = Dict().tag(sync=True)
-    # switch to disable automatic update of settings
+    settings = Dict().tag(sync=True)    
+    selection = Dict().tag(sync=True)
+    # switch to disable automatic update of settings (& se;lection)
     _settings_sync = Bool().tag(sync=True)
 
     def __init__(self, data, has_metadata):

python/jupyter/src/widget.ts

@@ -8,6 +8,7 @@ import './widget.css';
 
 import { DefaultVisualizer, MapVisualizer, StructureVisualizer } from '../../../src/index';
 import { Dataset, Settings } from '../../../src/dataset';
+import { Indexes } from '../../../src/indexer';
 
 const PlausibleTracker = Plausible({
     domain: 'jupyter.chemiscope.org',
@@ -71,6 +72,41 @@ class ChemiscopeBaseView extends DOMWidgetView {
             this.model.save_changes();
         }
     }
+
+    protected _bindPythonSelection(): void {
+        // update settings on the JS side when they are changed in Python
+        this.model.on(
+            'change:selection',
+            () => {
+                // only trigger a visualizer update if required.
+                // this is also used to avoid an infinite loop when settings are changed JS-side
+                if (!this.model.get('_settings_sync')) {
+                    return;
+                }
+
+                const selection = this.model.get('selection') as Indexes;
+                console.log("selection update", selection);
+                // for the moment does nothing
+            },
+            this
+        );
+    }
+
+    protected _updatePythonSelection(): void {
+        if (this.visualizer !== undefined) {
+            const selection = this.visualizer.getSelected();
+
+            // save current settings of settings_sync
+            const sync_state = this.model.get('_settings_sync') as unknown;
+
+            this.model.set('_settings_sync', false);
+            this.model.save_changes();
+            this.model.set('selection', selection);
+            this.model.save_changes();
+            this.model.set('_settings_sync', sync_state);
+            this.model.save_changes();
+        }
+    }
 }
 
 /**
@@ -135,13 +171,15 @@ export class ChemiscopeView extends ChemiscopeBaseView {
         };
 
         this._bindPythonSettings();
+        this._bindPythonSelection();
 
         const data = JSON.parse(this.model.get('value') as string) as Dataset;
         void DefaultVisualizer.load(config, data)
             .then((visualizer) => {
                 this.visualizer = visualizer;
                 // update the Python side settings whenever a setting changes
                 this.visualizer.onSettingChange(() => this._updatePythonSettings());
+                this.visualizer.onSelection = (() => this._updatePythonSelection());
                 // and set them to the initial value right now
                 this._updatePythonSettings();
             })
@@ -216,6 +254,7 @@ export class StructureView extends ChemiscopeBaseView {
         };
 
         this._bindPythonSettings();
+        this._bindPythonSelection();
 
         const data = JSON.parse(this.model.get('value') as string) as Dataset;
         void StructureVisualizer.load(config, data)
@@ -298,6 +337,7 @@ export class MapView extends ChemiscopeBaseView {
         };
 
         this._bindPythonSettings();
+        this._bindPythonSelection();
 
         const data = JSON.parse(this.model.get('value') as string) as Dataset;
         void MapVisualizer.load(config, data)

src/index.ts

@@ -379,7 +379,7 @@ class DefaultVisualizer {
             this.structure.applySettings(settings.structure as Settings[]);
         }
     }
-
+    
     /**
      * Add the given `callback` to be called whenever a setting changes. The
      * callback will be given the path to the settings as a list of keys; and
@@ -403,6 +403,16 @@ class DefaultVisualizer {
         });
     }
 
+    public getSelected(): Indexes {
+        return this.info.getSelected();
+    }
+
+    /*public onSelectedChange(callback: (keys: string[], value: unknown) => void): void {
+        this.info.onSelectedChange( (keys, value) ==> {
+            callback(keys, value);
+        });
+    }*/
+
     /**
      * Get the dataset used to create the current visualization
      *
@@ -525,6 +535,7 @@ class StructureVisualizer {
         };
 
         let initial: Indexes = { environment: 0, structure: 0, atom: 0 };
+
         // if we have sparse environments, make sure to use the first
         // environment actually part of the dataset
         if (dataset.environments !== undefined) {
@@ -595,6 +606,10 @@ class StructureVisualizer {
             callback(keys, value);
         });
     }
+
+    public getSelected(): Indexes {
+        return this.info.getSelected();
+    }
 }
 
 /**
@@ -752,6 +767,10 @@ class MapVisualizer {
             callback(keys, value);
         });
     }
+
+    public getSelected(): Indexes {
+        return this.info.getSelected();
+    }
 }
 
 declare const CHEMISCOPE_GIT_VERSION: string;

src/info/info.ts

@@ -395,4 +395,8 @@ export class EnvironmentInfo {
         assert(indexes !== undefined);
         return indexes;
     }
+
+    public getSelected(): Indexes {
+        return this._indexes()
+    }
 }