Added an "open in kaibu" link

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-");
     },

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><a href="#" @click="loadPluginDialog()">Load Plugin</a></li>
-          <li class="uk-nav-divider"></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>
-          <li class="uk-nav-divider"></li>
+          <a
-          <li><a href="#" @click="activeWindow=w" v-for="w in windows" :key="w.id"><i class="material-icons">launch</i>{{w.name}}</a></li>
+            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">
+    <div
-        <h3 class="uk-card-title">{{w.name}}</h3>
+      v-for="w in windows"
-        <div class="window-container" :id="w.window_id">
+      v-show="w === activeWindow"
-          
+      :key="w.id"
-        </div>
+      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: {
+  components: {},
-  },
+  data() {
-  data(){
     return {
       windows: {},
       loading: false,
       loadedPlugins: {},
       activeWindow: null
-    }
+    };
   },
-  mounted(){
+  mounted() {
     const imjoy = new imjoyCore.ImJoy({
-        imjoy_api: {},
+      imjoy_api: {}
-        //imjoy config
+      //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){
+    loadPlugin(uri) {
-      this.loading = true
+      this.loading = true;
-      this.imjoy.pm.reloadPluginRecursively({
+      this.imjoy.pm
+        .reloadPluginRecursively({
           uri
-      }).then(async (plugin) => {
+        })
-        this.loadedPlugins[plugin.name] = plugin;
+        .then(async plugin => {
-        this.loading = false
+          this.loadedPlugins[plugin.name] = plugin;
-      }).catch((e) => {
+          this.registerOpenInImJoy(plugin);
-        console.error(e)
+          this.loading = false;
-        this.loading = false
+        })
-        alert(`failed to load the plugin, error: ${e}`)
+        .catch(e => {
-      })
+          console.error(e);
+          this.loading = false;
+          alert(`failed to load the plugin, error: ${e}`);
+        });
     },
-    async runPlugin(plugin){
+    registerOpenInImJoy(plugin) {
-      await plugin.api.run()
+      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(){
+    async runPlugin(plugin) {
-      const uri = prompt("Paste the ImJoy plugin url here")
+      await plugin.api.run();
-      if(uri){
+    },
-        this.loadPlugin(uri)
+    loadPluginDialog() {
+      const uri = prompt("Paste the ImJoy plugin url here");
+      if (uri) {
+        this.loadPlugin(uri);
       }
     }
   }
 };
 </script>
 <style scoped>
-  .window-container {
+.window-container {
-      width: 100%;
+  width: 100%;
-      height: 100%;
+  height: 100%;
-  }
+}
 
-  .imjoy-container-card {
+.imjoy-container-card {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-  }
+}
 </style>

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: {},