changes for integrate into bioimage.io

bioimage-io · Apr 23, 2024 · e9a10ab · e9a10ab
1 parent a85524b
commit e9a10ab
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 30 deletions.
diff --git a/src/components/RunPanel.vue b/src/components/RunPanel.vue
@@ -1,37 +1,39 @@
 <template>
     <div id="test-run-body">
-        <div class="model-selection">
-            <div class="model-selection-line">
-                <div class="model-selection-label">Model</div>
-                <ModelSelect :open="this.modelSelectEnable" />
+        <div id="test-run-panel">
+            <div class="model-selection">
+                <div class="model-selection-line">
+                    <div class="model-selection-label">Model</div>
+                    <ModelSelect :open="this.modelSelectEnable" />
+                </div>
+                <div class="model-selection-tips" v-if="!isPluginMode">ℹ️ Please visit <a href="https://bioimage.io/#/"
+                        target="_blank">bioimage.io</a> to view detailed information about the model.</div>
             </div>
-            <div class="model-selection-tips">ℹ️ Please visit <a href="https://bioimage.io/#/"
-                    target="_blank">bioimage.io</a> to view detailed information about the model.</div>
-        </div>
-        <div id="buttons">
-            <Button :disabled="!this.buttonEnabledInput" @click="this.loadTestInput">
-                Load sample image
-            </Button>
-            <Button class="is-primary" :disabled="!this.buttonEnabledRun" @click="this.runModel">
-                Run model
-            </Button>
-            <Button :disabled="!this.buttonEnabledOutput" @click="this.loadTestOutput">
-                Show reference output
-            </Button>
-        </div>
-        <ModelParameters :overlay="waiting" />
-        <HideContainer :summary="'Advanced settings'">
-            <OverlayContainer :open="waiting">
-                <AdvanceSetting />
-            </OverlayContainer>
-        </HideContainer>
-        <div id="info">
-            <LoadingAnimation v-if="this.waiting" />
-            <div v-else-if="$props.ij === null">
-                <span>💡Tip: Drag and drop your own image file below to try out the
-                    model. We support formats like .tiff, .png, and .jpg</span>
+            <div id="buttons">
+                <Button :disabled="!this.buttonEnabledInput" @click="this.loadTestInput">
+                    Load sample image
+                </Button>
+                <Button class="is-primary" :disabled="!this.buttonEnabledRun" @click="this.runModel">
+                    Run model
+                </Button>
+                <Button :disabled="!this.buttonEnabledOutput" @click="this.loadTestOutput">
+                    Show reference output
+                </Button>
+            </div>
+            <ModelParameters :overlay="waiting" />
+            <HideContainer :summary="'Advanced settings'">
+                <OverlayContainer :open="waiting">
+                    <AdvanceSetting />
+                </OverlayContainer>
+            </HideContainer>
+            <div id="info">
+                <LoadingAnimation v-if="this.waiting" />
+                <div v-else-if="$props.ij === null">
+                    <span>💡Tip: Drag and drop your own image file below to try out the
+                        model. We support formats like .tiff, .png, and .jpg</span>
+                </div>
+                <div id="info-panel" :style="{ color: infoColor }">{{ this.info }}</div>
             </div>
-            <div id="info-panel" :style="{ color: infoColor }">{{ this.info }}</div>
         </div>
         <div id="ij-container" v-if="newIjWindow"></div>
     </div>
@@ -292,6 +294,8 @@ export default {
             }
         )
 
+        const isPluginMode = window.self !== window.top;
+
         return {
             waiting,
             error,
@@ -305,6 +309,7 @@ export default {
             initModel,
             runModel,
             newIjWindow,
+            isPluginMode,
         }
     },
     data: () => ({

diff --git a/src/main.js b/src/main.js
@@ -196,6 +196,19 @@ async function initImJoy() {
     const imjoyRPC = await loadImJoyRPC();
     const api = await imjoyRPC.setupRPC({ name: "bioengine-web-client" });
     window.app.imjoy = api;
+    const observer = new MutationObserver(async (mutations) => {
+      const runPanel = document.getElementById("test-run-panel");
+      if (api.resizeWindow) {
+        const htmlElement = document.documentElement;
+        htmlElement.style.overflow = "hidden";
+        await api.resizeWindow("100%", runPanel.clientHeight+"px");
+      }
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true
+    });
     const clientApi = await createImjoyApi(api)
     await api.export(clientApi);
     window.app.client = clientApi;