Merge pull request #11 from dwave-examples/demo_v2

Demo v2

Author: gunnarmiller

.gitignore

@@ -1,4 +1,9 @@
 *.DS_Store
 __pycache__
 cache
-assets/__generated_theme.css
+tests/class_tests/blockchain_test/*
+tests/class_tests/score_tree_test/*
+venv/
+.venv/
+env/
+.env/

README.md

@@ -1,4 +1,4 @@
-# Copyright 2024 D-Wave
+# Copyright 2026 D-Wave
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,15 +17,8 @@
 import argparse
 
 import dash
-import diskcache
-from dash import DiskcacheManager
-
-from demo_configs import APP_TITLE
-from demo_interface import create_interface
 import dash_mantine_components as dmc
-
-# Essential for initializing callbacks. Do not remove.
-import demo_callbacks
+import diskcache
 
 # Fix Dash long callbacks crashing on macOS 10.13+ (also potentially not working
 # on other POSIX systems), caused by https://bugs.python.org/issue33725
@@ -35,6 +28,12 @@
 # the `multiprocessing` library, but its fork, `multiprocess` still hasn't caught up.
 # (see docs: https://docs.python.org/3/library/multiprocessing.html#contexts-and-start-methods)
 import multiprocess
+from dash import DiskcacheManager
+
+# Essential for initializing callbacks. Do not remove.
+import demo_callbacks
+from demo_configs import APP_TITLE
+from demo_interface import create_interface
 
 if multiprocess.get_start_method(allow_none=True) is None:
     multiprocess.set_start_method("spawn")

app.py

@@ -38,7 +38,7 @@ Dash reads all css files contained in `/assets/` so no imports are necessary.
     --box-shadow: 0 0 1rem rgba(66, 82, 121, 0.2);
     --font: "proxima-nova", "Helvetica Neue", sans-serif;
     --banner-height: 3.5rem;
-    --left-col-width: 26.25rem;
+    --left-col-width: 25rem;
     --problem-details-height: 11.25rem;
     /*** Add new variables here ***/
 }

assets/__demo_variables.css

@@ -20,25 +20,178 @@ The following style rules can be altered or removed and any additional
 custom CSS can be added below.
 *******************************************************************/
 
-.tab-content-wrapper {
-    padding: 2rem 2rem 0;
+#button-group {
+    margin-top: 2.5rem;
+}
+
+#pause-button {
+    width: 100%;
+}
+
+#reset-button,
+#pause-button {
+    background-color: var(--red-light);
+}
+
+#reset-button:hover,
+#pause-button:hover {
+    background-color: var(--red-dark);
+}
+
+#reset-resume-buttons {
+    display: flex;
+}
+
+#reset-resume-buttons button {
+    width: 100%;
+}
+
+#reset-resume-buttons button:first-child {
+    margin-right: 0.25rem;
+}
+
+#reset-resume-buttons button:last-child {
+    margin-left: 0.25rem;
+}
+
+#miner-table-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: large;
+    width: 100%
+}
+
+#miner-status-table {
+    margin: 0 auto 2rem;
+    width: 100%;
+    background-color: white;
+    display: inline-block;
+    overflow-y: auto;
+    max-height: calc(50vw - var(--left-col-width)/2);
+}
+
+#miner-status-table th,
+#miner-status-table td {
+    padding: 0.15rem 0.5rem;
+    border: 1px solid var(--grey-medium);
+    white-space: nowrap;
+}
+
+#miner-status-table td:first-child {
+    font-weight: bold;
+}
+
+#miner-status-table td.mined-cell {
+    background-color: black;
+    color: white;
+}
+
+#miner-status-table td.validated-cell {
+    background-color: hsl(213, 75%, 80%);
+}
+
+#miner-status-table td.rejected-cell {
+    background-color: hsl(25, 89%, 73%);
+}
+
+#miner-status-table thead {
+    background-color: var(--blue-dark);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+#miner-status-table th {
+    font-weight: 600;
+    color: white;
+    font-size: 1.125rem;
+    text-align: left;
+    border: 1px solid var(--blue-dark);
+}
+
+#intro-text,
+#prelim-text,
+#loading-text {
+    text-align: center;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    height: 100%;
+    justify-content: center;
+}
+
+.right-column {
+    padding: 2rem;
+}
+
+.graph-loading {
+    height: 100%;
+}
+
+.graph-loading .graph-loading > div:not(.display-none) {
     height: 100%;
 }
 
-.input, .results {
+.graph-table-wrapper {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 100%;
+    margin-top: 1rem;
+}
+
+.graph-table-wrapper > div:first-child {
+    height: calc(50vw - var(--left-col-width)/2);
+    width: calc(50vw - var(--left-col-width)/2);
+    margin-right: 2rem;
+    position: relative;
+}
+
+.graph-legend {
+    position: absolute;
+    bottom: 2px;
+    left: 0.75rem;
+}
+
+.graph-legend p {
+    margin: 0.125rem 0;
+    font-size: 0.875rem;
+    font-weight: bold;
+}
+
+.graph-legend span {
+    border-radius: 50%;
+    height: 1rem;
+    width: 1rem;
+    margin-right: 0.5rem;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.graph-legend p:last-child span {
+    border: 4px solid;
+}
+
+.graph-wrapper {
+    width: 100%;
     height: 100%;
 }
 
-.problem-details-table {
-    width: 15.5rem;
+#miner-graph-and-table {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#miner-graph-and-table .dropdown-wrapper {
+    display: inline-block;
+    width: 12rem;
+    margin-right: 1rem;
+}
+
+#miner-graph-and-table > div:first-child {
+    display: flex;
+    align-items: center;
 }
 
-  /****************************/
- /*** CUSTOM CSS GOES HERE ***/
-/****************************/
+#block-status {
+    font-style: italic;
+    margin-bottom: 0;
+}