Add our own maps/models

Here's what ChatGPT says to do:

To allow the user to choose between multiple modelData and map objects, you can implement a user interface (UI) element, such as a dropdown menu or a set of radio buttons, that lets the user select the desired model and map. Then, you can update the modelData and map in the state based on the user's selection.

Here's a step-by-step guide on how to implement this feature:

Define Multiple Model and Map Options:

Create an array or an object that contains multiple options for modelData and map. Each option should include the necessary data for a different metabolic model and map.

For example:

const modelOptions = [
 {
   label: 'E. coli Core Model',
   modelData: require('./data/E coli core.json'),
   map: require('./data/E coli core.Core metabolism.json')
 },
 {
   label: 'Another Model',
   modelData: require('./data/another-model.json'),
   map: require('./data/another-model-map.json')
 },
 // Add more options as needed
];

Add UI Element for Model Selection:

In your component's render method, add a UI element (e.g., dropdown or radio buttons) to allow the user to select a model. You can use a library like preact to create the UI elements.

Here's an example of using a dropdown:
```
<select onChange={this.handleModelChange}>
 {modelOptions.map((option, index) => (
   <option key={index} value={index}>
     {option.label}
   </option>
 ))}
</select>
```
In this code, modelOptions is mapped to create dropdown options, and the handleModelChange function will be called when the user selects an option.
Handle Model Change:

Implement the handleModelChange function to update the state when the user selects a different model option. This function will set the modelData and map in the state based on the user's selection.
```
handleModelChange = (event) => {
 const selectedIndex = event.target.value;
 const selectedOption = modelOptions[selectedIndex];

 this.setState({
   modelData: selectedOption.modelData,
   map: selectedOption.map
 });
}
```
This function retrieves the selected index from the dropdown and then updates the modelData and map in the state accordingly.
Render the Model with Updated Data:

Make sure to use the updated modelData and map from the state when rendering the metabolic model. You can pass them as props to the EscherContainer or any other relevant components.
```
<EscherContainer
 model={this.state.model}
 oldModel={this.state.oldModel}
 map={this.state.map}
 // ...
/>
```

With these steps, you'll allow the user to choose between multiple models and maps, and the UI will update the modelData and map in the state accordingly. Users can switch between different metabolic models by selecting different options from the dropdown or other UI elements you choose to implement.

C-CoMP-STC / escher-fba

Add our own maps/models #1