createGroupRowFromDefinition = (paramDefinition, prevParameterValues) => {
  let label = paramDefinition.name + ':'
  let tdClassName = ''
  if ('caption' in paramDefinition) {
    label = paramDefinition.caption
    tdClassName = 'caption'
  }

  if (paramDefinition.name in prevParameterValues) {
    currentGroupIsExpanded = prevParameterValues[paramDefinition.name] !== 'closed'
  } else {
    currentGroupIsExpanded = paramDefinition.initial !== 'closed'
  }

  currentGroupName = paramDefinition.name
  const trClassName = 'groupTitle ' + (currentGroupIsExpanded ? 'open' : 'closed')

  const groupHeaderRow = html`<tr class=${trClassName} data-groupname=${currentGroupName} >
        <td class=${tdClassName} colspan="2">
            <h1>
                <svg class="icon icon-open feather feather-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><polyline points="6 9 12 15 18 9"/></svg>
                <svg class="icon icon-closed feather feather-chevron-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><polyline points="9 18 15 12 9 6"/></svg>
                ${label}
            </h1>
        </td>
      </tr>`

  // this is to make groups collapsible
  groupHeaderRow.onclick = () => {
    toggleGroupVisibility(groupHeaderRow)
    return true
  }

  groupHeaderRow.paramName = paramDefinition.name
  groupHeaderRow.paramType = paramDefinition.type
  return groupHeaderRow
}
Render a Group Header parameter in HTML
@param paramDefinition
@param prevParameterValues
@returns {*}