From cfa5297a23e0cdaa86c29057cc77efc057a7a140 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Tue, 9 Feb 2021 12:45:48 +0000
Subject: [PATCH] Added an "open in kaibu" link

---
 .../galleryComponents/captureCard.vue         |  10 ++
 .../tabContentComponents/imjoyContent.vue     | 154 +++++++++++-------
 .../api/static/src/store.js                   |   8 +-
 3 files changed, 114 insertions(+), 58 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
index f3f1d2ba..e7ce0bd1 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
@@ -41,6 +41,13 @@
       >
         <a :href="metadataModalTarget" uk-toggle>More...</a>
       </div>
+      <ul>
+        <li v-for="item in openInImjoyMenuItems" :key="item">
+          <a href="#" @click="item.callback(name, imgURL)"
+            ><i class="material-icons">launch</i>{{ item.title }}</a
+          >
+        </li>
+      </ul>
     </div>
 
     <div class="uk-card-footer uk-padding-small">
@@ -207,6 +214,9 @@ export default {
   },
 
   computed: {
+    openInImjoyMenuItems: function() {
+      return this.$store.state.openInImjoyMenuItems
+    },
     tagModalID: function() {
       return this.makeModalName("tag-modal-");
     },
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue
index f3a2e0f0..2b136432 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue
@@ -4,101 +4,143 @@
     <button class="uk-button uk-button-default" type="button">Plugins</button>
     <div uk-dropdown>
       <ul class="uk-nav uk-dropdown-nav">
-          <li><a href="#" @click="loadPluginDialog()">Load Plugin</a></li>
-          <li class="uk-nav-divider"></li>
-          <li><a href="#" @click="runPlugin(p)" v-for="(p, name) in loadedPlugins" :key="p.id"><i class="material-icons">extension</i>{{name}}</a></li>
-          <li class="uk-nav-divider"></li>
-          <li><a href="#" @click="activeWindow=w" v-for="w in windows" :key="w.id"><i class="material-icons">launch</i>{{w.name}}</a></li>
+        <li><a href="#" @click="loadPluginDialog()">Load Plugin</a></li>
+        <li class="uk-nav-divider"></li>
+        <li>
+          <a
+            v-for="(p, name) in loadedPlugins"
+            :key="p.id"
+            href="#"
+            @click="runPlugin(p)"
+            ><i class="material-icons">extension</i>{{ name }}</a
+          >
+        </li>
+        <li class="uk-nav-divider"></li>
+        <li>
+          <a v-for="w in windows" :key="w.id" href="#" @click="activeWindow = w"
+            ><i class="material-icons">launch</i>{{ w.name }}</a
+          >
+        </li>
       </ul>
     </div>
 
-    <div v-show="w===activeWindow" v-for="w in windows" class="uk-card uk-card-body imjoy-container-card" :key="w.id">
-        <h3 class="uk-card-title">{{w.name}}</h3>
-        <div class="window-container" :id="w.window_id">
-          
-        </div>
+    <div
+      v-for="w in windows"
+      v-show="w === activeWindow"
+      :key="w.id"
+      class="uk-card uk-card-body imjoy-container-card"
+    >
+      <h3 class="uk-card-title">{{ w.name }}</h3>
+      <div :id="w.window_id" class="window-container"></div>
     </div>
 
-    <div class="progress uk-margin-small" v-show="loading">
+    <div v-show="loading" class="progress uk-margin-small">
       <div class="indeterminate"></div>
     </div>
   </div>
 </template>
 
-
-
 <script>
-
-import * as imjoyCore from 'imjoy-core';
+import * as imjoyCore from "imjoy-core";
 
 export default {
   name: "ImJoyContent",
 
-  components: {
-  },
-  data(){
+  components: {},
+  data() {
     return {
       windows: {},
       loading: false,
       loadedPlugins: {},
       activeWindow: null
-    }
+    };
   },
-  mounted(){
+  mounted() {
     const imjoy = new imjoyCore.ImJoy({
-        imjoy_api: {},
-        //imjoy config
+      imjoy_api: {}
+      //imjoy config
+    });
+
+    imjoy.start({ workspace: "default" }).then(async () => {
+      console.log("ImJoy started");
+      imjoy.event_bus.on("add_window", async w => {
+        this.addWindow(w);
+      });
+      await this.loadPlugin("https://kaibu.org/#/app");
     });
-    
-    imjoy.start({workspace: 'default'}).then(async ()=>{
-        console.log('ImJoy started');
-        imjoy.event_bus.on("add_window", async (w) => {
-          this.addWindow(w);
-        })
-        await this.loadPlugin("https://kaibu.org/#/app");
-    })
     this.imjoy = imjoy;
   },
-  methods:{
+  methods: {
     addWindow(w) {
       this.windows = this.windows || {};
       this.windows[w.window_id] = w;
       this.activeWindow = w;
       this.$forceUpdate();
     },
-    loadPlugin(uri){
-      this.loading = true
-      this.imjoy.pm.reloadPluginRecursively({
+    loadPlugin(uri) {
+      this.loading = true;
+      this.imjoy.pm
+        .reloadPluginRecursively({
           uri
-      }).then(async (plugin) => {
-        this.loadedPlugins[plugin.name] = plugin;
-        this.loading = false
-      }).catch((e) => {
-        console.error(e)
-        this.loading = false
-        alert(`failed to load the plugin, error: ${e}`)
-      })
+        })
+        .then(async plugin => {
+          this.loadedPlugins[plugin.name] = plugin;
+          this.registerOpenInImJoy(plugin);
+          this.loading = false;
+        })
+        .catch(e => {
+          console.error(e);
+          this.loading = false;
+          alert(`failed to load the plugin, error: ${e}`);
+        });
     },
-    async runPlugin(plugin){
-      await plugin.api.run()
+    registerOpenInImJoy(plugin) {
+      let item;
+      // TODO: improve this using the ImJoy `api.getServices`
+      // See here: https://imjoy.io/docs/#/api?id=apigetservices
+      // The idea is that plugins can register custom services via `api.registerService`
+      // For example, we can have a image visualization service
+      // Then other plugins can use `api.getServices` to get a list of services
+      // And this can be used for render our "Open In ImJoy" menu
+      if (plugin.name === "Kaibu") {
+        item = {
+          title: "Kaibu",
+          async callback(name, imageUrl) {
+            const viewer = await plugin.api.run();
+            viewer.set_mode('full');
+            await viewer.view_image(imageUrl, {type: '2d-image', name});
+          }
+        };
+      } else if (plugin.name === "ImageJ.JS") {
+        item = {
+          title: "ImageJ.JS",
+          async callback(name, imageUrl) { // eslint-disable-line
+            alert("not implemented");
+          }
+        };
+      }
+      if (item) this.$store.commit("addOpenInImjoyMenuItem", item);
     },
-    loadPluginDialog(){
-      const uri = prompt("Paste the ImJoy plugin url here")
-      if(uri){
-        this.loadPlugin(uri)
+    async runPlugin(plugin) {
+      await plugin.api.run();
+    },
+    loadPluginDialog() {
+      const uri = prompt("Paste the ImJoy plugin url here");
+      if (uri) {
+        this.loadPlugin(uri);
       }
     }
   }
 };
 </script>
 <style scoped>
-  .window-container {
-      width: 100%;
-      height: 100%;
-  }
+.window-container {
+  width: 100%;
+  height: 100%;
+}
 
-  .imjoy-container-card {
-    width: 100%;
-    height: 100%;
-  }
+.imjoy-container-card {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/openflexure_microscope/api/static/src/store.js b/openflexure_microscope/api/static/src/store.js
index 8b92ca38..74d0b2f1 100644
--- a/openflexure_microscope/api/static/src/store.js
+++ b/openflexure_microscope/api/static/src/store.js
@@ -14,7 +14,8 @@ export default new Vuex.Store({
     trackWindow: true,
     IHIEnabled: false,
     appTheme: "system",
-    activeStreams: {}
+    activeStreams: {},
+    openInImjoyMenuItems: []
   },
 
   mutations: {
@@ -56,7 +57,10 @@ export default new Vuex.Store({
     },
     removeStream(state, id) {
       state.activeStreams[id] = false;
-    }
+    },
+    addOpenInImjoyMenuItem(state, newItem) {
+      state.openInImjoyMenuItems.push(newItem);
+    } // TODO: add a mutation to remove items when plugins are unloaded
   },
 
   actions: {},