diff --git a/.gitignore b/.gitignore
index d406159ec9eec8b0d33917b07cd4f38f515ff722..af575bd0c5a43d5b39ef3da13f3dc798ebe1704d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 dist
 package-lock.json
-src/res/raw
\ No newline at end of file
+src/res/raw
+src/plugin_examples/*/
\ No newline at end of file
diff --git a/src/plugin_examples/jugex/js-autocomplete.min.css b/src/plugin_examples/jugex/js-autocomplete.min.css
deleted file mode 100644
index 4261b1d033e28b55dfc43df39f5410a11823a15c..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/js-autocomplete.min.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.autocomplete-suggestions {
-    text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
-
-    /* core styles should not be changed */
-    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
-}
-.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
-.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
-.autocomplete-suggestion.selected { background: #f0f0f0; }
diff --git a/src/plugin_examples/jugex/js-autocomplete.min.js b/src/plugin_examples/jugex/js-autocomplete.min.js
deleted file mode 100644
index 0b460545687f2230fccf1b46fd45f4d6022cfb73..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/js-autocomplete.min.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// JavaScript autoComplete v1.0.4
-// https://github.com/Pixabay/JavaScript-autoComplete
-var autoComplete=function(){function e(e){function t(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function o(e,t,o){e.attachEvent?e.attachEvent("on"+t,o):e.addEventListener(t,o)}function s(e,t,o){e.detachEvent?e.detachEvent("on"+t,o):e.removeEventListener(t,o)}function n(e,s,n,l){o(l||document,s,function(o){for(var s,l=o.target||o.srcElement;l&&!(s=t(l,e));)l=l.parentElement;s&&n.call(l,o)})}if(document.querySelector){var l={selector:0,source:0,minChars:3,delay:150,offsetLeft:0,offsetTop:1,cache:1,menuClass:"",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(){}};for(var c in e)e.hasOwnProperty(c)&&(l[c]=e[c]);for(var a="object"==typeof l.selector?[l.selector]:document.querySelectorAll(l.selector),u=0;u<a.length;u++){var i=a[u];i.sc=document.createElement("div"),i.sc.className="autocomplete-suggestions "+l.menuClass,i.autocompleteAttr=i.getAttribute("autocomplete"),i.setAttribute("autocomplete","off"),i.cache={},i.last_val="",i.updateSC=function(e,t){var o=i.getBoundingClientRect();if(i.sc.style.left=Math.round(o.left+(window.pageXOffset||document.documentElement.scrollLeft)+l.offsetLeft)+"px",i.sc.style.top=Math.round(o.bottom+(window.pageYOffset||document.documentElement.scrollTop)+l.offsetTop)+"px",i.sc.style.width=Math.round(o.right-o.left)+"px",!e&&(i.sc.style.display="block",i.sc.maxHeight||(i.sc.maxHeight=parseInt((window.getComputedStyle?getComputedStyle(i.sc,null):i.sc.currentStyle).maxHeight)),i.sc.suggestionHeight||(i.sc.suggestionHeight=i.sc.querySelector(".autocomplete-suggestion").offsetHeight),i.sc.suggestionHeight))if(t){var s=i.sc.scrollTop,n=t.getBoundingClientRect().top-i.sc.getBoundingClientRect().top;n+i.sc.suggestionHeight-i.sc.maxHeight>0?i.sc.scrollTop=n+i.sc.suggestionHeight+s-i.sc.maxHeight:0>n&&(i.sc.scrollTop=n+s)}else i.sc.scrollTop=0},o(window,"resize",i.updateSC),document.body.appendChild(i.sc),n("autocomplete-suggestion","mouseleave",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&setTimeout(function(){e.className=e.className.replace("selected","")},20)},i.sc),n("autocomplete-suggestion","mouseover",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&(e.className=e.className.replace("selected","")),this.className+=" selected"},i.sc),n("autocomplete-suggestion","mousedown",function(e){if(t(this,"autocomplete-suggestion")){var o=this.getAttribute("data-val");i.value=o,l.onSelect(e,o,this),i.sc.style.display="none"}},i.sc),i.blurHandler=function(){try{var e=document.querySelector(".autocomplete-suggestions:hover")}catch(t){var e=0}e?i!==document.activeElement&&setTimeout(function(){i.focus()},20):(i.last_val=i.value,i.sc.style.display="none",setTimeout(function(){i.sc.style.display="none"},350))},o(i,"blur",i.blurHandler);var r=function(e){var t=i.value;if(i.cache[t]=e,e.length&&t.length>=l.minChars){for(var o="",s=0;s<e.length;s++)o+=l.renderItem(e[s],t);i.sc.innerHTML=o,i.updateSC(0)}else i.sc.style.display="none"};i.keydownHandler=function(e){var t=window.event?e.keyCode:e.which;if((40==t||38==t)&&i.sc.innerHTML){var o,s=i.sc.querySelector(".autocomplete-suggestion.selected");return s?(o=40==t?s.nextSibling:s.previousSibling,o?(s.className=s.className.replace("selected",""),o.className+=" selected",i.value=o.getAttribute("data-val")):(s.className=s.className.replace("selected",""),i.value=i.last_val,o=0)):(o=40==t?i.sc.querySelector(".autocomplete-suggestion"):i.sc.childNodes[i.sc.childNodes.length-1],o.className+=" selected",i.value=o.getAttribute("data-val")),i.updateSC(0,o),!1}if(27==t)i.value=i.last_val,i.sc.style.display="none";else if(13==t||9==t){var s=i.sc.querySelector(".autocomplete-suggestion.selected");s&&"none"!=i.sc.style.display&&(l.onSelect(e,s.getAttribute("data-val"),s),setTimeout(function(){i.sc.style.display="none"},20))}},o(i,"keydown",i.keydownHandler),i.keyupHandler=function(e){var t=window.event?e.keyCode:e.which;if(!t||(35>t||t>40)&&13!=t&&27!=t){var o=i.value;if(o.length>=l.minChars){if(o!=i.last_val){if(i.last_val=o,clearTimeout(i.timer),l.cache){if(o in i.cache)return void r(i.cache[o]);for(var s=1;s<o.length-l.minChars;s++){var n=o.slice(0,o.length-s);if(n in i.cache&&!i.cache[n].length)return void r([])}}i.timer=setTimeout(function(){l.source(o,r)},l.delay)}}else i.last_val=o,i.sc.style.display="none"}},o(i,"keyup",i.keyupHandler),i.focusHandler=function(e){i.last_val="\n",i.keyupHandler(e)},l.minChars||o(i,"focus",i.focusHandler)}this.destroy=function(){for(var e=0;e<a.length;e++){var t=a[e];s(window,"resize",t.updateSC),s(t,"blur",t.blurHandler),s(t,"focus",t.focusHandler),s(t,"keydown",t.keydownHandler),s(t,"keyup",t.keyupHandler),t.autocompleteAttr?t.setAttribute("autocomplete",t.autocompleteAttr):t.removeAttribute("autocomplete"),document.body.removeChild(t.sc),t=null}}}}return e}();!function(){"function"==typeof define&&define.amd?define("autoComplete",function(){return autoComplete}):"undefined"!=typeof module&&module.exports?module.exports=autoComplete:window.autoComplete=autoComplete}();
diff --git a/src/plugin_examples/jugex/manifest.json b/src/plugin_examples/jugex/manifest.json
deleted file mode 100644
index a56482b9ee22e34ead516c404403996b2fdd3316..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/manifest.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name": "fzj.hb.jugex",
-  "displayName":"JuGEx",
-  "type": "plugin",
-  "templateURL": "http://localhost:8080/res/plugins/template.html",
-  "scriptURL": "http://localhost:8080/res/plugins/script.js"
-}
\ No newline at end of file
diff --git a/src/plugin_examples/jugex/newscript.js b/src/plugin_examples/jugex/newscript.js
deleted file mode 100644
index 22a6ab15d44eca451412ab9a38985860d5bbca60..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/newscript.js
+++ /dev/null
@@ -1,803 +0,0 @@
-(()=>{
-  const PLUGIN_NAME = `fzj.hb.JuGEx`
-  const DOM_PARSER = new DOMParser()
-  const MIN_CHAR = 3
-  const URL_BASE = 'http://medpc055.ime.kfa-juelich.de:8003'
-
-  class HoverRegionSelectorComponent extends HTMLElement{
-    constructor(){
-      super()
-
-      this.template = 
-      `
-        <div class = "input-group">
-          <input value = "${this.selectedRegion ? this.selectedRegion.name : ''}" class = "form-control" placeholder = "" readonly = "readonly" type = "text" region />
-          <span class = "input-group-btn">
-            <div class = "btn btn-default" editRegion>
-              <span class = "glyphicon glyphicon-edit"></span>
-            </div>
-          </span>
-        </div>
-      `
-
-      this.elTemplate = DOM_PARSER.parseFromString(this.template,'text/html') // or use innerHTML... whichever suits you
-
-      this.elTemplate2 = document.createElement('div')
-      this.elTemplate2.innerHTML = this.template
-
-      this.renderedFlag = false
-      this.listening = true
-      this.selectedRegion = null
-      this.shutdownHooks = []
-
-      this.rootChild = document.createElement('div')
-      this.appendChild(this.rootChild)
-      this.firstrender = true
-
-      this.init()
-      window.pluginControl[PLUGIN_NAME].onShutdown((this.onShutdown).bind(this))
-    }
-
-    /* class method */
-    /* connectedCallback can get called multiple times during the lifetime of a widget.
-    most prominently, when the user chooses to dock the widget, or minimise the widget. */
-    connectedCallback(){
-      this.render()
-      this.attachEventListeners()
-    }
-
-    /* class method */
-    /* ditto, see above */
-    disconnectedCallback(){
-      this.unattachEventListeners()
-    }
-
-    /* in this example, the init funciton attaches any permanent listeners, such as, in this
-    case, mouseovernehuba event stream */
-    init(){
-      this.mouseOverNehuba = window.viewerHandle.mouseOverNehuba.filter(()=>this.listening).subscribe(ev=>{
-        this.selectedRegion = ev.foundRegion
-        this.render()
-        this.attachEventListeners()
-      })
-    }
-
-    /* cleaning up when the user permanently closes the widget */
-    onShutdown(){
-      this.mouseOverNehuba.unsubscribe()
-    }
-
-    render(){
-      if(!this.firstrender){
-        this.unattachEventListeners()
-        this.firstrender = false
-      }
-      while(this.rootChild.lastChild){
-        this.rootChild.removeChild(this.rootChild.lastChild)
-      }
-
-      this.template = 
-      `
-        <div class = "input-group">
-          <input value = "${this.selectedRegion ? this.selectedRegion.name : ''}" class = "form-control" placeholder = "" readonly = "readonly" type = "text" region />
-          <span class = "input-group-btn">
-            <div class = "btn btn-default" editRegion>
-              <span class = "glyphicon glyphicon-edit"></span>
-            </div>
-          </span>
-        </div>
-      `
-      this.elTemplate2.innerHTML = this.template
-      this.rootChild.appendChild(this.elTemplate2)
-    }
-
-    clearAndRelisten(ev){
-      this.listening = true
-      this.selectedRegion = null
-      this.render()
-      this.attachEventListeners()
-    }
-
-    attachEventListeners(){
-      this.rootChild.querySelector('div[editRegion]').addEventListener('click',(this.clearAndRelisten).bind(this))
-    }
-
-    unattachEventListeners(){
-      this.rootChild.querySelector('div[editRegion]').addEventListener('click',(this.clearAndRelisten).bind(this))
-    }
-  }
-
-  class DismissablePill extends HTMLElement{
-    constructor(){
-      super()
-      this.name = ``
-      this.template = 
-      `
-      <span class = "label label-default">
-        <span pillName>${this.name}</span>
-        <span class = "glyphicon glyphicon-remove" pillRemove></span>
-      </span>
-      `
-    }
-
-    render(){
-      this.template = 
-      `
-      <span class = "label label-default">
-        <span pillName>${this.name}</span>
-        <span class = "glyphicon glyphicon-remove" pillRemove></span>
-      </span>
-      `
-      this.elTemplate = document.createElement('span')
-      // this.elTemplate = DOM_PARSER.parseFromString(this.template,'text/html')
-      this.elTemplate.innerHTML = this.template
-
-      while(this.lastChild){
-        this.removeChild(this.lastChild)
-      }
-      this.appendChild(this.elTemplate)
-    }
-
-    connectedCallback(){
-      this.render()
-      this.attachEventListeners()
-    }
-
-    disconnectedCallback(){
-      this.unattachEventListeners()
-    }
-
-    attachEventListeners(){
-      this.querySelector('span[pillRemove]').addEventListener('click',(this.dismissPill).bind(this))
-    }
-
-    unattachEventListeners(){
-      this.querySelector('span[pillRemove]').removeEventListener('click',(this.dismissPill).bind(this))
-    }
-
-    dismissPill(){
-      this.onRemove(this.name)
-      this.remove()
-    }
-    
-    /* needs to be overwritten by parent, if parent needs to listen to the on remove event */
-    onRemove(){
-
-    }
-  }
-
-  class WebjugexGeneComponent extends HTMLElement{
-    constructor(){
-      super()
-      this.arrDict = []
-      this.autocompletesuggestion = []
-      this.selectedGenes = []
-      this.template = 
-      `
-        <div class = "input-group">
-          <input geneInputBox type = "text" class = "form-control" placeholder = "Enter gene of interest ..." />
-          <input geneImportInput class = "hidden" type = "file" />
-          <span class = "input-group-btn">
-            <div geneAdd class = "btn btn-default" title = "Add a gene">Add</div>
-            <div geneImport class = "btn btn-default" title = "Import a CSV file">Import</div>
-            <div geneExport class = "btn btn-default" title = "Export selected genes into a CSV file">Export</div>
-          </span>
-        </div>
-      `
-
-      window.pluginControl[PLUGIN_NAME].onShutdown((this.unloadExternalResources).bind(this))
-      this.firstrender = true
-    }
-
-    connectedCallback(){
-      if(this.firstrender){
-
-        this.elTemplate = document.createElement('div')
-        this.elTemplate.innerHTML = this.template
-        this.rootChild = document.createElement('div')
-        this.appendChild(this.rootChild)
-        this.rootChild.appendChild(this.elTemplate)
-        this.init()
-        this.firstrender = false
-      }
-      // this.render()
-      // this.attachEventListeners()
-      /* see below */
-    }
-
-    disconnectedCallback(){
-      // this.unattachEventListeners()
-      /* see below */
-    }
-
-    // render(){
-    //   while(this.lastChild){
-    //     this.removeChild(lastChild)
-    //   }
-    //   this.appendChild(this.elTemplate)
-    // }
-
-    /* in special circumstances, where the view does not change too much, but there are numerous
-    eventlisteners, it maybe more efficient to only attach event listener once,  */
-    init(){
-      
-      this.elGeneInputBox = this.rootChild.querySelector('input[geneInputBox]')
-      this.elGeneImportInput = this.rootChild.querySelector('input[geneImportInput]')
-      this.elGeneAdd = this.rootChild.querySelector('div[geneAdd]')
-      this.elGeneImport = this.rootChild.querySelector('div[geneImport]')
-      this.elGeneExport = this.rootChild.querySelector('div[geneExport]')
-      
-      const importGeneList = (file) => {
-        const csvReader = new FileReader()
-        csvReader.onload = (ev)=>{
-          const csvRaw = ev.target.result
-          this.selectedGenes.splice(0,this.selectedGenes.length)
-          csvRaw.split(/\r|\r\n|\n|\t|\,|\;/).forEach(gene=>{
-              if(gene.length > 0)
-              this.addGene(gene)
-          })
-        }
-        csvReader.readAsText(file,'utf-8')
-      }
-
-      this.elGeneImportInput.addEventListener('change',(ev)=>{
-        importGeneList(ev.target.files[0])
-      })
-
-      this.elGeneImport.addEventListener('click',()=>{
-        this.elGeneImportInput.click()
-      })
-      this.elGeneExport.addEventListener('click',()=>{
-        const exportGeneList = 'data:text/csv;charset=utf-8,'+this.selectedGenes.join(',')
-        const exportGeneListURI = encodeURI(exportGeneList)
-        const dlExportGeneList = document.createElement('a')
-        dlExportGeneList.setAttribute('href',exportGeneListURI)
-        document.body.appendChild(dlExportGeneList)
-        const date = new Date()
-        dlExportGeneList.setAttribute('download',`exported_genelist_${''+date.getFullYear()+(date.getMonth()+1)+date.getDate()+'_'+date.getHours()+date.getMinutes()}.csv`)
-        dlExportGeneList.click()
-        document.body.removeChild(dlExportGeneList)
-      })
-      this.elGeneAdd.addEventListener('click',()=>{
-        if(this.autocompleteSuggestions.length > 0 && this.elGeneInputBox.value.length >= MIN_CHAR)
-        this.addGene(this.autocompleteSuggestions[0])
-      })
-
-      this.elGeneInputBox.addEventListener('dragenter',(ev)=>{
-        this.elGeneInputBox.setAttribute('placeholder','Drop file here to be uploaded')
-      })
-
-      this.elGeneInputBox.addEventListener('dragleave',(ev)=>{
-        this.elGeneInputBox.setAttribute('placeholder','Enter gene of interest ... ')
-      })
-
-      this.elGeneInputBox.addEventListener('drop',(ev)=>{
-        ev.preventDefault()
-        ev.stopPropagation()
-        ev.stopImmediatePropagation()
-        this.elGeneInputBox.setAttribute('placeholder','Enter gene of interest ... ')
-        //ev.dataTransfer.files[0]
-      })
-
-      this.elGeneInputBox.addEventListener('dragover',(ev)=>{
-        ev.preventDefault()
-        ev.stopPropagation()
-        ev.stopImmediatePropagation()
-      })
-
-      this.elGeneInputBox.addEventListener('keydown',(ev)=>{
-        ev.stopPropagation()
-        ev.stopImmediatePropagation()
-        if(ev.key=='Enter') this.elGeneAdd.click()
-      })
-
-      Promise.all([
-        this.loadExternalResources(),
-        fetch(URL_BASE).then(txt=>txt.json())
-      ])
-        .then(arr=>{
-          this.arrDict = arr[1]
-
-          console.log('attaching autocomplete')
-
-          this.autocompleteInput = new autoComplete({
-            selector : this.elGeneInputBox,
-            delay : 0,
-            minChars : MIN_CHAR,
-            cache : false,
-            source : (term,suggest)=>{
-              const searchTerm = new RegExp('^'+term,'gi')
-              this.autocompleteSuggestions = this.arrDict.filter(dict=>searchTerm.test(dict))
-              suggest(this.autocompleteSuggestions)
-            },
-            onSelect : (e,term,item)=>{
-              this.addGene(term)
-            }
-          })
-        })
-        .catch(err=>{
-          console.error('loading external resources failed ... ',err)
-          // console.log('failed to fetch full list of genes... using limited list of genes instead ...',e)
-          // this.arrDict = ["ADRA2A", "AVPR1B", "CHRM2", "CNR1", "CREB1", "CRH", "CRHR1", "CRHR2", "GAD2", "HTR1A", "HTR1B", "HTR1D", "HTR2A", "HTR3A", "HTR5A", "MAOA", "PDE1A", "SLC6A2", "SLC6A4", "SST", "TAC1", "TPH1", "GPR50", "CUX2", "TPH2"]
-        })
-    }
-
-    loadExternalResources(){
-      return new Promise((rs,rj)=>Promise.all([
-        new Promise((resolve,reject)=>{
-          this.autoCompleteCss = document.createElement('link')
-          this.autoCompleteCss.type = 'text/css'
-          this.autoCompleteCss.rel = 'stylesheet'
-          this.autoCompleteCss.onload = () => resolve()
-          this.autoCompleteCss.onerror = (e) => reject(e)
-          this.autoCompleteCss.href = '/res/css/js-autocomplete.min.css'
-          document.head.appendChild(this.autoCompleteCss)
-        }),
-        new Promise((resolve,reject)=>{
-          this.autoCompleteJs = document.createElement('script')
-          this.autoCompleteJs.onload = () => resolve()
-          this.autoCompleteJs.onerror = (e) => reject(e)
-          this.autoCompleteJs.src = '/res/js/js-autocomplete.min.js'
-          document.head.appendChild(this.autoCompleteJs)
-        })
-      ])
-      .then(()=>rs())
-      .catch(e=>rj(e))
-    )}
-
-    unloadExternalResources(){
-      document.head.removeChild(this.autoCompleteJs)
-      document.head.removeChild(this.autoCompleteCss)
-    }
-
-    addGene(gene){
-      const pill = document.createElement('dismissable-pill-card')
-      pill.onRemove = (name) => 
-        this.selectedGenes.splice(this.selectedGenes.indexOf(name),1)
-
-      pill.name = gene
-      this.rootChild.appendChild(pill)
-      this.selectedGenes.push(gene)
-      this.elGeneInputBox.value = ''
-      this.elGeneInputBox.blur()
-      this.elGeneInputBox.focus()
-    }
-  }
-
-  class WebjugexSearchComponent extends HTMLElement{
-    constructor(){
-      super()
-      this.template = 
-      `
-      
-      <div class = "row">
-        <div class = "col-md-12">
-          <small>
-            Find a set of differentially expressed genes between two user defined volumes of interest based on JuBrain maps.
-            The tool downloads expression values of user specified sets of genes from Allen Brain API.
-            Then, it uses zscores to find which genes are expressed differentially between the user specified regions of interests.
-            After the analysis is finished, the genes and their calculated p values are displayed. There is also an option of downloading the gene names and their p values
-            and the roi coordinates used in the analysis.
-            Please select two regions of interest, and at least one gene :
-          </small>
-        </div>
-        <div class = "col-md-12">
-          <hover-region-selector-card area1></hover-region-selector-card>
-        </div>
-        <div class = "col-md-12">
-          <hover-region-selector-card area2></hover-region-selector-card>
-        </div>
-        <div class = "col-md-12">
-        <div class = "input-group">
-          <span class = "input-group-addon">
-            Threshold
-          </span>
-          <input value = "0.20" class = "form-control" type = "range" min = "0" max = "1" step = "0.01" threshold />
-          <span class = "input-group-addon" thresholdValue>
-          0.20
-          </span>
-        </div>
-        <div class="input-group">
-          <input type="checkbox" probemode /> Single Probe Mode
-        </div>
-      </div>
-      <div class = "row">
-        <div class = "col-md-12">
-          <fzj-xg-webjugex-gene-card>
-          </fzj-xg-webjugex-gene-card>
-        </div>
-      </div>
-      <div class = "row">
-        <div class = "col-md-12">
-          <div class = "btn btn-default btn-block" analysisSubmit>
-            Start differential analysis
-          </div>
-        </div>
-      </div>
-      `
-      this.mouseEventSubscription = this.rootChild = this.threshold = this.elArea1 = this.elArea2 = null
-      this.selectedGenes = []
-      this.firstrender = true
-
-    }
-
-    connectedCallback(){
-      if(this.firstrender){
-        this.init()
-        this.firstrender = false
-      }
-    }
-
-    init(){
-      // this.elTemplate = DOM_PARSER.parseFromString(this.template,'text/html')
-      this.elTemplate = document.createElement('div')
-      this.elTemplate.innerHTML = this.template
-      this.appendChild(this.elTemplate)
-
-      this.elArea1 = this.querySelector('hover-region-selector-card[area1]')
-      this.elArea2 = this.querySelector('hover-region-selector-card[area2]')
-      this.elArea1.listening = true
-      this.elArea2.listening = false
-      this.probemodeval = false
-
-      this.elGenesInput = this.querySelector('fzj-xg-webjugex-gene-card')
-
-      this.elAnalysisSubmit = this.querySelector('div[analysisSubmit]')
-      this.elAnalysisSubmit.style.marginBottom = '20px'
-      this.elAnalysisSubmit.addEventListener('click',()=>this.analysisGo())
-
-      this.elThreshold = this.querySelector('input[threshold]')
-      const elThresholdValue = this.querySelector('span[thresholdValue]')
-      this.elThreshold.addEventListener('input',(ev)=> elThresholdValue.innerHTML = parseFloat(this.elThreshold.value).toFixed(2) )
-
-      this.onViewerClick()
-
-      window.pluginControl[PLUGIN_NAME].onShutdown(()=>{
-        this.mouseEventSubscription.unsubscribe()
-      })
-    }
-
-    onViewerClick(){
-      this.mouseEventSubscription = window.viewerHandle.mouseEvent.filter(ev=>ev.eventName=='click').subscribe(ev=>{
-          if(this.elArea1.listening && this.elArea2.listening){
-              this.elArea1.listening = false
-          }
-          else if(this.elArea2.listening){
-              this.elArea2.listening = false
-          }
-          else if(this.elArea1.listening){
-              if(this.elArea2.selectedRegion == null){
-                  this.elArea1.listening = false
-                  this.elArea2.listening = true
-              }
-              else if(this.elArea2.selectedRegion != null){
-                  this.elArea1.listening = false
-              }
-          }
-        })
-    }
-
-    analysisGo(){
-      /* test for submit conditions */
-      if(this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null || this.elGenesInput.selectedGenes.length < 1){
-        const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
-        container.appendChild(resultCard)
-        let e = 'Error: We need '
-        if(this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null) e += 'both areas to be defined and '
-        if(this.elGenesInput.selectedGenes.length < 1) e += 'atleast one gene'
-        else e = e.substr(0, 40)
-        e += '.'
-        resultCard.panelBody.innerHTML = e
-        return
-      }
-      console.log(this.elArea1.selectedRegion,this.elArea2.selectedRegion,this.elArea1.selectedRegion.PMapURL,this.elArea2.selectedRegion.PMapURL,this.elThreshold.value,this.elGenesInput.selectedGenes)
-      const region1 = Object.assign({},this.elArea1.selectedRegion,{url:this.elArea1.selectedRegion.PMapURL})
-      const region2 = Object.assign({},this.elArea2.selectedRegion,{url:this.elArea2.selectedRegion.PMapURL})
-      this.sendAnalysis({
-        area1 : region1,
-        area2 : region2,
-        threshold : this.elThreshold.value,
-        selectedGenes : this.elGenesInput.selectedGenes,
-        mode : this.querySelector('input[probemode]').checked
-      })
-    }
-
-    sendAnalysis(analysisInfo){
-      /* to be overwritten by parent class */
-    }
-  }
-  
-  /* custom class for analysis-card */
-  class WebJuGExAnalysisComponent extends HTMLElement{
-    constructor(){
-      super()
-      this.template = ``
-      this.analysisObj = {}
-      this.status = 'pending'
-    }
-
-    connectedCallback(){
-      this.render()
-      this.panelHeader = this.querySelector('[panelHeader]')
-    }
-
-    render(){
-
-      this.template =
-      `
-        <div class = "row">
-          <div class="progress">
-            <div class="progress-bar progress-bar-striped active" style="width:100%"></div>
-          </div>
-        </div>
-      `
-      this.innerHTML = this.template
-    }
-  }
-
-  
-  const searchCard = document.querySelector('fzj-xg-webjugex-search-card')
-  const container = document.getElementById('fzj.xg.webjugex.container')
-  const parseContentToCsv = (content)=>{
-      const CSVContent = 'data:text/csv;charset=utf-8,'+content
-      const CSVURI = encodeURI(CSVContent)
-      const domDownload = document.createElement('a')
-      domDownload.setAttribute('href',CSVURI)
-      return domDownload
-  }
-  const createRow = ()=>{
-      const domDownload = document.createElement('div')
-      domDownload.style.display = 'flex'
-      domDownload.style.flexDirection = 'row'
-      const col1 = document.createElement('div')
-      const col2 = document.createElement('div')
-      col2.style.flex = col1.style.flex = '0 0 50%'
-      domDownload.appendChild(col1)
-      domDownload.appendChild(col2)
-      return [domDownload,col1,col2]
-  }
-  /* custom class for analysis-card */
-
-
-  class WebJuGExResultSuccessComponent extends HTMLElement{
-      constructor(){
-          super()
-          this.template = ``
-          this.resultObj = {}
-          this.pvalString = ''
-          this.areaString = ''
-          this.status = 'pending'
-          this.firstrender = true
-      }
-
-      connectedCallback(){
-        
-        if(this.firstrender){
-          this.childRoot = document.createElement('div')
-          this.appendChild(this.childRoot)
-          this.render()
-
-          this.panelHeader = this.childRoot.querySelector('[panelHeader]')
-          this.panelBody = this.childRoot.querySelector('[panelBody]')
-          this.panelHeader.addEventListener('click',()=>{
-            this.uiTogglePanelBody()
-          })
-          this.firstrender = false
-        }
-      }
-
-      uiTogglePanelBody(){
-          if(/hidden/.test(this.panelBody.className)){
-              this.panelBody.classList.remove('hidden')
-          }else{
-              this.panelBody.classList.add('hidden')
-          }
-      }
-
-      render(){
-          this.template =
-          `
-          <div class = "row">
-          <div class = "panel panel-success">
-          <div class = "btn btn-default btn-block panel-heading" panelHeader>
-          <span class="glyphicon glyphicon-ok"></span> Request completed! <u> Details below.</u>
-          </div>
-          <div class = "panel-body hidden" panelBody>
-          </div>
-          <div class = "panel-footer hidden" panelFooter>
-          </div>
-          </div>
-          </div>
-          `
-          this.childRoot.innerHTML = this.template
-      }
-  }
-
-  class WebJuGExResultFailureComponent extends HTMLElement{
-      constructor(){
-          super()
-          this.template = ``
-          this.resultObj = {}
-          this.pvalString = ''
-          this.areaString = ''
-          this.status = 'pending'
-          this.firstrender = true
-      }
-
-      connectedCallback(){
-          // const shadowRoot = this.attachShadow({mode:'open'})
-          if(this.firstrender){
-
-            this.childRoot = document.createElement('div')
-            this.appendChild(this.childRoot)
-            this.render()
-  
-            this.panelHeader = this.childRoot.querySelector('[panelHeader]')
-            this.panelBody = this.childRoot.querySelector('[panelBody]')
-            this.panelHeader.addEventListener('click',()=>{
-                                                  this.uiTogglePanelBody()
-                                              })
-            this.firstrender = false
-          }
-      }
-
-      uiTogglePanelBody(){
-          if(/hidden/.test(this.panelBody.className)){
-              this.panelBody.classList.remove('hidden')
-          }else{
-              this.panelBody.classList.add('hidden')
-          }
-      }
-
-      render(){
-          this.template =
-          `
-          <div class = "row">
-          <div class = "panel panel-danger">
-          <div class = "btn btn-default btn-block panel-heading" panelHeader>
-          <span class="glyphicon glyphicon-remove"></span> Error. Check below.
-          </div>
-          <div class = "panel-body hidden" panelBody>
-          </div>
-          <div class = "panel-footer hidden" panelFooter>
-          </div>
-          </div>
-          </div>
-          `
-          this.childRoot.innerHTML = this.template
-      }
-  }
-
-  searchCard.sendAnalysis = (analysisInfo) => {
-
-    console.log(analysisInfo)
-
-      const analysisCard = document.createElement('fzj-xg-webjugex-analysis-card')
-      analysisCard.analysisObj = analysisInfo
-      container.appendChild(analysisCard)
-      const headers = new Headers()
-      headers.append('Content-Type','application/json')
-      const request = new Request(`${URL_BASE}/jugex`,{
-        method : 'POST',
-        headers : headers,
-        mode : 'cors',
-        body : JSON.stringify(analysisInfo)
-      })
-      fetch(request)
-        .then(resp => {
-          if (resp.ok){
-            return Promise.resolve(resp)
-          }
-          else {
-            return new Promise((resolve,reject)=>{
-              resp.text()
-                .then(text=>reject(text))
-            })
-          }
-        })
-      .then(resp=>resp.text())
-      .then(text=>{
-        container.removeChild(analysisCard)
-        const resultCard = document.createElement('fzj-xg-webjugex-result-success-card')
-        container.appendChild(resultCard)
-        const date = new Date()
-        const dateDownload = ''+date.getFullYear()+(date.getMonth()+1)+date.getDate()+'_'+date.getHours()+':'+date.getMinutes()
-        resultCard.panelHeader.innerHTML += '('+dateDownload+')'
-        resultCard.resultObj = JSON.parse(text)
-        extension = createRow()
-        extension[0].style.order = -1
-        if(resultCard.resultObj.length == 3){
-            extension[1].innerHTML = 'Probe ids'
-        }
-        else if(resultCard.resultObj.length == 2){
-            extension[1].innerHTML = 'Gene Symbol'
-        }
-        extension[1].style.fontWeight = 900
-        extension[2].innerHTML = 'Pval'
-        extension[2].style.fontWeight = 900
-        resultCard.panelBody.style.maxHeight = '400px'
-        resultCard.panelBody.style.overflowY = 'scroll'
-        resultCard.panelBody.appendChild(extension[0])
-        let count = 0
-        for(let key in resultCard.resultObj[1]){
-            count = count+1
-        }
-        for(let key in resultCard.resultObj[1]){
-            resultCard.pvalString += [key, resultCard.resultObj[1][key]].join(',') + '\n'
-        }
-        if (count < 2){
-            for (let key in resultCard.resultObj[1]){
-                extension = createRow()
-                extension[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key])*1000) : 1000
-                extension[1].innerHTML = key
-                extension[2].innerHTML = resultCard.resultObj[1][key]
-                resultCard.panelBody.appendChild(extension[0])
-            }
-        }
-        else{
-            let v = 0
-            for(let key in resultCard.resultObj[1]){
-                extension = createRow()
-                extension[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key])*1000) : 1000
-                if(v == 0  || v == count-1){
-                    extension[1].innerHTML = key
-                    extension[2].innerHTML = resultCard.resultObj[1][key]
-                }
-                else if (v == 1 || v == 2){
-                    extension[1].innerHTML = '...'
-                    extension[2].innerHTML = '...'
-                }
-                v = v+1
-                resultCard.panelBody.appendChild(extension[0])
-            }
-        }
-        resultCard.areaString = 'ROI, x, y, z, '
-        if(resultCard.resultObj.length == 3){
-            resultCard.areaString +=  resultCard.resultObj[2]+'\n'
-        }
-        else{
-            for(let key in resultCard.resultObj[1]){
-                resultCard.areaString += key+','
-            }
-            resultCard.areaString = resultCard.areaString.slice(0, -1)
-            resultCard.areaString += '\n'
-        }
-        for(let key in resultCard.resultObj[0]){
-            for(let i in resultCard.resultObj[0][key]){
-                resultCard.areaString += key+','+resultCard.resultObj[0][key][i]['xyz'].join(',')+','+resultCard.resultObj[0][key][i]['winsorzed_mean']+'\n'
-            }
-        }
-
-        const domDownloadPVal = parseContentToCsv(resultCard.pvalString)
-        domDownloadPVal.innerHTML = 'Download Pvals of genes ('+dateDownload+')'
-        domDownloadPVal.setAttribute('download','PVal.csv')
-        resultCard.panelBody.append(domDownloadPVal)
-        linebreak = document.createElement("br")
-        resultCard.panelBody.append(linebreak)
-        const domDownloadArea = parseContentToCsv(resultCard.areaString)
-        domDownloadArea.innerHTML = 'Download sample coordinates ('+dateDownload+')'
-        domDownloadArea.setAttribute('download',`SampleCoordinates.csv`)
-        domDownloadArea.style.order = -3
-        resultCard.panelBody.append(domDownloadArea)
-      })
-      .catch(e=>{
-        console.log('Here 2')
-        container.removeChild(analysisCard)
-        const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
-        container.appendChild(resultCard)
-        console.log('error',e)
-        resultCard.panelBody.innerHTML = e
-      })
-  }
-
-  customElements.define('hover-region-selector-card', HoverRegionSelectorComponent)
-  customElements.define('fzj-xg-webjugex-analysis-card',WebJuGExAnalysisComponent)
-  
-  customElements.define('fzj-xg-webjugex-result-success-card',WebJuGExResultSuccessComponent)
-  customElements.define('fzj-xg-webjugex-result-failure-card',WebJuGExResultFailureComponent)
-  
-  customElements.define('dismissable-pill-card',DismissablePill)
-  
-  customElements.define('fzj-xg-webjugex-gene-card',WebjugexGeneComponent)
-  customElements.define('fzj-xg-webjugex-search-card',WebjugexSearchComponent)
-})()
diff --git a/src/plugin_examples/jugex/script.js b/src/plugin_examples/jugex/script.js
deleted file mode 100644
index 8286ab8d7fdc64d014348e94f1c1f2c0b579b17a..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/script.js
+++ /dev/null
@@ -1,838 +0,0 @@
-(() => {
-    // // const landmarkService = interactiveViewer.experimental.landmarkService
-    const code = () => {
-
-        const register = (tag,classname)=>{
-
-            try{
-                customElements.define(tag, classname)
-            }catch(e){
-                console.warn(tag + ' already registered',e)
-            }
-        }
-
-        
-        const basePath = 'res/plugins/'
-
-        const backendBasePath = 'http://examcopedia.club:8003/'
-
-        /* components like this are reusable. */
-        class HoverRegionSelectorComponent extends HTMLElement {
-
-            constructor() {
-                super()
-
-                this.template =
-                    `
-                    <div class = "input-group">
-                    <input class = "form-control" placeholder = "" readonly = "readonly" type = "text" region>
-                    <span class = "input-group-btn">
-                    <div class = "btn btn-default" editRegion>
-                    <span class = "glyphicon glyphicon-edit"></span>
-                    </div>
-                    </span>
-                    </div>
-                    `
-                this.listening = true
-                this.selectedRegion = null
-                this.shutdownHooks = []
-            }
-
-            connectNehubaHooks() {
-                const mouseOverNehuba = window.interactiveViewer.viewerHandle.mouseOverNehuba
-                    .subscribe(ev => {
-                        if(!this.listening)
-                            return
-                            
-                        this.selectedRegion = ev ? ev : null
-                        this.render()
-                    })
-
-                this.shutdownHooks.push(() => mouseOverNehuba.unsubscribe())
-            }
-
-            disconnectedCallback() {
-                // disconnected call back gets called multiple times, each time user chooses to 
-                this.shutdownHooks.forEach(fn => fn())
-            }
-
-            connectedCallback() {
-                // const shadowRoot = this.attachShadow({mode:'open'})
-                while(this.lastChild){
-                    this.removeChild(this.lastChild)
-                }
-
-                this.rootChild = document.createElement('div')
-                this.appendChild(this.rootChild)
-                this.connectNehubaHooks()
-                this.render()
-            }
-
-            render() {
-                this.rootChild.innerHTML = this.template
-                // console.log(this.selectedRegion)
-                this.rootChild.querySelector('input[region]').value = this.selectedRegion ? this.selectedRegion.name : ''
-                this.rootChild.querySelector('div[editRegion]').addEventListener('click', () => {
-                    this.rootChild.querySelector('input[region]').value = ''
-                    this.selectedRegion = null
-                    this.listening = true
-                })
-            }
-        }
-
-        register('hover-region-selector-card',HoverRegionSelectorComponent)
-
-        /* reusable pill components */
-        class DismissablePill extends HTMLElement {
-            constructor() {
-                super()
-                this.name = ''
-                this.template = ``
-            }
-
-            render() {
-                this.template =
-                    `
-                <span class = "label label-default">
-                <span pillName>${this.name}</span>
-                <span class = "glyphicon glyphicon-remove" pillRemove></span>
-                </span>
-                `
-            }
-
-            connectedCallback() {
-                // const shadowRoot = this.attachShadow({mode:'open'})
-
-                while(this.lastChild){
-                    this.removeChild(this.lastChild)
-                }
-
-                this.render()
-                this.innerHTML = this.template
-                const removePill = this.querySelector('span[pillRemove]')
-                removePill.addEventListener('click', () => {
-                    this.onRemove(this.name)
-                    this.remove()
-                })
-            }
-
-            onRemove(name) { }
-        }
-        register('dismissable-pill-card', DismissablePill)
-
-        class WebJuGExGeneComponent extends HTMLElement {
-            constructor() {
-                super()
-                this.selectedGenes = []
-                this.arrDict = []
-                this.autocompleteSuggestions = []
-                this.template =
-                    `
-                <div class = "input-group">
-                <input geneInputBox type = "text" class = "form-control" placeholder = "Enter gene of interest ... ">
-                <input geneImportInput class="hidden" type="file">
-                <span class = "input-group-btn">
-                <div geneAdd class = "btn btn-default" title = "Add a gene">Add</div>
-                <div geneImport class = "btn btn-default" title = "Import a CSV file">Import</div>
-                <div geneExport class = "btn btn-default" title = "Export selected genes into a csv file">Export</div>
-                </span>
-                </div>
-                `
-            }
-
-            connectedCallback() {
-                // const shadowRoot = this.attachShadow({mode:'open'})
-                this.rootChild = document.createElement('div')
-                this.rootChild.innerHTML = this.template
-                this.appendChild(this.rootChild)
-
-                this.config()
-                this.init()
-            }
-
-            config() {
-                this.MINCHAR = 1
-            }
-
-            init() {
-                this.elGeneInputBox = this.rootChild.querySelector('input[geneInputBox]')
-                this.elGeneImportInput = this.rootChild.querySelector('input[geneImportInput]')
-                this.elGeneAdd = this.rootChild.querySelector('div[geneAdd]')
-                this.elGeneImport = this.rootChild.querySelector('div[geneImport]')
-                this.elGeneExport = this.rootChild.querySelector('div[geneExport]')
-
-                const importGeneList = (file) => {
-                    const csvReader = new FileReader()
-                    csvReader.onload = (ev) => {
-                        const csvRaw = ev.target.result
-                        this.selectedGenes.splice(0, this.selectedGenes.length)
-                        csvRaw.split(/\r|\r\n|\n|\t|\,|\;/).forEach(gene => {
-                            if (gene.length > 0)
-                                this.addGene(gene)
-                        })
-                    }
-                    csvReader.readAsText(file, 'utf-8')
-                }
-                this.elGeneImportInput.addEventListener('change', (ev) => {
-                    importGeneList(ev.target.files[0])
-                })
-                this.elGeneImport.addEventListener('click', () => {
-                    this.elGeneImportInput.click()
-                })
-                this.elGeneExport.addEventListener('click', () => {
-                    const exportGeneList = 'data:text/csv;charset=utf-8,' + this.selectedGenes.join(',')
-                    const exportGeneListURI = encodeURI(exportGeneList)
-                    const dlExportGeneList = document.createElement('a')
-                    dlExportGeneList.setAttribute('href', exportGeneListURI)
-                    document.body.appendChild(dlExportGeneList)
-                    const date = new Date()
-                    dlExportGeneList.setAttribute('download', `exported_genelist_${'' + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + '_' + date.getHours() + date.getMinutes()}.csv`)
-                    dlExportGeneList.click()
-                    document.body.removeChild(dlExportGeneList)
-                })
-                this.elGeneAdd.addEventListener('click', () => {
-                    if (this.autocompleteSuggestions.length > 0 && this.elGeneInputBox.value.length >= this.MINCHAR)
-                        this.addGene(this.autocompleteSuggestions[0])
-                })
-
-                this.elGeneInputBox.addEventListener('dragenter', (ev) => {
-                    this.elGeneInputBox.setAttribute('placeholder', 'Drop file here to be uploaded')
-                })
-
-                this.elGeneInputBox.addEventListener('dragleave', (ev) => {
-                    this.elGeneInputBox.setAttribute('placeholder', 'Enter gene of interest ... ')
-                })
-
-                this.elGeneInputBox.addEventListener('drop', (ev) => {
-                    ev.preventDefault()
-                    ev.stopPropagation()
-                    ev.stopImmediatePropagation()
-                    this.elGeneInputBox.setAttribute('placeholder', 'Enter gene of interest ... ')
-                    //ev.dataTransfer.files[0]
-                })
-
-                this.elGeneInputBox.addEventListener('dragover', (ev) => {
-                    ev.preventDefault()
-                    ev.stopPropagation()
-                    ev.stopImmediatePropagation()
-                })
-
-                this.elGeneInputBox.addEventListener('keydown', (ev) => {
-                    ev.stopPropagation()
-                    ev.stopImmediatePropagation()
-                    if (ev.key == 'Enter') this.elGeneAdd.click()
-                })
-
-                this.loadExternalResources()
-                fetch(backendBasePath).then(txt => txt.json())
-                    .then(json => {
-                        this.arrDict = json
-                    })
-                    .catch(err => {
-                        console.log('failed to fetch full list of genes... using limited list of genes instead ...', e)
-                        this.arrDict = ["ADRA2A", "AVPR1B", "CHRM2", "CNR1", "CREB1", "CRH", "CRHR1", "CRHR2", "GAD2", "HTR1A", "HTR1B", "HTR1D", "HTR2A", "HTR3A", "HTR5A", "MAOA", "PDE1A", "SLC6A2", "SLC6A4", "SST", "TAC1", "TPH1", "GPR50", "CUX2", "TPH2"]
-                    })
-            }
-
-            loadExternalResources() {
-                this.autoCompleteCss = document.createElement('link')
-                this.autoCompleteCss.type = 'text/css'
-                this.autoCompleteCss.rel = 'stylesheet'
-                this.autoCompleteCss.href = basePath + 'js-autocomplete.min.css'
-
-                this.autoCompleteJs = document.createElement('script')
-                this.autoCompleteJs.onload = () => {
-                    /* append autocomplete here */
-                    this.autocompleteInput = new autoComplete({
-                        selector: this.elGeneInputBox,
-                        delay: 0,
-                        minChars: this.MINCHAR,
-                        cache: false,
-                        source: (term, suggest) => {
-                            const searchTerm = new RegExp('^' + term, 'gi')
-                            this.autocompleteSuggestions = this.arrDict.filter(dict => searchTerm.test(dict))
-                            suggest(this.autocompleteSuggestions)
-                        },
-                        onSelect: (e, term, item) => {
-                            this.addGene(term)
-                        }
-                    })
-                }
-                this.autoCompleteJs.src = basePath + 'js-autocomplete.min.js'
-
-                document.head.appendChild(this.autoCompleteJs)
-                document.head.appendChild(this.autoCompleteCss)
-            }
-
-            addGene(gene) {
-                const pill = document.createElement('dismissable-pill-card')
-                pill.onRemove = (name) =>
-                    this.selectedGenes.splice(this.selectedGenes.indexOf(name), 1)
-                pill.name = gene
-                this.rootChild.appendChild(pill)
-                this.selectedGenes.push(gene)
-                this.elGeneInputBox.value = ''
-                this.elGeneInputBox.blur()
-                this.elGeneInputBox.focus()
-            }
-        }
-
-        register('fzj-xg-webjugex-gene-card', WebJuGExGeneComponent)
-
-        class WebJuGExSearchComponent extends HTMLElement {
-            constructor() {
-                super()
-                this.template = `
-                <div>
-                    <div class = "col-md-12">
-                    <small>
-                        Find a set of differentially expressed genes between two user defined volumes of interest based on JuBrain maps.
-                        The tool downloads expression values of user specified sets of genes from Allen Brain API.
-                        Then, it uses zscores to find which genes are expressed differentially between the user specified regions of interests.
-                        After the analysis is finished, the genes and their calculated p values are displayed. There is also an option of downloading the gene names and their p values
-                        and the roi coordinates used in the analysis.
-                        Please select two regions of interest, and at least one gene :
-                    </small>
-                </div>
-                <div class = "col-md-12">
-                    <hover-region-selector-card area1>
-                    </hover-region-selector-card>
-                </div>
-                <div class = "col-md-12">
-                    <hover-region-selector-card area2>
-                    </hover-region-selector-card>
-                </div>
-                <div class = "col-md-12">
-                    <div class = "input-group">
-                        <span class = "input-group-addon">
-                            Threshold
-                        </span>
-                        <input value = "0.20" class = "form-control" type = "range" min = "0" max = "1" step = "0.01" threshold \>
-                        <span class = "input-group-addon" thresholdValue>
-                            0.20
-                        </span>
-                    </div>
-                </div>
-                <div class = "col-md-12">
-                    <div class="input-group">
-                        <input id = "fzj-hb-jugex-singleprobe" name = "fzj-hb-jugex-singleprobe" type="checkbox" probemode> 
-                        <label for = "fzj-hb-jugex-singleprobe">Single Probe Mode</label>
-                    </div>
-                </div>
-                <div class = "col-md-12">
-                    <div class = "input-group">
-                        <input name = "fzj-hb-jugex-hemisphere" type = "radio" id = "fzj-hb-jugex-hemisphere-lh" value = "left-hemisphere" checked/>
-                        <label for = "fzj-hb-jugex-hemisphere-lh">Left Hemisphere</label>
-                    </div>
-                    <div class = "input-group">
-                        <input name = "fzj-hb-jugex-hemisphere" type = "radio" id = "fzj-hb-jugex-hemisphere-rh" value = "right-hemisphere"/>
-                        <label for = "fzj-hb-jugex-hemisphere-rh">Right Hemisphere</label>
-                    </div>
-                </div>
-                <div>
-                    <div class = "col-md-12">
-                        <fzj-xg-webjugex-gene-card>
-                        </fzj-xg-webjugex-gene-card>
-                    </div>
-                </div>
-                <div>
-                    <div class = "col-md-12">
-                        <div class = "btn btn-default btn-block" analysisSubmit>
-                            Start differential analysis
-                        </div>
-                    </div>
-                </div>
-                    `
-                this.mouseEventSubscription = this.rootChild = this.threshold = this.elArea1 = this.elArea2 = null
-                this.selectedGenes = []
-
-                this.datasets = []
-
-                this.datasetSub = window.interactiveViewer.metadata.datasetsBSubject.subscribe(datasets=>{
-                    this.datasets = datasets
-                })
-
-                
-        // const createsth = ()=>{
-        //     const div1 = document.createElement('div')
-        //     const child1 = document.createElement('div')
-        //     const child2 = document.createElement('div')
-
-        //     child1.innerHTML = 'helo'
-        //     child2.innerHTML = 'world'
-        //     div1.appendChild(child1)
-        //     div1.appendChild(child2)
-
-        //     return [div1,child1,child2]
-        // }
-        // const container = document.getElementById('fzj.xg.webjugex.container')
-
-        // const div2 = createsth()
-        // container.appendChild(div2[0])
-
-            }
-
-            connectedCallback() {
-                
-                while(this.lastChild){
-                    this.removeChild(this.lastChild)
-                }
-
-                // const shadowRoot = this.attachShadow({mode:'open'})
-                this.rootChild = document.createElement('div')
-                this.rootChild.innerHTML = this.template
-                this.appendChild(this.rootChild)
-
-                /* init */
-                this.init()
-
-                /* attach click listeners */
-                this.onViewerClick()
-
-            }
-
-            init() {
-                this.elArea1 = this.rootChild.querySelector('hover-region-selector-card[area1]')
-                this.elArea2 = this.rootChild.querySelector('hover-region-selector-card[area2]')
-                this.elArea1.listening = true
-                this.elArea2.listening = false
-                this.probemodeval = false
-
-                this.elGenesInput = this.rootChild.querySelector('fzj-xg-webjugex-gene-card')
-
-                this.elAnalysisSubmit = this.rootChild.querySelector('div[analysisSubmit]')
-                this.elAnalysisSubmit.style.marginBottom = '20px'
-                this.elAnalysisSubmit.addEventListener('click', () => {
-                    this.analysisGo()
-                })
-
-                this.elThreshold = this.rootChild.querySelector('input[threshold]')
-                const elThresholdValue = this.rootChild.querySelector('span[thresholdValue]')
-                this.elThreshold.addEventListener('input', (ev) => {
-                    elThresholdValue.innerHTML = parseFloat(this.elThreshold.value).toFixed(2)
-                })
-            }
-
-            onViewerClick() {
-                this.mouseEventSubscription = window.interactiveViewer.viewerHandle.mouseEvent
-                    .subscribe(ev => {
-                        if(ev.eventName !== 'click') return
-                        if (this.elArea1.listening && this.elArea2.listening) {
-                            this.elArea1.listening = false
-                        }
-                        else if (this.elArea2.listening) {
-                            this.elArea2.listening = false
-                        }
-                        else if (this.elArea1.listening) {
-                            if (this.elArea2.selectedRegion == null) {
-                                this.elArea1.listening = false
-                                this.elArea2.listening = true
-                            }
-                            else if (this.elArea2.selectedRegion != null) {
-                                this.elArea1.listening = false
-                            }
-                        }
-                    })
-
-            }
-
-            analysisGo() {
-                /* test for submit conditions */
-                const hemisphere = this.rootChild.querySelector('input[name="fzj-hb-jugex-hemisphere"]:checked').value
-
-                if (this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null || this.elGenesInput.selectedGenes.length < 1) {
-                    const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
-                    
-                    const container = document.getElementById('fzj.xg.webjugex.container')
-
-                    container.appendChild(resultCard)
-                    let e = 'Error: We need '
-                    if (this.elArea1.selectedRegion == null || this.elArea2.selectedRegion == null) e += 'both areas to be defined and '
-                    if (this.elGenesInput.selectedGenes.length < 1) e += 'atleast one gene'
-                    else e = e.substr(0, 40)
-                    e += '.'
-                    resultCard.panelBody.innerHTML = e
-                    return
-                }
-
-                
-                console.log(this.elArea1.selectedRegion.name,
-                    this.elArea2.selectedRegion.name,
-                    this.elArea1.selectedRegion.PMapURL,
-                    this.elArea2.selectedRegion.PMapURL,
-                    this.elThreshold.value,
-                    this.elGenesInput.selectedGenes,
-                    hemisphere)
-
-                const getPmap = (name) => {
-                    if(name == 'AStr (Amygdala)') throw Error('AStr (Amygdala) has not yet been implemented in MNI152')
-                    
-                    
-
-                    const dataset = this.datasets.find(dataset => dataset.type === 'Cytoarchitectonic Probabilistic Map' && dataset.regionName[0].regionName === name)
-                    const url = dataset.files[0].url
-                    console.log('getpmap', url)
-                    const host = 'https://neuroglancer-dev.humanbrainproject.org'
-                    // const host = 'http://offline-neuroglancer:80'
-                    const mni152url = `${host}/precomputed/JuBrain/v2.2c/PMaps/MNI152/${url.substring(url.lastIndexOf('/') + 1).replace('.nii',hemisphere == 'left-hemisphere' ? '_l.nii' : '_r.nii')}`
-                    console.log('MNI152 PMap',mni152url)
-                    if (dataset) { return mni152url } else { throw new Error('could not find PMap') }
-                }
-
-                const newArea1 = {
-                    name: this.elArea1.selectedRegion.name,
-                    PMapURL: getPmap(this.elArea1.selectedRegion.name)
-                }
-                const newArea2 = {
-                    name: this.elArea2.selectedRegion.name,
-                    PMapURL: getPmap(this.elArea2.selectedRegion.name)
-                }
-                console.log('fixed loop reference',
-                    newArea1.name,
-                    newArea2.name,
-                    newArea1.PMapURL,
-                    newArea2.PMapURL,
-                    this.elThreshold.value,
-                    this.elGenesInput.selectedGenes)
-
-                this.sendAnalysis({
-                    area1: newArea1,
-                    area2: newArea2,
-                    threshold: this.elThreshold.value,
-                    selectedGenes: this.elGenesInput.selectedGenes,
-                    mode: this.rootChild.querySelector('input[probemode]').checked
-                })
-            }
-
-            sendAnalysis(analysisInfo) {
-
-                const analysisCard = document.createElement('fzj-xg-webjugex-analysis-card')
-                analysisCard.analysisObj = analysisInfo
-                
-                const container = document.getElementById('fzj.xg.webjugex.container')
-
-                container.appendChild(analysisCard)
-                const headers = new Headers()
-                headers.append('Content-Type', 'application/json')
-                const request = new Request(backendBasePath + 'jugex', {
-                    method: 'POST',
-                    headers: headers,
-                    mode: 'cors',
-                    body: JSON.stringify(analysisInfo)
-                })
-                fetch(request)
-                    .then(resp => {
-                        if (resp.ok) {
-                            return Promise.resolve(resp)
-                        }
-                        else {
-                            return new Promise((resolve, reject) => {
-                                resp.text()
-                                    .then(text => reject(text))
-                            })
-                        }
-                    })
-                    .then(resp => resp.text())
-                    .then(text => {
-
-                        const createRow = () => {
-                            const domDownload = document.createElement('div')
-                            domDownload.style.display = 'flex'
-                            domDownload.style.flexDirection = 'row'
-                            const col1 = document.createElement('div')
-                            const col2 = document.createElement('div')
-                            col2.style.flex = col1.style.flex = '0 0 50%'
-                            domDownload.appendChild(col1)
-                            domDownload.appendChild(col2)
-                            return [domDownload, col1, col2]
-                        }
-                        
-                        container.removeChild(analysisCard)
-                        const resultCard = document.createElement('fzj-xg-webjugex-result-success-card')
-                        container.appendChild(resultCard)
-                        const date = new Date()
-                        const dateDownload = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + '_' + date.getHours() + ':' + date.getMinutes()
-                        resultCard.panelHeader.innerHTML += '(' + dateDownload + ')'
-                        resultCard.resultObj = JSON.parse(text)
-                        const extension = createRow()
-                        extension[0].style.order = -1
-                        if (resultCard.resultObj.length == 3) {
-                            extension[1].innerHTML = 'Probe ids'
-                        }
-                        else if (resultCard.resultObj.length == 2) {
-                            extension[1].innerHTML = 'Gene Symbol'
-                        }
-                        extension[1].style.fontWeight = 900
-                        extension[2].innerHTML = 'Pval'
-                        extension[2].style.fontWeight = 900
-                        resultCard.panelBody.style.maxHeight = '400px'
-                        resultCard.panelBody.style.overflowY = 'scroll'
-                        resultCard.panelBody.appendChild(extension[0])
-                        let count = 0
-                        for (let key in resultCard.resultObj[1]) {
-                            count = count + 1
-                        }
-                        for (let key in resultCard.resultObj[1]) {
-                            resultCard.pvalString += [key, resultCard.resultObj[1][key]].join(',') + '\n'
-                        }
-                        if (count < 2) {
-                            for (let key in resultCard.resultObj[1]) {
-                                const extension1 = createRow()
-                                extension1[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key]) * 1000) : 1000
-                                extension1[1].innerHTML = key
-                                extension1[2].innerHTML = resultCard.resultObj[1][key]
-                                resultCard.panelBody.appendChild(extension1[0])
-                            }
-                        }
-                        else {
-                            let v = 0
-                            for (let key in resultCard.resultObj[1]) {
-                                const extension2 = createRow()
-                                extension2[0].style.order = Number(resultCard.resultObj[1][key]) ? Math.round(Number(resultCard.resultObj[1][key]) * 1000) : 1000
-                                if (v == 0 || v == count - 1) {
-                                    extension2[1].innerHTML = key
-                                    extension2[2].innerHTML = resultCard.resultObj[1][key]
-                                }
-                                else if (v == 1 || v == 2) {
-                                    extension2[1].innerHTML = '...'
-                                    extension2[2].innerHTML = '...'
-                                }
-                                v = v + 1
-                                resultCard.panelBody.appendChild(extension2[0])
-                            }
-                        }
-                        resultCard.areaString = 'ROI, x, y, z, '
-                        if (resultCard.resultObj.length == 3) {
-                            resultCard.areaString += resultCard.resultObj[2] + '\n'
-                        }
-                        else {
-                            for (let key in resultCard.resultObj[1]) {
-                                resultCard.areaString += key + ','
-                            }
-                            resultCard.areaString = resultCard.areaString.slice(0, -1)
-                            resultCard.areaString += '\n'
-                        }
-    
-                        /* injected to add landmarks */
-                        const newLandmarks = []
-    
-                        for (let key in resultCard.resultObj[0]) {
-                            for (let i in resultCard.resultObj[0][key]) {
-                                resultCard.areaString += key + ',' + resultCard.resultObj[0][key][i]['xyz'].join(',') + ',' + resultCard.resultObj[0][key][i]['winsorzed_mean'] + '\n'
-                                
-                                const pos = resultCard.resultObj[0][key][i]['xyz']
-                                const newLandmark = {
-                                    pos : pos,
-                                    id : pos.join('_'),
-                                    properties : pos.join('_'),
-                                    hover:false
-                                }
-                                newLandmarks.push(newLandmark)
-                                // landmarkService.addLandmark(newLandmark)
-                            }
-                        }
-    
-                        // newLandmarks.forEach((lm,idx)=>landmarkService.TEMP_parseLandmarkToVtk(lm,idx))
-    
-                        /* end */
-    
-                        const domDownloadPVal = parseContentToCsv(resultCard.pvalString)
-                        domDownloadPVal.innerHTML = 'Download Pvals of genes (' + dateDownload + ')'
-                        domDownloadPVal.setAttribute('download', 'PVal.csv')
-                        resultCard.panelBody.append(domDownloadPVal)
-                        const linebreak = document.createElement("br")
-                        resultCard.panelBody.append(linebreak)
-                        const domDownloadArea = parseContentToCsv(resultCard.areaString)
-                        domDownloadArea.innerHTML = 'Download sample coordinates (' + dateDownload + ')'
-                        domDownloadArea.setAttribute('download', `SampleCoordinates.csv`)
-                        domDownloadArea.style.order = -3
-                        resultCard.panelBody.append(domDownloadArea)
-                    })
-                    .catch(e => {
-                        console.log('Here 2')
-                        container.removeChild(analysisCard)
-                        const resultCard = document.createElement('fzj-xg-webjugex-result-failure-card')
-                        container.appendChild(resultCard)
-                        console.log('error', e)
-                        resultCard.panelBody.innerHTML = e
-                    })
-    
-            };
-        }
-
-        register('fzj-xg-webjugex-search-card', WebJuGExSearchComponent)
-
-        /* custom class for analysis-card */
-        class WebJuGExAnalysisComponent extends HTMLElement {
-            constructor() {
-                super()
-                this.template = ``
-                this.analysisObj = {}
-                this.status = 'pending'
-            }
-
-            connectedCallback() {
-                
-                while(this.lastChild){
-                    this.removeChild(this.lastChild)
-                }
-
-                // const shadowRoot = this.attachShadow({mode:'open'})
-                this.childRoot = document.createElement('div')
-                this.appendChild(this.childRoot)
-                this.render()
-                this.panelHeader = this.childRoot.querySelector('[panelHeader]')
-            }
-
-            render() {
-
-                this.template =
-                    `
-                <div>
-                <div class="progress">
-                <div class="progress-bar progress-bar-striped active" style="width:100%"></div>
-                </div>
-                </div>
-                `
-                this.childRoot.innerHTML = this.template
-            }
-        }
-        
-        register('fzj-xg-webjugex-analysis-card', WebJuGExAnalysisComponent)
-
-        const parseContentToCsv = (content) => {
-            const CSVContent = 'data:text/csv;charset=utf-8,' + content
-            const CSVURI = encodeURI(CSVContent)
-            const domDownload = document.createElement('a')
-            domDownload.setAttribute('href', CSVURI)
-            return domDownload
-        }
-        /* custom class for analysis-card */
-
-
-        class WebJuGExResultSuccessComponent extends HTMLElement {
-            constructor() {
-                super()
-                this.template = ``
-                this.resultObj = {}
-                this.pvalString = ''
-                this.areaString = ''
-                this.status = 'pending'
-            }
-
-            connectedCallback() {
-                
-                while(this.lastChild){
-                    this.removeChild(this.lastChild)
-                }
-
-                // const shadowRoot = this.attachShadow({mode:'open'})
-                this.childRoot = document.createElement('div')
-                this.appendChild(this.childRoot)
-                this.render()
-
-                this.panelHeader = this.childRoot.querySelector('[panelHeader]')
-                this.panelBody = this.childRoot.querySelector('[panelBody]')
-                this.panelHeader.addEventListener('click', () => {
-                    this.uiTogglePanelBody()
-                })
-            }
-
-            uiTogglePanelBody() {
-                if (/hidden/.test(this.panelBody.className)) {
-                    this.panelBody.classList.remove('hidden')
-                } else {
-                    this.panelBody.classList.add('hidden')
-                }
-            }
-
-            render() {
-                this.template =
-                    `
-                <div>
-                <div class = "panel panel-success">
-                <div class = "btn btn-default btn-block panel-heading" panelHeader>
-                <span class="glyphicon glyphicon-ok"></span> Request completed! <u> Details below.</u>
-                </div>
-                <div class = "panel-body hidden" panelBody>
-                </div>
-                <div class = "panel-footer hidden" panelFooter>
-                </div>
-                </div>
-                </div>
-                `
-                this.childRoot.innerHTML = this.template
-            }
-        }
-
-        class WebJuGExResultFailureComponent extends HTMLElement {
-            constructor() {
-                super()
-                this.template = ``
-                this.resultObj = {}
-                this.pvalString = ''
-                this.areaString = ''
-                this.status = 'pending'
-            }
-
-            connectedCallback() {
-                
-                while(this.lastChild){
-                    this.removeChild(this.lastChild)
-                }
-
-                // const shadowRoot = this.attachShadow({mode:'open'})
-                this.childRoot = document.createElement('div')
-                this.appendChild(this.childRoot)
-                this.render()
-
-                this.panelHeader = this.childRoot.querySelector('[panelHeader]')
-                this.panelBody = this.childRoot.querySelector('[panelBody]')
-                this.panelHeader.addEventListener('click', () => {
-                    this.uiTogglePanelBody()
-                })
-            }
-
-            uiTogglePanelBody() {
-                if (/hidden/.test(this.panelBody.className)) {
-                    this.panelBody.classList.remove('hidden')
-                } else {
-                    this.panelBody.classList.add('hidden')
-                }
-            }
-
-            render() {
-                this.template =
-                    `
-                <div>
-                <div class = "panel panel-danger">
-                <div class = "btn btn-default btn-block panel-heading" panelHeader>
-                <span class="glyphicon glyphicon-remove"></span> Error. Check below.
-                </div>
-                <div class = "panel-body hidden" panelBody>
-                </div>
-                <div class = "panel-footer hidden" panelFooter>
-                </div>
-                </div>
-                </div>
-                `
-                this.childRoot.innerHTML = this.template
-            }
-        }
-
-        register('fzj-xg-webjugex-result-success-card', WebJuGExResultSuccessComponent)
-        register('fzj-xg-webjugex-result-failure-card', WebJuGExResultFailureComponent)
-
-        interactiveViewer.pluginControl['fzj.hb.jugex'].onShutdown(() => {
-            console.log('shutting down fzj jugex')
-            // landmarkService.TEMP_clearVtkLayers()
-            interactiveViewer.pluginControl.unloadExternalLibraries(['webcomponentsLite'])
-        })
-
-    }
-    interactiveViewer.pluginControl.loadExternalLibraries(['webcomponentsLite'])
-        .then(() => code())
-        .catch(console.warn.bind(this))
-})()
-
-
diff --git a/src/plugin_examples/jugex/template.html b/src/plugin_examples/jugex/template.html
deleted file mode 100644
index 5ab759f6278401a09cf337d7630b076175f92a68..0000000000000000000000000000000000000000
--- a/src/plugin_examples/jugex/template.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div id = "fzj.xg.webjugex.container">
-  <fzj-xg-webjugex-search-card>
-  </fzj-xg-webjugex-search-card>
-</div>
-<style>
-fzj-xg-webjugex-search-card
-{
-  display:inline-block;
-}
-</style>
\ No newline at end of file
diff --git a/src/plugin_examples/mime/manifest.json b/src/plugin_examples/mime/manifest.json
deleted file mode 100644
index 382561433f73bc0a0a8c95cbbeb1fde823173b05..0000000000000000000000000000000000000000
--- a/src/plugin_examples/mime/manifest.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "name": "fzj.xg.mime",
-  "displayName":"Mime",
-  "type": "plugin",
-  "templateURL": "http://localhost:10080/mime/template.html",
-  "scriptURL": "http://localhost:10080/mime/script.js",
-  "initState" : {
-    "test" : "value"
-  }
-}
\ No newline at end of file
diff --git a/src/plugin_examples/mime/script.js b/src/plugin_examples/mime/script.js
deleted file mode 100644
index 0d56eb9d27a36eed725b43e67b484c353f04996e..0000000000000000000000000000000000000000
--- a/src/plugin_examples/mime/script.js
+++ /dev/null
@@ -1,52 +0,0 @@
-(() => {
-
-  console.log('works?',interactiveViewer.pluginControl['fzj.xg.mime'].initState)
-
-  interactiveViewer.pluginControl['fzj.xg.mime'].setInitManifestUrl('http://localhost:10080/test.json')
-
-  let ref
-  const appendNewScript = url => new Promise((resolve,reject) => {
-    const el = document.createElement('script')
-    el.setAttribute('src', url)
-    el.onload = resolve
-    el.onerror = reject
-    document.head.appendChild(el)
-  })
-  appendNewScript('https://www.gstatic.com/firebasejs/5.4.0/firebase-app.js')
-    .then(() => appendNewScript('https://www.gstatic.com/firebasejs/5.4.0/firebase-database.js'))
-    .then(() => {
-      const config = {
-        apiKey: "AIzaSyBq4fJdgbys419up-pHaXecXv5PWNCeWKc",
-        authDomain: "websocket-40105.firebaseapp.com",
-        databaseURL: "https://websocket-40105.firebaseio.com",
-        projectId: "websocket-40105",
-        storageBucket: "websocket-40105.appspot.com",
-        messagingSenderId: "643659482319"
-      }
-      firebase.initializeApp(config)
-
-      const database = firebase.database()
-      ref = database.ref('perspectiveState')
-    })
-    .catch(e => console.warn('promise all error', e))
-
-  try{
-    nehubaViewer.navigationState.perspectiveOrientation
-      .throttleTime(16)
-      .subscribe(quat => {
-        if(ref){
-          ref.set(Array.from(quat))
-        }
-      })
-  }catch(e){
-
-  }
-
-  // let num = 1
-  // const animate = () => {
-  //   viewer.perspectiveNavigationState.pose.orientation.restoreState([0,0,0,num])
-  //   requestAnimationFrame(animate)
-  // }
-  // requestAnimationFrame(animate)
-  
-})()
\ No newline at end of file
diff --git a/src/plugin_examples/mime/template.html b/src/plugin_examples/mime/template.html
deleted file mode 100644
index 3b12464976a5fd9e07d67dd7d5cf4f0f10188410..0000000000000000000000000000000000000000
--- a/src/plugin_examples/mime/template.html
+++ /dev/null
@@ -1 +0,0 @@
-TEST
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/app.js b/src/plugin_examples/newWebJugex/app.js
deleted file mode 100644
index 0b30c38e52d682453b475283a0d490b906377ebf..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/app.js
+++ /dev/null
@@ -1,2 +0,0 @@
-webpackJsonp([0],{AjZS:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\ndiv.v-pill-container[data-v-94d8f66e]\n{\n  display:inline-block;\n  white-space: nowrap;\n  margin:5px;\n  padding:0.2em 0.6em;\n  border-radius: 0.8em;\n}\ndiv.v-pill-container[data-v-94d8f66e]\n{\n  cursor: default;\n  -webkit-transition: all 300ms;\n  transition: all 300ms;\n  background-color:rgba(50,50,50,0.2);\n}\ndiv.v-pill-container[data-v-94d8f66e]:hover\n{\n  background-color:rgba(150,150,150,0.2);\n}\nspan.v-pill-name[data-v-94d8f66e]\n{\n  cursor: default;\n  display:inline-block;\n}\nspan.v-pill-remove[data-v-94d8f66e]\n{\n  cursor: default;\n  display:inline-block;\n}\nspan.v-pill-remove[data-v-94d8f66e]:hover\n{\n  font-weight: 900;\n  color:rgba(200,30,30,1);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/pill.vue"],names:[],mappings:";AAuBA;;EAEA,qBAAA;EACA,oBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,gBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,oCAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,gBAAA;EACA,qBAAA;CACA;AACA;;EAEA,gBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,iBAAA;EACA,wBAAA;CACA",file:"pill.vue",sourcesContent:['<template>\n<div @click.stop.prevent = "$emit(\'select-pill\')" class = "v-pill-container">\n  <span class = "v-pill-name">{{ name }}</span>\n  <span v-if = "closable" @click.stop.prevent = "$emit(\'remove-pill\')" class = "v-pill-remove">&times;</span>\n</div>\n</template>\n\n<script>\nmodule.exports = {\n  props: {\n    name: {\n      type: String,\n      default: \'Untitled\'\n    },\n    closable: {\n      type: Boolean,\n      default: true\n    }\n  }\n}\n<\/script>\n\n<style scoped>\ndiv.v-pill-container\n{\n  display:inline-block;\n  white-space: nowrap;\n  margin:5px;\n  padding:0.2em 0.6em;\n  border-radius: 0.8em;\n}\n\ndiv.v-pill-container\n{\n  cursor: default;\n  transition: all 300ms;\n  background-color:rgba(50,50,50,0.2);\n}\n\ndiv.v-pill-container:hover\n{\n  background-color:rgba(150,150,150,0.2);\n}\n\nspan.v-pill-name\n{\n  cursor: default;\n  display:inline-block;\n}\nspan.v-pill-remove\n{\n  cursor: default;\n  display:inline-block;\n}\n\nspan.v-pill-remove:hover\n{\n  font-weight: 900;\n  color:rgba(200,30,30,1);\n}\n</style>\n'],sourceRoot:""}])},B6Kj:function(n,e,t){var o=t("RpWc");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("9aafbbb6",o,!1,{})},CJjv:function(n,e,t){var o=t("n8WV");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("6decef42",o,!1,{})},E8lD:function(n,e,t){var o=t("fKQA");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("041522c3",o,!1,{})},"KU0+":function(n,e,t){var o=t("R6Sg");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("c9be660c",o,!1,{})},NHnr:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=t("lRwf"),i=t.n(o),a={props:{top:Number,left:Number},data:function(){return{show:{type:Boolean,default:!1}}},computed:{contentContainerLeft:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?Math.min(this.left,this.$refs.screen.clientWidth-this.$refs.content.clientWidth)+"px":"0px"},contentContainerTop:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?Math.min(this.top,this.$refs.screen.clientHeight-this.$refs.content.clientHeight)+"px":"0px"},contentContainerWidth:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?"auto":"100%"},contentContainerHeight:function(){return this.top&&this.left&&this.$refs.content&&this.$refs.screen?"auto":"100%"}}},r=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",[t("div",{staticClass:"v-modal-container"},[t("div",{ref:"screen",staticClass:"v-modal-screen",on:{click:function(e){n.$emit("close-modal")}}}),n._v(" "),t("div",{staticClass:"v-modal-content-container",style:{top:n.contentContainerTop,left:n.contentContainerLeft,width:n.contentContainerWidth,height:n.contentContainerHeight}},[t("div",{ref:"content",staticClass:"v-modal-content"},[t("div",{staticClass:"v-modal-header"},[n._t("v-modal-header")],2),n._v(" "),t("div",{staticClass:"v-modal-body"},[n._t("v-modal-body")],2),n._v(" "),t("div",{staticClass:"v-modal-footer"},[n._t("v-modal-footer")],2)])])])])};r._withStripped=!0;var s={render:r,staticRenderFns:[]},A=s;var l=!1;var c=t("VU/8")(a,A,!1,function(n){l||t("CJjv")},"data-v-0eaeaf66",null);c.options.__file="src/components/modal.vue";var d=c.exports,p=t("u0wG"),u={props:{placeholder:{type:String,default:"Start typing to search ..."},rawarray:{type:Array,default:function(){return[]}},rendermax:{type:Number,default:25}},data:function(){return{showSuggestions:!1,typedText:"",highlightIndex:0}},methods:{selectSlice:function(n){this.$emit("selectslice",n)},hitEnter:function(){switch(event.key){case"ArrowDown":this.highlightIndex+=1;break;case"Escape":this.$refs.input.blur();break;case"ArrowUp":this.highlightIndex-=1,this.highlightIndex<=0&&(this.highlightIndex+=this.filteredArray.length);break;case"Enter":var n=this.filteredArray.slice();if(n.length>0){this.typedText="";var e=document.querySelector(":focus");e&&e.blur(),this.selectSlice(n[0])}break;default:this.highlightIndex=0}}},computed:{rawArrayLowerCase:function(){return this.rawarray.map(function(n){return n.toLowerCase()})},typedTextLowerCase:function(){return this.typedText.toLowerCase()},filteredArray:function(){var n=this,e=new RegExp(this.typedText,"i"),t=this.rawarray.find(function(e){return e.toLowerCase()===n.typedTextLowerCase}),o=this.rawarray.filter(function(n){return e.test(n)}).filter(function(e){return e.toLowerCase()!==n.typedTextLowerCase}).filter(function(e,t){return t<=n.rendermax});return t?[t].concat(o.slice(0,o.length>=this.rendermax?o.length-1:o.length)):o}}},h=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"autocomplete-container"},[t("input",{directives:[{name:"model",rawName:"v-model",value:n.typedText,expression:"typedText"}],ref:"input",attrs:{type:"text",placeholder:n.placeholder},domProps:{value:n.typedText},on:{keydown:function(e){return e.stopPropagation(),n.hitEnter(e)},focus:function(e){n.showSuggestions=!0},blur:function(e){n.showSuggestions=!1},input:function(e){e.target.composing||(n.typedText=e.target.value)}}}),n._v(" "),t("transition",{attrs:{name:"fade"}},[n.showSuggestions?t("div",{staticClass:"autocomplete-suggestion-container"},n._l(n.filteredArray,function(e,o){return t("div",{key:o,staticClass:"autocomplete-suggestions",class:{active:n.highlightIndex%n.filteredArray.length===o},on:{mousedown:function(t){n.selectSlice(e)}}},[n._v("\n        "+n._s(e)+"\n      ")])})):n._e()])],1)};h._withStripped=!0;var m={render:h,staticRenderFns:[]},f=m;var v=!1;var g=t("VU/8")(u,f,!1,function(n){v||t("B6Kj")},"data-v-8351e810",null);g.options.__file="src/components/autocomplete.vue";var C=g.exports,b={props:{value:{type:String,default:"default value"},copyable:{type:Boolean,default:!0}},data:function(){return{copiedFlag:!1,timeoutRef:0,copyBtnShown:!1}},methods:{copyToClipBoard:function(){var n=this;this.copiedFlag=!0,this.timeoutRef&&clearTimeout(this.timeoutRef),setTimeout(function(){n.copiedFlag=!1,n.timeoutRef=0},2e3),this.$refs.inputEl.focus(),this.$refs.inputEl.select(),document.execCommand("copy",!1)},methodGetCopyText:function(){return this.copiedFlag?"Copied!":"Copy"}}},x=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"copy-field-root"},[t("input",{ref:"inputEl",attrs:{readonly:"",type:"text"},domProps:{value:n.value}}),n._v(" "),t("div",{attrs:{hidden:!n.copyable},on:{click:function(e){return e.stopPropagation(),n.copyToClipBoard(e)}}},[n._v(n._s(n.methodGetCopyText())+"\n  ")])])};x._withStripped=!0;var E={render:x,staticRenderFns:[]},y=E;var w=!1;var k=t("VU/8")(b,y,!1,function(n){w||t("E8lD")},null,null);k.options.__file="src/components/copyfield.vue";var B=k.exports,_={props:{collapsedHeight:{type:Number,default:25}},data:function(){return{collapsed:{type:Boolean,default:!0},actualHeight:{type:Number,default:25}}},mounted:function(){this.actualHeight=this.$refs.readmoreContentContainer.clientHeight},methods:{toggle:function(){this.collapsed=!this.collapsed}},computed:{computedHeight:function(){return(this.collapsed?this.collapsedHeight:this.actualHeight)+"px"}}},$=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"readmore-container"},[t("div",{staticClass:"readmore-content",style:{height:n.computedHeight}},[t("div",{ref:"readmoreContentContainer"},[n._t("readmoreContent")],2)]),n._v(" "),t("div",{staticClass:"readmore-sliver",on:{click:n.toggle}},[n.collapsed?n._t("resizeSliverContentCollapsed"):n._e(),n._v(" "),n.collapsed?n._e():n._t("resizeSliverContentShown")],2)])};$._withStripped=!0;var S={render:$,staticRenderFns:[]},T=S;var R=!1;var j=t("VU/8")(_,T,!1,function(n){R||t("KU0+")},"data-v-92448f0a",null);j.options.__file="src/components/readmore.vue";var z=j.exports,H={props:{flag:{type:Boolean,default:!0}},methods:{toggleCheckBox:function(n){this.$emit("togglecheckbox",n)}},computed:{getDialTransform:function(){return{transform:this.flag?"translateX(0)":"translateX(1.6em)"}}}},U=function(){var n=this.$createElement,e=this._self._c||n;return e("div",{staticClass:"checkbox-root",class:this.flag?"checkbox-on":"checkbox-off",on:{click:this.toggleCheckBox}},[e("div",{staticClass:"checkbox-dial",style:this.getDialTransform})])};U._withStripped=!0;var F={render:U,staticRenderFns:[]},L=F;var W=!1;var D=t("VU/8")(H,L,!1,function(n){W||t("uPPG")},"data-v-8903635a",null);D.options.__file="src/components/checkbox.vue";var I=D.exports;i.a.config.productionTip=!1,i.a.component("vue-modal",d),i.a.component("vue-pill",p.default),i.a.component("vue-autocomplete",C),i.a.component("vue-copyfield",B),i.a.component("vue-readmore",z),i.a.component("vue-checkbox",I)},R6Sg:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.readmore-content[data-v-92448f0a]\n{\n  -webkit-transition: all 0.3s;\n  transition: all 0.3s;\n  overflow-y : hidden;\n}\n.readmore-sliver[data-v-92448f0a]\n{\n  min-height: 0.5em;\n  -webkit-transition: all 0.3s;\n  transition: all 0.3s;\n  background-color: rgba(128,128,128,0.2);\n}\n.readmore-sliver[data-v-92448f0a]:hover\n{\n  -webkit-transform: translateY(-2px);\n          transform: translateY(-2px);\n  background-color: rgba(128,128,128,0.4);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/readmore.vue"],names:[],mappings:";AAiDA;;EAEA,6BAAA;EAAA,qBAAA;EACA,oBAAA;CACA;AACA;;EAEA,kBAAA;EACA,6BAAA;EAAA,qBAAA;EACA,wCAAA;CACA;AACA;;EAEA,oCAAA;UAAA,4BAAA;EACA,wCAAA;CACA",file:"readmore.vue",sourcesContent:['<template>\n<div class = "readmore-container">\n  <div :style = "{ height : computedHeight }" class = "readmore-content">\n    <div ref = "readmoreContentContainer">\n      <slot name = "readmoreContent"></slot>\n    </div>\n  </div>\n  <div @click = "toggle" class = "readmore-sliver">\n    <slot v-if = "collapsed" name = "resizeSliverContentCollapsed">\n    </slot>\n    <slot v-if = "!collapsed" name = "resizeSliverContentShown">\n    </slot>\n  </div>\n</div>\n</template>\n<script>\nexport default {\n  props: {\n    collapsedHeight: {\n      type: Number,\n      default: 25\n    }\n  },\n  data: () => ({\n    collapsed: {\n      type: Boolean,\n      default: true\n    },\n    actualHeight: {\n      type: Number,\n      default: 25\n    }\n  }),\n  mounted: function () {\n    this.actualHeight = this.$refs.readmoreContentContainer.clientHeight\n  },\n  methods: {\n    toggle: function () {\n      this.collapsed = !this.collapsed\n    }\n  },\n  computed: {\n    computedHeight: function () {\n      return `${this.collapsed ? this.collapsedHeight : this.actualHeight}px`\n    }\n  }\n}\n<\/script>\n<style scoped>\n.readmore-content\n{\n  transition: all 0.3s;\n  overflow-y : hidden;\n}\n.readmore-sliver\n{\n  min-height: 0.5em;\n  transition: all 0.3s;\n  background-color: rgba(128,128,128,0.2);\n}\n.readmore-sliver:hover\n{\n  transform: translateY(-2px);\n  background-color: rgba(128,128,128,0.4);\n}\n</style>\n'],sourceRoot:""}])},RQup:function(n,e){n.exports={props:{name:{type:String,default:"Untitled"},closable:{type:Boolean,default:!0}}}},RpWc:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,'\ndiv.autocomplete-container[data-v-8351e810]\n{\n  cursor:default;\n}\n.autocomplete-suggestions[data-v-8351e810]\n{\n  width:100%;\n  display:block;\n  padding:0.1em 0.3em;\n  -webkit-transition: all 200ms;\n  transition: all 200ms;\n  background-color:rgba(230,230,230,0.5);\n}\n.autocomplete-suggestions.active[data-v-8351e810]\n{\n  background-color:rgba(230,230,230,0.95);\n}\n.autocomplete-suggestions[data-v-8351e810]:hover\n{\n  background-color:rgba(230,230,230,0.95);\n}\ndiv.autocomplete-container:focus-within .autocomplete-suggestions[data-v-8351e810]\n{\n  display: block;\n}\ndiv.autocomplete-suggestion-container[data-v-8351e810]\n{\n  width: 100%;\n  max-height:10em;\n  overflow-y:auto;\n  overflow-x:hidden;\n  z-index:2;\n}\ninput[type="text"][data-v-8351e810]\n{\n  width:100%;\n  height:100%;\n  z-index:1;\n}\n',"",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/autocomplete.vue"],names:[],mappings:";AAoGA;;EAEA,eAAA;CACA;AAEA;;EAEA,WAAA;EACA,cAAA;EACA,oBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,uCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,eAAA;CACA;AAEA;;EAEA,YAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;CACA;AACA;;EAEA,WAAA;EACA,YAAA;EACA,UAAA;CACA",file:"autocomplete.vue",sourcesContent:['<template>\n<div class = "autocomplete-container">\n  <input\n    ref = "input"\n    @keydown.stop = "hitEnter"\n    type = "text"\n    @focus = "showSuggestions = true"\n    @blur = "showSuggestions = false"\n    v-model = "typedText"\n    :placeholder = "placeholder"/>\n  <transition name = "fade">\n    <div v-if = "showSuggestions" class = "autocomplete-suggestion-container">\n      <div\n        @mousedown="selectSlice(item)"\n        class = "autocomplete-suggestions"\n        :class = "{active : ((highlightIndex % filteredArray.length) === index)}"\n        v-bind:key = "index"\n        v-for = "(item,index) in filteredArray">\n        {{ item }}\n      </div>\n    </div>\n  </transition>\n</div>\n</template>\n\n<script>\nexport default {\n  props: {\n    placeholder: {\n      type: String,\n      default: \'Start typing to search ...\'\n    },\n    rawarray: {\n      type: Array,\n      default: () => ([])\n    },\n    rendermax: {\n      type: Number,\n      default: 25\n    }\n  },\n  data: () => ({\n    showSuggestions: false,\n    typedText: \'\',\n    highlightIndex: 0\n  }),\n  methods: {\n    selectSlice: function (item) {\n      this.$emit(\'selectslice\', item)\n    },\n    hitEnter: function () {\n      switch (event.key) {\n        case \'ArrowDown\':\n          this.highlightIndex += 1\n          break\n        case \'Escape\':\n          this.$refs.input.blur()\n          break\n        case \'ArrowUp\':\n          this.highlightIndex -= 1\n          if (this.highlightIndex <= 0) this.highlightIndex += this.filteredArray.length\n          break\n        case \'Enter\':\n          const array = this.filteredArray.slice()\n          if (array.length > 0) {\n            this.typedText = \'\'\n            const el = document.querySelector(\':focus\')\n            if (el) el.blur()\n            this.selectSlice(array[0])\n          }\n          break\n        default:\n          this.highlightIndex = 0\n          break\n      }\n    }\n  },\n  computed: {\n    rawArrayLowerCase: function () {\n      return this.rawarray.map(item => item.toLowerCase())\n    },\n    typedTextLowerCase: function () {\n      return this.typedText.toLowerCase()\n    },\n    filteredArray: function () {\n      const regex = new RegExp(this.typedText, \'i\')\n      const completeMatch = this.rawarray.find(item => item.toLowerCase() === this.typedTextLowerCase)\n      const othermatches = this.rawarray\n        .filter(item => regex.test(item))\n        .filter(item => item.toLowerCase() !== this.typedTextLowerCase)\n        .filter((_, idx) => idx <= this.rendermax)\n      return completeMatch\n        ? [completeMatch].concat(othermatches.slice(0, othermatches.length >= this.rendermax ? othermatches.length - 1 : othermatches.length))\n        : othermatches\n    }\n  }\n}\n<\/script>\n\n<style scoped>\ndiv.autocomplete-container\n{\n  cursor:default;\n}\n\n.autocomplete-suggestions\n{\n  width:100%;\n  display:block;\n  padding:0.1em 0.3em;\n  transition: all 200ms;\n  background-color:rgba(230,230,230,0.5);\n}\n\n.autocomplete-suggestions.active\n{\n  background-color:rgba(230,230,230,0.95);\n}\n\n.autocomplete-suggestions:hover\n{\n  background-color:rgba(230,230,230,0.95);\n}\n\ndiv.autocomplete-container:focus-within .autocomplete-suggestions\n{\n  display: block;\n}\n\ndiv.autocomplete-suggestion-container\n{\n  width: 100%;\n  max-height:10em;\n  overflow-y:auto;\n  overflow-x:hidden;\n  z-index:2;\n}\ninput[type="text"]\n{\n  width:100%;\n  height:100%;\n  z-index:1;\n}\n</style>\n'],sourceRoot:""}])},ck25:function(n,e,t){"use strict";var o=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"v-pill-container",on:{click:function(e){e.stopPropagation(),e.preventDefault(),n.$emit("select-pill")}}},[t("span",{staticClass:"v-pill-name"},[n._v(n._s(n.name))]),n._v(" "),n.closable?t("span",{staticClass:"v-pill-remove",on:{click:function(e){e.stopPropagation(),e.preventDefault(),n.$emit("remove-pill")}}},[n._v("×")]):n._e()])};o._withStripped=!0;var i={render:o,staticRenderFns:[]};e.a=i},fKQA:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.copy-field-root\n{\n  width: 100%;\n  white-space: nowrap;\n}\n.copy-field-root *\n{\n  color:black\n}\n.copy-field-root > input\n{\n  width : 100%;\n  height:2.0em;\n  display: inline-block;\n  vertical-align : middle;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  position : relative;\n\n  border : solid 1px rgba(128,128,128,0.6);\n  z-index: 8;\n}\n.copy-field-root > div:not([hidden])\n{\n  position : relative;\n  z-index: 9;\n  cursor:default;\n  display: inline-block;\n  -webkit-box-sizing:border-box;\n          box-sizing:border-box;\n  margin : 0.2em;\n  height : 1.6em;\n  margin-left:-4em;\n  font-size:100%;\n  vertical-align : middle;\n  text-align: center;\n  font-size:0.9em;\n  padding : 0.2em;\n\n  color:rgba(0,0,0,0.8);\n  border : solid 1px rgba(0,0,0,0.5);\n\n  background-color:rgba(230,230,230,0.9);\n}\n.copy-field-root > div:hover\n{\n  background-color:rgba(240,240,240,1.0);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/copyfield.vue"],names:[],mappings:";AAiDA;;EAEA,YAAA;EACA,oBAAA;CACA;AAEA;;EAEA,WAAA;CACA;AAEA;;EAEA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,wBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oBAAA;;EAEA,yCAAA;EACA,WAAA;CACA;AAEA;;EAEA,oBAAA;EACA,WAAA;EACA,eAAA;EACA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,wBAAA;EACA,mBAAA;EACA,gBAAA;EACA,gBAAA;;EAEA,sBAAA;EACA,mCAAA;;EAEA,uCAAA;CACA;AAEA;;EAEA,uCAAA;CACA",file:"copyfield.vue",sourcesContent:['<template>\n<div class = "copy-field-root">\n  <input ref = "inputEl" readonly v-bind:value = "value" type = "text" />\n  <div\n    v-bind:hidden = "!copyable"\n    @click.stop = "copyToClipBoard">{{ methodGetCopyText() }}\n  </div>\n</div>\n</template>\n\n<script>\nexport default {\n  props: {\n    value: {\n      type: String,\n      default: \'default value\'\n    },\n    copyable: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data: () => ({\n    copiedFlag: false,\n    timeoutRef: 0,\n    copyBtnShown: false\n  }),\n  methods: {\n    copyToClipBoard: function () {\n      this.copiedFlag = true\n      if (this.timeoutRef) {\n        clearTimeout(this.timeoutRef)\n      }\n      setTimeout(() => {\n        this.copiedFlag = false\n        this.timeoutRef = 0\n      }, 2000)\n\n      this.$refs.inputEl.focus()\n      this.$refs.inputEl.select()\n      document.execCommand(\'copy\', false)\n    },\n    methodGetCopyText: function () {\n      return this.copiedFlag ? \'Copied!\' : \'Copy\'\n    }\n  }\n}\n<\/script>\n<style>\n.copy-field-root\n{\n  width: 100%;\n  white-space: nowrap;\n}\n\n.copy-field-root *\n{\n  color:black\n}\n\n.copy-field-root > input\n{\n  width : 100%;\n  height:2.0em;\n  display: inline-block;\n  vertical-align : middle;\n  box-sizing: border-box;\n  position : relative;\n\n  border : solid 1px rgba(128,128,128,0.6);\n  z-index: 8;\n}\n\n.copy-field-root > div:not([hidden])\n{\n  position : relative;\n  z-index: 9;\n  cursor:default;\n  display: inline-block;\n  box-sizing:border-box;\n  margin : 0.2em;\n  height : 1.6em;\n  margin-left:-4em;\n  font-size:100%;\n  vertical-align : middle;\n  text-align: center;\n  font-size:0.9em;\n  padding : 0.2em;\n\n  color:rgba(0,0,0,0.8);\n  border : solid 1px rgba(0,0,0,0.5);\n\n  background-color:rgba(230,230,230,0.9);\n}\n\n.copy-field-root > div:hover\n{\n  background-color:rgba(240,240,240,1.0);\n}\n</style>\n'],sourceRoot:""}])},lRwf:function(n,e){n.exports=Vue},n8WV:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.v-modal-container[data-v-0eaeaf66]\n{\n  top: 0;\n  width:100%;\n  height:100%;\n  position : absolute;\n  z-index:999;\n}\n.v-modal-screen[data-v-0eaeaf66]\n{\n  top : 0;\n  position : absolute;\n  width:100%;\n  height:100%;\n  background-color:rgba(30,30,30,0.2);\n}\n.v-modal-content-container[data-v-0eaeaf66]\n{\n  top : 0;\n  position : absolute;\n  display : -webkit-box;\n  display : -ms-flexbox;\n  display : flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -ms-flex-line-pack: center;\n      align-content: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n\n  pointer-events: none;\n}\n.v-modal-content[data-v-0eaeaf66]\n{\n  -webkit-box-flex : 0;\n      -ms-flex : 0 0 auto;\n          flex : 0 0 auto;\n  pointer-events: all;\n}\n\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/modal.vue"],names:[],mappings:";AA4DA;;EAEA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,YAAA;CACA;AACA;;EAEA,QAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;CACA;AAEA;;EAEA,QAAA;EACA,oBAAA;EACA,sBAAA;EAAA,sBAAA;EAAA,eAAA;EACA,0BAAA;MAAA,uBAAA;UAAA,oBAAA;EACA,2BAAA;MAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,wBAAA;;EAEA,qBAAA;CACA;AACA;;EAEA,qBAAA;MAAA,oBAAA;UAAA,gBAAA;EACA,oBAAA;CACA",file:"modal.vue",sourcesContent:['<template>\n<div>\n  <div class = "v-modal-container">\n    <div\n      ref = "screen"\n      v-on:click = "$emit(\'close-modal\')"\n      class = "v-modal-screen">\n    </div>\n    <div\n      v-bind:style = "{top:contentContainerTop,left:contentContainerLeft,width:contentContainerWidth,height:contentContainerHeight,}"\n      class = "v-modal-content-container">\n      <div\n        ref = "content"\n        class = "v-modal-content">\n        <div class = "v-modal-header">\n          <slot name = "v-modal-header">\n          </slot>\n        </div>\n        <div class = "v-modal-body">\n          <slot name = "v-modal-body">\n          </slot>\n        </div>\n        <div class = "v-modal-footer">\n          <slot name = "v-modal-footer">\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n</template>\n<script>\nexport default {\n  props: {\n    top: Number,\n    left: Number\n  },\n  data: () => ({\n    show: {\n      type: Boolean,\n      default: false\n    }\n  }),\n  computed: {\n    contentContainerLeft: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.left, this.$refs.screen.clientWidth - this.$refs.content.clientWidth) + \'px\' : `0px`\n    },\n    contentContainerTop: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.top, this.$refs.screen.clientHeight - this.$refs.content.clientHeight) + \'px\' : `0px`\n    },\n    contentContainerWidth: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? \'auto\' : `100%`\n    },\n    contentContainerHeight: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? \'auto\' : `100%`\n    }\n  }\n}\n<\/script>\n<style scoped>\n.v-modal-container\n{\n  top: 0;\n  width:100%;\n  height:100%;\n  position : absolute;\n  z-index:999;\n}\n.v-modal-screen\n{\n  top : 0;\n  position : absolute;\n  width:100%;\n  height:100%;\n  background-color:rgba(30,30,30,0.2);\n}\n\n.v-modal-content-container\n{\n  top : 0;\n  position : absolute;\n  display : flex;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n\n  pointer-events: none;\n}\n.v-modal-content\n{\n  flex : 0 0 auto;\n  pointer-events: all;\n}\n\n</style>\n'],sourceRoot:""}])},"nFT+":function(n,e,t){var o=t("AjZS");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("12958e8c",o,!1,{})},u0wG:function(n,e,t){"use strict";var o=t("RQup"),i=t.n(o),a=t("ck25"),r=!1;var s=function(n){r||t("nFT+")},A=t("VU/8")(i.a,a.a,!1,s,"data-v-94d8f66e",null);A.options.__file="src/components/pill.vue",e.default=A.exports},uPPG:function(n,e,t){var o=t("vLWt");"string"==typeof o&&(o=[[n.i,o,""]]),o.locals&&(n.exports=o.locals);t("rjj0")("1c6ceeff",o,!1,{})},vLWt:function(n,e,t){(n.exports=t("FZ+f")(!0)).push([n.i,"\n.checkbox-root[data-v-8903635a]\n{\n  height: 2em;\n  width: 3.6em;\n  display: inline-block;\n  border-radius: 1em;\n  overflow: hidden;\n  padding: 0.2em;\n  -webkit-box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n          box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-transition: all 0.5s;\n  transition: all 0.5s;\n}\n.checkbox-on[data-v-8903635a]\n{\n  background-color: rgba(0, 150, 0, 0.4);\n}\n.checkbox-off[data-v-8903635a]\n{\n  background-color: rgba(128, 128, 128, 0.4);\n}\n.checkbox-dial[data-v-8903635a]\n{\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  display: inline-block;\n  width: 1.6em;\n  height: 100%;\n  background-color:white;\n  border-radius: 1em;\n  -webkit-box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n          box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n}\n","",{version:3,sources:["/home/xgui3783/dev/projects/vue-components/src/components/src/components/checkbox.vue"],names:[],mappings:";AAoCA;;EAEA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;EACA,kEAAA;UAAA,0DAAA;EACA,+BAAA;UAAA,uBAAA;EACA,6BAAA;EAAA,qBAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,2CAAA;CACA;AAEA;;EAEA,6BAAA;EAAA,qBAAA;EACA,sBAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,4DAAA;UAAA,oDAAA;CACA",file:"checkbox.vue",sourcesContent:["<template>\n<div\n  @click = \"toggleCheckBox\"\n  :class = \"flag ? 'checkbox-on' : 'checkbox-off'\"\n  class = \"checkbox-root\">\n  <div\n    :style = \"getDialTransform\"\n    class = \"checkbox-dial\">\n  </div>\n</div>\n</template>\n<script>\nexport default {\n  props: {\n    flag: {\n      type: Boolean,\n      default: true\n    }\n  },\n  methods: {\n    toggleCheckBox: function (event) {\n      this.$emit('togglecheckbox', event)\n    }\n  },\n  computed: {\n    getDialTransform: function () {\n      return {\n        transform: this.flag\n          ? 'translateX(0)'\n          : 'translateX(1.6em)'\n      }\n    }\n  }\n}\n<\/script>\n<style scoped>\n.checkbox-root\n{\n  height: 2em;\n  width: 3.6em;\n  display: inline-block;\n  border-radius: 1em;\n  overflow: hidden;\n  padding: 0.2em;\n  box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: all 0.5s;\n}\n\n.checkbox-on\n{\n  background-color: rgba(0, 150, 0, 0.4);\n}\n\n.checkbox-off\n{\n  background-color: rgba(128, 128, 128, 0.4);\n}\n\n.checkbox-dial\n{\n  transition: all 0.2s;\n  display: inline-block;\n  width: 1.6em;\n  height: 100%;\n  background-color:white;\n  border-radius: 1em;\n  box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n}\n</style>\n"],sourceRoot:""}])}},["NHnr"]);
-//# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/app.js.map b/src/plugin_examples/newWebJugex/app.js.map
deleted file mode 100644
index e38712e57f7d691a70b0b6fb742ec537c0d022d8..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/app.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./src/components/pill.vue?058a","webpack:///./src/components/autocomplete.vue?d5dc","webpack:///./src/components/modal.vue?b3b0","webpack:///./src/components/copyfield.vue?5b43","webpack:///./src/components/readmore.vue?f84b","webpack:///src/components/modal.vue","webpack:///./src/components/modal.vue?3efc","webpack:///./src/components/modal.vue","webpack:///src/components/autocomplete.vue","webpack:///./src/components/autocomplete.vue?220c","webpack:///./src/components/autocomplete.vue","webpack:///src/components/copyfield.vue","webpack:///./src/components/copyfield.vue?d3b4","webpack:///./src/components/copyfield.vue","webpack:///src/components/readmore.vue","webpack:///./src/components/readmore.vue?fad6","webpack:///./src/components/readmore.vue","webpack:///src/components/checkbox.vue","webpack:///./src/components/checkbox.vue?0818","webpack:///./src/components/checkbox.vue","webpack:///./src/main.js","webpack:///./src/components/readmore.vue?2a65","webpack:///src/components/pill.vue","webpack:///./src/components/autocomplete.vue?905f","webpack:///./src/components/pill.vue?c6c2","webpack:///./src/components/copyfield.vue?23c7","webpack:///external \"Vue\"","webpack:///./src/components/modal.vue?2409","webpack:///./src/components/pill.vue?5a83","webpack:///./src/components/pill.vue","webpack:///./src/components/checkbox.vue?c5e5","webpack:///./src/components/checkbox.vue?1579"],"names":["module","exports","__webpack_require__","push","i","version","sources","names","mappings","file","sourcesContent","sourceRoot","content","locals","modal","props","top","Number","left","data","show","type","Boolean","default","computed","contentContainerLeft","this","$refs","screen","Math","min","clientWidth","contentContainerTop","clientHeight","contentContainerWidth","contentContainerHeight","render","_vm","_h","$createElement","_c","_self","staticClass","ref","on","click","$event","$emit","_v","style","width","height","_t","_withStripped","esExports","staticRenderFns","components_modal","disposed","Component","normalizeComponent","ssrContext","options","__file","src_components_modal","autocomplete","placeholder","String","rawarray","Array","rendermax","showSuggestions","typedText","highlightIndex","methods","selectSlice","item","hitEnter","event","key","input","blur","filteredArray","length","array","slice","el","document","querySelector","rawArrayLowerCase","map","toLowerCase","typedTextLowerCase","_this","regex","RegExp","completeMatch","find","othermatches","filter","test","_","idx","concat","autocomplete_render","directives","name","rawName","value","expression","attrs","domProps","keydown","stopPropagation","focus","target","composing","_l","index","class","active","mousedown","_s","_e","autocomplete_esExports","components_autocomplete","autocomplete_disposed","autocomplete_Component","autocomplete_normalizeComponent","src_components_autocomplete","copyfield","copyable","copiedFlag","timeoutRef","copyBtnShown","copyToClipBoard","clearTimeout","setTimeout","inputEl","select","execCommand","methodGetCopyText","copyfield_render","readonly","hidden","copyfield_esExports","components_copyfield","copyfield_disposed","copyfield_Component","copyfield_normalizeComponent","src_components_copyfield","readmore","collapsedHeight","collapsed","actualHeight","mounted","readmoreContentContainer","toggle","computedHeight","readmore_render","readmore_esExports","components_readmore","readmore_disposed","readmore_Component","readmore_normalizeComponent","src_components_readmore","components_checkbox","flag","toggleCheckBox","getDialTransform","transform","checkbox_render","checkbox_esExports","selectortype_template_index_0_src_components_checkbox","checkbox_disposed","checkbox_Component","checkbox_normalizeComponent","src_components_checkbox","external__Vue__default","a","config","productionTip","component","pill","closable","preventDefault","__webpack_exports__","Vue","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_94d8f66e_hasScoped_true_transformToRequire_video_src_poster_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_pill_vue__","__vue_styles__","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_pill_vue___default"],"mappings":"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","file":"static/js/app.js","sourcesContent":["exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\ndiv.v-pill-container[data-v-94d8f66e]\\n{\\n  display:inline-block;\\n  white-space: nowrap;\\n  margin:5px;\\n  padding:0.2em 0.6em;\\n  border-radius: 0.8em;\\n}\\ndiv.v-pill-container[data-v-94d8f66e]\\n{\\n  cursor: default;\\n  -webkit-transition: all 300ms;\\n  transition: all 300ms;\\n  background-color:rgba(50,50,50,0.2);\\n}\\ndiv.v-pill-container[data-v-94d8f66e]:hover\\n{\\n  background-color:rgba(150,150,150,0.2);\\n}\\nspan.v-pill-name[data-v-94d8f66e]\\n{\\n  cursor: default;\\n  display:inline-block;\\n}\\nspan.v-pill-remove[data-v-94d8f66e]\\n{\\n  cursor: default;\\n  display:inline-block;\\n}\\nspan.v-pill-remove[data-v-94d8f66e]:hover\\n{\\n  font-weight: 900;\\n  color:rgba(200,30,30,1);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/pill.vue\"],\"names\":[],\"mappings\":\";AAuBA;;EAEA,qBAAA;EACA,oBAAA;EACA,WAAA;EACA,oBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,gBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,oCAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,gBAAA;EACA,qBAAA;CACA;AACA;;EAEA,gBAAA;EACA,qBAAA;CACA;AAEA;;EAEA,iBAAA;EACA,wBAAA;CACA\",\"file\":\"pill.vue\",\"sourcesContent\":[\"<template>\\n<div @click.stop.prevent = \\\"$emit('select-pill')\\\" class = \\\"v-pill-container\\\">\\n  <span class = \\\"v-pill-name\\\">{{ name }}</span>\\n  <span v-if = \\\"closable\\\" @click.stop.prevent = \\\"$emit('remove-pill')\\\" class = \\\"v-pill-remove\\\">&times;</span>\\n</div>\\n</template>\\n\\n<script>\\nmodule.exports = {\\n  props: {\\n    name: {\\n      type: String,\\n      default: 'Untitled'\\n    },\\n    closable: {\\n      type: Boolean,\\n      default: true\\n    }\\n  }\\n}\\n</script>\\n\\n<style scoped>\\ndiv.v-pill-container\\n{\\n  display:inline-block;\\n  white-space: nowrap;\\n  margin:5px;\\n  padding:0.2em 0.6em;\\n  border-radius: 0.8em;\\n}\\n\\ndiv.v-pill-container\\n{\\n  cursor: default;\\n  transition: all 300ms;\\n  background-color:rgba(50,50,50,0.2);\\n}\\n\\ndiv.v-pill-container:hover\\n{\\n  background-color:rgba(150,150,150,0.2);\\n}\\n\\nspan.v-pill-name\\n{\\n  cursor: default;\\n  display:inline-block;\\n}\\nspan.v-pill-remove\\n{\\n  cursor: default;\\n  display:inline-block;\\n}\\n\\nspan.v-pill-remove:hover\\n{\\n  font-weight: 900;\\n  color:rgba(200,30,30,1);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-94d8f66e\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/pill.vue\n// module id = AjZS\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./autocomplete.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"9aafbbb6\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./autocomplete.vue\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./autocomplete.vue\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8351e810\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/autocomplete.vue\n// module id = B6Kj\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./modal.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"6decef42\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./modal.vue\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./modal.vue\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-0eaeaf66\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/modal.vue\n// module id = CJjv\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./copyfield.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"041522c3\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./copyfield.vue\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./copyfield.vue\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-1d7c4045\",\"scoped\":false,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/copyfield.vue\n// module id = E8lD\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./readmore.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"c9be660c\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./readmore.vue\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./readmore.vue\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-92448f0a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/readmore.vue\n// module id = KU0+\n// module chunks = 0","<template>\n<div>\n  <div class = \"v-modal-container\">\n    <div\n      ref = \"screen\"\n      v-on:click = \"$emit('close-modal')\"\n      class = \"v-modal-screen\">\n    </div>\n    <div\n      v-bind:style = \"{top:contentContainerTop,left:contentContainerLeft,width:contentContainerWidth,height:contentContainerHeight,}\"\n      class = \"v-modal-content-container\">\n      <div\n        ref = \"content\"\n        class = \"v-modal-content\">\n        <div class = \"v-modal-header\">\n          <slot name = \"v-modal-header\">\n          </slot>\n        </div>\n        <div class = \"v-modal-body\">\n          <slot name = \"v-modal-body\">\n          </slot>\n        </div>\n        <div class = \"v-modal-footer\">\n          <slot name = \"v-modal-footer\">\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n</template>\n<script>\nexport default {\n  props: {\n    top: Number,\n    left: Number\n  },\n  data: () => ({\n    show: {\n      type: Boolean,\n      default: false\n    }\n  }),\n  computed: {\n    contentContainerLeft: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.left, this.$refs.screen.clientWidth - this.$refs.content.clientWidth) + 'px' : `0px`\n    },\n    contentContainerTop: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.top, this.$refs.screen.clientHeight - this.$refs.content.clientHeight) + 'px' : `0px`\n    },\n    contentContainerWidth: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\n    },\n    contentContainerHeight: function () {\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\n    }\n  }\n}\n</script>\n<style scoped>\n.v-modal-container\n{\n  top: 0;\n  width:100%;\n  height:100%;\n  position : absolute;\n  z-index:999;\n}\n.v-modal-screen\n{\n  top : 0;\n  position : absolute;\n  width:100%;\n  height:100%;\n  background-color:rgba(30,30,30,0.2);\n}\n\n.v-modal-content-container\n{\n  top : 0;\n  position : absolute;\n  display : flex;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n\n  pointer-events: none;\n}\n.v-modal-content\n{\n  flex : 0 0 auto;\n  pointer-events: all;\n}\n\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/modal.vue","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", [\n    _c(\"div\", { staticClass: \"v-modal-container\" }, [\n      _c(\"div\", {\n        ref: \"screen\",\n        staticClass: \"v-modal-screen\",\n        on: {\n          click: function($event) {\n            _vm.$emit(\"close-modal\")\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      _c(\n        \"div\",\n        {\n          staticClass: \"v-modal-content-container\",\n          style: {\n            top: _vm.contentContainerTop,\n            left: _vm.contentContainerLeft,\n            width: _vm.contentContainerWidth,\n            height: _vm.contentContainerHeight\n          }\n        },\n        [\n          _c(\"div\", { ref: \"content\", staticClass: \"v-modal-content\" }, [\n            _c(\n              \"div\",\n              { staticClass: \"v-modal-header\" },\n              [_vm._t(\"v-modal-header\")],\n              2\n            ),\n            _vm._v(\" \"),\n            _c(\n              \"div\",\n              { staticClass: \"v-modal-body\" },\n              [_vm._t(\"v-modal-body\")],\n              2\n            ),\n            _vm._v(\" \"),\n            _c(\n              \"div\",\n              { staticClass: \"v-modal-footer\" },\n              [_vm._t(\"v-modal-footer\")],\n              2\n            )\n          ])\n        ]\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-0eaeaf66\", esExports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-0eaeaf66\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/modal.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n  if (disposed) return\n  require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./modal.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./modal.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./modal.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-0eaeaf66\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./modal.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-0eaeaf66\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/modal.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-0eaeaf66\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-0eaeaf66\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/modal.vue\n// module id = null\n// module chunks = ","<template>\n<div class = \"autocomplete-container\">\n  <input\n    ref = \"input\"\n    @keydown.stop = \"hitEnter\"\n    type = \"text\"\n    @focus = \"showSuggestions = true\"\n    @blur = \"showSuggestions = false\"\n    v-model = \"typedText\"\n    :placeholder = \"placeholder\"/>\n  <transition name = \"fade\">\n    <div v-if = \"showSuggestions\" class = \"autocomplete-suggestion-container\">\n      <div\n        @mousedown=\"selectSlice(item)\"\n        class = \"autocomplete-suggestions\"\n        :class = \"{active : ((highlightIndex % filteredArray.length) === index)}\"\n        v-bind:key = \"index\"\n        v-for = \"(item,index) in filteredArray\">\n        {{ item }}\n      </div>\n    </div>\n  </transition>\n</div>\n</template>\n\n<script>\nexport default {\n  props: {\n    placeholder: {\n      type: String,\n      default: 'Start typing to search ...'\n    },\n    rawarray: {\n      type: Array,\n      default: () => ([])\n    },\n    rendermax: {\n      type: Number,\n      default: 25\n    }\n  },\n  data: () => ({\n    showSuggestions: false,\n    typedText: '',\n    highlightIndex: 0\n  }),\n  methods: {\n    selectSlice: function (item) {\n      this.$emit('selectslice', item)\n    },\n    hitEnter: function () {\n      switch (event.key) {\n        case 'ArrowDown':\n          this.highlightIndex += 1\n          break\n        case 'Escape':\n          this.$refs.input.blur()\n          break\n        case 'ArrowUp':\n          this.highlightIndex -= 1\n          if (this.highlightIndex <= 0) this.highlightIndex += this.filteredArray.length\n          break\n        case 'Enter':\n          const array = this.filteredArray.slice()\n          if (array.length > 0) {\n            this.typedText = ''\n            const el = document.querySelector(':focus')\n            if (el) el.blur()\n            this.selectSlice(array[0])\n          }\n          break\n        default:\n          this.highlightIndex = 0\n          break\n      }\n    }\n  },\n  computed: {\n    rawArrayLowerCase: function () {\n      return this.rawarray.map(item => item.toLowerCase())\n    },\n    typedTextLowerCase: function () {\n      return this.typedText.toLowerCase()\n    },\n    filteredArray: function () {\n      const regex = new RegExp(this.typedText, 'i')\n      const completeMatch = this.rawarray.find(item => item.toLowerCase() === this.typedTextLowerCase)\n      const othermatches = this.rawarray\n        .filter(item => regex.test(item))\n        .filter(item => item.toLowerCase() !== this.typedTextLowerCase)\n        .filter((_, idx) => idx <= this.rendermax)\n      return completeMatch\n        ? [completeMatch].concat(othermatches.slice(0, othermatches.length >= this.rendermax ? othermatches.length - 1 : othermatches.length))\n        : othermatches\n    }\n  }\n}\n</script>\n\n<style scoped>\ndiv.autocomplete-container\n{\n  cursor:default;\n}\n\n.autocomplete-suggestions\n{\n  width:100%;\n  display:block;\n  padding:0.1em 0.3em;\n  transition: all 200ms;\n  background-color:rgba(230,230,230,0.5);\n}\n\n.autocomplete-suggestions.active\n{\n  background-color:rgba(230,230,230,0.95);\n}\n\n.autocomplete-suggestions:hover\n{\n  background-color:rgba(230,230,230,0.95);\n}\n\ndiv.autocomplete-container:focus-within .autocomplete-suggestions\n{\n  display: block;\n}\n\ndiv.autocomplete-suggestion-container\n{\n  width: 100%;\n  max-height:10em;\n  overflow-y:auto;\n  overflow-x:hidden;\n  z-index:2;\n}\ninput[type=\"text\"]\n{\n  width:100%;\n  height:100%;\n  z-index:1;\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/autocomplete.vue","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    { staticClass: \"autocomplete-container\" },\n    [\n      _c(\"input\", {\n        directives: [\n          {\n            name: \"model\",\n            rawName: \"v-model\",\n            value: _vm.typedText,\n            expression: \"typedText\"\n          }\n        ],\n        ref: \"input\",\n        attrs: { type: \"text\", placeholder: _vm.placeholder },\n        domProps: { value: _vm.typedText },\n        on: {\n          keydown: function($event) {\n            $event.stopPropagation()\n            return _vm.hitEnter($event)\n          },\n          focus: function($event) {\n            _vm.showSuggestions = true\n          },\n          blur: function($event) {\n            _vm.showSuggestions = false\n          },\n          input: function($event) {\n            if ($event.target.composing) {\n              return\n            }\n            _vm.typedText = $event.target.value\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      _c(\"transition\", { attrs: { name: \"fade\" } }, [\n        _vm.showSuggestions\n          ? _c(\n              \"div\",\n              { staticClass: \"autocomplete-suggestion-container\" },\n              _vm._l(_vm.filteredArray, function(item, index) {\n                return _c(\n                  \"div\",\n                  {\n                    key: index,\n                    staticClass: \"autocomplete-suggestions\",\n                    class: {\n                      active:\n                        _vm.highlightIndex % _vm.filteredArray.length === index\n                    },\n                    on: {\n                      mousedown: function($event) {\n                        _vm.selectSlice(item)\n                      }\n                    }\n                  },\n                  [_vm._v(\"\\n        \" + _vm._s(item) + \"\\n      \")]\n                )\n              })\n            )\n          : _vm._e()\n      ])\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-8351e810\", esExports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-8351e810\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/autocomplete.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n  if (disposed) return\n  require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8351e810\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./autocomplete.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./autocomplete.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./autocomplete.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-8351e810\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./autocomplete.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-8351e810\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/autocomplete.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-8351e810\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-8351e810\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/autocomplete.vue\n// module id = null\n// module chunks = ","<template>\n<div class = \"copy-field-root\">\n  <input ref = \"inputEl\" readonly v-bind:value = \"value\" type = \"text\" />\n  <div\n    v-bind:hidden = \"!copyable\"\n    @click.stop = \"copyToClipBoard\">{{ methodGetCopyText() }}\n  </div>\n</div>\n</template>\n\n<script>\nexport default {\n  props: {\n    value: {\n      type: String,\n      default: 'default value'\n    },\n    copyable: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data: () => ({\n    copiedFlag: false,\n    timeoutRef: 0,\n    copyBtnShown: false\n  }),\n  methods: {\n    copyToClipBoard: function () {\n      this.copiedFlag = true\n      if (this.timeoutRef) {\n        clearTimeout(this.timeoutRef)\n      }\n      setTimeout(() => {\n        this.copiedFlag = false\n        this.timeoutRef = 0\n      }, 2000)\n\n      this.$refs.inputEl.focus()\n      this.$refs.inputEl.select()\n      document.execCommand('copy', false)\n    },\n    methodGetCopyText: function () {\n      return this.copiedFlag ? 'Copied!' : 'Copy'\n    }\n  }\n}\n</script>\n<style>\n.copy-field-root\n{\n  width: 100%;\n  white-space: nowrap;\n}\n\n.copy-field-root *\n{\n  color:black\n}\n\n.copy-field-root > input\n{\n  width : 100%;\n  height:2.0em;\n  display: inline-block;\n  vertical-align : middle;\n  box-sizing: border-box;\n  position : relative;\n\n  border : solid 1px rgba(128,128,128,0.6);\n  z-index: 8;\n}\n\n.copy-field-root > div:not([hidden])\n{\n  position : relative;\n  z-index: 9;\n  cursor:default;\n  display: inline-block;\n  box-sizing:border-box;\n  margin : 0.2em;\n  height : 1.6em;\n  margin-left:-4em;\n  font-size:100%;\n  vertical-align : middle;\n  text-align: center;\n  font-size:0.9em;\n  padding : 0.2em;\n\n  color:rgba(0,0,0,0.8);\n  border : solid 1px rgba(0,0,0,0.5);\n\n  background-color:rgba(230,230,230,0.9);\n}\n\n.copy-field-root > div:hover\n{\n  background-color:rgba(240,240,240,1.0);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/copyfield.vue","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"copy-field-root\" }, [\n    _c(\"input\", {\n      ref: \"inputEl\",\n      attrs: { readonly: \"\", type: \"text\" },\n      domProps: { value: _vm.value }\n    }),\n    _vm._v(\" \"),\n    _c(\n      \"div\",\n      {\n        attrs: { hidden: !_vm.copyable },\n        on: {\n          click: function($event) {\n            $event.stopPropagation()\n            return _vm.copyToClipBoard($event)\n          }\n        }\n      },\n      [_vm._v(_vm._s(_vm.methodGetCopyText()) + \"\\n  \")]\n    )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-1d7c4045\", esExports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-1d7c4045\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/copyfield.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n  if (disposed) return\n  require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./copyfield.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./copyfield.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./copyfield.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1d7c4045\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./copyfield.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/copyfield.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-1d7c4045\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-1d7c4045\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/copyfield.vue\n// module id = null\n// module chunks = ","<template>\n<div class = \"readmore-container\">\n  <div :style = \"{ height : computedHeight }\" class = \"readmore-content\">\n    <div ref = \"readmoreContentContainer\">\n      <slot name = \"readmoreContent\"></slot>\n    </div>\n  </div>\n  <div @click = \"toggle\" class = \"readmore-sliver\">\n    <slot v-if = \"collapsed\" name = \"resizeSliverContentCollapsed\">\n    </slot>\n    <slot v-if = \"!collapsed\" name = \"resizeSliverContentShown\">\n    </slot>\n  </div>\n</div>\n</template>\n<script>\nexport default {\n  props: {\n    collapsedHeight: {\n      type: Number,\n      default: 25\n    }\n  },\n  data: () => ({\n    collapsed: {\n      type: Boolean,\n      default: true\n    },\n    actualHeight: {\n      type: Number,\n      default: 25\n    }\n  }),\n  mounted: function () {\n    this.actualHeight = this.$refs.readmoreContentContainer.clientHeight\n  },\n  methods: {\n    toggle: function () {\n      this.collapsed = !this.collapsed\n    }\n  },\n  computed: {\n    computedHeight: function () {\n      return `${this.collapsed ? this.collapsedHeight : this.actualHeight}px`\n    }\n  }\n}\n</script>\n<style scoped>\n.readmore-content\n{\n  transition: all 0.3s;\n  overflow-y : hidden;\n}\n.readmore-sliver\n{\n  min-height: 0.5em;\n  transition: all 0.3s;\n  background-color: rgba(128,128,128,0.2);\n}\n.readmore-sliver:hover\n{\n  transform: translateY(-2px);\n  background-color: rgba(128,128,128,0.4);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/readmore.vue","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"readmore-container\" }, [\n    _c(\n      \"div\",\n      {\n        staticClass: \"readmore-content\",\n        style: { height: _vm.computedHeight }\n      },\n      [\n        _c(\n          \"div\",\n          { ref: \"readmoreContentContainer\" },\n          [_vm._t(\"readmoreContent\")],\n          2\n        )\n      ]\n    ),\n    _vm._v(\" \"),\n    _c(\n      \"div\",\n      { staticClass: \"readmore-sliver\", on: { click: _vm.toggle } },\n      [\n        _vm.collapsed ? _vm._t(\"resizeSliverContentCollapsed\") : _vm._e(),\n        _vm._v(\" \"),\n        !_vm.collapsed ? _vm._t(\"resizeSliverContentShown\") : _vm._e()\n      ],\n      2\n    )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-92448f0a\", esExports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-92448f0a\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/readmore.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n  if (disposed) return\n  require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./readmore.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./readmore.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./readmore.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-92448f0a\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./readmore.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-92448f0a\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/readmore.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-92448f0a\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-92448f0a\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/readmore.vue\n// module id = null\n// module chunks = ","<template>\n<div\n  @click = \"toggleCheckBox\"\n  :class = \"flag ? 'checkbox-on' : 'checkbox-off'\"\n  class = \"checkbox-root\">\n  <div\n    :style = \"getDialTransform\"\n    class = \"checkbox-dial\">\n  </div>\n</div>\n</template>\n<script>\nexport default {\n  props: {\n    flag: {\n      type: Boolean,\n      default: true\n    }\n  },\n  methods: {\n    toggleCheckBox: function (event) {\n      this.$emit('togglecheckbox', event)\n    }\n  },\n  computed: {\n    getDialTransform: function () {\n      return {\n        transform: this.flag\n          ? 'translateX(0)'\n          : 'translateX(1.6em)'\n      }\n    }\n  }\n}\n</script>\n<style scoped>\n.checkbox-root\n{\n  height: 2em;\n  width: 3.6em;\n  display: inline-block;\n  border-radius: 1em;\n  overflow: hidden;\n  padding: 0.2em;\n  box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: all 0.5s;\n}\n\n.checkbox-on\n{\n  background-color: rgba(0, 150, 0, 0.4);\n}\n\n.checkbox-off\n{\n  background-color: rgba(128, 128, 128, 0.4);\n}\n\n.checkbox-dial\n{\n  transition: all 0.2s;\n  display: inline-block;\n  width: 1.6em;\n  height: 100%;\n  background-color:white;\n  border-radius: 1em;\n  box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/checkbox.vue","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"checkbox-root\",\n      class: _vm.flag ? \"checkbox-on\" : \"checkbox-off\",\n      on: { click: _vm.toggleCheckBox }\n    },\n    [_c(\"div\", { staticClass: \"checkbox-dial\", style: _vm.getDialTransform })]\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-8903635a\", esExports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-8903635a\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/checkbox.vue\n// module id = null\n// module chunks = ","var disposed = false\nfunction injectStyle (ssrContext) {\n  if (disposed) return\n  require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./checkbox.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./checkbox.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./checkbox.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-8903635a\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./checkbox.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-8903635a\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/checkbox.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-8903635a\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-8903635a\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/checkbox.vue\n// module id = null\n// module chunks = ","import Vue from 'vue'\n// import App from './App'\nimport Modal from './components/modal.vue'\nimport Pill from './components/pill.vue'\nimport AutoComplete from './components/autocomplete.vue'\nimport CopyField from './components/copyfield.vue'\nimport Readmore from './components/readmore.vue'\nimport CheckBox from './components/checkbox.vue'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\n// new Vue({\n//   el: '#app',\n//   render: h => h(App)\n// })\nVue.component('vue-modal', Modal)\nVue.component('vue-pill', Pill)\nVue.component('vue-autocomplete', AutoComplete)\nVue.component('vue-copyfield', CopyField)\nVue.component('vue-readmore', Readmore)\nVue.component('vue-checkbox', CheckBox)\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.readmore-content[data-v-92448f0a]\\n{\\n  -webkit-transition: all 0.3s;\\n  transition: all 0.3s;\\n  overflow-y : hidden;\\n}\\n.readmore-sliver[data-v-92448f0a]\\n{\\n  min-height: 0.5em;\\n  -webkit-transition: all 0.3s;\\n  transition: all 0.3s;\\n  background-color: rgba(128,128,128,0.2);\\n}\\n.readmore-sliver[data-v-92448f0a]:hover\\n{\\n  -webkit-transform: translateY(-2px);\\n          transform: translateY(-2px);\\n  background-color: rgba(128,128,128,0.4);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/readmore.vue\"],\"names\":[],\"mappings\":\";AAiDA;;EAEA,6BAAA;EAAA,qBAAA;EACA,oBAAA;CACA;AACA;;EAEA,kBAAA;EACA,6BAAA;EAAA,qBAAA;EACA,wCAAA;CACA;AACA;;EAEA,oCAAA;UAAA,4BAAA;EACA,wCAAA;CACA\",\"file\":\"readmore.vue\",\"sourcesContent\":[\"<template>\\n<div class = \\\"readmore-container\\\">\\n  <div :style = \\\"{ height : computedHeight }\\\" class = \\\"readmore-content\\\">\\n    <div ref = \\\"readmoreContentContainer\\\">\\n      <slot name = \\\"readmoreContent\\\"></slot>\\n    </div>\\n  </div>\\n  <div @click = \\\"toggle\\\" class = \\\"readmore-sliver\\\">\\n    <slot v-if = \\\"collapsed\\\" name = \\\"resizeSliverContentCollapsed\\\">\\n    </slot>\\n    <slot v-if = \\\"!collapsed\\\" name = \\\"resizeSliverContentShown\\\">\\n    </slot>\\n  </div>\\n</div>\\n</template>\\n<script>\\nexport default {\\n  props: {\\n    collapsedHeight: {\\n      type: Number,\\n      default: 25\\n    }\\n  },\\n  data: () => ({\\n    collapsed: {\\n      type: Boolean,\\n      default: true\\n    },\\n    actualHeight: {\\n      type: Number,\\n      default: 25\\n    }\\n  }),\\n  mounted: function () {\\n    this.actualHeight = this.$refs.readmoreContentContainer.clientHeight\\n  },\\n  methods: {\\n    toggle: function () {\\n      this.collapsed = !this.collapsed\\n    }\\n  },\\n  computed: {\\n    computedHeight: function () {\\n      return `${this.collapsed ? this.collapsedHeight : this.actualHeight}px`\\n    }\\n  }\\n}\\n</script>\\n<style scoped>\\n.readmore-content\\n{\\n  transition: all 0.3s;\\n  overflow-y : hidden;\\n}\\n.readmore-sliver\\n{\\n  min-height: 0.5em;\\n  transition: all 0.3s;\\n  background-color: rgba(128,128,128,0.2);\\n}\\n.readmore-sliver:hover\\n{\\n  transform: translateY(-2px);\\n  background-color: rgba(128,128,128,0.4);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-92448f0a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/readmore.vue\n// module id = R6Sg\n// module chunks = 0","<template>\n<div @click.stop.prevent = \"$emit('select-pill')\" class = \"v-pill-container\">\n  <span class = \"v-pill-name\">{{ name }}</span>\n  <span v-if = \"closable\" @click.stop.prevent = \"$emit('remove-pill')\" class = \"v-pill-remove\">&times;</span>\n</div>\n</template>\n\n<script>\nmodule.exports = {\n  props: {\n    name: {\n      type: String,\n      default: 'Untitled'\n    },\n    closable: {\n      type: Boolean,\n      default: true\n    }\n  }\n}\n</script>\n\n<style scoped>\ndiv.v-pill-container\n{\n  display:inline-block;\n  white-space: nowrap;\n  margin:5px;\n  padding:0.2em 0.6em;\n  border-radius: 0.8em;\n}\n\ndiv.v-pill-container\n{\n  cursor: default;\n  transition: all 300ms;\n  background-color:rgba(50,50,50,0.2);\n}\n\ndiv.v-pill-container:hover\n{\n  background-color:rgba(150,150,150,0.2);\n}\n\nspan.v-pill-name\n{\n  cursor: default;\n  display:inline-block;\n}\nspan.v-pill-remove\n{\n  cursor: default;\n  display:inline-block;\n}\n\nspan.v-pill-remove:hover\n{\n  font-weight: 900;\n  color:rgba(200,30,30,1);\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/components/pill.vue","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\ndiv.autocomplete-container[data-v-8351e810]\\n{\\n  cursor:default;\\n}\\n.autocomplete-suggestions[data-v-8351e810]\\n{\\n  width:100%;\\n  display:block;\\n  padding:0.1em 0.3em;\\n  -webkit-transition: all 200ms;\\n  transition: all 200ms;\\n  background-color:rgba(230,230,230,0.5);\\n}\\n.autocomplete-suggestions.active[data-v-8351e810]\\n{\\n  background-color:rgba(230,230,230,0.95);\\n}\\n.autocomplete-suggestions[data-v-8351e810]:hover\\n{\\n  background-color:rgba(230,230,230,0.95);\\n}\\ndiv.autocomplete-container:focus-within .autocomplete-suggestions[data-v-8351e810]\\n{\\n  display: block;\\n}\\ndiv.autocomplete-suggestion-container[data-v-8351e810]\\n{\\n  width: 100%;\\n  max-height:10em;\\n  overflow-y:auto;\\n  overflow-x:hidden;\\n  z-index:2;\\n}\\ninput[type=\\\"text\\\"][data-v-8351e810]\\n{\\n  width:100%;\\n  height:100%;\\n  z-index:1;\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/autocomplete.vue\"],\"names\":[],\"mappings\":\";AAoGA;;EAEA,eAAA;CACA;AAEA;;EAEA,WAAA;EACA,cAAA;EACA,oBAAA;EACA,8BAAA;EAAA,sBAAA;EACA,uCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,wCAAA;CACA;AAEA;;EAEA,eAAA;CACA;AAEA;;EAEA,YAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;CACA;AACA;;EAEA,WAAA;EACA,YAAA;EACA,UAAA;CACA\",\"file\":\"autocomplete.vue\",\"sourcesContent\":[\"<template>\\n<div class = \\\"autocomplete-container\\\">\\n  <input\\n    ref = \\\"input\\\"\\n    @keydown.stop = \\\"hitEnter\\\"\\n    type = \\\"text\\\"\\n    @focus = \\\"showSuggestions = true\\\"\\n    @blur = \\\"showSuggestions = false\\\"\\n    v-model = \\\"typedText\\\"\\n    :placeholder = \\\"placeholder\\\"/>\\n  <transition name = \\\"fade\\\">\\n    <div v-if = \\\"showSuggestions\\\" class = \\\"autocomplete-suggestion-container\\\">\\n      <div\\n        @mousedown=\\\"selectSlice(item)\\\"\\n        class = \\\"autocomplete-suggestions\\\"\\n        :class = \\\"{active : ((highlightIndex % filteredArray.length) === index)}\\\"\\n        v-bind:key = \\\"index\\\"\\n        v-for = \\\"(item,index) in filteredArray\\\">\\n        {{ item }}\\n      </div>\\n    </div>\\n  </transition>\\n</div>\\n</template>\\n\\n<script>\\nexport default {\\n  props: {\\n    placeholder: {\\n      type: String,\\n      default: 'Start typing to search ...'\\n    },\\n    rawarray: {\\n      type: Array,\\n      default: () => ([])\\n    },\\n    rendermax: {\\n      type: Number,\\n      default: 25\\n    }\\n  },\\n  data: () => ({\\n    showSuggestions: false,\\n    typedText: '',\\n    highlightIndex: 0\\n  }),\\n  methods: {\\n    selectSlice: function (item) {\\n      this.$emit('selectslice', item)\\n    },\\n    hitEnter: function () {\\n      switch (event.key) {\\n        case 'ArrowDown':\\n          this.highlightIndex += 1\\n          break\\n        case 'Escape':\\n          this.$refs.input.blur()\\n          break\\n        case 'ArrowUp':\\n          this.highlightIndex -= 1\\n          if (this.highlightIndex <= 0) this.highlightIndex += this.filteredArray.length\\n          break\\n        case 'Enter':\\n          const array = this.filteredArray.slice()\\n          if (array.length > 0) {\\n            this.typedText = ''\\n            const el = document.querySelector(':focus')\\n            if (el) el.blur()\\n            this.selectSlice(array[0])\\n          }\\n          break\\n        default:\\n          this.highlightIndex = 0\\n          break\\n      }\\n    }\\n  },\\n  computed: {\\n    rawArrayLowerCase: function () {\\n      return this.rawarray.map(item => item.toLowerCase())\\n    },\\n    typedTextLowerCase: function () {\\n      return this.typedText.toLowerCase()\\n    },\\n    filteredArray: function () {\\n      const regex = new RegExp(this.typedText, 'i')\\n      const completeMatch = this.rawarray.find(item => item.toLowerCase() === this.typedTextLowerCase)\\n      const othermatches = this.rawarray\\n        .filter(item => regex.test(item))\\n        .filter(item => item.toLowerCase() !== this.typedTextLowerCase)\\n        .filter((_, idx) => idx <= this.rendermax)\\n      return completeMatch\\n        ? [completeMatch].concat(othermatches.slice(0, othermatches.length >= this.rendermax ? othermatches.length - 1 : othermatches.length))\\n        : othermatches\\n    }\\n  }\\n}\\n</script>\\n\\n<style scoped>\\ndiv.autocomplete-container\\n{\\n  cursor:default;\\n}\\n\\n.autocomplete-suggestions\\n{\\n  width:100%;\\n  display:block;\\n  padding:0.1em 0.3em;\\n  transition: all 200ms;\\n  background-color:rgba(230,230,230,0.5);\\n}\\n\\n.autocomplete-suggestions.active\\n{\\n  background-color:rgba(230,230,230,0.95);\\n}\\n\\n.autocomplete-suggestions:hover\\n{\\n  background-color:rgba(230,230,230,0.95);\\n}\\n\\ndiv.autocomplete-container:focus-within .autocomplete-suggestions\\n{\\n  display: block;\\n}\\n\\ndiv.autocomplete-suggestion-container\\n{\\n  width: 100%;\\n  max-height:10em;\\n  overflow-y:auto;\\n  overflow-x:hidden;\\n  z-index:2;\\n}\\ninput[type=\\\"text\\\"]\\n{\\n  width:100%;\\n  height:100%;\\n  z-index:1;\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8351e810\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/autocomplete.vue\n// module id = RpWc\n// module chunks = 0","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"v-pill-container\",\n      on: {\n        click: function($event) {\n          $event.stopPropagation()\n          $event.preventDefault()\n          _vm.$emit(\"select-pill\")\n        }\n      }\n    },\n    [\n      _c(\"span\", { staticClass: \"v-pill-name\" }, [_vm._v(_vm._s(_vm.name))]),\n      _vm._v(\" \"),\n      _vm.closable\n        ? _c(\n            \"span\",\n            {\n              staticClass: \"v-pill-remove\",\n              on: {\n                click: function($event) {\n                  $event.stopPropagation()\n                  $event.preventDefault()\n                  _vm.$emit(\"remove-pill\")\n                }\n              }\n            },\n            [_vm._v(\"×\")]\n          )\n        : _vm._e()\n    ]\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\nif (module.hot) {\n  module.hot.accept()\n  if (module.hot.data) {\n    require(\"vue-hot-reload-api\")      .rerender(\"data-v-94d8f66e\", esExports)\n  }\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-94d8f66e\",\"hasScoped\":true,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/pill.vue\n// module id = ck25\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.copy-field-root\\n{\\n  width: 100%;\\n  white-space: nowrap;\\n}\\n.copy-field-root *\\n{\\n  color:black\\n}\\n.copy-field-root > input\\n{\\n  width : 100%;\\n  height:2.0em;\\n  display: inline-block;\\n  vertical-align : middle;\\n  -webkit-box-sizing: border-box;\\n          box-sizing: border-box;\\n  position : relative;\\n\\n  border : solid 1px rgba(128,128,128,0.6);\\n  z-index: 8;\\n}\\n.copy-field-root > div:not([hidden])\\n{\\n  position : relative;\\n  z-index: 9;\\n  cursor:default;\\n  display: inline-block;\\n  -webkit-box-sizing:border-box;\\n          box-sizing:border-box;\\n  margin : 0.2em;\\n  height : 1.6em;\\n  margin-left:-4em;\\n  font-size:100%;\\n  vertical-align : middle;\\n  text-align: center;\\n  font-size:0.9em;\\n  padding : 0.2em;\\n\\n  color:rgba(0,0,0,0.8);\\n  border : solid 1px rgba(0,0,0,0.5);\\n\\n  background-color:rgba(230,230,230,0.9);\\n}\\n.copy-field-root > div:hover\\n{\\n  background-color:rgba(240,240,240,1.0);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/copyfield.vue\"],\"names\":[],\"mappings\":\";AAiDA;;EAEA,YAAA;EACA,oBAAA;CACA;AAEA;;EAEA,WAAA;CACA;AAEA;;EAEA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,wBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oBAAA;;EAEA,yCAAA;EACA,WAAA;CACA;AAEA;;EAEA,oBAAA;EACA,WAAA;EACA,eAAA;EACA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,wBAAA;EACA,mBAAA;EACA,gBAAA;EACA,gBAAA;;EAEA,sBAAA;EACA,mCAAA;;EAEA,uCAAA;CACA;AAEA;;EAEA,uCAAA;CACA\",\"file\":\"copyfield.vue\",\"sourcesContent\":[\"<template>\\n<div class = \\\"copy-field-root\\\">\\n  <input ref = \\\"inputEl\\\" readonly v-bind:value = \\\"value\\\" type = \\\"text\\\" />\\n  <div\\n    v-bind:hidden = \\\"!copyable\\\"\\n    @click.stop = \\\"copyToClipBoard\\\">{{ methodGetCopyText() }}\\n  </div>\\n</div>\\n</template>\\n\\n<script>\\nexport default {\\n  props: {\\n    value: {\\n      type: String,\\n      default: 'default value'\\n    },\\n    copyable: {\\n      type: Boolean,\\n      default: true\\n    }\\n  },\\n  data: () => ({\\n    copiedFlag: false,\\n    timeoutRef: 0,\\n    copyBtnShown: false\\n  }),\\n  methods: {\\n    copyToClipBoard: function () {\\n      this.copiedFlag = true\\n      if (this.timeoutRef) {\\n        clearTimeout(this.timeoutRef)\\n      }\\n      setTimeout(() => {\\n        this.copiedFlag = false\\n        this.timeoutRef = 0\\n      }, 2000)\\n\\n      this.$refs.inputEl.focus()\\n      this.$refs.inputEl.select()\\n      document.execCommand('copy', false)\\n    },\\n    methodGetCopyText: function () {\\n      return this.copiedFlag ? 'Copied!' : 'Copy'\\n    }\\n  }\\n}\\n</script>\\n<style>\\n.copy-field-root\\n{\\n  width: 100%;\\n  white-space: nowrap;\\n}\\n\\n.copy-field-root *\\n{\\n  color:black\\n}\\n\\n.copy-field-root > input\\n{\\n  width : 100%;\\n  height:2.0em;\\n  display: inline-block;\\n  vertical-align : middle;\\n  box-sizing: border-box;\\n  position : relative;\\n\\n  border : solid 1px rgba(128,128,128,0.6);\\n  z-index: 8;\\n}\\n\\n.copy-field-root > div:not([hidden])\\n{\\n  position : relative;\\n  z-index: 9;\\n  cursor:default;\\n  display: inline-block;\\n  box-sizing:border-box;\\n  margin : 0.2em;\\n  height : 1.6em;\\n  margin-left:-4em;\\n  font-size:100%;\\n  vertical-align : middle;\\n  text-align: center;\\n  font-size:0.9em;\\n  padding : 0.2em;\\n\\n  color:rgba(0,0,0,0.8);\\n  border : solid 1px rgba(0,0,0,0.5);\\n\\n  background-color:rgba(230,230,230,0.9);\\n}\\n\\n.copy-field-root > div:hover\\n{\\n  background-color:rgba(240,240,240,1.0);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-1d7c4045\",\"scoped\":false,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/copyfield.vue\n// module id = fKQA\n// module chunks = 0","module.exports = Vue;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external \"Vue\"\n// module id = lRwf\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.v-modal-container[data-v-0eaeaf66]\\n{\\n  top: 0;\\n  width:100%;\\n  height:100%;\\n  position : absolute;\\n  z-index:999;\\n}\\n.v-modal-screen[data-v-0eaeaf66]\\n{\\n  top : 0;\\n  position : absolute;\\n  width:100%;\\n  height:100%;\\n  background-color:rgba(30,30,30,0.2);\\n}\\n.v-modal-content-container[data-v-0eaeaf66]\\n{\\n  top : 0;\\n  position : absolute;\\n  display : -webkit-box;\\n  display : -ms-flexbox;\\n  display : flex;\\n  -webkit-box-align: center;\\n      -ms-flex-align: center;\\n          align-items: center;\\n  -ms-flex-line-pack: center;\\n      align-content: center;\\n  -webkit-box-pack: center;\\n      -ms-flex-pack: center;\\n          justify-content: center;\\n\\n  pointer-events: none;\\n}\\n.v-modal-content[data-v-0eaeaf66]\\n{\\n  -webkit-box-flex : 0;\\n      -ms-flex : 0 0 auto;\\n          flex : 0 0 auto;\\n  pointer-events: all;\\n}\\n\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/modal.vue\"],\"names\":[],\"mappings\":\";AA4DA;;EAEA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,YAAA;CACA;AACA;;EAEA,QAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;CACA;AAEA;;EAEA,QAAA;EACA,oBAAA;EACA,sBAAA;EAAA,sBAAA;EAAA,eAAA;EACA,0BAAA;MAAA,uBAAA;UAAA,oBAAA;EACA,2BAAA;MAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,wBAAA;;EAEA,qBAAA;CACA;AACA;;EAEA,qBAAA;MAAA,oBAAA;UAAA,gBAAA;EACA,oBAAA;CACA\",\"file\":\"modal.vue\",\"sourcesContent\":[\"<template>\\n<div>\\n  <div class = \\\"v-modal-container\\\">\\n    <div\\n      ref = \\\"screen\\\"\\n      v-on:click = \\\"$emit('close-modal')\\\"\\n      class = \\\"v-modal-screen\\\">\\n    </div>\\n    <div\\n      v-bind:style = \\\"{top:contentContainerTop,left:contentContainerLeft,width:contentContainerWidth,height:contentContainerHeight,}\\\"\\n      class = \\\"v-modal-content-container\\\">\\n      <div\\n        ref = \\\"content\\\"\\n        class = \\\"v-modal-content\\\">\\n        <div class = \\\"v-modal-header\\\">\\n          <slot name = \\\"v-modal-header\\\">\\n          </slot>\\n        </div>\\n        <div class = \\\"v-modal-body\\\">\\n          <slot name = \\\"v-modal-body\\\">\\n          </slot>\\n        </div>\\n        <div class = \\\"v-modal-footer\\\">\\n          <slot name = \\\"v-modal-footer\\\">\\n          </slot>\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n</template>\\n<script>\\nexport default {\\n  props: {\\n    top: Number,\\n    left: Number\\n  },\\n  data: () => ({\\n    show: {\\n      type: Boolean,\\n      default: false\\n    }\\n  }),\\n  computed: {\\n    contentContainerLeft: function () {\\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.left, this.$refs.screen.clientWidth - this.$refs.content.clientWidth) + 'px' : `0px`\\n    },\\n    contentContainerTop: function () {\\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? Math.min(this.top, this.$refs.screen.clientHeight - this.$refs.content.clientHeight) + 'px' : `0px`\\n    },\\n    contentContainerWidth: function () {\\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\\n    },\\n    contentContainerHeight: function () {\\n      return this.top && this.left && this.$refs.content && this.$refs.screen ? 'auto' : `100%`\\n    }\\n  }\\n}\\n</script>\\n<style scoped>\\n.v-modal-container\\n{\\n  top: 0;\\n  width:100%;\\n  height:100%;\\n  position : absolute;\\n  z-index:999;\\n}\\n.v-modal-screen\\n{\\n  top : 0;\\n  position : absolute;\\n  width:100%;\\n  height:100%;\\n  background-color:rgba(30,30,30,0.2);\\n}\\n\\n.v-modal-content-container\\n{\\n  top : 0;\\n  position : absolute;\\n  display : flex;\\n  align-items: center;\\n  align-content: center;\\n  justify-content: center;\\n\\n  pointer-events: none;\\n}\\n.v-modal-content\\n{\\n  flex : 0 0 auto;\\n  pointer-events: all;\\n}\\n\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-0eaeaf66\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/modal.vue\n// module id = n8WV\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./pill.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"12958e8c\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./pill.vue\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./pill.vue\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-94d8f66e\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/pill.vue\n// module id = nFT+\n// module chunks = 0","var disposed = false\nfunction injectStyle (ssrContext) {\n  if (disposed) return\n  require(\"!!vue-style-loader!css-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./pill.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./pill.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./pill.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-94d8f66e\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":[\\\"src\\\",\\\"poster\\\"],\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"},\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./pill.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-94d8f66e\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n  __vue_script__,\n  __vue_template__,\n  __vue_template_functional__,\n  __vue_styles__,\n  __vue_scopeId__,\n  __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/pill.vue\"\n\n/* hot reload */\nif (module.hot) {(function () {\n  var hotAPI = require(\"vue-hot-reload-api\")\n  hotAPI.install(require(\"vue\"), false)\n  if (!hotAPI.compatible) return\n  module.hot.accept()\n  if (!module.hot.data) {\n    hotAPI.createRecord(\"data-v-94d8f66e\", Component.options)\n  } else {\n    hotAPI.reload(\"data-v-94d8f66e\", Component.options)\n  }\n  module.hot.dispose(function (data) {\n    disposed = true\n  })\n})()}\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/pill.vue\n// module id = u0wG\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./checkbox.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"1c6ceeff\", content, false, {});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./checkbox.vue\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/index.js?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-8903635a\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./checkbox.vue\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8903635a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/checkbox.vue\n// module id = uPPG\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \"\\n.checkbox-root[data-v-8903635a]\\n{\\n  height: 2em;\\n  width: 3.6em;\\n  display: inline-block;\\n  border-radius: 1em;\\n  overflow: hidden;\\n  padding: 0.2em;\\n  -webkit-box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n          box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n  -webkit-box-sizing: border-box;\\n          box-sizing: border-box;\\n  -webkit-transition: all 0.5s;\\n  transition: all 0.5s;\\n}\\n.checkbox-on[data-v-8903635a]\\n{\\n  background-color: rgba(0, 150, 0, 0.4);\\n}\\n.checkbox-off[data-v-8903635a]\\n{\\n  background-color: rgba(128, 128, 128, 0.4);\\n}\\n.checkbox-dial[data-v-8903635a]\\n{\\n  -webkit-transition: all 0.2s;\\n  transition: all 0.2s;\\n  display: inline-block;\\n  width: 1.6em;\\n  height: 100%;\\n  background-color:white;\\n  border-radius: 1em;\\n  -webkit-box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n          box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n}\\n\", \"\", {\"version\":3,\"sources\":[\"/home/xgui3783/dev/projects/vue-components/src/components/src/components/checkbox.vue\"],\"names\":[],\"mappings\":\";AAoCA;;EAEA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;EACA,kEAAA;UAAA,0DAAA;EACA,+BAAA;UAAA,uBAAA;EACA,6BAAA;EAAA,qBAAA;CACA;AAEA;;EAEA,uCAAA;CACA;AAEA;;EAEA,2CAAA;CACA;AAEA;;EAEA,6BAAA;EAAA,qBAAA;EACA,sBAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,4DAAA;UAAA,oDAAA;CACA\",\"file\":\"checkbox.vue\",\"sourcesContent\":[\"<template>\\n<div\\n  @click = \\\"toggleCheckBox\\\"\\n  :class = \\\"flag ? 'checkbox-on' : 'checkbox-off'\\\"\\n  class = \\\"checkbox-root\\\">\\n  <div\\n    :style = \\\"getDialTransform\\\"\\n    class = \\\"checkbox-dial\\\">\\n  </div>\\n</div>\\n</template>\\n<script>\\nexport default {\\n  props: {\\n    flag: {\\n      type: Boolean,\\n      default: true\\n    }\\n  },\\n  methods: {\\n    toggleCheckBox: function (event) {\\n      this.$emit('togglecheckbox', event)\\n    }\\n  },\\n  computed: {\\n    getDialTransform: function () {\\n      return {\\n        transform: this.flag\\n          ? 'translateX(0)'\\n          : 'translateX(1.6em)'\\n      }\\n    }\\n  }\\n}\\n</script>\\n<style scoped>\\n.checkbox-root\\n{\\n  height: 2em;\\n  width: 3.6em;\\n  display: inline-block;\\n  border-radius: 1em;\\n  overflow: hidden;\\n  padding: 0.2em;\\n  box-shadow: inset 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n  box-sizing: border-box;\\n  transition: all 0.5s;\\n}\\n\\n.checkbox-on\\n{\\n  background-color: rgba(0, 150, 0, 0.4);\\n}\\n\\n.checkbox-off\\n{\\n  background-color: rgba(128, 128, 128, 0.4);\\n}\\n\\n.checkbox-dial\\n{\\n  transition: all 0.2s;\\n  display: inline-block;\\n  width: 1.6em;\\n  height: 100%;\\n  background-color:white;\\n  border-radius: 1em;\\n  box-shadow: 0 0.5em 0.3em -0.3em rgba(0, 0, 0, 0.2);\\n}\\n</style>\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?{\"sourceMap\":true}!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-8903635a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/checkbox.vue\n// module id = vLWt\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/manifest.js b/src/plugin_examples/newWebJugex/manifest.js
deleted file mode 100644
index 1f3bed735127c3e9c9e47889a5e9bb4e44aa2053..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/manifest.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="",t.oe=function(r){throw console.error(r),r}}([]);
-//# sourceMappingURL=manifest.js.map
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/manifest.js.map b/src/plugin_examples/newWebJugex/manifest.js.map
deleted file mode 100644
index 8389ec315a2faf132f37a0959878564a0f859ece..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/manifest.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap 48e9dd598f93f03d55e3"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,GAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 48e9dd598f93f03d55e3"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/manifest.json b/src/plugin_examples/newWebJugex/manifest.json
deleted file mode 100644
index 97462a280738efbf6d57588f74b58bcf8e303c24..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/manifest.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "name" : "fzj.xg.webjugex",
-  "displayName":"JuGEx differential gene expression analysis",
-  "type" : "plugin",
-  "templateURL" : "res/plugin_examples/newWebJugex/template.html",
-  "scriptURL" : "res/plugin_examples/newWebJugex/script.js"
-}
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/script.js b/src/plugin_examples/newWebJugex/script.js
deleted file mode 100644
index 95655365e6e4d4dba2aa2ef4c9512a17aa648e37..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/script.js
+++ /dev/null
@@ -1,356 +0,0 @@
-(() => {
-
-  // example of adding toasts and custom landmarks
-
-  // const handler = interactiveViewer.uiHandle.getToastHandler()
-  // handler.message = 'hohoho'
-  // handler.dismissable = true
-  // handler.timeout = 0
-  // handler.show()
-
-  // const handler2 = interactiveViewer.uiHandle.getToastHandler()
-  // handler2.message = `hohoho2<a href = "alert('oh no')">test</a>`
-  // handler2.dismissable = true
-  // handler2.timeout = 0
-  // setTimeout(()=>{
-  //   handler2.show()
-  // },5000)
-
-  // interactiveViewer.viewerHandle.add3DLandmarks([{
-  //   id : 'jugex-test1',
-  //   position : [0,0,0]
-  // }])
-
-  const backendRoot = null
-  const srcRoot = 'res/plugin_examples/newWebJugex'
-  const manifestID = 'fzj.xg.webjugex'
-
-  /* so that on shutdown, we could unload these libraries */
-  const onshutdownCB = []
-  const loadedExternalLibraries = []
-  const subscriptions = []
-
-  const newset = new Set()
-  newset.add('test')
-  newset.has('test')
-
-  let datasetsLoaded, mouseoverReggion
-
-  const handleMouseOvernehubaEvent = (event) => {
-    if(event === null){
-      return
-    }
-    /* if either first region or second region is empty fill them */
-  }
-
-  const handleMouseClickEvent = (event) => {
-
-  }
-
-  interactiveViewer.metadata.datasetsBSubject.subscribe(datasets => datasetsLoaded = datasets)
-
-  onshutdownCB.push(() => subscriptions.forEach(s => s.unsubscribe()))
-
-  const loadExternalJsLibrary = (url) => new Promise((resolve,reject) => {
-    const el = document.createElement('script')
-    el.setAttribute('src',url)
-    el.onload = () => {
-      loadedExternalLibraries.push(el)
-      resolve()
-    }
-    el.onerror = (e) => reject(e)
-    document.head.appendChild(el)
-  })
-
-  const parseCoordToFile = (json) => {
-    return Object.keys(json).reduce((acc, curr) => {
-      const newRows = json[curr].map(item => {
-        return `${curr},${item.xyz.join(',')},${item.winsorzed_mean.join(',')}`
-      })
-      return acc.concat(newRows)
-    }, []).join('\n')
-  }
-
-  const parsePvalToFile = (json) => {
-    return Object.keys(json).map(key => `${key},${json[key]}`).join('\n')
-  }
-
-  const jugexResponseParser = (json) => {
-    const pval = json[1]
-    const coord = json[0]
-    const stringCoordFile = parseCoordToFile(coord)
-    const stringPvalFile = parsePvalToFile(pval)
-    const stringTitledCoordFile = Object.keys(pval).join(',').concat('\n').concat(stringCoordFile)
-    return {
-      pval : stringPvalFile,
-      coord : stringTitledCoordFile
-    }
-  }
-
-  interactiveViewer.pluginControl.loadExternalLibraries(['vue@2.5.16'])
-    .then(() => loadExternalJsLibrary(`${srcRoot}/manifest.js`))
-    .then(() => loadExternalJsLibrary(`${srcRoot}/vendor.js`))
-    .then(() => loadExternalJsLibrary(`${srcRoot}/app.js`))
-    .then(() => {
-      window.interactiveViewer.pluginControl[manifestID].setInitManifestUrl('http://localhost:10080/newWebJugex/manifest.json')
-
-      const controller = new Vue({
-        el: '#fzj\\.xg\\.newWebJugex\\.container',
-        props: {
-          regionNameToPMapURLMap: {
-            type: Map,
-            default: () => new Map()
-          }
-        },
-        data: {
-          allgenes: ["ADRA2A", "AVPR1B", "CHRM2", "CNR1", "CREB1", "CRH", "CRHR1", "CRHR2", "GAD2", "HTR1A", "HTR1B", "HTR1D", "HTR2A", "HTR3A", "HTR5A", "MAOA", "PDE1A", "SLC6A2", "SLC6A4", "SST", "TAC1", "TPH1", "GPR50", "CUX2", "TPH2"],
-          chosengenes: [],
-          roi1: '',
-          roi2: '',
-          regions: [],
-          singleProbeMode:true,
-          simpleMode:true,
-          ignoreCustomProbe:false,
-          lefthemisphere:true,
-          righthemisphere:true,
-          nPermutations:1000,
-          warning : []
-        },
-        methods: {
-          animationendtmp: function(event){
-            if(event.animationName === 'flash'){
-              this.warning = []
-            }
-          },
-          findNewInput: function(){
-            if(this.roi1 === '')
-              return this.$refs.roi1.$refs.input.focus()
-            if(this.roi2 === '')
-              return this.$refs.roi2.$refs.input.focus()
-            return this.$refs.genelist.$refs.input.focus()
-          },
-          removeGene: function (gene) {
-            this.chosengenes = this.chosengenes.filter(g => g !== gene)
-          },
-          exportGene: function () {
-            this.$refs.exportGeneAnchor.setAttribute('download', `${Date.now()}.csv`)
-            this.$refs.exportGeneAnchor.click()
-          },
-          getWarning: function(w) {
-            switch(w){
-              case 'roi1':
-                return `ROI1 must be selected.`
-              case 'roi2':
-                return `ROI2 must be selected.`
-              case 'chosengenes':
-                return `At least 1 gene needs to be selected.`
-              case 'hemisphere':
-                return `If simple mode is off, at least 1 hemisphere needs to be selected.`
-              default:
-                return `Some other fields need to be filled.`
-            }
-          },
-          validation: function () {
-            this.warning = []
-            if(this.roi1 !== '' && this.roi2 !== '' && this.chosengenes.length > 0 && (this.simpleMode || (this.lefthemisphere || this.righthemisphere))){
-              return true
-            }
-            const warning = []
-            if(this.roi1 === ''){
-              warning.push('roi1')
-            }
-            if(this.roi2 === ''){
-              warning.push('roi2')
-            }
-            if(this.chosengenes.length <= 0){
-              warning.push('chosengenes')
-            }
-            if(!this.simpleMode && !(this.lefthemisphere || this.righthemisphere)){
-              warning.push('hemisphere')
-            }
-            this.warning = warning
-          },
-          startAnalysis: function () {
-            if(!this.validation()){
-              return
-            }
-              
-            const body = {
-              area1: {
-                name: this.roi1,
-                PMapURL: this.regionNameToPMapURLMap.get(this.roi1)
-              },
-              area2: {
-                name: this.roi2,
-                PMapURL: this.regionNameToPMapURLMap.get(this.roi2)
-              },
-
-              simpleMode: this.simpleMode,
-              singleProbeMode: this.singleProbeMode,
-              ignoreCustomProbe: this.ignoreCustomProbe,
-
-              lh: this.lefthemisphere,
-              rh: this.righthemisphere,
-              selectedGenes: [...this.chosengenes]
-            }
-
-            this.$emit('start-analysis', Object.assign({}, body))
-          }
-        },
-        computed: {
-          hemisphereWarning : function(){
-            return this.warning.findIndex(v => v === 'hemisphere') >= 0
-          },
-          roi1Warning: function(){
-            return this.warning.findIndex(v => v === 'roi1') >= 0
-          },
-          roi2Warning: function(){
-            return this.warning.findIndex(v => v === 'roi2') >= 0
-          },
-          chosenGeneWarning: function(){
-            return this.warning.findIndex(v => v === 'chosengenes') >= 0
-          },
-          placeholderTextRoi1: function () {
-            return this.roi1 === '' ? 'Start typing to search ...': this.roi1
-          },
-          placeholderTextRoi2: function () {
-            return this.roi2 === '' ? 'Start typing to search ...': this.roi2
-          },
-          chosenGeneCommaJoined: function(){
-            return this.chosengenes.join(',')
-          },
-          getAllgenes: function () {
-            return this.allgenes
-          }
-        },
-        mounted: function () {
-          fetch(backendRoot)
-            .then(res => res.json())
-            .then(array => this.allgenes = array)
-            .catch(console.warn)
-        }
-      })
-
-      interactiveViewer.metadata.datasetsBSubject.subscribe(array => 
-        controller.regionNameToPMapURLMap = new Map(array
-          .filter(item => item.type === 'Cytoarchitectonic Probabilistic Map'
-            && typeof item.regionName !== 'undefined' 
-            && item.regionName.constructor === Array 
-            && item.regionName.length > 0
-            && typeof item.files !== 'undefined'
-            && item.files.constructor === Array
-            && item.files.length > 0
-            && typeof item.files[0].url !== 'undefined')
-          .map(item => [item.regionName[0].regionName, item.files[0].url])))
-
-      controller.regions = Array.from(interactiveViewer.metadata.regionsLabelIndexMap.values())
-        .map(item=>item.name)
-
-      const normaliseToTwoDigit = (input) => `${input.toString().length > 1 ? '' : '0'}${input.toString()}`
-
-      Vue.component('fzj-xg-newwebjugex-analysis-card',{
-        template: `
-        <div class = "panel panel-default">
-          <div 
-            @click = "showbody = !showbody"
-            class = "panel-header btn btn-default btn-block">
-            <span 
-              v-if = "status">
-              Analysis complete. {{ dateString }}
-            </span>
-            <div
-              v-if = "!status">
-              <div class = "fzj.xg.newWebJugex.spinner">&bull;</div>
-              <div>Analysing</div>
-            </div>
-            <span
-              @click.stop = "$emit('remove-card')" 
-              class = "pull-right close">
-                &times;
-            </span>
-          </div>
-          <div 
-            v-if = "showbody"
-            class = "panel-body">
-            <div v-if = "error">
-              {{ error }}
-            </div>
-            <div v-else-if = "pvaldata && coorddata">
-            <a download = "pval.csv" :href = "'data:text/csv;charset=utf-8,' + pvaldata">download pvals</a><br />
-            <a download = "coord.csv" :href = "'data:text/csv;charset=utf-8,' + coorddata">download coord data</a>
-            </div>
-            <div v-else>
-              We are still working on on analysing your data ...
-            </div>
-          </div>
-        </div>
-        `,
-        props: {
-          querydata: {
-            type: Object,
-            default: () => ({})
-          }
-        },
-        data: () => ({
-          status: false,
-          showbody: false,
-          datenow : new Date(),
-          error : null,
-          pvaldata : null,
-          coorddata : null
-        }),
-        computed: {
-          filename: function(){
-            return `pval_nPerm${this.querydata.nPermutations}_${this.querydata.singleProbeMode ? 'singleProbeMode' : 'allProbeMode'}`
-          },
-          dateString: function () {
-            return `${this.datenow.getFullYear().toString()}${normaliseToTwoDigit(this.datenow.getMonth() + 1)}${normaliseToTwoDigit(this.datenow.getDate())}_${normaliseToTwoDigit(this.datenow.getHours())}${normaliseToTwoDigit(this.datenow.getMinutes())}`
-          }
-        },
-        mounted: function () {
-          console.log(this.querydata)
-          const data = Object.assign({}, this.querydata, {threshold:0.2,mode:false})
-          fetch(`${backendRoot}/jugex`,{
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(data)
-          })
-            .then(res=>res.json())
-            .then(json => {
-              this.status = true
-              const rjson = jugexResponseParser(json)
-              this.pvaldata = rjson.pval
-              this.coorddata = rjson.coord
-            })
-            .catch(e => {
-              this.status = true
-              this.error = JSON.stringify(e)
-            })
-        }
-      })
-
-      const result = new Vue({
-        el: '#fzj\\.xg\\.newWebJugex\\.result',
-        data: {
-          analyses: []
-        },
-        methods: {
-          addAnalysis: function (json) {
-            this.analyses.push(json)
-          },
-          removeAnalysis: function (index) {
-            this.analyses.splice(index, 1)
-          }
-        }
-      })
-
-      controller.$on('start-analysis', (data) => {
-        console.log({data})
-        return
-        result.addAnalysis(data)
-      })
-    })
-    .catch(e => console.log('error',e))
-})()
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/template.html b/src/plugin_examples/newWebJugex/template.html
deleted file mode 100644
index 51feb4fc0f5827269117994b52ce73e7f0b19c1d..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/template.html
+++ /dev/null
@@ -1,354 +0,0 @@
-<div @animationend = "animationendtmp($event)" v-cloak id = "fzj.xg.newWebJugex.container"> 
-   <vue-readmore :collapsed-height = "40">
-    <template slot = "readmoreContent">
-      <small id = "fzj.xg.newWebJugex.desc">
-          Find a set of differentially expressed genes between two user defined volumes of interest based on JuBrain maps. <br />
-          The tool downloads expression values of user specified sets of genes from Allen Brain API.<br />
-          Then, it uses zscores to find which genes are expressed differentially between the user specified regions of interests.<br />
-          After the analysis is finished, the genes and their calculated p values are displayed. There is also an option of downloading the gene names and their p values<br />
-          and the roi coordinates used in the analysis.
-          Please select two regions of interest, and at least one gene :
-      </small>
-    </template>
-    <template slot = "resizeSliverContentCollapsed">
-      <div class = "text-center">
-        <i class = "glyphicon glyphicon-chevron-down"></i>
-      </div>
-    </template>
-    <template slot = "resizeSliverContentShown">
-      <div class = "text-center">
-        <i class = "glyphicon glyphicon-chevron-up"></i>
-      </div>
-    </template>
-  </vue-readmore>
-
-  <div class="fzj.xg.newWebJugex.spacer"></div>
-
-  <div class = "input-group">
-    <span class = "input-group-addon">
-      Simple mode:
-    </span>
-    <vue-checkbox
-      :flag = "simpleMode === true"
-      @togglecheckbox = "simpleMode = !simpleMode">
-    </vue-checkbox>
-  </div>
-
-  <div class="fzj.xg.newWebJugex.spacer"></div>
-
-  <div 
-    style = "z-index:5" class="input-group">
-    <div 
-      class="input-group-addon">
-      ROI1:
-    </div>
-    <vue-autocomplete
-      :warning = "roi1Warning" 
-      ref = "roi1"
-      @selectslice = "roi1 = $event;findNewInput()"
-      class = "form-control fzj.xg.newWebJugex.vueAutocompleteFormControl"
-      :rawarray = "regions"
-      :placeholder = "placeholderTextRoi1">
-  
-    </vue-autocomplete>
-  </div>
-  <div style = "z-index:4" class="input-group">
-    <div class="input-group-addon">
-      ROI2:
-    </div>
-    <vue-autocomplete
-      :warning = "roi2Warning"
-      ref = "roi2"
-      @selectslice = "roi2 = $event;findNewInput()"
-      class = "form-control fzj.xg.newWebJugex.vueAutocompleteFormControl"
-      :rawarray = "regions"
-      :placeholder = "placeholderTextRoi2">
-  
-    </vue-autocomplete>
-  </div>
-
-  <div class="fzj.xg.newWebJugex.spacer"></div>
-
-  <div style = "z-index:3" class = "input-group">
-    <vue-autocomplete
-      :warning = "chosenGeneWarning"
-      ref = "genelist"
-      @selectslice = "chosengenes.push( $event );$refs.genelist.$refs.input.focus()"
-      class = "form-control fzj.xg.newWebJugex.vueAutocompleteFormControl"
-      :rawarray = "getAllgenes"
-      :placeholder = "'Search for genes of interest ...'">
-  
-    </vue-autocomplete>
-    
-    <div class = "input-group-btn">
-      <div webjugex-tooltip = "accepts a comma delimited utf-8 encoded file" class = "btn btn-default fzj.xg.newWebJugex.geneBtns">
-        Import
-      </div>
-    </div>
-    <div class = "input-group-btn">
-      <div 
-        @click = "exportGene"
-        webjugex-tooltip = "saves the gene list as a comma delimited, utf8 encoded csv file" 
-        class = "btn btn-default fzj.xg.newWebJugex.geneBtns">
-        Export
-        <a style = "display:none" ref = "exportGeneAnchor" :href = "'data:text/csv;charset=utf-8,' + chosenGeneCommaJoined">button</a>
-      </div>
-    </div>
-
-  </div>
-
-  <vue-pill 
-    class = "fzj.xg.newWebJugex.pill"
-    @remove-pill = "removeGene(item)" 
-    v-for = "(item,index) in chosengenes" 
-    :key = "index" 
-    :name = "item">
-  </vue-pill>
-
-  <div class="fzj.xg.newWebJugex.spacer"></div>
-
-  <transition name = "fzj-xg-webjugex-fade">
-    <div v-if = "!simpleMode">
-
-      <div class="input-group">
-        <span class="input-group-addon">
-          Single probe mode
-        </span>
-        <vue-checkbox
-          :flag = "singleProbeMode"
-          @togglecheckbox = "singleProbeMode = !singleProbeMode">
-    
-        </vue-checkbox>
-      </div>
-    
-      <div class="input-group">
-        <span class="input-group-addon">
-          Ignore custom probe
-        </span>
-        <vue-checkbox
-          :flag = "ignoreCustomProbe"
-          @togglecheckbox = "ignoreCustomProbe = !ignoreCustomProbe">
-    
-        </vue-checkbox>
-      </div>
-      
-      <div class="fzj.xg.newWebJugex.spacer"></div>
-    
-      <div class="input-group">
-        <span class="input-group-addon">
-          Hemisphere
-        </span>
-        <div
-          style = "display:inline-block"
-          :warning = "hemisphereWarning">
-          <div 
-            @click = "lefthemisphere = !lefthemisphere"
-            :class = " lefthemisphere == true ? 'btn-active' : 'btn-inactive'"
-            class="btn btn-default">
-            Left
-          </div>
-          <div 
-            @click = "righthemisphere = !righthemisphere"
-            :class = " righthemisphere == true ? 'btn-active' : 'btn-inactive'"
-            class="btn btn-default">
-            Right
-          </div>
-        </div>
-      </div>
-    
-      <div class="fzj.xg.newWebJugex.spacer"></div>
-    
-      <div class="input-group">
-        <span class="input-group-addon">
-          Number of permutations
-        </span>
-        <input v-model = "nPermutations" type="text" class="form-control">
-      </div>
-    
-      <div class="fzj.xg.newWebJugex.spacer"></div>  
-    </div>
-  </transition>
-
-  <div 
-    @click = "startAnalysis"
-    class="btn btn-default btn-block">
-    Start Differential Analysis
-  </div>
-  
-  <transition name = "fzj-xg-webjugex-fade">
-    <div style = "margin-top:0.5em" class = "alert alert-danger" v-if = "warning.length > 0">
-      <i class="glyphicon glyphicon-alert"></i> WARNING: 
-      <div v-for = "w in warning">
-        {{ getWarning(w) }}
-      </div>
-    </div>
-  </transition>
-
-</div>
-<div v-cloak id = "fzj.xg.newWebJugex.result">
-  <fzj-xg-newwebjugex-analysis-card
-    class = "fzj.xg.newWebJugex.analysisCard.container"
-    @remove-card = "removeAnalysis(index)"
-    :querydata = "item"
-    :key = "index"
-    v-for = "(item, index) in analyses">
-
-  </fzj-xg-newwebjugex-analysis-card>
-</div>
-<div class = "fzj.xg.newWebJugex.padding"></div>
-<style>
-[v-cloak]
-{
-  display:none;
-}
-
-.fzj-xg-webjugex-fade-enter-active,
-.fzj-xg-webjugex-fade-leave-active
-{
-  transition: opacity 0.3s;
-}
-
-.fzj-xg-webjugex-fade-enter,
-.fzj-xg-webjugex-fade-leave-to
-{
-  opacity: 0;
-}
-
-@keyframes flash{
-  0% {
-    outline:2px solid rgba(250, 100, 100, 0.0);
-  }
-  10% {
-    outline:2px solid rgba(250, 100, 100, 0.9);
-  }
-  100% {
-    outline:2px solid rgba(250, 100, 100, 0.0);
-  }
-}
-
-[warning]
-{
-  animation:5.5s linear flash;
-}
-
-#fzj\.xg\.newWebJugex\.container
-{
-  padding: 0.5em;
-}
-#fzj\.xg\.newWebJugex\.desc
-{
-  display:block;
-}
-.fzj\.xg\.newWebJugex\.autocomplete
-{
-  border : 1px rgba(0,0,0,0.1) solid;
-  width:10em;
-  padding:1em;
-  box-sizing: border-box;
-  position:absolute;
-}
-
-.fzj\.xg\.newWebJugex\.autocomplete input
-{
-  width:100%;
-}
-
-.fzj\.xg\.newWebJugex\.vueAutocompleteFormControl
-{
-  padding:0;
-}
-.fzj\.xg\.newWebJugex\.padding
-{
-  height:2em;
-}
-
-.fzj\.xg\.newWebJugex\.spacer
-{
-  height: 0.5em;
-}
-
-.fzj\.xg\.newWebJugex\.geneBtns
-{
-  height:34px;
-}
-
-#fzj\.xg\.newWebJugex\.container [webjugex-tooltip]
-{
-  position: relative;
-}
-
-#fzj\.xg\.newWebJugex\.container [webjugex-tooltip]:after
-{
-  content: attr(webjugex-tooltip);
-  position: absolute;
-  top: 3em;
-  right: 0;
-  color:white;
-  background-color:rgba(0,0,0,0.7);
-  width: 10em;
-  white-space: normal;
-  display: inline-block;
-  padding: 0.2em;
-  pointer-events: none;
-  transition: all 0.2s;
-  opacity: 0;
-}
-
-#fzj\.xg\.newWebJugex\.container [webjugex-tooltip]:hover:after
-{
-  opacity: 1;
-}
-
-#fzj\.xg\.newWebJugex\.container .btn-inactive
-{
-  transition: all 0.2s;
-  color:rgba(0,0,0,0.5);
-  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15),
-    -1px 0 0 rgba(0, 0, 0, 0.15),
-    0 1px 0 rgba(0, 0, 0, 0.15),
-    0 -1px 0 rgba(0, 0, 0, 0.15);
-}
-
-#fzj\.xg\.newWebJugex\.container .btn-active
-{
-  transition: all 0.2s;
-  color:rgba(200, 255, 125, 1.0);
-  text-shadow: 1px 0 0 rgba(0, 255, 0, 0.15),
-    -1px 0 0 rgba(0, 255, 0, 0.15),
-    0 1px 0 rgba(0, 255, 0, 0.15),
-    0 -1px 0 rgba(0, 255, 0, 0.15);
-}
-
-#fzj\.xg\.newWebJugex\.result
-{
-  padding: 0.5em;
-}
-
-#fzj\.xg\.newWebJugex\.result .fzj\.xg\.newWebJugex\.spinner
-{
-  animation: thinking 0.7s ease-in-out 0s infinite both;
-}
-
-@keyframes thinking {
-  0% { transform: translateX(0px); }
-  50% { transform: translateX(10px); }
-  100%   { transform: translateX(0px); }
-}
-
-
-.fzj\.xg\.newWebJugex\.analysisCard\.container
-{
-  margin-bottom: 0;
-}
-
-
-[darktheme="true"] #fzj\.xg\.newWebJugex\.container .checkbox-dial
-{
-  background-color:rgba(210,210,210,1.0);
-}
-
-[darktheme="true"] #fzj\.xg\.newWebJugex\.container .checkbox-on
-{
-  background-color:rgba(50,150,50,1.0);
-}
-</style>
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/vendor.js b/src/plugin_examples/newWebJugex/vendor.js
deleted file mode 100644
index 5fb83edbbbe9eb341864442a7a1ced49cdd52eb5..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/vendor.js
+++ /dev/null
@@ -1,2 +0,0 @@
-webpackJsonp([1],{"FZ+f":function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(i=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),s=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[n].concat(s).concat([o]).join("\n")}var i;return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var s=this[o][0];"number"==typeof s&&(r[s]=!0)}for(o=0;o<e.length;o++){var i=e[o];"number"==typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),t.push(i))}},t}},"VU/8":function(e,t){e.exports=function(e,t,n,r,o,s){var i,a=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(i=e,a=e.default);var c,d="function"==typeof a?a.options:a;if(t&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0),n&&(d.functional=!0),o&&(d._scopeId=o),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=c):r&&(c=r),c){var f=d.functional,p=f?d.render:d.beforeCreate;f?(d._injectStyles=c,d.render=function(e,t){return c.call(t),p(e,t)}):d.beforeCreate=p?[].concat(p,c):[c]}return{esModule:i,exports:a,options:d}}},rjj0:function(e,t,n){var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o=n("tTVk"),s={},i=r&&(document.head||document.getElementsByTagName("head")[0]),a=null,u=0,c=!1,d=function(){},f=null,p="data-vue-ssr-id",l="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(e){for(var t=0;t<e.length;t++){var n=e[t],r=s[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(g(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var i=[];for(o=0;o<n.parts.length;o++)i.push(g(n.parts[o]));s[n.id]={id:n.id,refs:1,parts:i}}}}function v(){var e=document.createElement("style");return e.type="text/css",i.appendChild(e),e}function g(e){var t,n,r=document.querySelector("style["+p+'~="'+e.id+'"]');if(r){if(c)return d;r.parentNode.removeChild(r)}if(l){var o=u++;r=a||(a=v()),t=b.bind(null,r,o,!1),n=b.bind(null,r,o,!0)}else r=v(),t=function(e,t){var n=t.css,r=t.media,o=t.sourceMap;r&&e.setAttribute("media",r);f.ssrId&&e.setAttribute(p,t.id);o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}e.exports=function(e,t,n,r){c=n,f=r||{};var i=o(e,t);return h(i),function(t){for(var n=[],r=0;r<i.length;r++){var a=i[r];(u=s[a.id]).refs--,n.push(u)}t?h(i=o(e,t)):i=[];for(r=0;r<n.length;r++){var u;if(0===(u=n[r]).refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete s[u.id]}}}};var m,y=(m=[],function(e,t){return m[e]=t,m.filter(Boolean).join("\n")});function b(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,o);else{var s=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(s,i[t]):e.appendChild(s)}}},tTVk:function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var s=t[o],i=s[0],a={id:e+":"+o,css:s[1],media:s[2],sourceMap:s[3]};r[i]?r[i].parts.push(a):n.push(r[i]={id:i,parts:[a]})}return n}}});
-//# sourceMappingURL=vendor.js.map
\ No newline at end of file
diff --git a/src/plugin_examples/newWebJugex/vendor.js.map b/src/plugin_examples/newWebJugex/vendor.js.map
deleted file mode 100644
index a131d0fce8463cf91152d8d8e4831cd591eacf39..0000000000000000000000000000000000000000
--- a/src/plugin_examples/newWebJugex/vendor.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./node_modules/css-loader/lib/css-base.js","webpack:///./node_modules/vue-loader/lib/component-normalizer.js","webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js","webpack:///./node_modules/vue-style-loader/lib/listToStyles.js"],"names":["module","exports","useSourceMap","list","toString","this","map","item","content","cssMapping","btoa","sourceMapping","sourceMap","unescape","encodeURIComponent","JSON","stringify","sourceURLs","sources","source","sourceRoot","concat","join","cssWithMappingToString","i","modules","mediaQuery","alreadyImportedModules","length","id","push","rawScriptExports","compiledTemplate","functionalTemplate","injectStyles","scopeId","moduleIdentifier","esModule","scriptExports","type","default","hook","options","render","staticRenderFns","_compiled","functional","_scopeId","context","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","call","_registeredComponents","add","_ssrRegister","existing","beforeCreate","_injectStyles","h","hasDocument","document","DEBUG","Error","listToStyles","__webpack_require__","stylesInDom","head","getElementsByTagName","singletonElement","singletonCounter","isProduction","noop","ssrIdKey","isOldIE","navigator","test","userAgent","toLowerCase","addStylesToDom","styles","domStyle","refs","j","parts","addStyle","createStyleElement","styleElement","createElement","appendChild","obj","update","remove","querySelector","parentNode","removeChild","styleIndex","applyToSingletonTag","bind","css","media","setAttribute","ssrId","styleSheet","cssText","firstChild","createTextNode","newObj","parentId","_isProduction","_options","newList","mayRemove","textStore","replaceText","index","replacement","filter","Boolean","cssNode","childNodes","insertBefore","newStyles","part"],"mappings":"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","file":"static/js/vendor.js","sourcesContent":["/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t//  when a module is imported multiple times with different media queries.\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader/lib/css-base.js\n// module id = FZ+f\n// module chunks = 1","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file.\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nmodule.exports = function normalizeComponent (\n  rawScriptExports,\n  compiledTemplate,\n  functionalTemplate,\n  injectStyles,\n  scopeId,\n  moduleIdentifier /* server only */\n) {\n  var esModule\n  var scriptExports = rawScriptExports = rawScriptExports || {}\n\n  // ES6 modules interop\n  var type = typeof rawScriptExports.default\n  if (type === 'object' || type === 'function') {\n    esModule = rawScriptExports\n    scriptExports = rawScriptExports.default\n  }\n\n  // Vue.extend constructor export interop\n  var options = typeof scriptExports === 'function'\n    ? scriptExports.options\n    : scriptExports\n\n  // render functions\n  if (compiledTemplate) {\n    options.render = compiledTemplate.render\n    options.staticRenderFns = compiledTemplate.staticRenderFns\n    options._compiled = true\n  }\n\n  // functional template\n  if (functionalTemplate) {\n    options.functional = true\n  }\n\n  // scopedId\n  if (scopeId) {\n    options._scopeId = scopeId\n  }\n\n  var hook\n  if (moduleIdentifier) { // server build\n    hook = function (context) {\n      // 2.3 injection\n      context =\n        context || // cached call\n        (this.$vnode && this.$vnode.ssrContext) || // stateful\n        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n      // 2.2 with runInNewContext: true\n      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n        context = __VUE_SSR_CONTEXT__\n      }\n      // inject component styles\n      if (injectStyles) {\n        injectStyles.call(this, context)\n      }\n      // register component module identifier for async chunk inferrence\n      if (context && context._registeredComponents) {\n        context._registeredComponents.add(moduleIdentifier)\n      }\n    }\n    // used by ssr in case component is cached and beforeCreate\n    // never gets called\n    options._ssrRegister = hook\n  } else if (injectStyles) {\n    hook = injectStyles\n  }\n\n  if (hook) {\n    var functional = options.functional\n    var existing = functional\n      ? options.render\n      : options.beforeCreate\n\n    if (!functional) {\n      // inject component registration as beforeCreate hook\n      options.beforeCreate = existing\n        ? [].concat(existing, hook)\n        : [hook]\n    } else {\n      // for template-only hot-reload because in that case the render fn doesn't\n      // go through the normalizer\n      options._injectStyles = hook\n      // register for functioal component in vue file\n      options.render = function renderWithStyleInjection (h, context) {\n        hook.call(context)\n        return existing(h, context)\n      }\n    }\n  }\n\n  return {\n    esModule: esModule,\n    exports: scriptExports,\n    options: options\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/component-normalizer.js\n// module id = VU/8\n// module chunks = 1","/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n  Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n  if (!hasDocument) {\n    throw new Error(\n    'vue-style-loader cannot be used in a non-browser environment. ' +\n    \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n  ) }\n}\n\nvar listToStyles = require('./listToStyles')\n\n/*\ntype StyleObject = {\n  id: number;\n  parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n  css: string;\n  media: string;\n  sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n  [id: number]: {\n    id: number,\n    refs: number,\n    parts: Array<(obj?: StyleObjectPart) => void>\n  }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nmodule.exports = function (parentId, list, _isProduction, _options) {\n  isProduction = _isProduction\n\n  options = _options || {}\n\n  var styles = listToStyles(parentId, list)\n  addStylesToDom(styles)\n\n  return function update (newList) {\n    var mayRemove = []\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i]\n      var domStyle = stylesInDom[item.id]\n      domStyle.refs--\n      mayRemove.push(domStyle)\n    }\n    if (newList) {\n      styles = listToStyles(parentId, newList)\n      addStylesToDom(styles)\n    } else {\n      styles = []\n    }\n    for (var i = 0; i < mayRemove.length; i++) {\n      var domStyle = mayRemove[i]\n      if (domStyle.refs === 0) {\n        for (var j = 0; j < domStyle.parts.length; j++) {\n          domStyle.parts[j]()\n        }\n        delete stylesInDom[domStyle.id]\n      }\n    }\n  }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i]\n    var domStyle = stylesInDom[item.id]\n    if (domStyle) {\n      domStyle.refs++\n      for (var j = 0; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j])\n      }\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j]))\n      }\n      if (domStyle.parts.length > item.parts.length) {\n        domStyle.parts.length = item.parts.length\n      }\n    } else {\n      var parts = []\n      for (var j = 0; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j]))\n      }\n      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n    }\n  }\n}\n\nfunction createStyleElement () {\n  var styleElement = document.createElement('style')\n  styleElement.type = 'text/css'\n  head.appendChild(styleElement)\n  return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n  var update, remove\n  var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n  if (styleElement) {\n    if (isProduction) {\n      // has SSR styles and in production mode.\n      // simply do nothing.\n      return noop\n    } else {\n      // has SSR styles but in dev mode.\n      // for some reason Chrome can't handle source map in server-rendered\n      // style tags - source maps in <style> only works if the style tag is\n      // created and inserted dynamically. So we remove the server rendered\n      // styles and inject new ones.\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  if (isOldIE) {\n    // use singleton mode for IE9.\n    var styleIndex = singletonCounter++\n    styleElement = singletonElement || (singletonElement = createStyleElement())\n    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n  } else {\n    // use multi-style-tag mode in all other cases\n    styleElement = createStyleElement()\n    update = applyToTag.bind(null, styleElement)\n    remove = function () {\n      styleElement.parentNode.removeChild(styleElement)\n    }\n  }\n\n  update(obj)\n\n  return function updateStyle (newObj /* StyleObjectPart */) {\n    if (newObj) {\n      if (newObj.css === obj.css &&\n          newObj.media === obj.media &&\n          newObj.sourceMap === obj.sourceMap) {\n        return\n      }\n      update(obj = newObj)\n    } else {\n      remove()\n    }\n  }\n}\n\nvar replaceText = (function () {\n  var textStore = []\n\n  return function (index, replacement) {\n    textStore[index] = replacement\n    return textStore.filter(Boolean).join('\\n')\n  }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n  var css = remove ? '' : obj.css\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = replaceText(index, css)\n  } else {\n    var cssNode = document.createTextNode(css)\n    var childNodes = styleElement.childNodes\n    if (childNodes[index]) styleElement.removeChild(childNodes[index])\n    if (childNodes.length) {\n      styleElement.insertBefore(cssNode, childNodes[index])\n    } else {\n      styleElement.appendChild(cssNode)\n    }\n  }\n}\n\nfunction applyToTag (styleElement, obj) {\n  var css = obj.css\n  var media = obj.media\n  var sourceMap = obj.sourceMap\n\n  if (media) {\n    styleElement.setAttribute('media', media)\n  }\n  if (options.ssrId) {\n    styleElement.setAttribute(ssrIdKey, obj.id)\n  }\n\n  if (sourceMap) {\n    // https://developer.chrome.com/devtools/docs/javascript-debugging\n    // this makes source maps inside style tags work properly in Chrome\n    css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n    // http://stackoverflow.com/a/26603875\n    css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n  }\n\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild)\n    }\n    styleElement.appendChild(document.createTextNode(css))\n  }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader/lib/addStylesClient.js\n// module id = rjj0\n// module chunks = 1","/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n  var styles = []\n  var newStyles = {}\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i]\n    var id = item[0]\n    var css = item[1]\n    var media = item[2]\n    var sourceMap = item[3]\n    var part = {\n      id: parentId + ':' + i,\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    }\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = { id: id, parts: [part] })\n    } else {\n      newStyles[id].parts.push(part)\n    }\n  }\n  return styles\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader/lib/listToStyles.js\n// module id = tTVk\n// module chunks = 1"],"sourceRoot":""}
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/manifest.json b/src/plugin_examples/samplePlugin/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..765339e14a65bceeb5e8fea2a4056ebfa868b894
--- /dev/null
+++ b/src/plugin_examples/samplePlugin/manifest.json
@@ -0,0 +1,11 @@
+{
+  "name":"fzj.xg.samplePlugin",
+  "displayName":"Sample Plugin Display Name (Optional)",
+  "templateURL":"http://localhost:10080/samplePlugin/template.html",
+  "scriptURL":"http://localhost:10080/samplePlugin/script.js",
+  "initState":{
+    "hello": "world",
+    "foo": "bar"
+  },
+  "initStateUrl":"http://localhost:10080/samplePlugin/optionalInitStateJson.json"
+}
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/optionalInitStateJson.json b/src/plugin_examples/samplePlugin/optionalInitStateJson.json
new file mode 100644
index 0000000000000000000000000000000000000000..8b478475478e55bd6855b11061661c5ed524b5c9
--- /dev/null
+++ b/src/plugin_examples/samplePlugin/optionalInitStateJson.json
@@ -0,0 +1,3 @@
+{
+  "foo2": "bar2"
+}
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/script.js b/src/plugin_examples/samplePlugin/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..1dbd080572707585356a699dc4f76d7f944325aa
--- /dev/null
+++ b/src/plugin_examples/samplePlugin/script.js
@@ -0,0 +1,9 @@
+/**
+ * use IIEF to avoid scope poisoning
+ */
+(() => {
+  const PLUGIN_NAME = 'fzj.xg.samplePlugin'
+  const initState = window.interactiveViewer.pluginControl[PLUGIN_NAME].initState
+  const initUrl = window.interactiveViewer.pluginControl[PLUGIN_NAME].initStateUrl
+  console.log(initState, initUrl)
+})()
\ No newline at end of file
diff --git a/src/plugin_examples/samplePlugin/template.html b/src/plugin_examples/samplePlugin/template.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/plugin_examples/testPlugin/manifest.json b/src/plugin_examples/testPlugin/manifest.json
deleted file mode 100644
index f59a172f48d5743665ef42219d84da73292e2bca..0000000000000000000000000000000000000000
--- a/src/plugin_examples/testPlugin/manifest.json
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"fzj.xg.test","type":"plugin","templateURL":"http://localhost:10080/testPlugin/template.html","scriptURL":"http://localhost:10080/testPlugin/script.js"}
diff --git a/src/plugin_examples/testPlugin/script.js b/src/plugin_examples/testPlugin/script.js
deleted file mode 100644
index e805a1924e712fdd43e1bd4d8d98bf2267c76893..0000000000000000000000000000000000000000
--- a/src/plugin_examples/testPlugin/script.js
+++ /dev/null
@@ -1,9 +0,0 @@
-(()=>{
-  setTimeout(()=>{
-    const el = document.getElementById('testplugin-id')
-    const newel = document.createElement('div')
-    newel.innerHTML = `hello new owrld`
-    el.appendChild(newel)
-    
-  },100)
-})()
\ No newline at end of file
diff --git a/src/plugin_examples/testPlugin/template.html b/src/plugin_examples/testPlugin/template.html
deleted file mode 100644
index 14e0ebf75e7171960e9d2830e6cfe720dc650819..0000000000000000000000000000000000000000
--- a/src/plugin_examples/testPlugin/template.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id = "testplugin-id">
-  hello world
-</div>