Merge pull request #59 from questionlp/develop

Update Plotly.js v2, add Plotly.js v3 support and config flag, update and standardize colorways, fix missing page titles

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changes
 
+## 3.3.0
+
+### Application Changes
+
+- Replace the `use_latest_plotly` application configuration setting with `use_plotly_v3` to set the version of Plotly.js to use in the application. The default value is `false`.
+- Remove the `stable` and `latest` labels from Plotly.js versions. See "Component Changes" for more information.
+- Change the color scale for both "Monthly Aggregate Score" and "Monthly Average Score" heatmaps to provide more contrast across the range.
+  - Use different color scales for "Monthly Aggregate Score" and "Monthly Average Score" heatmaps due to the former having an order of magnitude large scale.
+- Standardize on colors from the [IBM Design Language](https://www.ibm.com/design/language/color/) for chart colorways.
+- Add missing page titles on various pages.
+- Standardize use of `page_title` variable across all Panelists and Shows pages.
+
+### Component Changes
+
+- Upgrade Plotly.js versions and introduce Plotly.js 3.0.0-rc.1
+  - Plotly.js v2.x has been upgraded from 2.28.0 (formerly labeled `stable`) and 2.35.0 (formerly labeled `latest`) to 2.35.2
+    - Both `plotly-latest.min.js` and `plotly-stable.min.js` symlinks will point to `plotly.min.js`, which in turn points to 2.35.2
+  - Setting `use_plotly_v3` to `true` will use 3.0.0-rc.1
+  - Previous versions of the Plotly.js files remain under `app/static/js` for the time being and will be removed in a future release
+
 ## 3.2.2
 
 ### Application Changes

app/__init__.py

@@ -63,8 +63,8 @@ def create_app():
     app.jinja_env.globals["github_sponsor_url"] = _config["settings"].get(
         "github_sponsor_url", ""
     )
-    app.jinja_env.globals["use_latest_plotly"] = bool(
-        _config["settings"].get("use_latest_plotly", False)
+    app.jinja_env.globals["use_plotly_v3"] = bool(
+        bool(_config["settings"].get("use_plotly_v3", False))
     )
     app.jinja_env.globals["block_ai_scrapers"] = bool(
         _config["settings"].get("block_ai_scrapers", False)

app/config.py

@@ -34,13 +34,14 @@ def load_config(
         use_pool = database_config.get("use_pool", False)
 
         if use_pool:
-            pool_name = database_config.get("pool_name", connection_pool_name)
-            pool_size = database_config.get("pool_size", connection_pool_size)
-            if pool_size < connection_pool_size:
-                pool_size = connection_pool_size
+            pool_name: str = str(database_config.get("pool_name", connection_pool_name))
+            pool_size: int = int(database_config.get("pool_size", connection_pool_size))
+            # if pool_size < connection_pool_size:
+            #    pool_size = connection_pool_size
+            _pool_size = max(pool_size, connection_pool_size)
 
             database_config["pool_name"] = pool_name
-            database_config["pool_size"] = pool_size
+            database_config["pool_size"] = _pool_size
             del database_config["use_pool"]
         else:
             if "pool_name" in database_config:

app/panelists/templates/panelists/aggregate-scores/graph.html

@@ -1,15 +1,16 @@
 {% extends "base.html" %}
-{% block title %}Aggregate Scores | Panelists{% endblock %}
+{% set page_title="Aggregate Scores Breakdown" %}
+{% block title %}{{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item active" aria-current="page">Aggregate Scores</li>
+        <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
     </ol>
 </nav>
 
-<h2>Aggregate Scores</h2>
+<h2>{{ page_title }}</h2>
 
 {% if aggregate_scores.scores %}
 <p>
@@ -24,14 +25,14 @@ <h2>Aggregate Scores</h2>
     // Set default colors
     let axisColor = "#000";
     let backgroundColor = "#fff";
-    let markerColor = "#0043ce";
+    let markerColor = "#0043ce";    // IBM Blue 70
     let fontList = "'IBM Plex Sans', 'Helvetica Neue', sans-serif";
 
     // Change colors if in dark mode
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         axisColor = "#fff";
-        backgroundColor = "#161616";
-        markerColor = "#78a9ff";
+        backgroundColor = "#161616";    // IBM Gray 100
+        markerColor = "#78a9ff";    // IBM Blue 40
     }
 
     let data = [
@@ -80,7 +81,7 @@ <h2>Aggregate Scores</h2>
                 color: axisColor,
                 size: 20
             },
-            text: "Aggregate Scores Breakdown"
+            text: "{{ page_title }}"
         },
         xaxis: {
             color: axisColor,

app/panelists/templates/panelists/appearances-by-year/details.html

@@ -1,17 +1,17 @@
 {% extends "base.html" %}
 {% set page_title = "Appearances by Year" %}
-{% block title %}{{ info.name }} | Appearances by Year | Panelists{% endblock %}
+{% block title %}{{ info.name }} | {{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item"><a href="{{ url_for('panelists.appearances_by_year') }}">Appearances by Year</a></li>
+        <li class="breadcrumb-item"><a href="{{ url_for('panelists.appearances_by_year') }}">{{ page_title }}</a></li>
         <li class="breadcrumb-item active" aria-current="page">{{ info.name }}</li>
     </ol>
 </nav>
 
-<h2>{{ info.name }}</h2>
+<h2>{{ page_title }}: {{ info.name }}</h2>
 
 {% if years %}
 <p>
@@ -28,14 +28,14 @@ <h2>{{ info.name }}</h2>
     // Set default colors
     let axisColor = "#000";
     let backgroundColor = "#fff";
-    let markerColor = "#0043ce";
+    let markerColor = "#0043ce";    // IBM Blue 70
     let fontList = "'IBM Plex Sans', 'Helvetica Neue', sans-serif";
 
     // Change colors if in dark mode
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         axisColor = "#fff";
-        backgroundColor = "#161616";
-        markerColor = "#78a9ff";
+        backgroundColor = "#161616";    // IBM Gray 100
+        markerColor = "#78a9ff";    // IBM Blue 40
     }
 
     // Set y-axis dtick value
@@ -92,7 +92,7 @@ <h2>{{ info.name }}</h2>
                 color: axisColor,
                 size: 20
             },
-            text: "{{ page_title }} for {{ info.name | safe }}"
+            text: "{{ page_title }}: {{ info.name | safe }}"
         },
         xaxis: {
             color: axisColor,

app/panelists/templates/panelists/appearances-by-year/index.html

@@ -1,15 +1,16 @@
 {% extends "base.html" %}
-{% block title %}Appearances by Year | Panelists{% endblock %}
+{% set page_title="Appearances by Year" %}
+{% block title %}{{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item active" aria-current="page">Appearances by Year</li>
+        <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
     </ol>
 </nav>
 
-<h2>Appearances by Year</h2>
+<h2>{{ page_title }}</h2>
 <p>
     Choose from one of the panelists below to view a chart displaying
     the number of appearances broken down by year.

app/panelists/templates/panelists/index.html

@@ -1,14 +1,15 @@
 {% extends "base.html" %}
-{% block title %}Panelists{% endblock %}
+{% set page_title="Panelists" %}
+{% block title %}{{ page_title }}{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
-        <li class="breadcrumb-item active" aria-current="page">Panelists</li>
+        <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
     </ol>
 </nav>
 
-<h2>Panelists</h2>
+<h2>{{ page_title }}</h2>
 <p>
     Choose from one of the following graph types to get a list of available
     panelists.
@@ -18,7 +19,7 @@ <h2>Panelists</h2>
     <div class="pages">
         <ul class="list-group page-list">
             <li class="list-group-item">
-                <a href="{{ url_for('panelists.aggregate_scores') }}">Aggregate Scores</a>
+                <a href="{{ url_for('panelists.aggregate_scores') }}">Aggregate Scores Breakdown</a>
             </li>
             <li class="list-group-item">
                 <a href="{{ url_for('panelists.appearances_by_year') }}">Appearances by Year</a>

app/panelists/templates/panelists/score-breakdown/details.html

@@ -1,16 +1,17 @@
 {% extends "base.html" %}
-{% block title %}{{ info.name }} | Score Breakdown | Panelists{% endblock %}
+{% set page_title="Score Breakdown" %}
+{% block title %}{{ info.name }} | {{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item"><a href="{{ url_for('panelists.score_breakdown') }}">Score Breakdown</a></li>
+        <li class="breadcrumb-item"><a href="{{ url_for('panelists.score_breakdown') }}">{{ page_title }}</a></li>
         <li class="breadcrumb-item active" aria-current="page">{{ info.name }}</li>
     </ol>
 </nav>
 
-<h2>{{ info.name }}</h2>
+<h2>{{ page_title}}: {{ info.name }}</h2>
 
 {% if scores %}
 <p>
@@ -28,14 +29,14 @@ <h2>{{ info.name }}</h2>
     // Set default colors
     let axisColor = "#000";
     let backgroundColor = "#fff";
-    let markerColor = "#0043ce";
+    let markerColor = "#0043ce";    // IBM Blue 70
     let fontList = "'IBM Plex Sans', 'Helvetica Neue', sans-serif";
 
     // Change colors if in dark mode
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         axisColor = "#fff";
-        backgroundColor = "#161616";
-        markerColor = "#78a9ff";
+        backgroundColor = "#161616";    // IBM Gray 100
+        markerColor = "#78a9ff";    // IBM Blue 40
     }
 
     // Set y-axis dtick value
@@ -92,7 +93,7 @@ <h2>{{ info.name }}</h2>
                 color: axisColor,
                 size: 20
             },
-            text: "Score Breakdown for {{ info.name | safe }}"
+            text: "{{ page_title }}: {{ info.name | safe }}"
         },
         xaxis: {
             color: axisColor,

app/panelists/templates/panelists/score-breakdown/index.html

@@ -1,15 +1,16 @@
 {% extends "base.html" %}
-{% block title %}Score Breakdown | Panelists{% endblock %}
+{% set page_title="Score Breakdown" %}
+{% block title %}{{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item active" aria-current="page">Score Breakdown</li>
+        <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
     </ol>
 </nav>
 
-<h2>Score Breakdown</h2>
+<h2>{{ page_title }}</h2>
 <p>
     Choose from one of the panelists below to view a chart displaying a
     breakdown of their scores.

app/panelists/templates/panelists/scores-by-appearance/details.html

@@ -1,16 +1,17 @@
 {% extends "base.html" %}
-{% block title %}{{ info.name }} | Scores by Appearance | Panelists{% endblock %}
+{% set page_title="Scores by Appearance" %}
+{% block title %}{{ info.name }} | {{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item"><a href="{{ url_for('panelists.scores_by_appearance') }}">Scores by Appearance</a></li>
+        <li class="breadcrumb-item"><a href="{{ url_for('panelists.scores_by_appearance') }}">{{ page_title }}</a></li>
         <li class="breadcrumb-item active" aria-current="page">{{ info.name }}</li>
     </ol>
 </nav>
 
-<h2>Scores by Appearance</h2>
+<h2>{{ page_title }}: {{ info.name }}</h2>
 
 {% if shows and scores %}
 <p>
@@ -27,14 +28,14 @@ <h2>Scores by Appearance</h2>
     // Set default colors
     let axisColor = "#000";
     let backgroundColor = "#fff";
-    let markerColor = "#0043ce";
+    let markerColor = "#0043ce";    // IBM Blue 70
     let fontList = "'IBM Plex Sans', 'Helvetica Neue', sans-serif";
 
     // Change colors if in dark mode
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         axisColor = "#fff";
-        backgroundColor = "#161616";
-        markerColor = "#78a9ff";
+        backgroundColor = "#161616";    // IBM Gray 100
+        markerColor = "#78a9ff";    // IBM Blue 40
     }
 
     let data = [
@@ -83,7 +84,7 @@ <h2>Scores by Appearance</h2>
                 color: axisColor,
                 size: 20
             },
-            text: "Scores by Appearance for {{ info.name | safe }}"
+            text: "{{ page_title }}: {{ info.name | safe }}"
         },
         xaxis: {
             color: axisColor,

app/panelists/templates/panelists/scores-by-appearance/index.html

@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 {% set page_title = "Scores by Appearance" %}
-{% block title %}Scores by Appearance | Panelists{% endblock %}
+{% block title %}{{ page_title }} | Panelists{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('panelists.index') }}">Panelists</a></li>
-        <li class="breadcrumb-item active" aria-current="page">Scores by Appearance</li>
+        <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
     </ol>
 </nav>
 
-<h2>Scores by Appearance</h2>
+<h2>{{ page_title }}</h2>
 <p>
     Choose from one of the panelists below to view a chart displaying
     their scores for each of their appearances (excluding Best Of and repeat

app/shows/templates/shows/all-scores/details.html

@@ -1,17 +1,17 @@
 {% extends "base.html" %}
 {% set page_title = "All Scores" %}
-{% block title %}{{ year }} | All Scores | Shows{% endblock %}
+{% block title %}{{ year }} | {{ page_title }} | Shows{% endblock %}
 
 {% block content %}
 <nav aria-label="breadcrumb" id="nav-breadcrumb">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('shows.index') }}">Shows</a></li>
-        <li class="breadcrumb-item"><a href="{{ url_for('shows.all_scores') }}">All Scores</a></li>
+        <li class="breadcrumb-item"><a href="{{ url_for('shows.all_scores') }}">{{ page_title }}</a></li>
         <li class="breadcrumb-item active" aria-current="page">{{ year }}</li>
     </ol>
 </nav>
 
-<h2>{{ page_title }} for {{ year }}</h2>
+<h2>{{ page_title }}: {{ year }}</h2>
 
 {% if shows %}
 <p>
@@ -28,20 +28,20 @@ <h2>{{ page_title }} for {{ year }}</h2>
     let axisColor = "#000";
     let backgroundColor = "#fff";
     let colorway = [
-        "#0043ce",
-        "#ff7f0e",
-        "#525252"
+        "#0043ce",  // IBM Blue 70
+        "#ff832b",  // IBM Alert 40
+        "#525252"   // IBM Gray 70
     ];
     let fontList = "'IBM Plex Sans', 'Helvetica Neue', sans-serif";
 
     // Change colors if in dark mode
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         axisColor = "#fff";
-        backgroundColor = "#161616";
+        backgroundColor = "#161616";    // IBM Gray 100
         colorway = [
-            "#78a9ff",
-            "#ff7f0e",
-            "#f4f4f4"
+            "#78a9ff",  // IBM Blue 40
+            "#ff832b",  // IBM Alert 40
+            "#f4f4f4"   // IBM Gray 10
         ];
     }
 
@@ -104,7 +104,7 @@ <h2>{{ page_title }} for {{ year }}</h2>
                 color: axisColor,
                 size: 20
             },
-            text: "All Scores for {{ year }}"
+            text: "{{ page_title }}: {{ year }}"
         },
         xaxis: {
             color: axisColor,