render()

in web/src/components/playground.js [169:248]

• 80 lines of code
• 3 McCabe index (conditional complexity)

  render() {
    return html`
      ${this._loading
        ? html`
            <div id="loading">
              <!-- prettier-ignore -->
              <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"> <style>.spinner_qM83 { animation: spinner_8HQG 1.05s infinite } .spinner_oXPr { animation-delay: .1s } .spinner_ZTLf { animation-delay: .2s } @keyframes spinner_8HQG { 0%, 57.14% { animation-timing-function: cubic-bezier(0.33, .66, .66, 1); transform: translate(0) } 28.57% { animation-timing-function: cubic-bezier(0.33, 0, .66, .33); transform: translateY(-6px) } 100% { transform: translate(0) } }</style> <circle class="spinner_qM83" cx="4" cy="12" r="3"/> <circle class="spinner_qM83 spinner_oXPr" cx="12" cy="12" r="3"/> <circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="3"/> </svg>
            </div>
          `
        : nothing}
      <div class="playground" id="playground">
        <slot name="playground-controls">
          <playground-controls
            id="playground-controls"
            ?hide-run-button="${this.hideRunButton}"
            ?hide-evaluators=${this._hideEvaluators}
            ?hide-copy-link-button="${this.disableShareLink}"
            ?loading="${this._loadingWasm}"
            evaluator="${this.evaluator}"
            evaluators="${JSON.stringify(this._evaluators)}"
            version="${this.version}"
            versions="${JSON.stringify(this._versions)}"
            @copy-link-click="${this._handleCopyLinkClick}"
          >
            <slot
              name="playground-controls-app-title-text"
              slot="app-title-text"
            >
              ${this.title
                ? html` ${this.title}&nbsp;<sup
                      class="beta-box"
                      title="The OTTL Playground is still in beta and the authors of this tool would welcome your feedback"
                      >BETA</sup
                    >`
                : nothing}
            </slot>
            <slot
              name="playground-controls-custom-components"
              slot="custom-components"
            >
            </slot>
          </playground-controls>
        </slot>
        <div class="split-horizontal">
          <div id="left-panel">
            <div class="split-vertical">
              <div id="config-code-panel-container">
                <playground-config-panel
                  id="config-code-panel"
                  examples="${JSON.stringify(CONFIG_EXAMPLES[this.evaluator])}"
                  config="${this.config}"
                  @config-changed="${(e) => (this.config = e.detail.value)}"
                  config-docs-url="${this._evaluatorsDocsURL?.[this.evaluator]}"
                  @config-example-changed="${this._handleConfigExampleChanged}"
                >
                  >
                </playground-config-panel>
              </div>
              <div id="payload-code-panel-container">
                <playground-payload-panel
                  id="payload-code-panel"
                  payload="${this.payload}"
                  @payload-changed="${(e) => (this.payload = e.detail.value)}"
                >
                </playground-payload-panel>
              </div>
            </div>
          </div>
          <div class="hidden-overflow" id="right-panel">
            <playground-result-panel
              id="result-panel"
              payload="${this.payload}"
              result="${JSON.stringify(this._result)}"
            >
            </playground-result-panel>
          </div>
        </div>
      </div>
    `;
  }