Update case study visualization and plot

a_test.csv

@@ -1,8 +1,8 @@
 solvents,temperature,pressure,target
-a,1,1,2.344
-b,3,2.2,4.5555
-c,4,2.3,222.3333
-d,5,2.4,1.3
-e,6,2,4.5
-f,10,1,2.455
-g,4,1.5,3
+a,25,1,2.344
+b,45,2.2,4.5555
+c,25,2.3,10.333
+d,55,2.4,1.3
+e,10,2,4.5
+f,75,1,2.455
+g,65,1.5,3

webbo.yml

@@ -0,0 +1,148 @@
+name: /home/bogosort/work/webBO/main/.venv
+channels:
+  - defaults
+dependencies:
+  - _libgcc_mutex=0.1=main
+  - _openmp_mutex=5.1=1_gnu
+  - bzip2=1.0.8=h5eee18b_5
+  - ca-certificates=2024.3.11=h06a4308_0
+  - ld_impl_linux-64=2.38=h1181459_1
+  - libffi=3.4.4=h6a678d5_0
+  - libgcc-ng=11.2.0=h1234567_1
+  - libgomp=11.2.0=h1234567_1
+  - libstdcxx-ng=11.2.0=h1234567_1
+  - libuuid=1.41.5=h5eee18b_0
+  - ncurses=6.4=h6a678d5_0
+  - openssl=3.0.13=h7f8727e_0
+  - pip=23.3.1=py311h06a4308_0
+  - python=3.11.8=h955ad1f_0
+  - readline=8.2=h5eee18b_0
+  - setuptools=68.2.2=py311h06a4308_0
+  - sqlite=3.41.2=h5eee18b_0
+  - tk=8.6.12=h1ccaba5_0
+  - wheel=0.41.2=py311h06a4308_0
+  - xz=5.4.6=h5eee18b_0
+  - zlib=1.2.13=h5eee18b_0
+  - pip:
+      - anyio==4.3.0
+      - attrs==23.2.0
+      - autograd==1.6.2
+      - autograd-gamma==0.5.0
+      - baybe==0.8.2
+      - blinker==1.7.0
+      - bokeh==2.4.3
+      - botorch==0.10.0
+      - cattrs==23.2.3
+      - certifi==2024.2.2
+      - charset-normalizer==3.3.2
+      - click==8.1.7
+      - contourpy==1.2.1
+      - cycler==0.12.1
+      - dash==2.16.1
+      - dash-core-components==2.0.0
+      - dash-html-components==2.0.0
+      - dash-table==5.0.0
+      - datalab-api==0.2.1
+      - deprecated==1.2.14
+      - exceptiongroup==1.2.0
+      - filelock==3.13.4
+      - flask==3.0.3
+      - flask-login==0.6.3
+      - flask-sqlalchemy==3.1.1
+      - flask-wtf==1.2.1
+      - fonttools==4.51.0
+      - formulaic==1.0.1
+      - fsspec==2024.3.1
+      - funcy==2.0
+      - future==1.0.0
+      - googleapis-common-protos==1.63.0
+      - gpytorch==1.11
+      - grpcio==1.62.1
+      - h11==0.14.0
+      - httpcore==1.0.5
+      - httpx==0.27.0
+      - idna==3.7
+      - importlib-metadata==7.0.0
+      - interface-meta==1.3.0
+      - itsdangerous==2.1.2
+      - jaxtyping==0.2.28
+      - jinja2==3.1.3
+      - joblib==1.4.0
+      - kiwisolver==1.4.5
+      - lifelines==0.28.0
+      - linear-operator==0.5.1
+      - lxml==5.2.1
+      - markdown-it-py==3.0.0
+      - markupsafe==2.1.5
+      - matplotlib==3.8.4
+      - mdurl==0.1.2
+      - mordredcommunity==2.0.5
+      - mpmath==1.3.0
+      - multipledispatch==1.0.0
+      - nest-asyncio==1.6.0
+      - networkx==3.3
+      - ngboost==0.5.1
+      - numpy==1.26.4
+      - nvidia-cublas-cu12==12.1.3.1
+      - nvidia-cuda-cupti-cu12==12.1.105
+      - nvidia-cuda-nvrtc-cu12==12.1.105
+      - nvidia-cuda-runtime-cu12==12.1.105
+      - nvidia-cudnn-cu12==8.9.2.26
+      - nvidia-cufft-cu12==11.0.2.54
+      - nvidia-curand-cu12==10.3.2.106
+      - nvidia-cusolver-cu12==11.4.5.107
+      - nvidia-cusparse-cu12==12.1.0.106
+      - nvidia-nccl-cu12==2.19.3
+      - nvidia-nvjitlink-cu12==12.4.127
+      - nvidia-nvtx-cu12==12.1.105
+      - opentelemetry-api==1.24.0
+      - opentelemetry-exporter-otlp==1.24.0
+      - opentelemetry-exporter-otlp-proto-common==1.24.0
+      - opentelemetry-exporter-otlp-proto-grpc==1.24.0
+      - opentelemetry-exporter-otlp-proto-http==1.24.0
+      - opentelemetry-propagator-aws-xray==1.0.1
+      - opentelemetry-proto==1.24.0
+      - opentelemetry-sdk==1.24.0
+      - opentelemetry-sdk-extension-aws==2.0.1
+      - opentelemetry-semantic-conventions==0.45b0
+      - opt-einsum==3.3.0
+      - packaging==24.0
+      - pandas==2.2.2
+      - pillow==10.3.0
+      - plotly==5.20.0
+      - protobuf==3.20.3
+      - pydot==2.0.0
+      - pygments==2.17.2
+      - pyparsing==3.1.2
+      - pyro-api==0.1.2
+      - pyro-ppl==1.9.0
+      - python-dateutil==2.9.0.post0
+      - pytz==2024.1
+      - pyyaml==6.0.1
+      - rdkit==2023.9.5
+      - requests==2.31.0
+      - retrying==1.3.4
+      - rich==13.7.1
+      - scikit-learn==1.4.2
+      - scikit-learn-extra==0.3.0
+      - scipy==1.13.0
+      - setuptools-scm==8.0.4
+      - six==1.16.0
+      - sniffio==1.3.1
+      - sqlalchemy==2.0.29
+      - sympy==1.12
+      - tenacity==8.2.3
+      - threadpoolctl==3.4.0
+      - torch==2.2.2
+      - tornado==6.4
+      - tqdm==4.66.2
+      - triton==2.2.0
+      - typeguard==2.13.3
+      - typing-extensions==4.11.0
+      - tzdata==2024.1
+      - urllib3==2.2.1
+      - werkzeug==3.0.2
+      - wrapt==1.16.0
+      - wtforms==3.1.2
+      - zipp==3.18.1
+prefix: /home/bogosort/work/webBO/main/.venv

