Make embedded side panels draggable

package.json

@@ -69,6 +69,7 @@
     "lerna": "^8.1.9",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
+    "react-draggable": "^4.5.0",
     "rimraf": "^3.0.2",
     "typescript": "^5",
     "webpack": "^5.76.3"

packages/base/src/icons.ts

@@ -9,6 +9,7 @@ import { LabIcon } from '@jupyterlab/ui-components';
 
 import bookOpenSvgStr from '../style/icons/book_open.svg';
 import clockSvgStr from '../style/icons/clock-solid.svg';
+import dragSvgStr from '../style/icons/drag.svg';
 import geoJsonSvgStr from '../style/icons/geojson.svg';
 import geolocationSvgStr from '../style/icons/geolocation.svg';
 import infoSvgStr from '../style/icons/info-solid.svg';
@@ -115,3 +116,8 @@ export const markerIcon = new LabIcon({
   name: 'jupytergis::marker',
   svgstr: markerSvgStr,
 });
+
+export const dragIcon = new LabIcon({
+  name: 'jupytergis::drag',
+  svgstr: dragSvgStr,
+});

packages/base/src/panelview/leftpanel.tsx

@@ -3,7 +3,9 @@ import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { MouseEvent as ReactMouseEvent } from 'react';
 import * as React from 'react';
+import Draggable from 'react-draggable';
 
