Make it so there's a drop down to select the simulation name. Part of #…

…10.
jkomoros · Nov 21, 2021 · 1192e20 · 1192e20
1 parent 37e9e0d
commit 1192e20
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/src/actions/data.js b/src/actions/data.js
@@ -31,6 +31,14 @@ export const prevIndex = () => (dispatch, getState) => {
 	dispatch(updateFrameIndex(currentIndex));
 };
 
+export const updateSimulationIndex = (index) => (dispatch) => {
+	dispatch({
+		type: UPDATE_SIMULATION_INDEX,
+		index,
+	});
+	dispatch(canonicalizePath());
+};
+
 export const updateFrameIndex = (index) => (dispatch) => {
 	if (typeof index == 'string') index = parseInt(index);
 	dispatch({

diff --git a/src/components/simulation-controls.js b/src/components/simulation-controls.js
@@ -7,9 +7,12 @@ import { store } from "../store.js";
 import {
 	selectFrameIndex,
 	selectRunIndex,
+	selectSimulationIndex,
+	selectSimulationsMap
 } from "../selectors.js";
 
 import {
+	updateSimulationIndex,
 	updateFrameIndex,
 	updateRunIndex
 } from '../actions/data.js';
@@ -20,6 +23,8 @@ import { SharedStyles } from "./shared-styles.js";
 class SimulationControls extends connect(store)(LitElement) {
 	static get properties() {
 		return {
+			_simulationsMap: { type:Object },
+			_simulationIndex: { type:Number },
 			_frameIndex: { type: Number },
 			_runIndex: {type: Number},
 		};
@@ -36,6 +41,12 @@ class SimulationControls extends connect(store)(LitElement) {
 	render() {
 		return html`
 			<div class='container'>
+				<div>
+					<label for='simulationIndex'>Simulation</label>
+					<select id='simulationIndex' .value=${this._simulationIndex} @change=${this._handleSimulationIndexChanged}>
+						${Object.entries(this._simulationsMap).map(entry => html`<option value=${entry[0]}>${entry[1].description}</option>`)}
+					</select>
+				</div>
 				<div>
 					<label for='runIndex'>Run</label>
 					<input id='runIndex' .value=${this._runIndex} type='number' min='0' @change=${this._handleRunIndexChanged}>
@@ -50,10 +61,17 @@ class SimulationControls extends connect(store)(LitElement) {
 
 	// This is called every time something is updated in the store.
 	stateChanged(state) {
+		this._simulationsMap = selectSimulationsMap(state);
+		this._simulationIndex = selectSimulationIndex(state);
 		this._frameIndex = selectFrameIndex(state);
 		this._runIndex = selectRunIndex(state);
 	}
 
+	_handleSimulationIndexChanged(e) {
+		const ele = e.composedPath()[0];
+		store.dispatch(updateSimulationIndex(ele.value));
+	}
+
 	_handleFrameIndexChanged(e) {
 		const ele = e.composedPath()[0];
 		store.dispatch(updateFrameIndex(ele.value));