Object properties panel: Use selected object name as the title (#540)

* Object properties panel: Use selected object name as the title

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update selected object between documents

* Select primitive on creation

* Update UI test

* Update Playwright Snapshots

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Duc Trung Le <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 4 people

packages/base/src/commands.ts

@@ -43,7 +43,7 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { PathExt } from '@jupyterlab/coreutils';
 import { MainViewModel } from './3dview/mainviewmodel';
 import { handleRemoveObject } from './panelview';
-
+import { v4 as uuid } from 'uuid';
 export function newName(type: string, model: IJupyterCadModel): string {
   const sharedModel = model.sharedModel;
 
@@ -241,6 +241,12 @@ export async function executeOperator(
   sharedModel.transact(() => {
     transaction(sharedModel);
   });
+  setTimeout(() => {
+    current.context.model.syncSelected(
+      { [objectModel.name]: { type: 'shape' } },
+      uuid()
+    );
+  }, 0); // doing the selection at the next tick
 }
 
 const OPERATORS = {
@@ -1217,9 +1223,10 @@ namespace Private {
             name: Name
           };
 
-          const sharedModel = current.context.model.sharedModel;
+          const jcadModel = current.context.model;
 
-          if (sharedModel) {
+          if (jcadModel) {
+            const sharedModel = jcadModel.sharedModel;
             if (!sharedModel.objectExists(objectModel.name)) {
               // Try a dry run with the update content to verify its feasibility
               const currentJcadContent = current.context.model.getContent();
@@ -1241,6 +1248,12 @@ namespace Private {
                 objectModel.shapeMetadata = objMeta;
               }
               sharedModel.addObject(objectModel);
+              setTimeout(() => {
+                jcadModel.syncSelected(
+                  { [objectModel.name]: { type: 'shape' } },
+                  uuid()
+                );
+              }, 0); // doing the selection at the next tick
             } else {
               showErrorMessage(
                 'The object already exists',

packages/base/src/panelview/objectproperties.tsx

@@ -75,22 +75,30 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
       if (changed) {
         this.props.cpModel.disconnect(this._sharedJcadModelChanged);
         this.props.cpModel.disconnect(this._onClientSharedStateChanged);
+        const currentModel = changed.context.model;
+        currentModel.sharedObjectsChanged.connect(this._sharedJcadModelChanged);
+        const clients = currentModel.sharedModel.awareness.getStates() as Map<
+          number,
+          IJupyterCadClientState
+        >;
 
-        changed.context.model.sharedObjectsChanged.connect(
-          this._sharedJcadModelChanged
-        );
-        changed.context.model.clientStateChanged.connect(
-          this._onClientSharedStateChanged
+        this.setState(
+          old => ({
+            jcadOption: undefined,
+            selectedObjectData: undefined,
+            selectedObject: undefined,
+            schema: undefined,
+            filePath: changed.context.localPath,
+            jcadObject: this.props.cpModel.jcadModel?.getAllObject(),
+            clientId: currentModel.getClientId()
+          }),
+          () => {
+            this._onClientSharedStateChanged(currentModel, clients);
+            currentModel.clientStateChanged.connect(
+              this._onClientSharedStateChanged
+            );
+          }
         );
-        this.setState(old => ({
-          jcadOption: undefined,
-          selectedObjectData: undefined,
-          selectedObject: undefined,
-          schema: undefined,
-          filePath: changed.context.localPath,
-          jcadObject: this.props.cpModel.jcadModel?.getAllObject(),
-          clientId: changed.context.model.getClientId()
-        }));
       } else {
         this.setState({
           jcadOption: undefined,
@@ -251,6 +259,7 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
         newState = localState;
       }
     }
+
     if (newState) {
       const selection = newState.selected.value;
       const selectedObjectNames = Object.keys(selection || {});
@@ -294,6 +303,13 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
           }));
         }
       }
+    } else {
+      this.setState(old => ({
+        ...old,
+        schema: undefined,
+        selectedObject: '',
+        selectedObjectData: undefined
+      }));
     }
   };
 

packages/base/src/panelview/rightpanel.tsx

@@ -1,6 +1,9 @@
 import {
   IJCadFormSchemaRegistry,
+  IJupyterCadClientState,
+  IJupyterCadModel,
   IJupyterCadTracker,
+  ISelection,
   JupyterCadDoc
 } from '@jupytercad/schema';
 import { SidePanel } from '@jupyterlab/ui-components';
@@ -24,11 +27,57 @@ export class RightPanelWidget extends SidePanel {
       tracker: options.tracker
     });
 
+    const updateTitle = (
+      sender: IJupyterCadModel,
+      clients: Map<number, IJupyterCadClientState>
+    ) => {
+      const localState = sender.localState;
+      if (!localState) {
+        return;
+      }
+
+      let selection: { [key: string]: ISelection } = {};
+      if (localState.remoteUser) {
+        // We are in following mode.
+        // Sync selections from a remote user
+        const remoteState = clients.get(localState.remoteUser);
+
+        if (remoteState?.selected?.value) {
+          selection = remoteState?.selected?.value;
+        }
+      } else if (localState.selected?.value) {
+        selection = localState.selected.value;
+      }
+      const selectionNames = Object.keys(selection);
+      if (selectionNames.length === 1) {
+        const selected = selectionNames[0];
+        if (selected.startsWith('edge-') && selection[selected].parent) {
+          header.title.label = selection[selected].parent;
+        } else {
+          header.title.label = selected;
+        }
+      } else {
+        header.title.label = 'No selection';
+      }
+    };
+
+    let currentModel: IJupyterCadModel | undefined = undefined;
     this.addWidget(properties);
     this._model.documentChanged.connect((_, changed) => {
       if (changed) {
+        if (currentModel) {
+          currentModel.clientStateChanged.disconnect(updateTitle);
+        }
+
         if (changed.context.model.sharedModel.editable) {
-          header.title.label = changed.context.localPath;
+          currentModel = changed.context.model;
+          const clients = currentModel.sharedModel.awareness.getStates() as Map<
+            number,
+            IJupyterCadClientState
+          >;
+          updateTitle(currentModel, clients);
+          currentModel.clientStateChanged.connect(updateTitle);
+
           properties.show();
         } else {
           header.title.label = `${changed.context.localPath} - Read Only`;

ui-tests/tests/ui.spec.ts

@@ -203,10 +203,6 @@ test.describe('UI Test', () => {
         .locator('[data-test-id="react-tree-root"]')
         .getByText('box2')
         .click();
-      await page
-        .locator('[data-test-id="react-tree-root"]')
-        .getByText('Shape')
-        .click();
       await page.getByLabel('Height*').click();
       await page.getByLabel('Height*').fill('32');
       await page.getByRole('button', { name: 'Submit' }).click();
@@ -310,7 +306,6 @@ test.describe('UI Test', () => {
         await page.getByTitle('New Box').getByRole('button').click();
         await page.getByRole('button', { name: 'Submit' }).click();
         await page.waitForTimeout(1000);
-        await page.getByText('Box 1').click();
         await page.locator('#tab-key-1-6').click();
 
         await page.waitForTimeout(1000);