import { observer } from "mobx-react" ; import * as React from "react" ; import Metric from "../../../classes/Metric" ; import MetricSet from "../../../classes/MetricSet" ; import { TreeElement } from "../../../classes/TreeElement" ; import VisualizationOptionStore from "../../../stores/VisualizationOptionStore" ; import { ColorMetrics } from "../../../constants/ColorMetrics" ; import { lazyInject } from "../../../inversify.config" ; import SelectedElementService from "../../../services/SelectedElementService" ; import SelectBoxBuilder from "../../ui/selectbox/SelectBoxBuilder" ; import MetricKey from "./MetricKey" ; /**
 * Bottom bar with information about the current selected metrics.
 */ @ observer export default class SceneInformation extends React . Component < Record < string , unknown > , any > { @ lazyInject ( "SelectedElementService" ) private readonly selectedElementService ! : SelectedElementService ; @ lazyInject ( "VisualizationOptionStore" ) private readonly visualizationOptions ! : VisualizationOptionStore ; public render ( ) { const selectedElement = this . selectedElementService . getSelectedElement ( ) ; return ( < div className = "scene-information" > < MetricKey title = "Footprint" metric = { this . visualizationOptions . profile . footprintMetric } selectedElement = { selectedElement } / > < MetricKey title = "Height" metric = { this . visualizationOptions . profile . heightMetric } selectedElement = { selectedElement } / > < SelectBoxBuilder label = "Color" className = "metric-info" value = { this . visualizationOptions . metricColor } options = { new MetricSet ( ColorMetrics . availableColorMetrics ) . asSelectOptions } onChange = { ( m ) => { this . visualizationOptions . metricColor = m ; } } append = { this . renderColorInformation ( selectedElement ) } / > < /div>); } private renderColorInformation ( selectedElement ) { const colorInformation = [ ] ; if ( selectedElement !== null ) { const colorValue = selectedElement . getMeasureValue ( this . visualizationOptions . metricColor ) ; if ( colorValue !== null ) { colorInformation . push ( < span className = "value" > { colorValue } < /span>); } } return colorInformation ; } }