import { observer } from "mobx-react" ; import * as React from "react" ; import BuildingColorTheme from "../../classes/BuildingColorTheme" ; import Layout from "../../classes/Layout" ; import Metric from "../../classes/Metric" ; import Scale from "../../classes/Scale" ; import { SceneColorTheme } from "../../classes/SceneColorTheme" ; import { TestClassesVariant } from "../../classes/TestClassesVariant" ; import { BuildingColorThemes } from "../../constants/BuildingColorThemes" ; import { ColorMetrics } from "../../constants/ColorMetrics" ; import { Layouts } from "../../constants/Layouts" ; import { Scales } from "../../constants/Scales" ; import { SceneColorThemes } from "../../constants/SceneColorThemes" ; import { TestClassesVariants } from "../../constants/TestClassesVariants" ; import { lazyInject } from "../../inversify.config" ; import CityBuilderStore from "../../stores/CityBuilderStore" ; import VisualizationOptionStore from "../../stores/VisualizationOptionStore" ; import Category from "../ui/Category" ; import SelectBoxBuilder from "../ui/selectbox/SelectBoxBuilder" ; import { TextInput } from "../ui/TextInput" ; @ observer export default class AdvancedAnalysisOptions extends React . Component < Record < string , never > , any > { @ lazyInject ( "VisualizationOptionStore" ) private readonly visualizationOptions ! : VisualizationOptionStore ; @ lazyInject ( "CityBuilderStore" ) private readonly cityBuilderStore ! : CityBuilderStore ; public render ( ) { return ( < div > < Category label = "Metrics" > < div className = "left-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Metric - Footprint" value = { this . visualizationOptions . profile . footprintMetric } options = { this . cityBuilderStore . genericMetrics . asSelectOptions } onChange = { ( m ) => { this . visualizationOptions . setCustomFootprintMetric ( m ) ; } } /> < p className = "selection-description" > { this . visualizationOptions . profile . footprintMetric . description } < /p> < /div> < /div> < div className = "middle-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Metric - Height" value = { this . visualizationOptions . profile . heightMetric } options = { this . cityBuilderStore . genericMetrics . asSelectOptions } onChange = { ( m ) => { this . visualizationOptions . setCustomHeightMetric ( m ) ; } } /> < p className = "selection-description" > { this . visualizationOptions . profile . heightMetric . description } < /p> < /div> < /div> < div className = "right-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Building color metric" className = "metric color" value = { this . visualizationOptions . metricColor } options = { ColorMetrics . colorMetrics . asSelectOptions } onChange = { ( m ) => { this . visualizationOptions . metricColor = m as Metric ; } } /> < p className = "selection-description color-description" > { this . visualizationOptions . metricColor . description } < /p> < /div> < /div> < /Category> < Category label = "Color themes" > < div className = "left-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Base color theme" value = { this . visualizationOptions . colorTheme } options = { SceneColorThemes . availableColorThemes } onChange = { ( colorTheme ) => { this . visualizationOptions . colorTheme = colorTheme ; } } /> < /div> < /div> < div className = "middle-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Building color theme" value = { this . visualizationOptions . buildingColorTheme } options = { BuildingColorThemes . availableBuildingColorThemes } onChange = { ( buildingColorTheme ) => { this . visualizationOptions . buildingColorTheme = buildingColorTheme ; } } /> < /div> < /div> < /Category> < Category label = "Layout" > < div className = "left-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Layout" value = { this . visualizationOptions . layout } options = { Layouts . availableLayouts } onChange = { ( layout ) => { this . visualizationOptions . layout = layout ; } } /> < p className = "selection-description" > { this . visualizationOptions . layout . description } < /p> < /div> < /div> < div className = "middle-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Scaling Method" value = { this . visualizationOptions . profile . scale } options = { Scales . availableScales } onChange = { ( scale ) => { this . visualizationOptions . profile . scale = scale ; } } /> < p className = "selection-description" > { this . visualizationOptions . profile . scale . description } < /p> < /div> < /div> < /Category> < Category label = "Files" > < div className = "left-column" > < div className = "builder-option" > < SelectBoxBuilder label = "Test classes" value = { this . visualizationOptions . fileFilter . testClassesVariant } options = { TestClassesVariants . availableTestClassesVariants } onChange = { ( testClassesVariant ) => { this . visualizationOptions . fileFilter . testClassesVariant = testClassesVariant ; } } /> < /div> < /div> < div className = "middle-column" > < div className = "builder-option" > < TextInput id = "excludeClasses" label = "Exclude classes regex" value = { this . visualizationOptions . fileFilter . excludeClasses . value } onChange = { ( event ) => { this . visualizationOptions . fileFilter . excludeClasses . value = event . target . value ; } } /> < /div> < /div> < div className = "right-column" > < div className = "builder-option" > < TextInput id = "includeClasses" label = "Include classes regex" value = { this . visualizationOptions . fileFilter . includeClasses . value } onChange = { ( event ) => { this . visualizationOptions . fileFilter . includeClasses . value = event . target . value ; } } /> < /div> < /div> < /Category> < /div>); } }