Askar's directional button first working implementation

js/Untitled.ipynb

@@ -30,22 +30,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 3,
    "id": "94a44328-e9d9-4d23-9de8-0675159e136b",
-   "metadata": {},
+   "metadata": {
+    "scrolled": true
+   },
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "85d59a3e5acb42c2aa45622bcc82ef13",
+       "model_id": "2a646e36ade645bfb741191ffb4baaaf",
        "version_major": 2,
        "version_minor": 0
       },
       "text/plain": [
        "HBox(children=(VBox(children=(Button(button_style='primary', icon='arrows', layout=Layout(width='36px'), style…"
       ]
      },
-     "execution_count": 6,
+     "execution_count": 3,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -73,23 +75,12 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": null,
    "id": "653b8122-0ed6-4368-bb3e-4300541c8532",
    "metadata": {
     "tags": []
    },
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[]"
-      ]
-     },
-     "execution_count": 11,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "p.children[1].children[0].dir_center_positions"
    ]
@@ -101,6 +92,14 @@
    "metadata": {},
    "outputs": [],
    "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cff4f3fb-bc6c-4f36-b0a1-5171a9adf637",
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -119,7 +118,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.4"
+   "version": "3.11.9"
   }
  },
  "nbformat": 4,

js/src/index.js

@@ -277,8 +277,9 @@
       });
 
       this.scatterplot = createScatterplot(initialOptions);
-      // this.scatterplot.setSelectionManager('directional');
-
+
+
+
       if (!window.jupyterScatter.versionLog) {
         // eslint-disable-next-line
         console.log(
@@ -303,6 +304,8 @@
       this.externalViewChangeHandlerBound = this.externalViewChangeHandler.bind(this);
       this.viewChangeHandlerBound = this.viewChangeHandler.bind(this);
       this.resizeHandlerBound = this.resizeHandler.bind(this);
+      //This is Askar's code added on Aug 22 to try out
+      //if (this.model.get(mouse))
       this.scatterplot.subscribe('lassoEnd', ({ centerPositions }) => {
         // eslint-disable-next-line
         console.log("lassoEnd")
@@ -351,7 +354,29 @@
       this.model.on('msg:custom', (event) => {
         this.customEventHandler.call(this, event);
       }, this);
-
+
+      // this.model.on("msg:custom", (msg) => {
+      //   if (msg?.type === "setdirectional") this.scatterplot.setSelectionManager('directional');
+    //});
+
+      //BS Code I added for now - Askar
+      // this.model.on('change:mouse_mode', () => {
+      //   const newMouseMode = this.model.get('mouse_mode');
+
+      //   //Check if the new mouse mode is 'directional'
+      //   if (newMouseMode === 'directional') {
+      //     console.log('Directional Mode Activated');
+      //     this.scatterplot.setSelectionManager('directional');
+
+      //     //Subscribe to the 'dirEnd' event
+      //     this.scatterplot.subscribe('dirEnd', ({ dircenterPositions }) => {
+      //       console.log("dirEnd");
+      //       console.log({ dircenterPositions});
+      //       this.model.set("dir_center_positions", dircenterPositions);
+      //       this.model.save_changes();
+      //     })
+      // }});
+
       this.colorCanvas();
 
       this.getOuterDimensions();
@@ -394,11 +419,37 @@
   }
 
   customEventHandler(event) {
+    console.log("Event received: ", event.type);
     if (event.type === this.eventTypes.TOOLTIP) {
       if (event.index !== this.tooltipPointIdx && event.show !== true) return;
       this.tooltipDataHandlers(event)
       if (event.show) this.showTooltip(event.index);
     }
+    //Handle directional mode - added by askar and andres
+    if (event.type === 'setdirectional') {
+      console.log("switching to directional mode");
+      if (!this.scatterplot) return;
+      this.scatterplot.setSelectionManager('directional');
+    }
+    //Handle lasso mode - added by askar
+    if (event.type === 'setlasso') {
+      console.log("switching to lasso mode");
+      if (!this.scatterplot) return;
+      this.scatterplot.setSelectionManager('lasso');
+    }
+    //Handle pan zoom mode - added by askar
+    if (event.type === 'setpanzoom') {
+      console.log("switching to pan zoom mode");
+      if (!this.scatterplot) return;
+      this.scatterplot.setSelectionManager('panzoom');
+    }
+    //Handle rotate mode - added by askar
+    // if (event.type === 'setrotate') {
+    //   console.log("switching to rotate mode");
+    //   if (!this.scatterplot) return;
+    //   this.scatterplot.setSelectionManager('rotate');
+    // }
+    //
     if (event.type === this.eventTypes.VIEW_RESET) {
       if (!this.scatterplot) return;
       if (event.area) {

jscatter/types.py

@@ -32,6 +32,7 @@ class MouseModes(Enum):
     PAN_ZOOM = 'panZoom'
     LASSO = 'lasso'
     ROTATE = 'rotate'
+    DIRECTIONAL = 'directional'
 
 class Auto(Enum):
     AUTO = 'auto'

jscatter/widget.py

@@ -340,9 +340,22 @@ def click_handler(b):
             if mouse_mode == 'lasso':
                 # Change selection manager in js code to lasso
                 print("use lasso")
+                self.send({ "type": "setlasso"})
             elif mouse_mode == 'directional':
-                # Change selection manager in js code to lasso
+                # Change selection manager in js code to directional
                 print("use directional")
+                self.send({ "type": "setdirectional"})
+            #added by askar Aug 23,2024 -not sure if necessary to be honest because it might interfere with normal functionality
+            elif mouse_mode == 'panZoom':
+                # Change selection manager in js code to panZoom
+                print("use panZoom")
+                self.send({ "type": "setpanZoom"})
+            # elif mouse_mode == 'rotate':
+            #     # Change selection manager in js code to rotate
+            #     print("use rotate")
+            #     self.send({ "type": "setrotate"})
+            else:
+                print(mouse_mode)    
 
         def change_handler(change):
             button.button_style = 'primary' if change['new'] == mouse_mode else ''
@@ -367,7 +380,7 @@ def show(self):
                 ),
                 self.create_mouse_mode_toggle_button(
                     mouse_mode='directional',
-                    icon='crosshairs',
+                    icon='bullseye',
                     tooltip='Activate directional selection',
                 ),                                
                 self.create_mouse_mode_toggle_button(