diff --git a/src/main-aot.ts b/src/main-aot.ts index b95eb9bc6ed1666aec620a8cf81dc08ac106f71b..8db74c3ebc1ecfb457b0b95096539691053ffde9 100644 --- a/src/main-aot.ts +++ b/src/main-aot.ts @@ -6,6 +6,6 @@ import { MainModule } from './main.module'; const requireAll = (r:any) => {r.keys().forEach(r)} requireAll(require.context('./res/ext', false, /\.json$/)) requireAll(require.context('./res/images', true, /\.jpg|\.png/)) -requireAll(require.context('./plugin_examples/newWebJugex', false)) +requireAll(require.context('./plugin_examples/jugex', false)) platformBrowserDynamic().bootstrapModule(MainModule) \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index add665e9867a65a42c6dd1426d87d43ffc3b6d66..6565a7e5014b40530b32d087dfaf65918c31387c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,6 +6,6 @@ import { MainModule } from './main.module'; const requireAll = (r:any) => {r.keys().forEach(r)} requireAll(require.context('./res/ext',false, /\.json$/)) requireAll(require.context('./res/images',true,/\.jpg|\.png/)) -requireAll(require.context('./plugin_examples/newWebJugex', false)) +requireAll(require.context('./plugin_examples/jugex', false)) platformBrowserDynamic().bootstrapModule(MainModule) \ 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 new file mode 100644 index 0000000000000000000000000000000000000000..4261b1d033e28b55dfc43df39f5410a11823a15c --- /dev/null +++ b/src/plugin_examples/jugex/js-autocomplete.min.css @@ -0,0 +1,9 @@ +.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 new file mode 100644 index 0000000000000000000000000000000000000000..0b460545687f2230fccf1b46fd45f4d6022cfb73 --- /dev/null +++ b/src/plugin_examples/jugex/js-autocomplete.min.js @@ -0,0 +1,3 @@ +// 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 index 406d5eefb828f74ac6d912129c5306b279f21c02..a56482b9ee22e34ead516c404403996b2fdd3316 100644 --- a/src/plugin_examples/jugex/manifest.json +++ b/src/plugin_examples/jugex/manifest.json @@ -2,6 +2,6 @@ "name": "fzj.hb.jugex", "displayName":"JuGEx", "type": "plugin", - "templateURL": "http://localhost:10080/jugex/template.html", - "scriptURL": "http://localhost:10080/jugex/script.js" + "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/script.js b/src/plugin_examples/jugex/script.js index 5a267d9b0ab00331c5526c0655000caaef718d66..c251c6bd75467726b850d2a4b1ee6c5ab83dc3b9 100644 --- a/src/plugin_examples/jugex/script.js +++ b/src/plugin_examples/jugex/script.js @@ -12,9 +12,9 @@ } - const basePath = 'http://medpc055.ime.kfa-juelich.de:5080/plugins/webjugex/' + const basePath = 'res/plugins/' - const backendBasePath = 'http://medpc055.ime.kfa-juelich.de:8005/' + const backendBasePath = 'http://examcopedia.club:8003/' /* components like this are reusable. */ class HoverRegionSelectorComponent extends HTMLElement { @@ -70,7 +70,7 @@ render() { this.rootChild.innerHTML = this.template - console.log(this.selectedRegion) + // 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 = '' @@ -581,7 +581,7 @@ 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(extension[0]) + resultCard.panelBody.appendChild(extension1[0]) } } else { diff --git a/src/plugin_examples/newWebJugex/manifest.json b/src/plugin_examples/newWebJugex/manifest.json index ed04ef1098d403150a097767052b710e5139efb2..8a8ca669e9e359769e6b481dd591e52c2d577287 100644 --- a/src/plugin_examples/newWebJugex/manifest.json +++ b/src/plugin_examples/newWebJugex/manifest.json @@ -2,6 +2,6 @@ "name" : "fzj.xg.webjugex", "displayName":"JuGEx differential gene expression analysis", "type" : "plugin", - "templateURL" : "http://localhost:10080/newWebJugex/template.html", - "scriptURL" : "http://localhost:10080/newWebJugex/script.js" + "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/newWebJugex/script.js b/src/plugin_examples/newWebJugex/script.js index 18af68aa1b8b40c3d1e6c492ddda221d5c4ab305..7808cbc91826f46cde4a1fb28ae7f5641d1a865e 100644 --- a/src/plugin_examples/newWebJugex/script.js +++ b/src/plugin_examples/newWebJugex/script.js @@ -1,32 +1,49 @@ (() => { - const handler = interactiveViewer.uiHandle.getToastHandler() - handler.message = 'hohoho' - handler.dismissable = true - handler.timeout = 0 - handler.show() + // example of adding toasts and custom landmarks - 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) + // const handler = interactiveViewer.uiHandle.getToastHandler() + // handler.message = 'hohoho' + // handler.dismissable = true + // handler.timeout = 0 + // handler.show() - interactiveViewer.viewerHandle.add3DLandmarks([{ - id : 'jugex-test1', - position : [0,0,0] - }]) + // 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) - const backendRoot = `http://medpc055.ime.kfa-juelich.de:8005` - const srcRoot = 'http://localhost:10080/newWebJugex' + // interactiveViewer.viewerHandle.add3DLandmarks([{ + // id : 'jugex-test1', + // position : [0,0,0] + // }]) + + const backendRoot = `http://examcopedia.club:8003` + const srcRoot = 'http://localhost:8080/res/plugins' /* so that on shutdown, we could unload these libraries */ const onshutdownCB = [] const loadedExternalLibraries = [] const subscriptions = [] + 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) => {