website/home_dash.py

@@ -59,16 +59,26 @@ def view_experiment(expt_name):
 
     variable_list = list(data.columns)
     target_column_name = variable_list[int(expt_info.target)]
+    print(df)
+    print(type(df['iteration']))
+    for row in df['iteration']:
+        print(type(row))
 
     if len(recs.columns) < 1:
         fig = go.Figure([
             go.Scatter(x=list(data['iteration']), y=list(data[list(data.columns)[int(expt_info.target)]])),
             ])
-    else:
+
+    elif False:
         fig = go.Figure([
             go.Scatter(x=list(data['iteration']), y=list(data[list(data.columns)[int(expt_info.target)]])),
             go.Scatter(x=list(recs['iteration']), y=list(recs[list(recs.columns)[int(expt_info.target)]]), name='predicted measurements'),
         ])
+    else:
+        fig = go.Figure([
+            go.Scatter(x=df['iteration'], y=df[list(data.columns)[int(expt_info.target)]]),
+        ])
+
     fig.update_layout(
         xaxis_title="iteration",
         yaxis_title=f"{target_column_name}",
@@ -77,7 +87,8 @@ def view_experiment(expt_name):
             family="Courier New, monospace",
             size=18,
             color="RebeccaPurple"
-        )
+        ),
+        autotypenumbers='convert types'
     )
 
     graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

website/templates/home.html

@@ -33,53 +33,34 @@ <h5>To help you get familiar with all that Web-BO has to offer, we provide an op
                             <div class="container">
                                 <div class="col">
                                     <figure class="figure">
-                                        <img src="{{ url_for('static', filename='reizman_suzuki_image.png') }}"
-                                            class="img-fluid">
+                                        <img src="{{ url_for('static', filename='reizman_reaction.png') }}"
+                                            class="img-fluid" style="height: 75%">
                                         <figcaption class="figure-caption">Figure 1. Suzuki-Miyaura cross-coupling
