ccp/js/executionformcontroller.js

@@ -1,4 +1,4 @@
-class CCPExecutionForm extends HTMLElement{
+class CCPExecutionForm extends HTMLElement {
 
   #boot;
   #rootdoc;
@@ -6,50 +6,50 @@ class CCPExecutionForm extends HTMLElement{
   #method;
   #serviceurl;
   #messages = {
-    "en" : {
+    "en": {
-      "confirm_form_overwrite" : "Please confirm the overwrite of the previous execution form.",
+      "confirm_form_overwrite": "Please confirm the overwrite of the previous execution form.",
-      "Inputs" : "Inputs",
+      "Inputs": "Inputs",
-      "Options" : "Options",
+      "Options": "Options",
-      "Outputs" : "Outputs",
+      "Outputs": "Outputs",
-      "Execute" : "Execute",
+      "Execute": "Execute",
-      "execute_help" : "Submit an execution request",
+      "execute_help": "Submit an execution request",
-      "generate_code" : "Generate code for",
+      "generate_code": "Generate code for",
-      "generate_code_help" : "Generate example code for a selectable programming language or runtime",
+      "generate_code_help": "Generate example code for a selectable programming language or runtime",
-      "direct_link" : "Direct link",
+      "direct_link": "Direct link",
-      "direct_link_help" : "Navigate to the link for directly reopening this method in the execution form",
+      "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_option": "Select what you like to archive automatically when the execution is completed",
-      "automatic_archive_provenance" : "Automatically archive whole execution provenance",
+      "automatic_archive_provenance": "Automatically archive whole execution provenance",
-      "automatic_archive_provenance_help" : "Automatically archive the whole execution provenance to the workspace",
+      "automatic_archive_provenance_help": "Automatically archive the whole execution provenance to the workspace",
-      "automatic_archive_outputs" : "Automatically archive uncompressed outputs only",
+      "automatic_archive_outputs": "Automatically archive uncompressed outputs only",
-      "automatic_archive_outputs_help" : "Automatically archive only the outputs to the workspace",
+      "automatic_archive_outputs_help": "Automatically archive only the outputs to the workspace",
-      "automatic_archive_none" : "Do not archive anything automatically",
+      "automatic_archive_none": "Do not archive anything automatically",
-      "automatic_archive_none_help" : "Do not archive anything automatically",
+      "automatic_archive_none_help": "Do not archive anything automatically",
-      "execution_accepted" : "Execution request accepted with id: ",
+      "execution_accepted": "Execution request accepted with id: ",
-      "drop_method_invitation" : "Drop a method here to request an execution",
+      "drop_method_invitation": "Drop a method here to request an execution",
-      "err_execution_not_accepted" : "Error. Execution has not been accepted by server",
+      "err_execution_not_accepted": "Error. Execution has not been accepted by server",
-      "err_code_generation" : "Error while generating code",
+      "err_code_generation": "Error while generating code",
-      "err_load_method" : "Error while loading method",
+      "err_load_method": "Error while loading method",
-      "err_no_runtimes" : "This method has no compatible runtimes available",
+      "err_no_runtimes": "This method has no compatible runtimes available",
-      "err_execute" : "Error while sending execution request",
+      "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')){
+    if (params.get('execution')) {
-      const execution = { id : params.get('execution') }
+      const execution = { id: params.get('execution') }
       this.prepareFromExecution(execution)
-    } else if(params.get('method')){
+    } else if (params.get('method')) {
       this.#method = params.get('method')
       this.loadMethod()
     } else {
@@ -61,7 +61,7 @@ class CCPExecutionForm extends HTMLElement{
     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(){
+  connectNewExecutionRequest() {
-    document.addEventListener("newexecutionrequest", ev=>{ 
+    document.addEventListener("newexecutionrequest", ev => {
-      if(this.#data){
+      if (this.#data) {
-        if(window.confirm(this.getLabel("confirm_form_overwrite"))){
+        if (window.confirm(this.getLabel("confirm_form_overwrite"))) {
           this.setAttribute("method", ev.detail)
           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">
@@ -188,17 +188,17 @@ class CCPExecutionForm extends HTMLElement{
     `
   }
 
-  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;">
@@ -209,66 +209,66 @@ class CCPExecutionForm extends HTMLElement{
     `
   }
 
-  loadMethod(){
+  loadMethod() {
     return this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
-      (resp)=>{
+      (resp) => {
-        if(resp.status === 200){
+        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 =
         this.#data.links.filter(l => l.rel === "compatibleWith")[0]
       return this.#boot.secureFetch(this.#serviceurl + "/" + infra.href)
 
-    }).then(resp=>{
+    }).then(resp => {
       this.#data.executable = resp.status === 200
-    }).then(()=>{
+    }).then(() => {
       this.showMethod()
-    }).catch(err=>alert(err))
+    }).catch(err => alert(err))
   }
 
-  showEmpty(resp){
+  showEmpty(resp) {
     BSS.apply(this.#empty_executionform_bss, this.#rootdoc)
   }
 
-  showMethod(){
+  showMethod() {
-    if(this.#method == null) this.showEmpty();
+    if (this.#method == null) this.showEmpty();
-    else{
+    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"}}
+      url, { method: "POST", body: JSON.stringify(req), headers: { "Content-Type": "application/json" } }
-    ).then(reply=>{
+    ).then(reply => {
-      if(reply.status !== 200 && reply.status !== 201){
+      if (reply.status !== 200 && reply.status !== 201) {
         throw this.getLabel("err_execute")
       }
       return reply.json()
-    }).then(data=>{
+    }).then(data => {
-      if(data.status !== "accepted"){
+      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)
+      window.setTimeout(() => this.unlockRender(), 3000)
-    }).catch(err => {alert(this.getLabel("err_execute") + ": " + err); this.unlockRender()})
+    }).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}}
+      url, { method: "POST", body: JSON.stringify(req), headers: { "Content-Type": "application/json", "Accept": mime } }
-    ).then(reply=>{
+    ).then(reply => {
-      if(reply.status !== 200) throw this.getLabel("err_code_generation");
+      if (reply.status !== 200) throw this.getLabel("err_code_generation");
       return reply.blob()
     }).then(blob => {
       const objectURL = URL.createObjectURL(blob)
@@ -278,31 +278,31 @@ class CCPExecutionForm extends HTMLElement{
       document.body.appendChild(tmplnk)
       tmplnk.click()
       document.body.removeChild(tmplnk)
-    }).catch(err=>{ alert(err)})
+    }).catch(err => { alert(err) })
   }
 
-  buildRequest(){
+  buildRequest() {
-    let request = { inputs : {}, outputs : {}, response : "raw"}
+    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=>{
+    outputs.forEach(o => {
-      if(o.enabled) request.outputs[o.name] = { transmissionMode : "value" };
+      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
@@ -310,73 +310,73 @@ class CCPExecutionForm extends HTMLElement{
     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){
+  initInputValues(inputs) {
-    Object.keys(inputs).forEach(k=>{ 
+    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) {
-      if(request.subscribers.filter(s=>s.successUri === "http://registry:8080/executions/archive-to-folder").length === 1){
+      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=>{
+        .then(resp => {
-        if(resp.ok){
+          if (resp.ok) {
             this.#data.executable = true
             this.showMethod()
             this.initInputValues(exec.fullrequest.inputs)
             this.initOptionValues(exec.fullrequest)
-        }else throw("Unable to find infrastructure")
+          } else throw ("Unable to find infrastructure")
-      }).catch(err=>alert(err))
+        }).catch(err => alert(err))
       return
     }
 
     //fetch method and request and validate infra
     let f1 =
       this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/method.json`)
-      .then(resp=>{
+        .then(resp => {
-        if(resp.status === 200){
+          if (resp.status === 200) {
             return resp.json()
-        }else throw this.getLabel("err_load_method")
+          } else throw this.getLabel("err_load_method")
         }
-    ).then(data=>data)
+        ).then(data => data)
 
     let f2 =
       this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/request.json`)
-      .then(resp=>{
+        .then(resp => {
-        if(resp.status === 200){
+          if (resp.status === 200) {
             return resp.json()
-        }else throw this.getLabel("err_load_method")
+          } else throw this.getLabel("err_load_method")
         }
-    ).then(data=>data)
+        ).then(data => data)
 
     var requestdata = null
     Promise.all([f1, f2]).then(m_and_r => {
@@ -386,27 +386,27 @@ class CCPExecutionForm extends HTMLElement{
       const infra =
         this.#data.links.filter(l => l.rel === "compatibleWith")[0]
       return this.#boot.secureFetch(this.#serviceurl + "/" + infra.href)
-    }).then(resp=>{
+    }).then(resp => {
       this.#data.executable = resp.status === 200
-    }).then(()=>{
+    }).then(() => {
       this.showMethod()
       this.initInputValues(requestdata.inputs)
       this.initOptionValues(requestdata)
-    }).catch(err=>alert(err))
+    }).catch(err => alert(err))
   }
 
   #empty_executionform_bss = {
-    template : "#EXECUTION_FORM_EMPTY_TEMPLATE",
+    template: "#EXECUTION_FORM_EMPTY_TEMPLATE",
-    target : "div[name=execution_form]",
+    target: "div[name=execution_form]",
-    on_drop : ev=>{
+    on_drop: ev => {
-      if(ev.dataTransfer){
+      if (ev.dataTransfer) {
-        if(ev.dataTransfer.getData('text/plain+ccpmethod')){
+        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",
+    template: "#EXECUTION_FORM_TEMPLATE",
-    target : "div[name=execution_form]",
+    target: "div[name=execution_form]",
-    in : ()=>this.#data,
+    in: () => this.#data,
-    on_drop : ev=>{
+    on_drop: ev => {
-      if(ev.dataTransfer){
+      if (ev.dataTransfer) {
-        if(ev.dataTransfer.getData('text/plain+ccpmethod')){
+        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",
+        target: "div.description",
-        apply : (e,d)=>e.textContent = d.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,
+        in: (e, d) => d,
-        recurse : [
+        recurse: [
           {
-            "in" : (e,d)=>{ return Object.values(d.inputs) },
+            "in": (e, d) => { return Object.values(d.inputs) },
-            target : "div",
+            target: "div",
-            apply : (e,d)=>{
+            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,
+        in: (e, d) => d,
-        recurse : [
+        recurse: [
           {
-            "in" : (e,d)=>{ return Object.values(d.outputs) },
+            "in": (e, d) => { return Object.values(d.outputs) },
-            target : "div",
+            target: "div",
-            apply : (e,d)=>{
+            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,7 +525,7 @@ 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
       }
     ]
   }

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"
       }
     })
   }
@@ -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"){

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
       }
     })
 

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,25 +529,11 @@ 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")}">
+          <div name="scripts_container">
-            <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>
       </div>
-      </div>
     `
     this.renderInputs()
     this.renderOutputs()
@@ -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]")
+      this.reRenderScripts()
-      preview.value = this.codeToPreview(ev.target.value)
     })
   }
 
@@ -1068,28 +1049,49 @@ class CCPMethodEditorController extends HTMLElement {
     }, code)
   }
 
-  getCurrentScriptName() {
+  reRenderScripts(scriptname) {
-    return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
+    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) {
+  renderScriptContent(scriptname) {
-    const val = scriptname ? scriptname : 'deploy-script'
+    const script = this.#current.additionalParameters.parameters.find(s => s.name === scriptname)
-    const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
     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}">
+      <div class="script-area" name="${script.name}">
-        <textarea rows="5" class="form-control">${code}</textarea>
+        <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) {
+  renderScripts(){
-    const container = this.#rootdoc.querySelector("div[name=scripts_container]")
+    const scripts = ["deploy-script", "execute-script"]
-    const sn = scriptname ? scriptname : this.getCurrentScriptName()
+    const html = scripts.map(sname=>{
-    container.innerHTML = this.renderScripts(sn)
+      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
   }
 }
 

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]",
+                      target : "div[name=description]",
-                      apply : (e,d)=>{ e.textContent = d.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>`
+                        }
+                      }
+                    }
                   ]
                 }
               ] 

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>