Floating side panels

Author: Gauss-Taylor-Euler

package.json

@@ -72,5 +72,8 @@
     "rimraf": "^3.0.2",
     "typescript": "^5",
     "webpack": "^5.76.3"
+  },
+  "dependencies": {
+    "react-rnd": "^10.5.2"
   }
 }

packages/base/src/Lumino.tsx

@@ -0,0 +1,43 @@
+import { Widget } from '@lumino/widgets';
+import * as React from 'react';
+
+type LuminoProps = {
+  id?: string;
+  height?: string | number;
+  children: Widget;
+};
+
+export const Lumino = (props: LuminoProps) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { children, id, height } = props;
+  React.useEffect(() => {
+    if (ref && ref.current) {
+      try {
+        Widget.attach(children, ref.current);
+      } catch (e) {
+        console.warn('Exception while attaching Lumino widget.', e);
+      }
+      return () => {
+        try {
+          if (children.isAttached || children.node.isConnected) {
+            children.dispose();
+            Widget.detach(children);
+          }
+        } catch (e) {
+          // no-op.
+          //          console.debug('Exception while detaching Lumino widget.', e);
+        }
+      };
+    }
+  }, [ref, children]);
+  return (
+    <div id={id} ref={ref} style={{ height: height, minHeight: height }} />
+  );
+};
+
+Lumino.defaultProps = {
+  id: 'lumino-id',
+  height: '100%',
+};
+
+export default Lumino;

packages/base/src/annotations/components/Annotation.tsx

@@ -9,13 +9,12 @@ import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useMemo, useState } from 'react';
 
-import { IControlPanelModel } from '@/src/types';
 import { Message } from './Message';
 
 export interface IAnnotationProps {
   itemId: string;
   annotationModel: IAnnotationModel;
-  rightPanelModel?: IControlPanelModel;
+  rightPanelModel?: IJupyterGISModel;
   children?: JSX.Element[] | JSX.Element;
 }
 
@@ -26,20 +25,10 @@ const Annotation: React.FC<IAnnotationProps> = ({
   children,
 }) => {
   const [messageContent, setMessageContent] = useState('');
-  const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    rightPanelModel?.jGISModel,
-  );
-
+  const jgisModel = rightPanelModel;
   const annotation = annotationModel.getAnnotation(itemId);
   const contents = useMemo(() => annotation?.contents ?? [], [annotation]);
 
-  /**
-   * Update the model when it changes.
-   */
-  rightPanelModel?.documentChanged.connect((_, widget) => {
-    setJgisModel(widget?.model);
-  });
-
   const handleSubmit = () => {
     annotationModel.addContent(itemId, messageContent);
     setMessageContent('');