+import { dragIcon } from '../icons';
 import { LayersBodyComponent } from './components/layers';
 import {
   PanelTabs,
@@ -62,55 +64,60 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
   );
 
   return (
-    <div
-      className="jgis-left-panel-container"
-      style={{ display: leftPanelVisible ? 'block' : 'none' }}
-    >
-      <PanelTabs curTab={curTab} className="jgis-panel-tabs">
-        <TabsList>
-          {tabInfo.map(tab => (
-            <TabsTrigger
-              className="jGIS-layer-browser-category"
-              key={tab.name}
-              value={tab.name}
-              onClick={() => {
-                if (curTab !== tab.name) {
-                  setCurTab(tab.name);
-                } else {
-                  setCurTab('');
-                }
-              }}
-            >
-              {tab.title}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+    <Draggable handle=".jgis-drag-handle" bounds=".jGIS-Mainview-Container">
+      <div
+        className="jgis-left-panel-container"
+        style={{ display: leftPanelVisible ? 'block' : 'none' }}
+      >
+        <div className="jgis-drag-handle">
+          <dragIcon.react tag="div" className="jgis-drag-icon" />
+        </div>
+        <PanelTabs curTab={curTab} className="jgis-panel-tabs">
+          <TabsList>
+            {tabInfo.map(tab => (
+              <TabsTrigger
+                className="jGIS-layer-browser-category"
+                key={tab.name}
+                value={tab.name}
+                onClick={() => {
+                  if (curTab !== tab.name) {
+                    setCurTab(tab.name);
+                  } else {
+                    setCurTab('');
+                  }
+                }}
+              >
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
 
-        {!settings.layersDisabled && (
-          <TabsContent
-            value="layers"
-            className="jgis-panel-tab-content jp-gis-layerPanel"
-          >
-            <LayersBodyComponent
-              model={props.model}
-              commands={props.commands}
-              state={props.state}
-            ></LayersBodyComponent>
-          </TabsContent>
-        )}
+          {!settings.layersDisabled && (
+            <TabsContent
+              value="layers"
+              className="jgis-panel-tab-content jp-gis-layerPanel"
+            >
+              <LayersBodyComponent
+                model={props.model}
+                commands={props.commands}
+                state={props.state}
+              ></LayersBodyComponent>
+            </TabsContent>
+          )}
 
-        {!settings.stacBrowserDisabled && (
-          <TabsContent value="stac" className="jgis-panel-tab-content">
-            <StacPanel model={props.model} />
-          </TabsContent>
-        )}
+          {!settings.stacBrowserDisabled && (
+            <TabsContent value="stac" className="jgis-panel-tab-content">
+              <StacPanel model={props.model} />
+            </TabsContent>
+          )}
 
-        {!settings.filtersDisabled && (
-          <TabsContent value="filters" className="jgis-panel-tab-content">
-            <FilterComponent model={props.model}></FilterComponent>
-          </TabsContent>
-        )}
-      </PanelTabs>
-    </div>
+          {!settings.filtersDisabled && (
+            <TabsContent value="filters" className="jgis-panel-tab-content">
+              <FilterComponent model={props.model}></FilterComponent>
+            </TabsContent>
+          )}
+        </PanelTabs>
+      </div>
+    </Draggable>
   );
 };

packages/base/src/panelview/rightpanel.tsx

@@ -5,10 +5,12 @@ import {
   IJupyterGISModel,
 } from '@jupytergis/schema';
 import * as React from 'react';
+import Draggable from 'react-draggable';
 
 import { AnnotationsPanel } from './annotationPanel';
 import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
 import { ObjectPropertiesReact } from './objectproperties';
+import { dragIcon } from '../icons';
 import {
   PanelTabs,
   TabsContent,
@@ -83,61 +85,69 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
     React.useState(undefined);
 
   return (
-    <div
-      className="jgis-right-panel-container"
-      style={{ display: rightPanelVisible ? 'block' : 'none' }}
-    >
-      <PanelTabs className="jgis-panel-tabs" curTab={curTab}>
-        <TabsList>
-          {tabInfo.map(tab => (
-            <TabsTrigger
-              className="jGIS-layer-browser-category"
-              key={tab.name}
-              value={tab.name}
-              onClick={() => {
-                if (curTab !== tab.name) {
-                  setCurTab(tab.name);
-                } else {
-                  setCurTab('');
-                }
-              }}
-            >
-              {tab.title}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+    <Draggable handle=".jgis-drag-handle" bounds=".jGIS-Mainview-Container">
+      <div
+        className="jgis-right-panel-container"
+        style={{ display: rightPanelVisible ? 'block' : 'none' }}
+      >
+        <div className="jgis-drag-handle">
+          <dragIcon.react tag="div" className="jgis-drag-icon" />
+        </div>
+        <PanelTabs className="jgis-panel-tabs" curTab={curTab}>
+          <TabsList>
+            {tabInfo.map(tab => (
+              <TabsTrigger
+                className="jGIS-layer-browser-category"
+                key={tab.name}
+                value={tab.name}
+                onClick={() => {
+                  if (curTab !== tab.name) {
+                    setCurTab(tab.name);
+                  } else {
+                    setCurTab('');
+                  }
+                }}
+              >
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
 
-        {!settings.objectPropertiesDisabled && (
-          <TabsContent
-            value="objectProperties"
-            className="jgis-panel-tab-content"
-          >
-            <ObjectPropertiesReact
-              setSelectedObject={setSelectedObjectProperties}
-              selectedObject={selectedObjectProperties}
-              formSchemaRegistry={props.formSchemaRegistry}
-              model={props.model}
-            />
-          </TabsContent>
-        )}
+          {!settings.objectPropertiesDisabled && (
+            <TabsContent
+              value="objectProperties"
+              className="jgis-panel-tab-content"
+            >
+              <ObjectPropertiesReact
+                setSelectedObject={setSelectedObjectProperties}
+                selectedObject={selectedObjectProperties}
+                formSchemaRegistry={props.formSchemaRegistry}
+                model={props.model}
+              />
+            </TabsContent>
+          )}
 
-        {!settings.annotationsDisabled && (
-          <TabsContent value="annotations" className="jgis-panel-tab-content">
-            <AnnotationsPanel
-              annotationModel={props.annotationModel}
-              jgisModel={props.model}
-            ></AnnotationsPanel>
-          </TabsContent>
-        )}
+          {!settings.annotationsDisabled && (
+            <TabsContent value="annotations" className="jgis-panel-tab-content">
+              <AnnotationsPanel
+                annotationModel={props.annotationModel}
+                jgisModel={props.model}
+              ></AnnotationsPanel>
+            </TabsContent>
+          )}
 
-        {!settings.identifyDisabled && (
-          <TabsContent value="identifyPanel" className="jgis-panel-tab-content">
-            <IdentifyPanelComponent
-              model={props.model}
-            ></IdentifyPanelComponent>
-          </TabsContent>
-        )}
-      </PanelTabs>
-    </div>
+          {!settings.identifyDisabled && (
+            <TabsContent
+              value="identifyPanel"
+              className="jgis-panel-tab-content"
+            >
+              <IdentifyPanelComponent
+                model={props.model}
+              ></IdentifyPanelComponent>
+            </TabsContent>
+          )}
+        </PanelTabs>
+      </div>
+    </Draggable>
   );
 };

packages/base/style/shared/tabs.css

@@ -10,6 +10,41 @@
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 5px;
 }
+
+.jgis-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  color: var(--jp-ui-font-color2);
+  user-select: none;
+}
+
+.jgis-drag-handle:active {
+  cursor: grabbing;
+}
+
+.jgis-drag-handle i {
+  pointer-events: none;
+}
+
+.jgis-drag-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.jgis-drag-icon svg {
+  width: 14px;
+  height: 14px;
+  color: var(--jp-ui-font-color2);
+}
+
 .jgis-tabs-list {
   display: inline-flex;
   height: 2.5rem;

yarn.lock

@@ -1131,6 +1131,7 @@ __metadata:
     lerna: ^8.1.9
     npm-run-all: ^4.1.5
     prettier: ^3.0.0
+    react-draggable: ^4.5.0
     rimraf: ^3.0.2
     typescript: ^5
     webpack: ^5.76.3
@@ -11794,7 +11795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-draggable@npm:^4.4.5":
+"react-draggable@npm:^4.4.5, react-draggable@npm:^4.5.0":
   version: 4.5.0
   resolution: "react-draggable@npm:4.5.0"
   dependencies: