Kitware · finetjul · Dec 16, 2024 · Sep 24, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
-venv/
-react-app/node_modules/*
+example/trame-app/.venv
+example/react-app/node_modules
+node_modules
+dist
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,15 @@
+Apache Software License 2.0
+
+Copyright (c) 2024, Kitware Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/react-app/package-lock.json → example/react-app/package-lock.json b/react-app/package-lock.json → example/react-app/package-lock.json
diff --git a/react-app/package.json → example/react-app/package.json b/react-app/package.json → example/react-app/package.json
@@ -3,12 +3,13 @@
   "version": "1.0.0",
   "description": "react-trame integration",
   "main": "/index.js",
-  "devDependencies": {},
   "dependencies": {
-    "react": "^18.0.0",
-    "react-icons": "^4.11.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^5.0.0"
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.0",
+    "trame-react": "/home/jules/projects/kitware/trame/repos/trame-react/dist/index.esm.js"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -26,4 +27,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/example/react-app/public/index.html b/example/react-app/public/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <title>React-trame integration App</title>
+
+</head>
+<style>
+html, body, #root {
+  height: 100%; /* Make the root container full height */
+  margin: 0;
+}
+
+.full-height {
+  height: 100%; /* Make the Page component full height */
+}
+
+.pf-v6-c-page__main-container {
+  height: 100%; /* Ensure the main content area fills the available height */
+  margin: 0;
+  padding: 0;
+}
+.pf-v6-c-page__main {
+  display: flex;
+  flex-direction: row !important;
+}
+
+.pf-v6-c-page__main-body {
+  height: 100%;
+}
+</style>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/example/react-app/src/App.js b/example/react-app/src/App.js
@@ -0,0 +1,23 @@
+import React from "react";
+import Viewer from "./Viewer";
+import { Page, PageSection } from '@patternfly/react-core';
+import '@patternfly/react-core/dist/styles/base.css';
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Page className="full-height">
+        <PageSection className="full-height" style={{ padding: "0px", width: "50%" }}>
+          <Viewer url="http://localhost:8080/" viewerId="viewer1" />
+        </PageSection>
+        <PageSection className="full-height" style={{ padding: "0px", width: "50%" }}>
+          <Viewer url="http://localhost:8081/" viewerId="viewer2" />
+        </PageSection>
+      </Page>
+    );
+  }
+}
diff --git a/example/react-app/src/Viewer.js b/example/react-app/src/Viewer.js
@@ -0,0 +1,184 @@
+import React, { useState, useEffect, useRef } from "react";
+import { TrameIframeApp } from "trame-react";
+import {
+  Button,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Slider,
+  Switch,
+} from "@patternfly/react-core";
+
+function debounce(func, wait) {
+  let timeout;
+
+  return function (...args) {
+    const context = this;
+
+    clearTimeout(timeout); // Clears the previous timeout
+    timeout = setTimeout(() => func.apply(context, args), wait); // Sets a new timeout
+  };
+}
+
+function deepEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
+  if (
+    typeof obj1 !== "object" ||
+    obj1 === null ||
+    typeof obj2 !== "object" ||
+    obj2 === null
+  )
+    return false;
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) return false;
+
+  for (let key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function stateIsSync(localState, trameState) {
+  const localStateKeys = Object.keys(localState);
+  const trameStatekeys = Object.keys(trameState);
+
+  for (let localKey of localStateKeys) {
+    if (!trameStatekeys.includes(localKey) || !deepEqual(localState[localKey], trameState[localKey])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+const Viewer = ({ viewerId, url }) => {
+  const trameCommunicator = useRef(null);
+  const synchronizeTrameState = useRef(null);
+
+  const [viewerState, setViewerState] = useState({
+    resolution: 20,
+    interaction_mode: "interact",
+  });
+
+  useEffect(() => {
+    synchronizeTrameState.current = debounce((viewerState) => {
+      if (!trameCommunicator.current) {
+        return;
+      }
+
+      trameCommunicator.current.state.get().then((trame_state) => {
+        if (!stateIsSync(viewerState, trame_state)) {
+          trameCommunicator.current.state.update(viewerState);
+        }
+      })
+    }, 25);
+  }, []);
+
+  useEffect(() => {
+    synchronizeTrameState.current(viewerState);
+  }, [viewerState]);
+
+  const resetCamera = (comm) => {
+    console.debug("resetting camera");
+    trameCommunicator.current.trigger("raise_error").catch((err) => {
+      throw err;
+    })
+    trameCommunicator.current.trigger("reset_camera");
+  };
+
+  const resetResolution = (comm) => {
+    console.debug("resetting resolution");
+    trameCommunicator.current.trigger("reset_resolution");
+  };
+
+  const onViewerReady = (comm) => {
+    trameCommunicator.current = comm;
+
+    trameCommunicator.current.state.onReady(() => {
+      trameCommunicator.current.state.watch(
+        ["interactor_settings"],
+        (interactor_settings) => {
+          console.log({ interactor_settings });
+        }
+      );
+
+      trameCommunicator.current.state.watch(["resolution", "interaction_mode"], (resolution, interaction_mode) => {
+        setViewerState((prevState) => ({
+          ...prevState,
+          resolution,
+          interaction_mode
+        }));
+      });
+    });
+  };
+
+  return (
+    <div className="viewer" style={{ height: "100%" }}>
+      <Toolbar style={{ height: "10%"}}>
+        <ToolbarContent>
+          <ToolbarItem>
+            <div style={{ "min-width": "200px" }}>
+              <Slider
+                min={3}
+                max={60}
+                step={1}
+                inputLabel="resolution"
+                value={viewerState.resolution}
+                onChange={
+                  (e, res) => {
+                    setViewerState((prevViewerState) => ({
+                      ...prevViewerState,
+                      resolution: res,
+                    }));
+                  }
+                }
+              />
+            </div>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="primary" onClick={(e) => resetCamera()}>
+              Reset Camera
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="primary" onClick={(e) => resetResolution()}>
+              Reset Resolution
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="primary" onClick={(e) => trameCommunicator.current.trigger("get_number_of_cells").then(console.log)}>
+              Get Number Of Cells
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Switch
+              label={viewerState.interaction_mode}
+              isChecked={viewerState.interaction_mode === "select"}
+              onChange={(e, checked) => {
+                setViewerState((prevViewerState) => ({
+                  ...prevViewerState,
+                  interaction_mode: checked ? "select" : "interact",
+                }))
+              }}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+
+      <TrameIframeApp
+        style={{ height: "80%"}}
+        iframeId={viewerId}
+        url={url}
+        onCommunicatorReady={onViewerReady}
+      />
+    </div>
+  );
+};
+
+export default Viewer;
diff --git a/react-app/src/index.js → example/react-app/src/index.js b/react-app/src/index.js → example/react-app/src/index.js