Merge pull request #22 from cognizant-ai-labs/bigdemo

Giant redo of layout for bigger demos

Author: danyoungday

.gitignore

@@ -6,5 +6,8 @@ __pycache__
 temp/
 .vscode
 results/
+animations/
+
+input_specs.jsonl
 
 !app/results

Dockerfile

@@ -20,10 +20,7 @@ RUN pip install --no-cache-dir --upgrade pip && \
 COPY . .
 
 # Download En-ROADS SDK and extract it
-ENV ENROADS_URL=$ENROADS_URL
-ENV ENROADS_ID=$ENROADS_ID
-ENV ENROADS_PASSWORD=$ENROADS_PASSWORD
-RUN python -m enroadspy.download_sdk
+RUN python -m enroadspy.load_sdk
 
 # Expose Flask (Dash) port
 EXPOSE 4057

README.md

@@ -7,7 +7,9 @@ Immediate action is required to combat climate change. The technology behind [Co
 En-ROADS is a climate change simulator developed by [Climate Interactive](https://www.climateinteractive.org/). We have created a wrapper around the SDK to make it simple to use in a Python application which can be found in `enroadspy`. See `enroads_runner.py` for the main class that runs the SDK. The SDK is not included in this repository and access to it is very limited. If you would like to run this code, please contact Project Resilience at [daniel.young2@cognizant.com](mailto:daniel.young2@cognizant.com).
 
 ### Installation
-This project was created with Python 3.10.14. Run `pip install -r requirements.txt` to install the required packages. Then run `python -m enroadspy.download_sdk` to download the SDK. In order to download the SDK environment variables must be set.
+This project was created with Python 3.10.14. Run `pip install -r requirements.txt` to install the required packages.
+
+The En-ROADS SDK must be loaded for this project to run. This can be done with `python -m enroadspy.load_sdk`, after the proper permissions are granted and environment variables are set.
 
 ## Evolution
 

app/app.py

@@ -5,12 +5,12 @@
 from dash import html
 import dash_bootstrap_components as dbc
 
-from app.components.intro import IntroComponent
 from app.components.context import ContextComponent
 from app.components.filter import FilterComponent
+from app.components.header.header import HeaderComponent
 from app.components.outcome import OutcomeComponent
 from app.components.link import LinkComponent
-from app.components.references import ReferencesComponent
+
 from app.utils import EvolutionHandler
 
 evolution_handler = EvolutionHandler()
@@ -19,12 +19,11 @@
 # The candidates are sorted by rank then distance so the 'best' ones are the first 10
 sample_idxs = list(range(10))
 
-intro_component = IntroComponent()
 context_component = ContextComponent()
 filter_component = FilterComponent(metrics)
+header_component = HeaderComponent()
 outcome_component = OutcomeComponent(evolution_handler)
-link_component = LinkComponent(sample_idxs, actions)
-references_component = ReferencesComponent()
+link_component = LinkComponent(actions)
 
 # Initialize the Dash app
 app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP, "assets/styles.css"])
@@ -33,18 +32,32 @@
 
 context_component.register_callbacks(app)
 filter_component.register_callbacks(app)
+header_component.register_callbacks(app)
 outcome_component.register_callbacks(app)
 link_component.register_callbacks(app)
 
-# Layout of the app
 app.layout = html.Div(
     children=[
-        intro_component.create_intro_div(),
-        context_component.create_context_div(),
-        filter_component.create_filter_div(),
-        outcome_component.create_outcomes_div(),
-        link_component.create_link_div(),
-        references_component.create_references_div()
+        dbc.Container(
+            id="main-page",
+            fluid=True,
+            children=[
+                header_component.create_div(),
+                dbc.Row(outcome_component.create_div()),
+                dbc.Row(
+                    className="mb-5",
+                    children=[
+                        dbc.Col(
+                            context_component.create_div()
+                        ),
+                        dbc.Col(
+                            filter_component.create_div()
+                        )
+                    ]
+                ),
+                dbc.Row(link_component.create_div())
+            ]
+        )
     ]
 )
 

app/assets/custom.css

@@ -1,22 +1,15 @@
-body {
-    background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/54/Power_County_Wind_Farm_002.jpg");
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-}
-
 /* restyle radio items */
 .radio-group .form-check {
-    padding-left: 0;
-  }
-  
-  .radio-group .btn-group > .form-check:not(:last-child) > .btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  padding-left: 0;
+}
 
-  .radio-group .btn-group > .form-check:not(:first-child) > .btn {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-left: -1px;
-  }
+.radio-group .btn-group > .form-check:not(:last-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.radio-group .btn-group > .form-check:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+}

app/classes.py

@@ -0,0 +1,25 @@
+"""
+Interface defining what a component should look like. This lets us easily and dynamically call all their callbacks
+and then add them to the main app layout. Single components should register all their callbacks at once and only
+have a single div that they render.
+"""
+from abc import ABC, abstractmethod
+
+from dash import Dash, html
+
+
+class Component(ABC):
+    """
+    Interface for components. They must register their callbacks and create their div.
+    """
+    @abstractmethod
+    def create_div(self) -> html.Div:
+        """
+        Creates the div housing the component. This gets called by the main layout.
+        """
+
+    @abstractmethod
+    def register_callbacks(self, app: Dash):
+        """
+        Registers the callbacks for the component. This gets called by the main app.
+        """