| 534 | } |
| 535 | |
| 536 | private renderControls() { |
| 537 | const colsChange = (event: Event) => { |
| 538 | this.colsFeatureIdx = Number((event.target as HTMLInputElement).value); |
| 539 | }; |
| 540 | |
| 541 | const rowsChange = (event: Event) => { |
| 542 | this.rowsFeatureIdx = Number((event.target as HTMLInputElement).value); |
| 543 | }; |
| 544 | |
| 545 | const zoomChange = (factor: number) => { |
| 546 | if (this.scene != null) { |
| 547 | const {x, y} = this.scene.scale; |
| 548 | this.updateZoom(x * factor, y * factor); |
| 549 | } |
| 550 | }; |
| 551 | |
| 552 | const dropDownSpecs: Array<[string, number, (e: Event) => void]> = [ |
| 553 | ['Rows:', this.rowsFeatureIdx, rowsChange], |
| 554 | ['Columns:', this.colsFeatureIdx, colsChange] |
| 555 | ]; |
| 556 | |
| 557 | // clang-format off |
| 558 | return html`<div class="dive-controls"> |
| 559 | <div class="feature-selectors"> |
| 560 | ${dropDownSpecs.map(([label, index, onChange]) => html` |
| 561 | <div class="dropdown-holder"> |
| 562 | <label class="dropdown-label">${label}</label> |
| 563 | <select class="dropdown limit-width" @change=${onChange} |
| 564 | aria-label=${this.groupService.denseFeatureNames[index]}> |
| 565 | ${this.groupService.denseFeatureNames.map((feature, i) => html` |
| 566 | <option value=${i} ?selected=${index === i}> |
| 567 | ${feature} |
| 568 | </option>`)} |
| 569 | </select> |
| 570 | </div>`)} |
| 571 | </div> |
| 572 | <div class="view-controls"> |
| 573 | <lit-tooltip content="Zoom in" tooltipPosition="left"> |
| 574 | <span class="material-icon-outlined icon-button" slot="tooltip-anchor" |
| 575 | @click=${() =>{zoomChange(ZOOM_IN_FACTOR);}}> |
| 576 | zoom_in |
| 577 | </span> |
| 578 | </lit-tooltip> |
| 579 | <lit-tooltip content="Zoom out" tooltipPosition="left"> |
| 580 | <span class="material-icon-outlined icon-button" slot="tooltip-anchor" |
| 581 | @click=${() =>{zoomChange(ZOOM_OUT_FACTOR);}}> |
| 582 | zoom_out |
| 583 | </span> |
| 584 | </lit-tooltip> |
| 585 | <lit-tooltip content="Reset view" tooltipPosition="left"> |
| 586 | <span class="material-icon-outlined icon-button" slot="tooltip-anchor" |
| 587 | @click=${() =>{this.resetScale();}}> |
| 588 | view_in_ar |
| 589 | </span> |
| 590 | </lit-tooltip> |
| 591 | </div> |
| 592 | </div>`; |
| 593 | // clang-format on |