CellCyleResults.imjoy.html

<docs lang="markdown">
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "CellCycleResults",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.2",
  "api_version": "0.1.5",
  "description": "This is a backbone plugin for using Vue.js in ImJoy",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "env": "",
  "requirements": [
      "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js",
      "https://static.imjoy.io/spectre.css/spectre.min.css",
      "https://static.imjoy.io/spectre.css/spectre-exp.min.css",
      "https://static.imjoy.io/spectre.css/spectre-icons.min.css",
      "https://unpkg.com/axios/dist/axios.min.js"
  ],
  "dependencies": [],
  "defaults": {"w": 20, "h": 10},
  "runnable": true
}
</config>

<script lang="javascript">
const app = new Vue({
  el: '#app',
  data: {
    title: 'Hello World',
    files: [],
    root_url: ''
  },
  methods: {
    async sayHi(){
      await api.alert('Hi')
    }
  }
})
class ImJoyPlugin {
  async setup() {
    const ret = await api.showFileDialog()
    const response = await axios.get(ret.url)

    app.root_url = ret.url + '/'
    const files = response.data
    app.files = []
    for(let f of files){
      if(f.type==='file' && f.name.endsWith('outputs.png')){
         app.files.push(f.name.replace('outputs.png', ''))
      }
    }
    app.$forceUpdate()
  }
  async run(my) {
  }
}
api.export(new ImJoyPlugin())
</script>

<window lang="html">
  <div style="text-align: center;" id="app">
    <div class="columns">
        <span class="column col-2">inputs</span>
        <span class="column col-2">outputs</span>
        <span class="column col-2">targets</span>
      </div>
    <div v-for="f in files">
      <div class="columns">
        <img class="column col-2" :src="root_url+f+'inputs.png'"></img>
        <img class="column col-2" :src="root_url+f+'outputs.png'"></img>
        <img class="column col-2" :src="root_url+f+'targets.png'"></img>
      </div>
      <br>
    </div>
  </div>
</window>

<style lang="css">
</style>