| 702 | } |
| 703 | |
| 704 | override firstUpdated() { |
| 705 | if (this.container == null) return; |
| 706 | this.scene = new Scene({container: this.container, |
| 707 | defaultTransitionTimeMs: 300}); |
| 708 | |
| 709 | this.selections.columnLabels = this.scene.createTextSelection<Label>(); |
| 710 | this.selections.columnLabels.align(() => 'center') |
| 711 | .verticalAlign(() => 'bottom').text((label: Label) => label.text) |
| 712 | .onInit(bindLabel).onUpdate(bindLabel).onExit(spriteExitHandler); |
| 713 | |
| 714 | this.selections.rowLabels = this.scene.createTextSelection<Label>(); |
| 715 | this.selections.rowLabels.align(() => 'right') |
| 716 | .verticalAlign(() => 'middle').text((label: Label) => label.text) |
| 717 | .onInit(bindLabel).onUpdate(bindLabel).onExit(spriteExitHandler); |
| 718 | |
| 719 | this.selections.points = this.scene.createSelection<Dot>(); |
| 720 | this.selections.points.onExit(spriteExitHandler); |
| 721 | |
| 722 | this.resizeObserver.observe(this.container); |
| 723 | |
| 724 | this.reactImmediately(() => this.appState.currentDataset, () => { |
| 725 | // Dataset changed, clear out the existing visualization |
| 726 | this.selections.columnLabels?.clear(); |
| 727 | this.selections.rowLabels?.clear(); |
| 728 | this.selections.points?.clear(); |
| 729 | this.points = new Map<string, Dot>(); |
| 730 | }); |
| 731 | |
| 732 | const configChanges = () => [ |
| 733 | this.colsFeatureIdx, this.rowsFeatureIdx, this.dataService.dataVals, |
| 734 | this.colorService.selectedColorOption]; |
| 735 | this.reactImmediately(configChanges, () => { |
| 736 | const colorFeature = this.colorService.selectedColorOption.name; |
| 737 | if (colorFeature !== 'None') { |
| 738 | for (const {id} of this.appState.currentInputData) { |
| 739 | this.colorValueMap.set(id, this.dataService.getVal(id, colorFeature)); |
| 740 | } |
| 741 | } |
| 742 | |
| 743 | this.configure(); |
| 744 | this.draw(); |
| 745 | }); |
| 746 | |
| 747 | const selectionChanges = () => [ |
| 748 | this.selectionService.selectedIds, |
| 749 | this.selectionService.primarySelectedId, |
| 750 | this.pinnedSelectionService.primarySelectedId, |
| 751 | this.focusService.focusData?.datapointId]; |
| 752 | this.reactImmediately(selectionChanges, () => {this.draw();}); |
| 753 | } |
| 754 | } |
| 755 | |
| 756 | declare global { |