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

@@ -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.#data.executable = true
-          this.showMethod()
+            this.showMethod()
-          this.initInputValues(exec.fullrequest.inputs)  
+            this.initInputValues(exec.fullrequest.inputs)
-          this.initOptionValues(exec.fullrequest)
+            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()
+            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()
+            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

@@ -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,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")}">
+          <div name="scripts_container">
-            <summary class="card-header">
+            ${this.renderScripts()}
-              <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>
@@ -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>