fix unique_viewer_id for notebook cells and minor cosmetic updates fo…

…r frontend and frontend code refactor/cleanup

examples/notebooks/beam.ipynb

@@ -2,44 +2,35 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
    "id": "initial_id",
-   "metadata": {
-    "ExecuteTime": {
-     "end_time": "2024-09-26T11:31:56.463822Z",
-     "start_time": "2024-09-26T11:31:55.881280Z"
-    }
-   },
-   "outputs": [],
+   "metadata": {},
    "source": [
     "import ada"
-   ]
+   ],
+   "outputs": [],
+   "execution_count": null
   },
   {
    "cell_type": "code",
-   "execution_count": null,
    "id": "30bd99f29d581872",
-   "metadata": {
-    "ExecuteTime": {
-     "start_time": "2024-09-26T11:32:17.897455Z"
-    }
-   },
-   "outputs": [],
+   "metadata": {},
    "source": [
     "bm = ada.Beam('bm1', (0,0,0), (1,0,0), 'IPE300')\n",
-    "bm.show(unique_id=334)"
-   ]
+    "bm.show(unique_viewer_id=350)"
+   ],
+   "outputs": [],
+   "execution_count": null
   },
   {
    "cell_type": "code",
-   "execution_count": null,
    "id": "d28bbc15-b248-4758-98c8-32ff841855e6",
    "metadata": {},
-   "outputs": [],
    "source": [
-    "bm = ada.Beam('bm1', (0,0,0), (1,0,0), 'IPE300')\n",
-    "bm.show(unique_id=400)"
-   ]
+    "bm = ada.Beam('bm1', (0,0,0), (3,0,0), 'IPE300')\n",
+    "bm.show(unique_viewer_id=400)"
+   ],
+   "outputs": [],
+   "execution_count": null
   }
  ],
  "metadata": {

examples/scripts/view_gxml_geom.py

@@ -9,7 +9,7 @@
 def run_this():
     a = ada.from_genie_xml(ROOT_DIR / "files/fem_files/sesam/curved_plates.xml")
 
-    a.show(add_ifc_backend=True, unique_id=1)
+    a.show(add_ifc_backend=True, unique_viewer_id=1)
 
 
 if __name__ == "__main__":

src/ada/base/physical_objects.py

@@ -171,7 +171,7 @@ def show(
         server_exe: pathlib.Path = None,
         server_args: list[str] = None,
         run_ws_in_thread=False,
-        unique_id=None,
+        unique_viewer_id=None,
         stream_from_ifc_store=True,
         purpose: FilePurposeDC = FilePurposeDC.DESIGN,
         add_ifc_backend=False,
@@ -192,7 +192,7 @@ def show(
 
         if params_override is None:
             params_override = RenderParams(
-                unique_id=unique_id,
+                unique_id=unique_viewer_id,
                 auto_sync_ifc_store=auto_sync_ifc_store,
                 stream_from_ifc_store=stream_from_ifc_store,
                 add_ifc_backend=add_ifc_backend,

src/ada/comms/wsock_server.py

@@ -143,7 +143,10 @@ async def handle_message(
 
         if self.on_message and msg.command_type not in [CommandTypeDC.PING, CommandTypeDC.PONG]:
             # Offload to a separate thread
-            await asyncio.to_thread(self.on_message, self, client, message)
+            try:
+                await asyncio.to_thread(self.on_message, self, client, message)
+            except Exception as e:
+                logger.error(f"Error occurred while processing message: {e}")
 
     async def forward_message(
         self, message: str | bytes, sender: ConnectedClient, msg: MessageDC, is_forwarded_message=False
@@ -174,21 +177,21 @@ async def forward_message(
             message_sent = True
 
         if not message_sent and msg.command_type == CommandTypeDC.UPDATE_SCENE:
-            logger.debug("No clients to forward message to. Starting retry mechanism.")
+            logger.debug(f"No clients to forward message {msg} to. Starting retry mechanism.")
             asyncio.create_task(self.on_unsent_message(self, message, sender, msg, 3))
             return False
 
         return True
 
     async def start_async(self):
-        """Run the server asynchronously. Blocks until the server is stopped."""
-        self.server = await websockets.serve(self.handle_client, self.host, self.port, max_size=10**9)
+        """Run the server asynchronously. Blocks until the server is stopped. Max size is set to 10MB."""
+        self.server = await websockets.serve(self.handle_client, self.host, self.port, max_size=10**7)
         logger.debug(f"WebSocket server started on ws://{self.host}:{self.port}")
         await self.server.wait_closed()
 
     async def start_async_non_blocking(self):
-        """Start the server asynchronously. Does not block the event loop."""
-        self.server = await websockets.serve(self.handle_client, self.host, self.port, max_size=10**9)
+        """Start the server asynchronously. Does not block the event loop. Max size is set to 10MB."""
+        self.server = await websockets.serve(self.handle_client, self.host, self.port, max_size=10**7)
         print(f"WebSocket server started on ws://{self.host}:{self.port}")
         # Do not call await self.server.wait_closed() here
 

src/ada/visit/renderer_manager.py

@@ -7,7 +7,7 @@
 import numpy as np
 import trimesh
 
-from ada.comms.fb_model_gen import FilePurposeDC, SceneOperationDC, SceneOperationsDC
+from ada.comms.fb_model_gen import FilePurposeDC, SceneOperationDC, SceneOperationsDC, FileObjectDC, FileTypeDC
 
 if TYPE_CHECKING:
     from IPython.display import HTML
@@ -204,7 +204,11 @@ def ensure_liveness(self, wc, target_id=None) -> None | HTML:
         if self.renderer == "react":
             from ada.visit.rendering.renderer_react import RendererReact
 
-            renderer = RendererReact().show()
+            renderer_obj = RendererReact()
+            if self.is_in_notebook():
+                renderer = renderer_obj.get_notebook_renderer_widget(target_id=target_id)
+            else:
+                renderer = renderer_obj.show()
 
         return renderer
 
@@ -216,7 +220,7 @@ def render(self, obj: BackendGeom | Part | Assembly | FEAResult, params: RenderP
 
         # Set up the renderer and WebSocket server
         self.start_server()
-
+        # target_id = params.unique_id
         if self.is_in_notebook():
             target_id = params.unique_id
         else:
@@ -248,4 +252,19 @@ def render(self, obj: BackendGeom | Part | Assembly | FEAResult, params: RenderP
                 target_id=target_id,
             )
 
+            if params.add_ifc_backend is True and type(obj) is Assembly:
+                if params.backend_file_dir is None:
+                    backend_file_dir = pathlib.Path.cwd() / "temp"
+                else:
+                    backend_file_dir = params.backend_file_dir
+
+                if isinstance(backend_file_dir, str):
+                    backend_file_dir = pathlib.Path(backend_file_dir)
+
+                ifc_file = backend_file_dir / f"{obj.name}.ifc"
+                obj.to_ifc(ifc_file)
+
+                wc.update_file_server(FileObjectDC(name=obj.name, file_type=FileTypeDC.IFC, purpose=FilePurposeDC.DESIGN, filepath=ifc_file))
+
+
         return renderer_instance

src/frontend/src/app.tsx

@@ -2,39 +2,42 @@
 import "./app.css";
 import React from 'react'
 import CanvasComponent from './components/viewer/CanvasComponent';
-import NavBar from './components/NavBar';
-import {useNavBarStore} from './state/navBarStore';
-import {sendMessage} from "./utils/websocket_connector";
-import ResizableTreeView from './components/viewer/ResizableTreeView'; // Import the new component
+import Menu from './components/Menu';
+import OptionsComponent from './components/OptionsComponent';
+import {useOptionsStore} from './state/optionsStore';
 
+import ResizableTreeView from './components/tree_view/ResizableTreeView';
+import {useNodeEditorStore} from "./state/nodeEditorStore";
+import NodeEditorComponent from "./components/NodeEditorComponent"; // Import the new component
 
-function App() {
-    const {isNavBarVisible, setIsNavBarVisible} = useNavBarStore(); // use the useNavBarStore function
 
+function App() {
+    const {isOptionsVisible} = useOptionsStore(); // use the useNavBarStore function
+    const {isNodeEditorVisible} = useNodeEditorStore();
 
     return (
         <div className={"relative flex flex-row h-full w-full bg-gray-900"}>
-            <div className={isNavBarVisible ? "w-60" : "w-0 overflow-hidden"}>
-                <NavBar setIsNavBarVisible={setIsNavBarVisible} sendMessage={sendMessage}/>
-            </div>
-
             {/* Tree View Section */}
             <div className={"relative h-full"}>
-                <ResizableTreeView />
+                <ResizableTreeView/>
             </div>
 
+            <div className={"relative top-0 left-0"}>
+                <Menu/>
+            </div>
 
-
-            <div className={isNavBarVisible ? "flex-1" : "w-full h-full"}>
+            <div className={"w-full h-full"}>
                 <CanvasComponent/>
             </div>
 
-            {!isNavBarVisible && (
-                <button
-                    className={"absolute bottom-0 left-0 bg-blue-700 hover:bg-blue-700/50 text-white font-bold py-2 px-4 rounded"}
-                    onClick={() => setIsNavBarVisible(true)}
-                >☰</button>
+            {/* Only render NodeEditorComponent if it's visible */}
+            {isNodeEditorVisible && <NodeEditorComponent/>}
+
+            {/* Only render NavBar if it's visible */}
+            {isOptionsVisible && (
+                <OptionsComponent/>
             )}
+
         </div>
     );
 }

src/frontend/src/components/Menu.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {toggle_info_panel} from "../utils/info_panel_utils";
+import ObjectInfoBox from "./info_box/ObjectInfoBoxComponent";
+import {useObjectInfoStore} from "../state/objectInfoStore";
+import AnimationControls from "./viewer/AnimationControls";
+import {useNodeEditorStore} from "../state/nodeEditorStore";
+import {useAnimationStore} from "../state/animationStore";
+import {useOptionsStore} from "../state/optionsStore";
+import {useTreeViewStore} from "../state/treeViewStore";
+
+const graph_btn_svg = <svg width="24px" height="24px" strokeWidth="1.5" viewBox="0 0 24 24" fill="none"
+                           xmlns="http://www.w3.org/2000/svg" color="currentColor">
+    <rect width="7" height="5" rx="0.6" transform="matrix(0 -1 -1 0 22 21)" stroke="currentColor" strokeWidth="1.5"></rect>
+    <rect width="7" height="5" rx="0.6" transform="matrix(0 -1 -1 0 7 15.5)" stroke="currentColor" strokeWidth="1.5"></rect>
+    <rect width="7" height="5" rx="0.6" transform="matrix(0 -1 -1 0 22 10)" stroke="currentColor" strokeWidth="1.5"></rect>
+    <path d="M17 17.5H13.5C12.3954 17.5 11.5 16.6046 11.5 15.5V8.5C11.5 7.39543 12.3954 6.5 13.5 6.5H17"
+          stroke="currentColor" strokeWidth="1.5"></path>
+    <path d="M11.5 12H7" stroke="currentColor" strokeWidth="1.5"></path>
+</svg>
+const info_svg = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+                      stroke="currentColor" className="w-6 h-6">
+    <path strokeLinecap="round" strokeLinejoin="round"
+          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
+</svg>
+const tree_view = <svg fill="currentColor" width="24px" height="24px" viewBox="0 0 36 36" version="1.1"
+                       preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
+>
+    <title>tree-view-line</title>
+    <path d="M15,32H11a1,1,0,0,1-1-1V27a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4A1,1,0,0,1,15,32Zm-3-2h2V28H12Z"
+          className="clr-i-outline clr-i-outline-path-1"></path>
+    <path
+        d="M15,16H11a1,1,0,0,0-1,1v1.2H5.8V12H7a1,1,0,0,0,1-1V7A1,1,0,0,0,7,6H3A1,1,0,0,0,2,7v4a1,1,0,0,0,1,1H4.2V29.8h6.36a.8.8,0,0,0,0-1.6H5.8V19.8H10V21a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V17A1,1,0,0,0,15,16ZM4,8H6v2H4ZM14,20H12V18h2Z"
+        className="clr-i-outline clr-i-outline-path-2"></path>
+    <path d="M34,9a1,1,0,0,0-1-1H10v2H33A1,1,0,0,0,34,9Z" className="clr-i-outline clr-i-outline-path-3"></path>
+    <path d="M33,18H18v2H33a1,1,0,0,0,0-2Z" className="clr-i-outline clr-i-outline-path-4"></path>
+    <path d="M33,28H18v2H33a1,1,0,0,0,0-2Z" className="clr-i-outline clr-i-outline-path-5"></path>
+    <rect x="0" y="0" width="36" height="36" fillOpacity="0"/>
+</svg>
+
+const Menu = () => {
+    const {show_info_box} = useObjectInfoStore();
+    const {isNodeEditorVisible, setIsNodeEditorVisible} = useNodeEditorStore();
+    const {hasAnimation} = useAnimationStore();
+    const {isOptionsVisible, setIsOptionsVisible} = useOptionsStore(); // use the useNavBarStore function
+    const {isCollapsed, setIsCollapsed} = useTreeViewStore();
+
+    return (
+        <div className="relative w-full h-full">
+            <div className="absolute left-0 top-0 z-10 py-2 flex flex-col">
+                <div className={"w-full h-full flex flex-row"}>
+
+                    <button
+                        className={"bg-blue-700 hover:bg-blue-700/50 text-white font-bold py-2 px-4 ml-2 rounded"}
+                        onClick={() => setIsOptionsVisible(!isOptionsVisible)}
+                    >☰
+                    </button>
+                    <button
+                        className="bg-blue-700 hover:bg-blue-700/50 text-white font-bold py-2 px-4 ml-2 rounded"
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                    >
+                        {tree_view}
+                    </button>
+
+                    <button
+                        className={"bg-blue-700 hover:bg-blue-700/50 text-white font-bold py-2 px-4 ml-2 rounded"}
+                        onClick={() => setIsNodeEditorVisible(!isNodeEditorVisible)}
+                    >
+                        {graph_btn_svg}
+                    </button>
+                    <button
+                        className={"bg-blue-700 hover:bg-blue-700/50 text-white font-bold py-2 px-4 ml-2 rounded"}
+                        onClick={toggle_info_panel}
+                    >{info_svg}</button>
+                    <div className="relative">
+                        {hasAnimation && <AnimationControls/>}
+                    </div>
+
+                </div>
+                {show_info_box && <ObjectInfoBox/>}
+            </div>
+        </div>
+    );
+}
+
+export default Menu;