web-components/ccp/js/methodeditorcontroller.js

class CCPMethodEditorController extends HTMLElement {

  #boot;
  #rootdoc;

  #serviceurl;
  #infrastructures;
  #locked = false;

  #isupdate = false;
  #cloneornew_dialog = null;
  #dragging_method = null;

  #tmp_inputs = []
  #tmp_outputs = []
  #current = null;
  #method_template = {
    id: "",
    title: "New Method",
    description: "New empty method",
    version: "1.0.0",
    jobControlOptions: "async-execute",
    metadata: [],
    inputs: {},
    outputs: {},
    additionalParameters: {
      parameters: [
        {
          name: "deploy-script",
          value: []
        },
        {
          name: "execute-script",
          value: []
        },
        {
          name: "undeploy-script",
          value: []
        }
      ]
    },
    links: []
  }

  #messages = {
    "en" : {
      "clone" : "Clone",
      "clone_help" : "All setting will be cloned but no relation to cloned method will be kept",
      "derive" : "Derive",
      "derive_help" : "All settings will be cloned and a relation to the originating method will be kept",
      "edit" : "Edit",
      "edit_help" : "Edit this method",
      "edit_clone_derive_help" : "Choose whether you want to clone this method or edit it",
      "save_help" : "Save this method definition",
      "reset_help" : "Reset all fields",
      "delete_help" : "Permanently delete this method",
      "title" : "Title",
      "title_help" : "The title for the method",
      "version" : "Version",
      "version_help" : "The version of the method",
      "description" : "Description",
      "description_help" : "The description of this method",
      "keywords" : "Keywords",
      "keywords_help" : "Keywords that can be used to search for the method. Write and add by hitting enter.",
      "categories" : "Categories",
      "categories_help" : "Categories to classify the method. Select one from the list or type a new one. Add by pressing enter.",
      "compatible_infrastructures" : "Compatible infrastructures",
      "compatible_infrastructures_help" : "Select the infrastructures that are able to execute your method",
      "inputs" : "Inputs",
      "outputs" : "Outputs",
      "scripts" : "Scripts",
      "scripts_help" : "Deploy and execute scripts configure the deployment and execution life cycle of the method on the selected infrastructures. Use {{input_id}} notation to expand the inputs with their default values.",
      "add-input_help" : "Add an input to this method",
      "add-output_help" : "Add an output to this method",
      "add_ccpnote_help" : "Add ccpnote annotation for this method. This helps in identifying executions.",
      "add_stdout_help" : "Add standard outout",
      "add_stderr_help" : "Add standard error", 
      "preview" : "Preview",
      "err_fetch_infrastructures" : "Unable to fetch insfrastructures",
      "err_save_method" : "Unable to save method",
      "err_load_method" : "Unable to load method",
      "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",
      "execute-script" : "Execute script",
      "deploy-script" : "Deploy script",
    }
  }

  #style = ` 
    <link rel="stylesheet" href="https://cdn.cloud.d4science.org/ccp/css/common.css"></link>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style>
      .ccp-method-editor {
        position: relative;
      }
      
      .ccp-option {
        background-color:#eeffff;
        color:#0099CC; 
        border:solid 1px #0099CC;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        font-size: 1rem;
      }
      
      .ccp-option > .btn {
        padding: 0;
      }
      
      ul.author_list, ul.context_list{
        list-style: none;
        display: flex;
        flex-direction: row;
        gap:2px;
        font-size: small;
        font-weight: 300;
      }
      li.author_list_item{
        display: inline-block;
        padding: 0.25em 0.4em;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        background-color: #eeffff;
        color: #9900CC;
        border: solid 1px #9900CC;
      }
      li.context_list_item{
        display: inline-block;
        padding: 0.25em 0.4em;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        background-color: #eeffff;
        color: #0099CC;
        border: solid 1px #0099CC;
      }
      li.category_list_item{
        display: inline-block;
        padding: 0.25em 0.4em;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        background-color: #eeffff;
        color: #0099CC;
        border: solid 1px #0099CC;
      }
    </style>
  `
  #erase_icon = `
    <svg viewBox="0 0 24 24">
          <path d="M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z" />
  `

  #plus_icon = `
    <svg viewBox="0 0 24 24">
      <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
    </svg> 
  `
  #disc_icon = `
    <svg viewBox="0 0 24 24">
      <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
    </svg> 
  `
  #output_icon = `
    <svg viewBox="0 0 24 24">
      <path d="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" />
    </svg> 
  `
  #delete_icon = `
    <svg viewBox="0 0 24 24">
      <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
    </svg>
  `

  #annotation_input_icon = `
    <svg viewBox="0 -960 960 960">
      <path d="M450-234h60v-129h130v-60H510v-130h-60v130H320v60h130v129ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554v-186H220v680h520v-494H551ZM220-820v186-186 680-680Z"/>
    </svg>
  `

  getLabel(key, localehint){
    const locale = localehint ? localehint : navigator.language
    const actlocale = this.#messages[locale] ? locale : "en"
    const msg = this.#messages[actlocale][key]
    return msg == null || msg == undefined ? key : this.#messages[actlocale][key]
  }

  constructor() {
    super();
    this.#boot = document.querySelector("d4s-boot-2")
    this.#rootdoc = this.attachShadow({ "mode": "open" })
  }

  connectedCallback() {
    this.#serviceurl = this.getAttribute("serviceurl")
    this.initMethod()
    this.fetchInfrastructures()
    this.connectNewEditRequest()
  }

  connectNewEditRequest() {
    document.addEventListener("neweditrequest", ev => {
      this.cloneOrEditMethod(ev.detail)
    })
  }

  isInfrastructureRegistered(infra) {
    return (this.#infrastructures.filter(i => i.id === infra.id)).length > 0
  }

  fetchInfrastructures() {
    this.#boot.secureFetch(this.#serviceurl + "/infrastructures").
      then(resp => {
        if (resp.status !== 200) throw this.getLabel("err_fetch_infrastructures");
        return resp.json()
      }).then(data => {
        this.#infrastructures = data
        this.render()
      }).catch(err => {
        alert(err)
      })
  }

  saveMethod() {
    if (this.#locked) return;
    if (this.#current != null) {
      this.adoptTemporaries()
      const text = this.getLabel("confirm_save") + ` ${this.#current.title} v. ${this.#current.version}`
      if (window.confirm(text)) {
        this.lockRender()
        const url = this.#serviceurl + "/methods"
        const args = {
          body: JSON.stringify(this.#current),
          method: this.#isupdate ? "PUT" : "POST",
          headers: { "Content-type": "application/json" }
        }
        this.#boot.secureFetch(url, args).then(
          (resp) => {
            if (resp.ok) {
              return resp.text()
            } else throw this.getLabel("err_save_method") + resp.status
          }).then(data => {
            if (!this.#isupdate) {
              this.#current = JSON.parse(data)
              this.#isupdate = true
              this.#tmp_inputs = Object.keys(this.#current.inputs).map(k => this.#current.inputs[k])
              this.#tmp_outputs = Object.keys(this.#current.outputs).map(k => this.#current.outputs[k])
            }
            this.unlockRender()
          }).catch(err => {
            alert(err)
            this.unlockRender()
          })
      }
    }
  }

  deleteMethod() {
    if (this.#locked) return;
    if (this.#current != null) {
      const text = this.getLabel("confirm_delete") + ` ${this.#current.title} v. ${this.#current.version}`
      if (window.confirm(text)) {
        this.lockRender()
        const url = this.#serviceurl + "/methods/" + this.#current.id
        const args = {
          method: "DELETE"
        }
        this.#boot.secureFetch(url, args).then(
          (resp) => {
            if (resp.status === 404 || resp.status === 204) {
              return null
            } else throw this.getLabel("err_delete_method") + ": " +  resp.status
          }).then(data => {
            this.#isupdate = false
            this.initMethod()
            this.unlockRender()
          }).catch(err => {
            alert(err)
            this.unlockRender()
          })
      }
    }
  }

  initMethod() {
    this.#current = JSON.parse(JSON.stringify(this.#method_template))
    this.#current.id = Math.abs((Math.random() * 10e11) | 0)
    this.#current.metadata = []
    this.#tmp_inputs = [
      {
        id: "ccpimage",
        title: "Runtime",
        description: "The image of the runtime to use for method execution. This depends on the infrastructure specific protocol for interacting with registries.",
        minOccurs: 1,
        maxOccurs: 1,
        schema: {
          type: "string",
          format: "url",
          contentMediaType: "text/plain",
          default: "",
          readOnly: true,
        }
      }
    ]
    this.#tmp_outputs = []
  }

  resetMethod() {
    this.initMethod()
    this.render()
  }

  cloneOrEditMethod(method) {
    const subject = this.#boot.subject
    const matchingauthors = method.metadata ? method.metadata.filter(md => md.role === "author" && md.href.endsWith("/" + subject)).length : 0
    if (matchingauthors === 0) this.cloneMethod(method.id, true);
    else {
      this.#dragging_method = method.id
      this.#cloneornew_dialog.style.display = "block"
      this.#cloneornew_dialog.classList.add("show")
    }
  }

  cloneMethod(method, derivation) {
    if (this.#locked) return;
    this.lockRender()
    const derive = derivation ? "?derive=true" : ""
    this.#boot.secureFetch(this.#serviceurl + "/methods/" + method + "/clone" + derive).then(
      (resp) => {
        if (resp.status === 200) {
          return resp.json()
        } else throw this.getLabel("err_load_method") + ": " + resp.status
      }
    ).then(data => {
      this.#current = data
      this.#isupdate = false
      this.#tmp_inputs = Object.keys(this.#current.inputs).map(k => this.#current.inputs[k])
      this.#tmp_outputs = Object.keys(this.#current.outputs).map(k => this.#current.outputs[k])
      this.unlockRender()
    }).catch(err => {
      this.unlockRender()
    })
  }

  editMethod(method) {
    if (this.#locked) return;
    this.lockRender()
    this.#boot.secureFetch(this.#serviceurl + "/methods/" + method + "/updatable").then(
      (resp) => {
        if (resp.status === 200) {
          return resp.json()
        } else throw this.getLabel("err_load_method") + ": " + resp.status
      }
    ).then(data => {
      this.#current = data
      this.#isupdate = true
      this.#tmp_inputs = Object.keys(this.#current.inputs).map(k => this.#current.inputs[k])
      this.#tmp_outputs = Object.keys(this.#current.outputs).map(k => this.#current.outputs[k])
      this.unlockRender()
    }).catch(err => {
      this.unlockRender()
    })
  }

  adoptTemporaries() {
    this.#current.inputs = {}
    this.#tmp_inputs.forEach(t => {
      this.#current.inputs[t.id] = t
    })
    this.#current.outputs = {}
    this.#tmp_outputs.forEach(t => {
      this.#current.outputs[t.id] = t
    })
  }

  getInputAt(i) {
    return this.#tmp_inputs[i]
  }

  deleteTmpInputAt(i) {
    this.#tmp_inputs.splice(i, 1)
  }

  deleteTmpOutputAt(i) {
    this.#tmp_outputs.splice(i, 1)
  }

  lockRender() {
    this.#locked = true
    this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
  }

  unlockRender() {
    this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
    this.render()
    this.#locked = false
    if (this.parentElement) this.parentElement.scrollIntoViewIfNeeded();
  }

  render() {
    this.#rootdoc.innerHTML = `
      <!-- Modal -->
      <div class="modal fade" style="background-color:rgba(0,0,0,0.3)" id="cloneornew" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content shadow-lg border-primary">
            <div class="modal-body">
              ${this.getLabel("edit_clone_derive_help")}
            </div>
            <div class="modal-footer">
              <button name="clone" title="${this.getLabel("clone_help")}" type="button" class="btn btn-info">${this.getLabel("clone")}</button>
              <button name="edit" title="${this.getLabel("edit_help")}" type="button" class="btn btn-primary">${this.getLabel("edit")}</button>
              <button name="derive" title="${this.getLabel("derive_help")}" type="button" class="btn btn-secondary">${this.getLabel("derive")}</button>
            </div>
          </div>
        </div>
      </div>
      <div class="ccp-method-editor">
        <div class="d-none plexiglass">
          <svg class="spinner" viewBox="0 0 66 66">
             <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
          </svg>
        </div>
        ${this.#style}
        <div class="ccp-method-editor-form">
          <div class="card">
            <div class="card-header">
              <div class="ccp-toolbar-header">
                <div>
                  <span name="header" class="mr-2">${this.#current.title}</span>        
                </div>
                <div class="ccp-toolbar-right">
                  ${this.renderSaveButton()}
                  ${this.renderResetButton()}
                  ${this.#isupdate ? this.renderDeleteButton() : ""}
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="mb-3 row">
                ${this.renderAuthors()}
              </div>
              <!-- div class="mb-3 row">
                ${this.renderContexts()}
              </div-->
              <div class="mb-3 row">
                <div class="col" title="${this.getLabel("title_help")}">
                  <label class="form-label">${this.getLabel("title")}</label>
                  <input name="title" class="form-control" type="text" required="required" value="${this.#current.title}"/>
                </div>
                <div class="col" title="${this.getLabel("version_help")}">
                  <label class="form-label">${this.getLabel("version")}</label>
                  <input name="version" class="form-control" type="text" required="required" value="${this.#current.version}"/>
                </div>
              </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}"/-->
                <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")}">
                  <label class="form-label">${this.getLabel("keywords")}</label>
                  <input name="keyword-input" class="form-control" type="text"/>
                  <div name="keyword-list" class="form-text">
                    ${this.renderKeywords()}
                  </div>
                </div>
                <div class="col mb-3" title="${this.getLabel("categories_help")}">
                  <label class="form-label">${this.getLabel("categories")}</label>
                  <input list="categoryhints" name="category-input" class="form-control" type="text"/>
                  ${this.renderCategoryHints()}
                  <div name="category-list" class="form-text">
                    ${this.renderCategories()}
                  </div>
                </div>
              </div>
              <div name="infrastructures" class="mb-3" title="${this.getLabel("compatible_infrastructures_help")}">
                <label class="form-label">${this.getLabel("compatible_infrastructures")}</label>
                <select name="infrastructure-input" class="form-control">
                  ${this.renderInfrastructureOptions()}
                </select>
                <div name="infrastructure-list" class="form-text">
                  ${this.renderInfrastructures()}
                </div>
              </div>
            </div>
          </div>
          <details class="card">
            <summary class="card-header">
              <div class="ccp-toolbar-header">
                <div>
                  <span class="mr-2">${this.getLabel("inputs")}</span>
                </div>
                <div class="ccp-toolbar-right">
                  ${this.renderStandardInputButtons()}
                  ${this.renderPlusButton("add-input")}    
                </div>
              </div>
            </summary>
            <div class="card-body" name="input-list">
            </div>
          </details>
          <details class="card">
            <summary class="card-header" name="output-buttons">
              <div class="ccp-toolbar-header">
                <div>
                  <span class="mr-2">${this.getLabel("outputs")}</span>
                </div>
                <div class="ccp-toolbar-right">
                  ${this.renderStandardOutputButtons()}
                  ${this.renderPlusButton("add-output")}    
                </div>
              </div>
            </summary>
            <div class="card-body" name="output-list">
              <d4s-ccp-output-editor></d4s-ccp-output-editor>
            </div>
          </div>
          <div name="scripts_container">
            ${this.renderScripts()}
          </div>
        </div>
      </div>
    `
    this.renderInputs()
    this.renderOutputs()

    this.#cloneornew_dialog = this.#rootdoc.querySelector("#cloneornew")

    this.#rootdoc.querySelector("#cloneornew button[name=clone]").addEventListener("click", ev => {
      this.#cloneornew_dialog.classList.remove("show")
      this.#cloneornew_dialog.style.display = "none"
      this.cloneMethod(this.#dragging_method)
      this.#dragging_method = null
    })

    this.#rootdoc.querySelector("#cloneornew button[name=derive]").addEventListener("click", ev => {
      this.#cloneornew_dialog.classList.remove("show")
      this.#cloneornew_dialog.style.display = "none"
      this.cloneMethod(this.#dragging_method, true)
      this.#dragging_method = null
    })

    this.#rootdoc.querySelector("#cloneornew button[name=edit]").addEventListener("click", ev => {
      this.#cloneornew_dialog.classList.remove("show")
      this.#cloneornew_dialog.style.display = "none"
      this.editMethod(this.#dragging_method)
      this.#dragging_method = null
    })

    this.#rootdoc.querySelector("input[name=title]").addEventListener("input", ev => {
      this.#current.title = ev.currentTarget.value
      this.#rootdoc.querySelector("span[name=header]").innerText = this.#current.title
    })

    this.#rootdoc.querySelector("input[name=version]").addEventListener("input", ev => {
      this.#current.version = ev.currentTarget.value
    })

    this.#rootdoc.querySelector("textarea[name=description]").addEventListener("input", ev => {
      this.#current.description = ev.currentTarget.value
    })

    this.#rootdoc.addEventListener("drop", ev => {
      if (ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')) {
        const method = JSON.parse(ev.dataTransfer.getData('application/json+ccpmethod'))
        ev.stopImmediatePropagation()
        ev.preventDefault()
        ev.stopPropagation()
        this.cloneOrEditMethod(method)
      }
    })

    this.#rootdoc.addEventListener("dragover", ev => {
      ev.preventDefault()
    })

    this.#rootdoc.querySelector("button[name=reset]").addEventListener("click", ev => {
      if (window.confirm(this.getLabel("confirm_reset"))) {
        this.resetMethod()
      }
      ev.preventDefault()
      ev.stopPropagation()
    })

    this.#rootdoc.querySelector("button[name=save]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      this.saveMethod()
    })

    if (this.#isupdate) {
      this.#rootdoc.querySelector("button[name=delete]").addEventListener("click", ev => {
        ev.preventDefault()
        ev.stopPropagation()
        this.deleteMethod()
      })
    }

    this.#rootdoc.querySelector("input[name=keyword-input]").addEventListener("keypress", ev => {
      if (ev.key === "Enter" || ev.which === 13) {
        ev.preventDefault()
        ev.stopPropagation()
        const val = ev.target.value
        ev.target.value = null
        if (!this.#current.keywords) {
          this.#current.keywords = [val]
        } else {
          this.#current.keywords.push(val)
        }
        this.reRenderKeywords()
      }
    })

    this.#rootdoc.querySelector("div[name=keyword-list]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      if (ev.target.getAttribute('name') === "delete-keyword") {
        const index = ev.target.getAttribute("data-index")
        this.#current.keywords.splice(index, 1)
        this.reRenderKeywords()
        this.#rootdoc.querySelector("input[name=keyword-input]").focus()
      }
    })

    this.#rootdoc.querySelector("input[name=category-input]").addEventListener("keypress", ev => {
      if (ev.key === "Enter" || ev.which === 13) {
        ev.preventDefault()
        ev.stopPropagation()
        const val = ev.target.value
        ev.target.value = null
        if (this.#current.metadata.filter(md => md.role === "category" && md.title === val).length === 0) {
          this.#current.metadata.push({ role: "category", title: val })
          this.reRenderCategories()
        }
      }
    })

    this.#rootdoc.querySelector("div[name=category-list]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      if (ev.target.getAttribute('name') === "delete-category") {
        const val = ev.target.parentElement.title
        this.#current.metadata = this.#current.metadata.filter(md => md.role !== "category" || md.title !== val)
        this.reRenderCategories()
        this.#rootdoc.querySelector("input[name=category-input]").focus()
      }
    })

    this.#rootdoc.querySelector("div[name=infrastructures]").addEventListener("change", ev => {
      if (ev.target.getAttribute("name") === "infrastructure-input" && ev.target.value) {
        ev.preventDefault()
        ev.stopPropagation()
        const id = ev.target.value
        const display = ev.target.options[ev.target.selectedIndex].text
        let link = {
          rel: "compatibleWith", title: display, href: "infrastructures/" + id
        }
        if (!this.#current.links) {
          this.#current.links = [link]
        } else {
          this.#current.links.push(link)
        }
        this.reRenderInfrastructures(ev.currentTarget)
      }
    })

    this.#rootdoc.querySelector("div[name=infrastructure-list]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      if (ev.target.getAttribute('name') === "delete-infrastructure") {
        const index = ev.target.getAttribute("data-index")
        this.#current.links.splice(index, 1)
        this.reRenderInfrastructures()
      }
    })

    this.#rootdoc.querySelector("button[name=add-input]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      this.#tmp_inputs.push(
        {
          id: "new_input",
          title: "New input",
          description: "A new input field",
          minOccurs: 1,
          maxOccurs: 1,
          schema: {
            type: "string",
            format: null,
            contentMediaType: "text/plain",
            default: ""
          }
        }
      )
      this.renderInputs()
      this.reRenderScripts()
    })

    this.#rootdoc.querySelector("button[name=add-ccpannotation]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      this.#tmp_inputs.push(
        {
          id: "ccpnote",
          title: "Annotations for execution",
          description: "The value of this parameter will be associated as annotation to the execution",
          minOccurs: 1,
          maxOccurs: 1,
          schema: {
            type: "string",
            format: null,
            contentMediaType: "text/plain",
            default: ""
          }
        }
      )
      this.renderInputs()
      this.reRenderScripts()
    })

    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
      const evname = ev.target.getAttribute('name')
      if (evname === "delete-input") {
        ev.preventDefault()
        ev.stopPropagation()
        const index = Number(ev.target.getAttribute("data-index"))
        console.log("deleting input at index", index)
        this.deleteTmpInputAt(index)
        this.renderInputs()
        this.reRenderScripts()
      }
    })

    //when any input changes update scripts so that possibly variable get re-expanded
    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("input", ev => {
      this.reRenderScripts()
    })

    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("change", ev => {
      this.reRenderScripts()
    })

    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
      const src = ev.target.getAttribute("name")
      if (src === "plus" || src === "minus" || src === "maxOccurs" || src === "minOccurs") {
        this.reRenderScripts()
      }
    })

    this.#rootdoc.querySelector("button[name=add-output]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      this.#tmp_outputs.push(
        {
          id: "new_output",
          title: "New ouput",
          description: "A new output field",
          minOccurs: 1,
          maxOccurs: 1,
          metadata: [
            {
              "role": "file",
              "title": "newoutput.txt",
              "href": "newoutput.txt"
            }
          ],
          schema: {
            type: "string",
            contentMediaType: "text/plain"
          }
        }
      )
      this.renderOutputs()
    })

    this.#rootdoc.querySelector("button[name=add-stdout]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      this.#tmp_outputs.push(
        {
          id: "stdout",
          title: "Standard output",
          description: "Standard output channel",
          minOccurs: 1,
          maxOccurs: 1,
          metadata: [
            {
              "role": "file",
              "title": "stdout",
              "href": "stdout"
            }
          ],
          schema: {
            type: "string",
            contentMediaType: "text/plain"
          }
        }
      )
      this.renderOutputs()
    })

    this.#rootdoc.querySelector("button[name=add-stderr]").addEventListener("click", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      this.#tmp_outputs.push(
        {
          id: "stderr",
          title: "Standard error",
          description: "Standard error channel",
          minOccurs: 1,
          maxOccurs: 1,
          metadata: [
            {
              "role": "file",
              "title": "stderr",
              "href": "stderr"
            }
          ],
          schema: {
            type: "string",
            contentMediaType: "text/plain"
          }
        }
      )
      this.renderOutputs()
    })

    this.#rootdoc.querySelector("div[name=output-list]").addEventListener("click", ev => {
      const evname = ev.target.getAttribute('name')
      if (evname === "delete-output") {
        ev.preventDefault()
        ev.stopPropagation()
        const index = Number(ev.target.getAttribute("data-index"))
        console.log("deleting output at index", index)
        this.deleteTmpOutputAt(index)
        this.renderOutputs()
      }
    })

    this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
      ev.preventDefault()
      ev.stopPropagation()
      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/);
      this.reRenderScripts()
    })
  }

  renderAuthors() {
    return `
      <ul class="author_list">
      ${this.#current.metadata.
        filter(md => md.role === "author").
        map(a => `<li class="badge bg-warning text-dark" title="Author: ${a.title}">${a.title}</li>`).join()}
      </ul>
    `
  }

  renderCategoryHints() {
    const ml = document.querySelector("d4s-ccp-methodlist")
    const cats = ml.getCategoryHints()
    if (cats.indexOf("Uncategorised") === -1) cats.push("Uncategorised")
    return `
      <datalist id="categoryhints">
        ${cats.map(c => `<option value="${c}">${c}</option>`)}
      </datalist>
    `
  }

  renderContexts() {
    return `
      <ul class="context_list">
      ${this.#current.metadata.
        filter(md => md.role === "context").
        map(c => `<li class="context_list_item" title="${c.title}">${c.title}</li>`).join("")}
      </ul>
    `
  }

  renderSaveButton() {
    return `
      <button title="${this.getLabel("save_help")}" name="save" class="btn btn-primary ccp-toolbar-button">
        ${this.#disc_icon}  
      </button>
    `
  }

  renderDeleteButton() {
    return `
      <button title="${this.getLabel("delete_help")}" name="delete" class="btn btn-danger ccp-toolbar-button">
        ${this.#delete_icon}  
      </button>
    `
  }

  renderResetButton() {
    return `
      <button name="reset" title="${this.getLabel("reset_help")}" class="btn btn-primary ccp-toolbar-button">
        <svg viewBox="0 0 24 24">
          ${this.#erase_icon} 
        </svg>
      </button>
    `
  }

  renderPlusButton(name) {
    return `
      <button name="${name}" title="${this.getLabel(name + "_help")}" class="btn btn-primary ccp-toolbar-button">
        ${this.#plus_icon}   
      </button>
    `
  }

  renderStandardInputButtons() {
    return `
      <button name="add-ccpannotation" title="${this.getLabel("add_ccpnote_help")}" class="btn btn-info ccp-toolbar-button">
        ${this.#annotation_input_icon}  
      </button>
    `
  }

  renderStandardOutputButtons() {
    return `
      <button name="add-stdout" title="${this.getLabel("add_stdout_help")}" class="btn btn-success ccp-toolbar-button">
        ${this.#output_icon}  
      </button>
      <button name="add-stderr" title="${this.getLabel("add_stderr_help")}" class="btn btn-danger ccp-toolbar-button">
        ${this.#output_icon}
      </button>
    `
  }

  reRenderKeywords() {
    this.#rootdoc.querySelector("div[name=keyword-list]").innerHTML = this.renderKeywords()
  }

  renderKeywords() {
    if (this.#current.keywords) {
      return this.#current.keywords.map((k, i) => {
        return `
          <div class="ccp-option badge ccp-keyword" title="${k}" alt="${k}">
            <span>${k}</span>
            <span class="btn text-danger ccp-toolbar-button" name="delete-keyword" data-index="${i}">x</span>
          </div>
        `
      }).join("\n")
    } else {
      return ""
    }
  }

  reRenderCategories() {
    this.#rootdoc.querySelector("div[name=category-list]").innerHTML = this.renderCategories()
  }

  renderCategories() {
    if (this.#current.metadata) {
      return this.#current.metadata.filter(md => md.role === "category").map((k, i) => {
        return `
          <div class="ccp-option badge ccp-category" title="${k.title}" alt="${k.title}">
            <span>${k.title}</span>
            <span class="btn text-danger ccp-toolbar-button" name="delete-category" data-index="${i}">x</span>
          </div>
        `
      }).join("\n")
    } else {
      return ""
    }
  }

  reRenderInfrastructures() {
    this.#rootdoc.querySelector("select[name=infrastructure-input]").innerHTML = this.renderInfrastructureOptions()
    this.#rootdoc.querySelector("div[name=infrastructure-list]").innerHTML = this.renderInfrastructures()
  }

  renderInfrastructureOptions() {
    const selectedinfras = this.#current.links.filter(l => l.rel === "compatibleWith").map(i => i.href.split("/")[1])
    const available = this.#infrastructures.filter(i => { return selectedinfras.indexOf(i.id) === -1 })
    return `
      <option></option>
      ${available.map(infra => {
      return `
            <option value="${infra.id}" title="${infra.description}">${infra.name}</option>
          `
    }).join("\n")
      } 
    `
  }

  renderInfrastructures() {
    return this.#current.links.filter(l => l.rel === "compatibleWith").map((l, i) => {
      return `
        <div class="ccp-option badge ccp-keyword" title="${l.title}" alt="${l.title}">
          <span>${l.title}</span>
          <span class="btn text-danger ccp-toolbar-button" name="delete-infrastructure" data-index="${i}">x</span>
        </div>
      `
    }).join("\n")
  }

  renderInputs() {
    const parent = this.#rootdoc.querySelector("div[name=input-list]")
    parent.innerHTML = ""
    return this.#tmp_inputs.map((inp, i) => {
      const c = document.createElement("d4s-ccp-input-editor");
      parent.appendChild(c)
      c.render(inp, i)
    })
  }

  renderOutputs() {
    const parent = this.#rootdoc.querySelector("div[name=output-list]")
    parent.innerHTML = ""
    return this.#tmp_outputs.map((outp, i) => {
      const c = document.createElement("d4s-ccp-output-editor");
      parent.appendChild(c)
      c.render(outp, i)
    })
  }

  codeToPreview(code) {
    return this.#tmp_inputs.reduce((acc, i) => {
      const r = new RegExp(`{{\\s*${i.id}\\s*}}`, 'g');
      var def = i.schema.default
      if(i.schema.format === "secret"){
        def = Array.isArray(def) ? def : [def] 
        def = def.map(v=>"***")
      }
      if(i.schema.format === "file"){
        def = Array.isArray(def) ? def : [def] 
        def = def.map(v=>v.length > 15 ? v.substring(0,5) + "..." + v.substring(v.length-5) : v)
      }
      return acc.replaceAll(r, def)
    }, code)
  }

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

  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" 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>
    `
  }

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

window.customElements.define('d4s-ccp-methodeditor', CCPMethodEditorController);