HPA-Image-Selection.imjoy.html

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

<config lang="json">
{
  "name": "HPA-Image-Selection",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.2",
  "api_version": "0.1.2",
  "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"
  ],
  "dependencies": [],
  "defaults": {"w": 50, "h": 30},
  "runnable": true
}
</config>

<script lang="javascript">
const default_image_ids = [
"1897_32_E8_1",
"2967_35_F5_1",
"27553_249_B10_1",
"27317_231_E6_1",
"46176_997_D4_1",
"52591_855_E10_2",
"35150_574_A11_1",
"44348_622_C5_3",
"39003_1240_D4_2",
"34739_380_G9_1",
"14288_1587_B1_1",
"760_60_C1_1",
"53668_1334_H11_2",
"37497_523_A3_1",
"63843_1156_F9_3",
"37508_1281_D7_3",
"17381_168_D2_2",
"38619_449_F6_2",
"14324_112_G5_2",
"15202_623_F2_1",
"50294_si35_C5_9",
"10815_934_B11_2",
"35873_753_H2_1",
"27271_254_B3_1",
"62601_1283_F4_2",
"15015_352_D12_4",
"30404_335_H7_2",
"20856_191_D10_2",
"52057_1039_D1_3",
"43467_510_D6_1",
"65305_1234_E7_4",
"6702_344_C2_3",
"41775_486_C8_3",
"45462_1541_D1_1",
"39304_1525_E5_3",
"17732_144_G6_2",
"37577_517_F4_2",
"41652_490_F5_1",
"74097_1494_F2_2",
"59539_1174_D6_3",
"70301_1543_G7_1",
"58183_1060_G8_1",
"54363_883_G4_2",
"8287_42_C4_2",
"8770_82_H2_2",
"11929_94_G3_2",
"30936_416_E1_2",
"23557_si21_E4_7",
"54034_1016_D4_1",
"41634_486_H4_3",
"2617_639_F6_3",
"4793_72_G5_1",
"20842_614_D10_2",
"16688_639_A3_2",
"75641_1625_E5_4",
"49223_769_F3_4",
"46428_1153_D2_2",
"26699_263_C7_2",
"38059_802_F8_6",
"46900_573_F1_4",
"37574_425_D2_1",
"7981_21_H4_1",
"49475_si29_A10_3",
"66783_1338_E10_2",
"12309_94_E5_2",
"15693_129_E3_1",
"36030_380_F9_1",
"49195_1162_D7_1",
"36788_428_H6_3",
"66195_1403_D8_1",
"6719_17_E11_2",
"10381_921_H11_2",
"59602_1013_A11_4",
"44701_527_H3_1",
"16758_279_A4_2",
"28356_299_F11_2",
"30099_326_H5_1",
"13302_671_E1_1",
"38196_440_A8_3",
"7863_21_D5_2",
"3703_670_G6_2",
"57358_1734_C9_1",
"29776_271_G7_1",
"31593_329_C3_5",
"30351_296_G10_2",
"11687_617_C1_1",
"52655_915_G4_2",
"42805_475_A8_1",
"71324_1403_C2_2",
"36881_847_G5_6",
"11222_108_B7_1",
"36846_776_F2_2",
"6079_8_E5_1",
"73876_1497_H6_2",
"4176_34_E2_2",
"56415_982_E1_1",
"34012_924_A12_2",
"28929_298_A3_1",
"46765_699_D12_2",
"64934_1154_C5_2",
"2357_36_D5_2",
"35977_453_G11_2",
"50938_686_E1_3",
"63754_1210_F12_3",
"62733_1501_F10_3",
"2732_92_C2_1",
"29981_372_H2_2",
"44005_575_C8_1",
"54034_1016_D4_2",
"20514_220_F3_2",
"47839_864_A12_1",
"38576_406_B1_4",
"51075_si26_A9_19",
"52497_1253_B5_3",
"7247_1399_B9_2",
"50217_713_A7_5",
"54956_1375_E10_2",
"43567_510_H11_1",
"30711_554_H9_1",
"48199_858_F7_1",
"21353_610_G9_2",
"19711_222_H1_2",
"28539_296_B9_1",
"2053_673_D7_2",
"55291_909_C6_1",
"46527_752_F9_2",
"54405_856_F5_2",
"43789_559_E12_1",
"65537_1234_D7_1",
"24358_239_E9_1",
"30929_752_F12_1",
"38783_451_F2_2",
"15331_924_C2_2",
"53129_876_H4_2",
"59337_1020_F9_2",
"31573_334_E5_2",
"21149_147_F3_1",
"23826_226_H4_2",
"54559_872_G1_2",
"7338_1223_D1_1",
"3909_73_B2_1",
"38246_428_C11_3",
"40208_412_G9_1",
"2828_33_G10_1",
"45156_544_G12_2",
"38704_437_F9_2",
"20427_1207_E9_3",
"41183_555_B1_1",
"9743_923_A7_2",
"19361_154_H6_2",
"38316_431_D3_2",
"56999_963_H7_1",
"62922_1170_A12_2",
"4119_14_B1_1",
"57384_1416_H10_2",
"10880_945_F3_2",
"37404_762_C1_2",
"67076_1400_B4_3",
"54227_863_A12_1",
"62232_1148_G4_1",
"48226_791_E3_2",
"57224_976_B6_2",
"5427_639_D9_5",
"31852_860_E1_2",
"41047_859_A1_4",
"12514_111_D8_2",
"72273_1412_C12_3",
"24517_195_E6_1",
"32103_701_C3_2",
"26643_602_D7_1",
"43930_1056_C10_1",
"39924_1808_A2_3",
"67652_1244_H9_2",
"23384_192_C10_1",
"39689_456_E12_2",
"18587_924_H6_2",
"70554_1440_C5_1",
"36759_433_D5_2",
"54424_984_H1_1",
"7327_1772_D2_2",
"18173_150_B7_2",
"74408_1615_G7_2",
"24637_604_C7_2",
"27440_219_D4_2",
"18129_157_F11_2",
"41474_496_C12_2",
"52700_1396_E5_1",
"36983_1396_G9_2",
"40145_1026_G8_2",
"29449_327_H4_2",
"43992_512_D6_1",
"30169_326_E4_2",
"30464_333_E12_1",
"5474_110_D3_2",
"47446_1309_H11_2",
"24018_301_G12_2",
"26593_210_C9_2",
"30182_342_A7_2",
"57160_968_D9_2",
"42609_800_E8_1",
"30059_296_C4_2",
"47712_1502_A3_3",
"31166_334_D6_2",
"27901_270_D8_2",
"20444_285_A3_1",
"49532_823_A1_2",
"10225_923_C10_1",
"35907_404_G8_2",
"45028_563_E1_2",
"1311_28_G5_2",
"14341_202_H5_1",
"62922_1187_G9_2",
"38167_428_H9_2",
"16481_131_H8_1",
"21865_190_E2_2",
"26564_609_G1_2",
"27143_219_H8_2",
"17322_1386_G4_3",
"44186_556_C8_2",
"20731_247_B8_2",
"46597_790_A7_2",
"53679_984_G8_2",
"38786_471_C3_1",
"7824_630_F1_2",
"37574_421_D2_1",
"53532_867_B9_3",
"21777_148_F12_2",
"48776_715_B10_2",
"2788_671_B12_3",
"56895_1472_A3_5",
"57328_1242_A3_1",
"39349_460_A9_2",
"30174_263_B9_1",
"12341_637_H6_1",
"10025_47_H7_1",
"27398_1044_A2_1",
"65010_1151_B8_2",
"60198_1184_B11_1",
"44822_529_E1_2",
"40286_1449_D8_2",
"4230_653_A4_2",
"1565_32_H2_2",
"39859_977_B3_1",
"8346_si13_H1_1",
"22360_652_F1_3",
"45828_777_F6_1",
"46345_792_E6_2",
"28975_1646_C9_3",
"21536_246_B7_1",
"10109_947_G9_2",
"4211_662_D10_1",
"52378_865_D2_1",
"50418_790_E1_1",
"2051_710_B7_4",
"2321_34_B8_1",
"35223_520_G2_2",
"49148_1652_F6_2",
"53424_819_E9_1",
"48655_1520_F2_2",
"49509_694_F10_1",
"9073_1032_F9_1",
"45760_si27_A1_9",
"29747_296_H2_1",
"35139_383_A10_3",
"36723_1610_C11_6",
"43546_759_E8_7",
"5782_1113_H1_2",
"36481_606_G5_1",
"2358_37_E5_1",
"36772_1142_A4_2",
"64431_1345_D9_2",
"34690_433_H3_1",
"14859_123_F5_2",
"34781_1669_B4_1",
"23840_239_E2_2",
"41307_509_E12_1",
"9392_931_H3_1",
"40004_429_E9_4",
"46597_790_A7_1",
"52733_821_H2_2",
"40416_554_E6_2",
"3894_36_G12_2",
"73073_1437_D9_3",
"30131_335_G8_1",
"36541_594_H6_1",
"77249_1634_F11_1",
"36085_1044_E9_1",
"72803_1348_D9_1",
"48815_751_E9_2",
"43204_748_C2_3",
"2827_79_G3_2",
"17719_1126_B10_1",
"34950_1466_E2_4",
"2506_203_F11_1",
"21485_si17_H10_2",
"36514_1586_F11_1",
"44130_560_C2_4",
"905_39_F4_2",
"2552_62_A11_4",
"23280_194_D8_2",
"27885_1035_B12_3",
"3845_630_B4_1",
"18660_943_G12_3",
"42560_529_E8_2",
"1864_26_D4_2",
"16480_134_C2_1",
"15800_129_H9_1",
"14466_118_H4_1",
"43014_528_F1_3",
"36452_428_F9_2",
"54334_856_D3_1",
"571_25_C4_1",
"28454_255_E9_1",
"14872_627_A1_1",
"4465_670_A12_2",
"11942_90_F11_2",
"12241_610_C2_1",
"52654_915_E5_1",
"21517_187_G8_2",
"61066_1307_E10_3",
"46359_1184_A8_3",
"31345_697_H8_1",
"30646_930_D8_2",
"41154_534_E7_1",
"41094_474_E9_1",
"48089_837_F11_1",
"35354_1056_G5_1",
"28871_334_F10_6",
"19576_183_G6_1",
"27540_365_D1_2",
"27883_327_G4_2",
"49511_749_E7_3",
"20600_178_E7_1",
"60841_1060_G11_3",
"48441_759_B9_1",
"57328_1011_B6_2",
"34664_686_B10_2",
"46588_619_F2_1",
"911_4_C6_1",
"3373_36_A10_2",
"56479_1016_E4_3",
"39614_456_F11_2",
"73245_1452_A6_2",
"52382_868_E10_2",
"40267_1608_F6_1",
"66506_1581_B11_6",
"72314_1369_A12_4",
"27202_230_A3_2",
"74504_1564_A6_3",
"34506_392_C10_1",
"15642_125_G10_2",
"44101_527_G9_2",
"52829_779_B1_1",
"54064_849_H9_1",
"36772_1319_G2_4",
"12024_96_E9_1",
"41423_509_C9_4",
"52397_1312_A9_1",
"44208_813_G1_1",
"55956_886_D12_1",
"43656_1070_C2_2",
"60847_1136_H8_2",
"58416_993_F8_2",
"53585_906_B1_2",
"57943_991_B7_2",
"5448_91_C1_1",
"55800_894_D10_1",
"48137_742_F6_7",
"65505_1236_G6_2",
"9203_921_C2_2",
"42617_737_F7_1",
"17286_139_G9_1",
"36422_453_H4_3",
"40520_412_H9_3",
"61970_1192_G5_3",
"8763_100_A3_2",
"1878_51_C12_2",
"4109_25_H11_1",
"5848_42_C3_2",
"31321_763_D12_2",
"77428_1660_B11_3",
"24373_548_G9_1",
"51253_792_E7_2",
"38253_579_F4_1",
"77000_1609_A5_4",
"44223_899_B4_1",
"50111_1564_G8_4",
"53407_1413_B3_1",
"5798_8_E4_2",
"21600_236_B9_2",
"69752_1347_A8_2",
"19728_210_H9_2",
"24284_224_F6_1",
"15061_165_E2_2",
"64866_1282_E11_3",
"59791_1009_C11_1",
"74736_1457_H5_7",
"47947_1470_B5_1",
"14263_1446_H4_3",
"31321_681_G8_5",
"36995_432_F8_3",
"42418_476_F8_1",
"76570_1672_E9_34",
"52688_915_C6_4",
"77723_1605_H9_2",
"19828_242_E7_2",
"72314_1369_A12_7",
"35350_716_E6_1",
"68702_1310_H10_7",
"41054_821_C12_2",
"5023_628_H1_1",
"35800_397_E5_4",
"5223_634_G10_1",
"42059_1105_B1_1",
"54699_si32_E8_10",
"72838_1348_G5_3",
"30232_275_A11_2",
"61837_1241_B7_2",
"39072_1048_C6_3",
"37516_1364_C2_2",
"55179_883_B6_2",
"59435_1413_C5_2",
"44653_1676_D3_5",
"12234_613_F9_1",
"44131_501_D10_2",
"50530_777_F9_2",
"4211_670_D10_1",
"20071_242_H6_1",
"17015_133_C8_2",
"39858_846_E12_1",
"25497_659_H6_2",
"51893_1466_A4_6",
"67156_1547_D4_2",
"29543_507_H4_1",
"52099_925_B2_1",
"65254_1202_F11_1",
"4747_10_A3_1",
"3328_73_H1_1",
"65709_1230_B10_1",
"53883_832_A12_1",
"63735_1232_G11_1",
"8599_41_H9_2",
"15275_125_G6_2",
"3323_20_H10_1",
"23535_216_E9_1",
"57705_1639_F9_5",
"8859_1584_E12_2",
"23505_182_H6_1",
"54013_981_F7_4",
"43255_571_C12_1",
"29926_409_E7_1",
"44872_816_D9_2",
"35054_374_G1_1",
"69560_1353_C10_3",
"50345_804_B7_4",
"29140_296_F6_1",
"55416_907_C6_1",
"38965_445_D6_1",
"32027_378_A2_2",
"34871_1216_C9_3",
"3581_78_A6_1",
"59532_1117_A12_3",
"31444_1002_D8_1",
"62871_1113_B10_3",
"46762_1421_H1_6",
"23748_216_F10_2",
"24376_197_B12_1",
"31166_332_D6_1",
"53915_1386_F12_6",
"47047_689_A2_1",
"38575_1253_B10_3",
"42890_1177_G1_5",
"23739_236_G12_2",
"15186_951_G4_2",
"67948_1331_H10_1",
"58047_1049_G7_2",
"45606_567_A10_2",
"10046_931_D9_2",
"11380_941_F2_1",
"46817_573_G9_5",
"6219_1401_A7_4",
"43110_si22_D10_36",
"53330_831_F2_1",
"75871_1653_D4_7",
"48789_698_F11_1",
"49227_823_H3_2",
"49183_736_B4_2",
"35029_739_A1_5",
"24649_240_D7_1",
"53083_849_H6_2",
"61059_1153_E9_1",
"55213_1253_D2_1",
"42038_553_H7_2",
"9257_968_D11_2",
"29302_323_F10_1",
"53966_904_G2_6",
"11740_90_G3_2",
"67941_1237_C10_4",
"35293_372_B3_1",
"61348_1103_A11_2",
"21047_187_F1_1",
"77979_1693_H8_1"
]
class ImJoyPlugin {
  async setup() {
    const images = []
    this.select_callback = async (id)=>{
      api.showStatus('Selected image id: ' + id)
      const tmp = id.split('_')
      await api.showDialog({type: 'imjoy/image', name: id, config: {}, data: {src: "https://www.proteinatlas.org/images/"+tmp[0]+"/"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]+"_blue_red_green.jpg"}})
    }
    const self = this;
    for(let id of default_image_ids){
        const tmp = id.split('_')
        images.push({
         thumbnail:"https://www.proteinatlas.org/images/"+tmp[0]+"/"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]+"_blue_red_green_thumb.jpg", 
         original: "https://www.proteinatlas.org/images/"+tmp[0]+"/"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]+"_blue_red_green.jpg",
         id: tmp[0]+"_"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]
        })
    }
    this.store ={
        methods: {
          select(id){
            if(self.select_callback){
              self.select_callback(id)
            }
          }
        },
        data() {
            return {
                images: images
            }
        }
    }
    const App = Vue.extend(this.store)
    this.app = new App().$mount('#app')
    console.log(this.app)
  }

  async run(my) {
     if(my.data && my.data.hpa_ids){
        const images = []
        for(let id of  my.data.hpa_ids){
            const tmp = id.split('_')
            images.push({
            thumbnail:"https://www.proteinatlas.org/images/"+tmp[0]+"/"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]+"_blue_red_green_thumb.jpg", 
            original: "https://www.proteinatlas.org/images/"+tmp[0]+"/"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]+"_blue_red_green.jpg",
            id: tmp[0]+"_"+tmp[1]+"_"+tmp[2]+"_"+tmp[3]
          })
        }
        this.app.$root.images = images
        this.app.$forceUpdate()
    }
    if(my.data && my.data.select_callback){
      this.select_callback = my.data.select_callback
    }
  }
}
api.export(new ImJoyPlugin())
</script>

<window lang="html">
<div id="app">
  <div class="thumb">
    <div v-for="image in images" >
      <img :src="image.thumbnail" @click="select(image.id)" class="image" :key="image">
    </div>
  </div>
</div>
</window>

<style lang="css">
.image {
    height: 80px;
    cursor: pointer;
    margin: 5px;
    display: inline-block;
}


.thumb { 
  width: 100%;
  margin: 0 auto;
  border: 1px solid #898989;
  padding: .6vw;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.thumb div { 
   width: 100px; 
  margin: .6vw; 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
}
.thumb div img { 
   height: auto; 
  width: 100%; 
}

@media screen and (max-width: 480px) {
  .thumb div { margin: 0; }
  .thumb { padding: 0; }
  
}
</style>