-                                            reaction
-                                            optimization scheme. Figure adapted from <a
-                                                href="https://pubs.rsc.org/en/content/articlelanding/2016/re/c6re00153j"
-                                                class="tooltip-test" title="Tooltip">Reizman, et al. 2016 </a>
+                                            reaction involved in this case study.
+                                        </figcaption>
+                                    </figure>
+                                    </br>
+                                    <p>The parameter space involved in this optimisation task is detailed in Figure 2.
+                                    </p>
+                                    <figure class="figure">
+                                        <img src="{{ url_for('static', filename='parameter_space.png') }}"
+                                            class="img-fluid" style="height: 75%">
+                                        <figcaption class="figure-caption">Figure 2. Parameter space spanned by this
+                                            case study includes 3 continuous variables (catalyst loading, temperature,
+                                            and residence time) and 1 categorical variable (catalyst).
+                                        </figcaption>
+                                    </figure>
+                                    </br>
+                                    <p>The catalyst options are presented in Figure 3.</p>
+                                    <figure class="figure">
+                                        <img src="{{ url_for('static', filename='catalyst_options.png') }}"
+                                            class="img-fluid" style="height: 75%">
+                                        <figcaption class="figure-caption">Figure 3. The catalyst options included in
+                                            this study.
                                         </figcaption>
                                     </figure>
                                 </div>
                             </div>
-                            <p>The parameter space is
-                                comprised of:</p>
-                            <table class="table">
-                                <tbody>
-                                    <tr class="table-primary">
-                                        <td>variable</td>
-                                        <td>variable type</td>
-                                        <td>parameter space</td>
-                                    </tr>
-                                    <tr>
-                                        <td>precatalyst scaffold (P)</td>
-                                        <td>categorical</td>
-                                        <td>[shown in Figure 1]</td>
-                                    </tr>
-                                    <tr>
-                                        <td>ligand (L)</td>
-                                        <td>categorial</td>
-                                        <td>[shown in Figure 1]</td>
-                                    </tr>
-                                    <tr>
-                                        <td>catalyst loading</td>
-                                        <td>continuous</td>
-                                        <td>0.5 - 2.5 %</td>
-                                    </tr>
-                                    <tr>
-                                        <td>T (temperature)</td>
-                                        <td>continuous</td>
-                                        <td>30 - 110 <sup>o</sup>C</td>
-                                    </tr>
-                                    <tr>
-                                        <td>t<sub>res</sub> (reaction time)</td>
-                                        <td>continuous</td>
-                                        <td>1 - 10 min.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
                             <p>
                                 This case study takes advantage of the experiment emulators offered by the <a
                                     href="https://github.com/sustainable-processes/summit" class="tooltip-test"
@@ -92,8 +73,9 @@ <h5>To help you get familiar with all that Web-BO has to offer, we provide an op
                                 Dataset features!</p>
                         </div>
                         <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-dismiss="modal"
-                                onClick="addSampleDataset()">Close</button>
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            <button type="button" class="btn btn-info" data-dismiss="modal"
+                                onClick="addSampleDataset()">Add dataset!</button>
                         </div>
                     </div>
                 </div>

website/templates/view_dataset.html

@@ -17,17 +17,35 @@ <h3>Let's explore the data, and create your first optimization experiment!</h3>
     <h5>Recall, this case study concerns optimizing the coupling of 3-bromoquinoline with
         3,5-dimethylisoxazole-4-boronic acid pinacol ester in the presence of
         1,8-diazobicyclo[5.4.0]undec-7-ene (DBU) and THF/water, Figure 1. </h5>
+    </br>
     <div class="container">
-        <div class="col">
-            <figure class="figure">
-                <img src="{{ url_for('static', filename='reizman_suzuki_image.png') }}" class="img-fluid">
-                <figcaption class="figure-caption">Figure 1. Suzuki-Miyaura cross-coupling
-                    reaction
-                    optimization scheme. Figure adapted from <a
-                        href="https://pubs.rsc.org/en/content/articlelanding/2016/re/c6re00153j" class="tooltip-test"
-                        title="Tooltip">Reizman, et al. 2016 </a>
-                </figcaption>
-            </figure>
+        <div class="row">
+            <div class="col">
+                <figure class="figure">
+                    <h3>Optimisation reaction</h3>
+                    <img src="{{ url_for('static', filename='reizman_reaction.png') }}" class="img-fluid">
+                    <figcaption class="figure-caption">Figure 1. The Suzuki-Miyaura cross-coupling
+                        reaction of this case study.
+                    </figcaption>
+                    </br>
+                    <h3>Parameter space</h3>
+                    <img src="{{ url_for('static', filename='parameter_space.png') }}" class="img-fluid">
+                    <figcaption class="figure-caption">Figure 2. The parameter space spanned by this
+                        case study includes 3 continuous variables (catalyst loading, temperature,
+                        and residence time) and 1 categorical variable (catalyst).
+                    </figcaption>
+                    </br>
+                </figure>
+            </div>
+            <div class="col">
+                <figure class="figure">
+                    <h3>Catalyst options</h3>
+                    <img src="{{ url_for('static', filename='catalyst_options.png') }}" class="img-fluid">
+                    <figcaption class="figure-caption">Figure 3. The catalyst options included in
+                        this study.
+                    </figcaption>
+                </figure>
+            </div>
         </div>
     </div>
     </br>