From 7fae7701860f836e2b9efeeaac59a80d7e7dcb05 Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Fri, 11 Oct 2024 13:12:30 +0200
Subject: [PATCH 1/2] scripts are always visible. fix missing cancel on geo
 widget. inputs show default preview when closed. Method description is now
 text area. Method list and execution form have limit on description length
 display

---
 ccp/js/executionformcontroller.js     | 388 ++++++++++++++------------
 ccp/js/inputwidgetcontroller.js       |   5 +
 ccp/js/inputwidgeteditorcontroller.js |  16 +-
 ccp/js/methodeditorcontroller.js      |  82 +++---
 ccp/js/methodlistcontroller.js        |  24 +-
 extapp/index.html                     |   2 +-
 6 files changed, 284 insertions(+), 233 deletions(-)

diff --git a/ccp/js/executionformcontroller.js b/ccp/js/executionformcontroller.js
index 159cac7..800f942 100644
--- a/ccp/js/executionformcontroller.js
+++ b/ccp/js/executionformcontroller.js
@@ -1,55 +1,55 @@
-class CCPExecutionForm extends HTMLElement{
-  
+class CCPExecutionForm extends HTMLElement {
+
   #boot;
   #rootdoc;
   #data;
   #method;
-  #serviceurl; 
+  #serviceurl;
   #messages = {
-    "en" : {
-      "confirm_form_overwrite" : "Please confirm the overwrite of the previous execution form.",
-      "Inputs" : "Inputs",
-      "Options" : "Options",
-      "Outputs" : "Outputs",
-      "Execute" : "Execute",
-      "execute_help" : "Submit an execution request",
-      "generate_code" : "Generate code for",
-      "generate_code_help" : "Generate example code for a selectable programming language or runtime",
-      "direct_link" : "Direct link",
-      "direct_link_help" : "Navigate to the link for directly reopening this method in the execution form",
-      "automatic_archive_option" : "Select what you like to archive automatically when the execution is completed",
-      "automatic_archive_provenance" : "Automatically archive whole execution provenance",
-      "automatic_archive_provenance_help" : "Automatically archive the whole execution provenance to the workspace",
-      "automatic_archive_outputs" : "Automatically archive uncompressed outputs only",
-      "automatic_archive_outputs_help" : "Automatically archive only the outputs to the workspace",
-      "automatic_archive_none" : "Do not archive anything automatically",
-      "automatic_archive_none_help" : "Do not archive anything automatically",
-      "execution_accepted" : "Execution request accepted with id: ",
-      "drop_method_invitation" : "Drop a method here to request an execution",
-      "err_execution_not_accepted" : "Error. Execution has not been accepted by server",
-      "err_code_generation" : "Error while generating code",
-      "err_load_method" : "Error while loading method",
-      "err_no_runtimes" : "This method has no compatible runtimes available",
-      "err_execute" : "Error while sending execution request",
+    "en": {
+      "confirm_form_overwrite": "Please confirm the overwrite of the previous execution form.",
+      "Inputs": "Inputs",
+      "Options": "Options",
+      "Outputs": "Outputs",
+      "Execute": "Execute",
+      "execute_help": "Submit an execution request",
+      "generate_code": "Generate code for",
+      "generate_code_help": "Generate example code for a selectable programming language or runtime",
+      "direct_link": "Direct link",
+      "direct_link_help": "Navigate to the link for directly reopening this method in the execution form",
+      "automatic_archive_option": "Select what you like to archive automatically when the execution is completed",
+      "automatic_archive_provenance": "Automatically archive whole execution provenance",
+      "automatic_archive_provenance_help": "Automatically archive the whole execution provenance to the workspace",
+      "automatic_archive_outputs": "Automatically archive uncompressed outputs only",
+      "automatic_archive_outputs_help": "Automatically archive only the outputs to the workspace",
+      "automatic_archive_none": "Do not archive anything automatically",
+      "automatic_archive_none_help": "Do not archive anything automatically",
+      "execution_accepted": "Execution request accepted with id: ",
+      "drop_method_invitation": "Drop a method here to request an execution",
+      "err_execution_not_accepted": "Error. Execution has not been accepted by server",
+      "err_code_generation": "Error while generating code",
+      "err_load_method": "Error while loading method",
+      "err_no_runtimes": "This method has no compatible runtimes available",
+      "err_execute": "Error while sending execution request",
     }
   }
 
-  constructor(){
+  constructor() {
     super()
     this.#boot = document.querySelector("d4s-boot-2")
-    this.#rootdoc = this.attachShadow({ "mode" : "open"})
+    this.#rootdoc = this.attachShadow({ "mode": "open" })
   }
-  
-  connectedCallback(){
+
+  connectedCallback() {
     this.#serviceurl = this.getAttribute("serviceurl")
     this.connectNewExecutionRequest()
     this.render()
 
     const params = new URLSearchParams(window.location.search)
-    if(params.get('execution')){
-      const execution = { id : params.get('execution') }
-      this.prepareFromExecution(execution) 
-    } else if(params.get('method')){
+    if (params.get('execution')) {
+      const execution = { id: params.get('execution') }
+      this.prepareFromExecution(execution)
+    } else if (params.get('method')) {
       this.#method = params.get('method')
       this.loadMethod()
     } else {
@@ -57,11 +57,11 @@ class CCPExecutionForm extends HTMLElement{
     }
   }
 
-  static get observedAttributes() { 
+  static get observedAttributes() {
     return ["method"];
   }
-  
-  getLabel(key, localehint){
+
+  getLabel(key, localehint) {
     const locale = localehint ? localehint : navigator.language
     const actlocale = this.#messages[locale] ? locale : "en"
     const msg = this.#messages[actlocale][key]
@@ -70,27 +70,27 @@ class CCPExecutionForm extends HTMLElement{
 
   attributeChangedCallback(name, oldValue, newValue) {
     //if((oldValue != newValue) && (name === "method")){
-    if(name === "method"){
+    if (name === "method") {
       this.#method = newValue
       this.loadMethod()
     }
   }
-  
-  connectNewExecutionRequest(){
-    document.addEventListener("newexecutionrequest", ev=>{ 
-      if(this.#data){
-        if(window.confirm(this.getLabel("confirm_form_overwrite"))){
+
+  connectNewExecutionRequest() {
+    document.addEventListener("newexecutionrequest", ev => {
+      if (this.#data) {
+        if (window.confirm(this.getLabel("confirm_form_overwrite"))) {
           this.setAttribute("method", ev.detail)
-          this.parentElement.scrollIntoViewIfNeeded() 
+          this.parentElement.scrollIntoViewIfNeeded()
         }
-      }else{
+      } else {
         this.setAttribute("method", ev.detail)
         this.parentElement.scrollIntoViewIfNeeded()
       }
     })
   }
-  
-  render(){
+
+  render() {
     this.#rootdoc.innerHTML = `
       <div>
         <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
@@ -105,7 +105,7 @@ class CCPExecutionForm extends HTMLElement{
         <template id="EXECUTION_FORM_TEMPLATE">
           <div class="ccp-execution-form" name="execution_form">
             <h5 class="ccp-method-title"></h5>
-            <p class="description font-italic font-weight-lighter"></p>
+            <div class="description font-italic font-weight-lighter"></div>
             <div class="plexiglass d-none"></div>
             <form name="execution_form" class="d-flex flex-column gap-3" style="gap:5px">
               <div class="card">
@@ -187,18 +187,18 @@ class CCPExecutionForm extends HTMLElement{
       </div>
     `
   }
-  
-  lockRender(){
+
+  lockRender() {
     const plexi = this.#rootdoc.querySelector(".plexiglass")
     plexi.innerHTML = ``
     plexi.classList.toggle("d-none")
   }
-  
-  unlockRender(){
+
+  unlockRender() {
     this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
   }
-  
-  writeToPlexi(message){
+
+  writeToPlexi(message) {
     const plexi = this.#rootdoc.querySelector(".plexiglass")
     plexi.innerHTML = `
       <div class="d-flex" style="flex-direction: column;justify-content:center;position:relative;height:100%;align-items: center;">
@@ -208,67 +208,67 @@ class CCPExecutionForm extends HTMLElement{
     </div>
     `
   }
-  
-  loadMethod(){
+
+  loadMethod() {
     return this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
-      (resp)=>{
-        if(resp.status === 200){
+      (resp) => {
+        if (resp.status === 200) {
           return resp.json()
-        }else throw this.getLabel("err_load_method")
+        } else throw this.getLabel("err_load_method")
       }
-    ).then(data=>{
+    ).then(data => {
       this.#data = data
-      const infra = 
+      const infra =
         this.#data.links.filter(l => l.rel === "compatibleWith")[0]
       return this.#boot.secureFetch(this.#serviceurl + "/" + infra.href)
-      
-    }).then(resp=>{
-      this.#data.executable = resp.status === 200 
-    }).then(()=>{
+
+    }).then(resp => {
+      this.#data.executable = resp.status === 200
+    }).then(() => {
       this.showMethod()
-    }).catch(err=>alert(err))
+    }).catch(err => alert(err))
   }
-  
-  showEmpty(resp){
+
+  showEmpty(resp) {
     BSS.apply(this.#empty_executionform_bss, this.#rootdoc)
   }
-  
-  showMethod(){
-    if(this.#method == null) this.showEmpty();
-    else{
+
+  showMethod() {
+    if (this.#method == null) this.showEmpty();
+    else {
       BSS.apply(this.#executionform_bss, this.#rootdoc)
     }
   }
-  
-  sendExecutionRequest(){
+
+  sendExecutionRequest() {
     this.lockRender()
     const url = this.#serviceurl + "/processes/" + this.#method + "/execution"
     const req = this.buildRequest()
     this.#boot.secureFetch(
-      url, { method : "POST", body : JSON.stringify(req), headers : { "Content-Type" : "application/json"}}
-    ).then(reply=>{
-      if(reply.status !== 200 && reply.status !== 201){
+      url, { method: "POST", body: JSON.stringify(req), headers: { "Content-Type": "application/json" } }
+    ).then(reply => {
+      if (reply.status !== 200 && reply.status !== 201) {
         throw this.getLabel("err_execute")
       }
       return reply.json()
-    }).then(data=>{
-      if(data.status !== "accepted"){
+    }).then(data => {
+      if (data.status !== "accepted") {
         throw this.getLabel("err_execution_not_accepted")
       }
       const event = new CustomEvent('newexecution', { detail: data.jobID });
       document.dispatchEvent(event)
       this.writeToPlexi(this.getLabel("execution_accepted") + " " + data.jobID)
-      window.setTimeout(()=>this.unlockRender(), 3000)
-    }).catch(err => {alert(this.getLabel("err_execute") + ": " + err); this.unlockRender()})
+      window.setTimeout(() => this.unlockRender(), 3000)
+    }).catch(err => { alert(this.getLabel("err_execute") + ": " + err); this.unlockRender() })
   }
-  
-  generateCode(mime, filename){
+
+  generateCode(mime, filename) {
     const url = this.#serviceurl + "/methods/" + this.#method + "/code"
     const req = this.buildRequest()
     this.#boot.secureFetch(
-      url, { method : "POST", body : JSON.stringify(req), headers : { "Content-Type" : "application/json", "Accept" : mime}}
-    ).then(reply=>{
-      if(reply.status !== 200) throw this.getLabel("err_code_generation");
+      url, { method: "POST", body: JSON.stringify(req), headers: { "Content-Type": "application/json", "Accept": mime } }
+    ).then(reply => {
+      if (reply.status !== 200) throw this.getLabel("err_code_generation");
       return reply.blob()
     }).then(blob => {
       const objectURL = URL.createObjectURL(blob)
@@ -278,135 +278,135 @@ class CCPExecutionForm extends HTMLElement{
       document.body.appendChild(tmplnk)
       tmplnk.click()
       document.body.removeChild(tmplnk)
-    }).catch(err=>{ alert(err)})
+    }).catch(err => { alert(err) })
   }
-  
-  buildRequest(){
-    let request = { inputs : {}, outputs : {}, response : "raw"}
-    
+
+  buildRequest() {
+    let request = { inputs: {}, outputs: {}, response: "raw" }
+
     //fill inputs
     const inputs = this.getInputs()
-    inputs.forEach(i=>{
+    inputs.forEach(i => {
       request.inputs[i.name] = i.value
     })
-    
+
     //fill outputs
     const outputs = this.getOutputs()
-    outputs.forEach(o=>{
-      if(o.enabled) request.outputs[o.name] = { transmissionMode : "value" };
+    outputs.forEach(o => {
+      if (o.enabled) request.outputs[o.name] = { transmissionMode: "value" };
     })
 
     const archiveoption = this.#rootdoc.querySelector("select[name='archive-selector']").value
-    switch(archiveoption){
+    switch (archiveoption) {
       case 'execution':
-        request.subscribers = [{ successUri : "http://registry:8080/executions/archive-to-folder" }]
+        request.subscribers = [{ successUri: "http://registry:8080/executions/archive-to-folder" }]
         break;
       case 'outputs':
-        request.subscribers = [{ successUri : "http://registry:8080/executions/outputs/archive-to-folder" }]
+        request.subscribers = [{ successUri: "http://registry:8080/executions/outputs/archive-to-folder" }]
         break
       default:
         break
     }
     return request
   }
-  
-  getInputs(){
+
+  getInputs() {
     return Array.prototype.slice.call(this.#rootdoc.querySelectorAll("d4s-ccp-input"))
   }
-  
-  getOutputs(){
+
+  getOutputs() {
     return Array.prototype.slice.call(this.#rootdoc.querySelectorAll("d4s-ccp-output"))
   }
-  
-  initInputValues(inputs){
-    Object.keys(inputs).forEach(k=>{ 
+
+  initInputValues(inputs) {
+    Object.keys(inputs).forEach(k => {
       const w = this.#rootdoc.querySelector(`d4s-ccp-input[name=${k}]`)
-      if(w){
+      if (w) {
         w.value = (inputs[k])
       }
     })
   }
 
-  initOptionValues(request){
+  initOptionValues(request) {
     const archiveselector = this.#rootdoc.querySelector("select[name='archive-selector']")
-    if(request.subscribers){
-      if(request.subscribers.filter(s=>s.successUri === "http://registry:8080/executions/archive-to-folder").length === 1){
+    if (request.subscribers) {
+      if (request.subscribers.filter(s => s.successUri === "http://registry:8080/executions/archive-to-folder").length === 1) {
         archiveselector.value = "execution"
-      }else if(request.subscribers.filter(s=>s.successUri === "http://registry:8080/executions/outputs/archive-to-folder").length === 1){
+      } else if (request.subscribers.filter(s => s.successUri === "http://registry:8080/executions/outputs/archive-to-folder").length === 1) {
         archiveselector.value = "outputs"
-      }else{
+      } else {
         archiveselector.value = "none"
       }
-    }else{
+    } else {
       archiveselector.value = "none"
     }
   }
-  
-  prepareFromExecution(exec){
+
+  prepareFromExecution(exec) {
     //if exec carries already full information then it comes from archive. Use this info instead of fetching.
-    if(exec.fullrequest && exec.fullmethod && exec.fullinfrastructure){
+    if (exec.fullrequest && exec.fullmethod && exec.fullinfrastructure) {
       this.#data = exec.fullmethod
       this.#method = this.#data.id
       this.#boot.secureFetch(this.#serviceurl + "/infrastructures/" + exec.fullinfrastructure.id)
-      .then(resp=>{
-        if(resp.ok){
-          this.#data.executable = true 
-          this.showMethod()
-          this.initInputValues(exec.fullrequest.inputs)  
-          this.initOptionValues(exec.fullrequest)
-        }else throw("Unable to find infrastructure")
-      }).catch(err=>alert(err))
+        .then(resp => {
+          if (resp.ok) {
+            this.#data.executable = true
+            this.showMethod()
+            this.initInputValues(exec.fullrequest.inputs)
+            this.initOptionValues(exec.fullrequest)
+          } else throw ("Unable to find infrastructure")
+        }).catch(err => alert(err))
       return
     }
 
     //fetch method and request and validate infra
-    let f1 = 
+    let f1 =
       this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/method.json`)
-      .then(resp=>{
-        if(resp.status === 200){
-          return resp.json()
-        }else throw this.getLabel("err_load_method")
-      }
-    ).then(data=>data)
-    
-    let f2 = 
+        .then(resp => {
+          if (resp.status === 200) {
+            return resp.json()
+          } else throw this.getLabel("err_load_method")
+        }
+        ).then(data => data)
+
+    let f2 =
       this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/request.json`)
-      .then(resp=>{
-        if(resp.status === 200){
-          return resp.json()
-        }else throw this.getLabel("err_load_method")
-      }
-    ).then(data=>data)
-  
+        .then(resp => {
+          if (resp.status === 200) {
+            return resp.json()
+          } else throw this.getLabel("err_load_method")
+        }
+        ).then(data => data)
+
     var requestdata = null
     Promise.all([f1, f2]).then(m_and_r => {
       this.#data = m_and_r[0]
       requestdata = m_and_r[1]
       this.#method = this.#data.id
-      const infra = 
+      const infra =
         this.#data.links.filter(l => l.rel === "compatibleWith")[0]
       return this.#boot.secureFetch(this.#serviceurl + "/" + infra.href)
-    }).then(resp=>{
-      this.#data.executable = resp.status === 200 
-    }).then(()=>{
+    }).then(resp => {
+      this.#data.executable = resp.status === 200
+    }).then(() => {
       this.showMethod()
-      this.initInputValues(requestdata.inputs)  
-      this.initOptionValues(requestdata)  
-    }).catch(err=>alert(err))
+      this.initInputValues(requestdata.inputs)
+      this.initOptionValues(requestdata)
+    }).catch(err => alert(err))
   }
-  
+
   #empty_executionform_bss = {
-    template : "#EXECUTION_FORM_EMPTY_TEMPLATE",
-    target : "div[name=execution_form]",
-    on_drop : ev=>{
-      if(ev.dataTransfer){
-        if(ev.dataTransfer.getData('text/plain+ccpmethod')){
+    template: "#EXECUTION_FORM_EMPTY_TEMPLATE",
+    target: "div[name=execution_form]",
+    on_drop: ev => {
+      if (ev.dataTransfer) {
+        if (ev.dataTransfer.getData('text/plain+ccpmethod')) {
           const id = ev.dataTransfer.getData('text/plain+ccpmethod')
           this.setAttribute("method", id);
           ev.preventDefault()
           ev.stopPropagation()
           ev.currentTarget.style.backgroundColor = "white"
-        }else if(ev.dataTransfer.getData('text/plain+ccpexecution')){
+        } else if (ev.dataTransfer.getData('text/plain+ccpexecution')) {
           this.prepareFromExecution(JSON.parse(ev.dataTransfer.getData('application/json+ccpexecution')))
           ev.preventDefault()
           ev.stopPropagation()
@@ -414,23 +414,23 @@ class CCPExecutionForm extends HTMLElement{
         }
       }
     },
-    on_dragover : ev=>{
+    on_dragover: ev => {
       ev.preventDefault()
     },
   }
-  
+
   #executionform_bss = {
-    template : "#EXECUTION_FORM_TEMPLATE",
-    target : "div[name=execution_form]",
-    in : ()=>this.#data,
-    on_drop : ev=>{
-      if(ev.dataTransfer){
-        if(ev.dataTransfer.getData('text/plain+ccpmethod')){
+    template: "#EXECUTION_FORM_TEMPLATE",
+    target: "div[name=execution_form]",
+    in: () => this.#data,
+    on_drop: ev => {
+      if (ev.dataTransfer) {
+        if (ev.dataTransfer.getData('text/plain+ccpmethod')) {
           const id = ev.dataTransfer.getData('text/plain+ccpmethod');
           this.setAttribute("method", id);
           ev.preventDefault()
           ev.stopPropagation()
-        }else if(ev.dataTransfer.getData('text/plain+ccpexecution')){
+        } else if (ev.dataTransfer.getData('text/plain+ccpexecution')) {
           this.prepareFromExecution(JSON.parse(ev.dataTransfer.getData('application/json+ccpexecution')))
           ev.preventDefault()
           ev.stopPropagation()
@@ -438,29 +438,45 @@ class CCPExecutionForm extends HTMLElement{
         }
       }
     },
-    on_dragover : ev=>{
+    on_dragover: ev => {
       ev.preventDefault()
     },
-    recurse : [
+    recurse: [
       {
         target: ".ccp-method-title",
-        apply : (e,d)=>e.innerHTML = `
+        apply: (e, d) => e.innerHTML = `
           ${d.title} <span class="badge badge-primary ml-1">${d.version}</span>
-          ${ d.metadata.filter(md=>md.role === 'author').map(a=>`<span class="badge badge-warning ml-1">${a.title}</span>`)}
+          ${d.metadata.filter(md => md.role === 'author').map(a => `<span class="badge badge-warning ml-1">${a.title}</span>`)}
         `
       },
       {
-        target: "p.description",
-        apply : (e,d)=>e.textContent = d.description
+        target: "div.description",
+        apply: (e, d) => {
+          const maxchars = 200
+          const maxlines = 4
+          const s = d.description
+          const lines = s.split("\n")
+          if (lines.length <= maxlines && s.length <= maxchars) {
+            e.innerHTML = s.replaceAll("\n", "<br/>")
+          } else if (lines.length > maxlines) {
+            const lines1 = lines.slice(0, maxlines -1)
+            const index = Math.min(maxchars, lines1.join("<br/>").length)
+            const sf = s.replaceAll("\n", "<br/>")
+            e.innerHTML = `<details><summary>${sf.substring(0, index)}...</summary>...${sf.substring(index)}</details>`
+          } else {
+            const sf = s.replaceAll("\n", "<br/>")
+            e.innerHTML = `<details><summary>${sf.substring(0, maxchars)}...</summary>...${sf.substring(maxchars)}</details>`
+          }
+        }
       },
       {
         target: "div.ccp-inputs",
-        in : (e,d)=>d,
-        recurse : [
+        in: (e, d) => d,
+        recurse: [
           {
-            "in" : (e,d)=>{ return Object.values(d.inputs) },
-            target : "div",
-            apply : (e,d)=>{
+            "in": (e, d) => { return Object.values(d.inputs) },
+            target: "div",
+            apply: (e, d) => {
               e.innerHTML = `<d4s-ccp-input name="${d.id}" input='${btoa(JSON.stringify(d))}'></d4s-ccp-input>`
             }
           }
@@ -468,12 +484,12 @@ class CCPExecutionForm extends HTMLElement{
       },
       {
         target: "div.ccp-outputs",
-        in : (e,d)=>d,
-        recurse : [
+        in: (e, d) => d,
+        recurse: [
           {
-            "in" : (e,d)=>{ return Object.values(d.outputs) },
-            target : "div",
-            apply : (e,d)=>{
+            "in": (e, d) => { return Object.values(d.outputs) },
+            target: "div",
+            apply: (e, d) => {
               e.innerHTML = `<d4s-ccp-output name="${d.id}" output='${btoa(JSON.stringify(d))}'></d4s-ccp-output>`
             }
           }
@@ -481,23 +497,23 @@ class CCPExecutionForm extends HTMLElement{
       },
       {
         target: "div.ccp-runtimes *[name=refresh-runtimes]",
-        on_click : ev=>{
+        on_click: ev => {
           BSS.apply(this.#executionform_bss)
         }
       },
       {
         target: "#execute_method_button",
-        on_click : ev=>{
+        on_click: ev => {
           ev.preventDefault()
           ev.stopPropagation()
-          if(this.#data.executable) this.sendExecutionRequest();
+          if (this.#data.executable) this.sendExecutionRequest();
           else alert(this.getLabel("err_no_runtimes"))
           return false;
         }
       },
       {
         target: "button[name=codegen]",
-        on_click : ev=>{
+        on_click: ev => {
           ev.preventDefault()
           ev.stopPropagation()
           const langsel = ev.target.parentElement.querySelector("select[name=language-selector]")
@@ -509,11 +525,11 @@ class CCPExecutionForm extends HTMLElement{
       },
       {
         target: "a[name=direct_link_method]",
-        apply : (e,d)=>e.href = window.location.origin + window.location.pathname + "?method=" + d.id
+        apply: (e, d) => e.href = window.location.origin + window.location.pathname + "?method=" + d.id
       }
     ]
   }
-  
+
 }
 
 window.customElements.define('d4s-ccp-executionform', CCPExecutionForm);
diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index 95a2c10..adb95f6 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -911,6 +911,11 @@ class CCPGeoInputWidgetController extends CCPBaseInputWidgetController {
       if( features.length && this.#index != null && this.#target != null){
         const name = ev.target.getAttribute("name")
         var format
+        if(name === "cancel"){
+          this.#format_dialog.style.display = "none"
+          this.#format_dialog.classList.remove("show")
+          return
+        }
         if(name === "wkt") {
           format = new ol.format.WKT()
         }else if(name === "geojson"){
diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js
index ab47a2a..5512079 100644
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@@ -83,9 +83,15 @@ class CCPInputWidgetEditorController extends HTMLElement {
     const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0
     this.innerHTML = `
         <details ${reopen ? 'open' : ''}>
-          <summary class="mb-3">
+          <style>
+            details:not([open]) p[name=static_default] {
+              display: block !important;
+            }
+          </style>  
+          <summary class="mb-3" style="position:relative">
             <input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${input.id}" title="${this.getLabel("input_id_help")}" ${input.id === 'ccpimage' ? 'readonly' : ''}/>
             ${input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}  
+            <p title="${input.schema.format === "secret" ? "*****" : input.schema.default}" name="static_default" class="m-1 px-2 d-none small text-truncate text-muted font-italic" style="user-select:none;max-width:30rem">${input.schema.format === "secret" ? "*****" : input.schema.default}</p>
           </summary>
           <div style="padding-left: 1rem;border-left: 1px solid gray;">
             <div class="row mb-3">
@@ -97,7 +103,7 @@ class CCPInputWidgetEditorController extends HTMLElement {
             </div>
             <div class="mb-3">
               <div class="form-field" title="${this.getLabel("description_help")}">
-                <textarea rows="1" name="description" class="form-control" placeholder="${this.getLabel("description")}" required="required" ${input.id === 'ccpimage' ? 'readonly' : ''}>${input.description}</textarea>
+                <textarea rows="2" name="description" class="form-control" placeholder="${this.getLabel("description")}" required="required" ${input.id === 'ccpimage' ? 'readonly' : ''}>${input.description}</textarea>
               </div>
             </div>
             <div class="row mb-3">
@@ -192,11 +198,15 @@ class CCPInputWidgetEditorController extends HTMLElement {
     defaultinp.addEventListener("input", ev => {
       const inp = this.querySelector("d4s-ccp-input")
       this.#input.schema.default = inp.value
+      const p = this.querySelector("p[name=static_default]")
+      p.innerHTML = p.title = inp.value
     })
 
     defaultinp.addEventListener("change", ev => {
       const inp = this.querySelector("d4s-ccp-input")
       this.#input.schema.default = inp.value
+      const p = this.querySelector("p[name=static_default]")
+      p.innerHTML = p.title = inp.value
     })
 
     defaultinp.addEventListener("click", ev => {
@@ -204,6 +214,8 @@ class CCPInputWidgetEditorController extends HTMLElement {
       if (src === "plus" || src === "minus") {
         const inp = this.querySelector("d4s-ccp-input")
         this.#input.schema.default = inp.value
+        const p = this.querySelector("p[name=static_default]")
+        p.innerHTML = p.title = inp.value
       }
     })
 
diff --git a/ccp/js/methodeditorcontroller.js b/ccp/js/methodeditorcontroller.js
index 2032001..752a3a7 100644
--- a/ccp/js/methodeditorcontroller.js
+++ b/ccp/js/methodeditorcontroller.js
@@ -82,7 +82,9 @@ class CCPMethodEditorController extends HTMLElement {
       "err_delete_method" : "Unable to delete method",
       "confirm_reset" : "All unsaved data will be lost. Proceed?",
       "confirm_save" : "Confirm updating of method",
-      "confirm_delete" : "Confirm deletion of method"
+      "confirm_delete" : "Confirm deletion of method",
+      "execute-script" : "Execute script",
+      "deploy-script" : "Deploy script",
     }
   }
 
@@ -465,7 +467,8 @@ class CCPMethodEditorController extends HTMLElement {
               </div>
               <div class="mb-3" title="${this.getLabel("description_help")}">
                 <label class="form-label">${this.getLabel("description")}</label>
-                <input name="description" class="form-control" type="text" required="required" value="${this.#current.description}"/>
+                <!--input name="description" class="form-control" type="text" required="required" value="${this.#current.description}"/-->
+                <textarea name="description" class="form-control" required="required" rows="5">${this.#current.description}</textarea>
               </div>
               <div class="row">
                 <div class="col mb-3" title="${this.getLabel("keywords_help")}">
@@ -526,22 +529,8 @@ class CCPMethodEditorController extends HTMLElement {
               <d4s-ccp-output-editor></d4s-ccp-output-editor>
             </div>
           </div>
-          <details class="card" name="script-list" title="${this.getLabel("scripts_help")}">
-            <summary class="card-header">
-              <div class="ccp-toolbar-header">
-                <div>
-                  <span>${this.getLabel("scripts")}</span>
-                  <select name="script-selector" style="border:none; padding:.3rem">
-                    <option value="deploy-script">${this.getLabel("deploy")}</option>
-                    <option value="execute-script">${this.getLabel("execute")}</option>
-                    <!--option value="undeploy-script">Undeploy</option-->
-                  </select>
-                </div>
-              </div>
-            </summary>
-            <div class="card-body" name="scripts_container">
-              ${this.renderScripts()}
-            </div>
+          <div name="scripts_container">
+            ${this.renderScripts()}
           </div>
         </div>
       </div>
@@ -581,7 +570,7 @@ class CCPMethodEditorController extends HTMLElement {
       this.#current.version = ev.currentTarget.value
     })
 
-    this.#rootdoc.querySelector("input[name=description]").addEventListener("input", ev => {
+    this.#rootdoc.querySelector("textarea[name=description]").addEventListener("input", ev => {
       this.#current.description = ev.currentTarget.value
     })
 
@@ -862,21 +851,13 @@ class CCPMethodEditorController extends HTMLElement {
       }
     })
 
-    this.#rootdoc.querySelector("select[name=script-selector]").addEventListener("change", ev => {
-      ev.preventDefault()
-      ev.stopPropagation()
-      const scriptname = ev.target.value
-      this.reRenderScripts(scriptname)
-    })
-
     this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
       ev.preventDefault()
       ev.stopPropagation()
-      const scriptname = this.getCurrentScriptName()
+      const scriptname = ev.target.getAttribute("name")
       const script = this.#current.additionalParameters.parameters.find(p => p.name === scriptname)
       if (script) script.value = ev.target.value.split(/\r?\n/);
-      const preview = ev.currentTarget.querySelector("textarea[name=preview]")
-      preview.value = this.codeToPreview(ev.target.value)
+      this.reRenderScripts()
     })
   }
 
@@ -1068,28 +1049,49 @@ class CCPMethodEditorController extends HTMLElement {
     }, code)
   }
 
-  getCurrentScriptName() {
-    return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
+  reRenderScripts(scriptname) {
+    const container = this.#rootdoc.querySelector("div[name=scripts_container]")
+    const scripts = ["deploy-script", "execute-script"]
+    scripts.forEach(sname=>{
+      const script = this.#current.additionalParameters.parameters.find(s => s.name === sname)
+      const code = script.value && script.value.length ? script.value.join("\r\n") : ""
+      const preview = container.querySelector(`details[name=${sname}] textarea[name=preview]`)
+      preview.value = this.codeToPreview(code)
+    })     
   }
 
-  renderScripts(scriptname) {
-    const val = scriptname ? scriptname : 'deploy-script'
-    const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
+  renderScriptContent(scriptname) {
+    const script = this.#current.additionalParameters.parameters.find(s => s.name === scriptname)
     if (!script) return '';
     const code = script.value && script.value.length ? script.value.join("\r\n") : ""
     return `
-      <div class="script-area" ${script.name === val ? 'd-block' : 'd-none'}" name="${script.name}">
-        <textarea rows="5" class="form-control">${code}</textarea>
+      <div class="script-area" name="${script.name}">
+        <textarea name="${script.name}" rows="5" class="form-control">${code}</textarea>
         <span name="preview" class="d-inline-block fst-italic text-muted position-absolute m-0 end-0 px-4 py-2 pe-none">Preview</span> 
         <textarea rows="5" name="preview" class="script-area form-control my-1 text-muted border-0" readonly>${this.codeToPreview(code)}</textarea>
       </div>
     `
   }
 
-  reRenderScripts(scriptname) {
-    const container = this.#rootdoc.querySelector("div[name=scripts_container]")
-    const sn = scriptname ? scriptname : this.getCurrentScriptName()
-    container.innerHTML = this.renderScripts(sn)
+  renderScripts(){
+    const scripts = ["deploy-script", "execute-script"]
+    const html = scripts.map(sname=>{
+      return `
+        <details class="card" name="${sname}" title="${this.getLabel("scripts_help")}">
+          <summary class="card-header">
+            <div class="ccp-toolbar-header">
+              <div>
+                <span>${this.getLabel(sname)}</span>
+              </div>
+            </div>
+          </summary>
+          <div class="card-body">
+            ${this.renderScriptContent(sname)}
+          </div>
+        </details>
+      `
+    }).join("")
+    return html
   }
 }
 
diff --git a/ccp/js/methodlistcontroller.js b/ccp/js/methodlistcontroller.js
index 7b98b89..6a39f7b 100644
--- a/ccp/js/methodlistcontroller.js
+++ b/ccp/js/methodlistcontroller.js
@@ -106,7 +106,7 @@ class CCPMethodList extends HTMLElement{
                        </button>
                       </div>
                     </div>
-                    <p class="m-0 p-0 small" name="description"></p>
+                    <div class="m-0 p-0 small" name="description"></div>
                     <div>
                       <span name="keyword" class="badge badge-pill badge-light border border-dark mr-1" style="opacity:.6"></span>
                     </div>
@@ -501,9 +501,25 @@ class CCPMethodList extends HTMLElement{
                       apply : (e,d)=>{ e.alt = e.title = e.textContent = d.title }
                     },
                     {
-                      target : "p[name=description]",
-                      apply : (e,d)=>{ e.textContent = d.description }
-                    },
+                      target : "div[name=description]",
+                      apply : (e,d)=>{ 
+                        const maxchars = 100
+                        const maxlines = 2
+                        const s = d.description
+                        const lines = s.split("\n")
+                        if (lines.length <= maxlines && s.length <= maxchars) {
+                          e.innerHTML = s.replaceAll("\n", "<br/>")
+                        } else if (lines.length > maxlines) {
+                          const lines1 = lines.slice(0, maxlines -1)
+                          const index = Math.min(maxchars, lines1.join("<br/>").length)
+                          const sf = s.replaceAll("\n", "<br/>")
+                          e.innerHTML = `<details><summary>${sf.substring(0, index)}...</summary>...${sf.substring(index)}</details>`
+                        } else {
+                          const sf = s.replaceAll("\n", "<br/>")
+                          e.innerHTML = `<details><summary>${sf.substring(0, maxchars)}...</summary>...${sf.substring(maxchars)}</details>`
+                        }
+                      }
+                    }
                   ]
                 }
               ] 
diff --git a/extapp/index.html b/extapp/index.html
index cc00777..38e5b5c 100644
--- a/extapp/index.html
+++ b/extapp/index.html
@@ -7,7 +7,7 @@
     </head>
     <body>
         <d4s-boot-2 context="%2Fgcube%2Fdevsec%2FCCP"
-            gateway="next.d4science.org"
+            gateway="next.dev.d4science.org"
             redirect-url="http://localhost:8080"
             url="https://accounts.dev.d4science.org/auth">
         </d4s-boot-2>
-- 
2.17.1


From 74c2819de8322596313f2c00fcd2b4dc06c29fa1 Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Fri, 11 Oct 2024 18:25:13 +0200
Subject: [PATCH 2/2] ensure that true/false are returned as strings from
 boolean inputs

---
 ccp/js/inputwidgetcontroller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index adb95f6..abbf705 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -454,7 +454,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController {
     this.rootdoc.addEventListener("input", ev => {
       if (ev.target.getAttribute("name") === this.name) {
         const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.checked
+        this.value[index] = ev.target.checked ? "true" : "false"
       }
     })
   }
-- 
2.17.1