Merge pull request #50 from questionlp/develop

Materialize to Bootstrap Migration, Update Plotly.js version

.gitignore

@@ -1,3 +1,9 @@
+# Ignore SCSS backup
+scss.bak/
+
+# Ignore CSS source maps
+app/static/css/*.css.map
+
 # Ignore venv directory
 venv/
 
@@ -13,6 +19,7 @@ uwsgi.service
 
 # Ignore local log directory
 _log/*
+_log/*
 
 # Ignore robots.txt
 app/static/robots.txt
@@ -35,12 +42,12 @@ __pycache__/
 *.py[cod]
 *$py.class
 
-# Ruff
-.ruff_cache
-
 # C extensions
 *.so
 
+# Ruff
+.ruff_cache
+
 # Distribution / packaging
 .Python
 build/
@@ -153,3 +160,152 @@ dmypy.json
 .venv/
 
 # End of https://www.gitignore.io/api/python
+
+
+### Sass ###
+.sass-cache
+
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "scss"]
+	path = scss
+	url = https://github.com/questionlp/wwdtm-theme.git

.pylintrc

@@ -0,0 +1,2 @@
+[design]
+max-locals = 20

.vscode/settings.json

@@ -7,9 +7,6 @@
             "source.fixAll": "explicit",
             "source.sortImports": "explicit",
         },
-        "editor.defaultFormatter": "ms-python.black-formatter",
-    },
-    "pylint.args": [
-        "--disable=C0206"
-    ],
+        "editor.defaultFormatter": "ms-python.black-formatter"
+    }
 }

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changes
 
+## 3.0.0
+
+### Application Changes
+
+- Frontend code refactor due to switching from Materialize to Bootstrap
+  - Replacing Materialize frontend toolkit with Bootstrap
+  - Replacing Materialize Icons with Bootstrap Icons
+  - Refactor the frontend structure to use Bootstrap frontend components and conventions
+  - Include the required IBM Plex web fonts with the application to remove use of Google Fonts
+- User interface changes
+  - Change the behavior of the main navigation to combine navigation links into a single list that are listed in the top navbar on `xl` screen size or in an off-canvas side nav on smaller screens
+  - Improve legibility and readability in font size changes and increased color contrast when using the dark mode color theme
+  - Include a color theme toggle in the main navigation to allow the reader to switch the theme on-the-fly
+    - **Note**: When switching color themes on a page that contains a chart, you will need to reload the page in order to render the chart in a matching color theme.
+- Fix warnings and errors reported by pylint
+- Add an experimental `block_ai_scrapers` config key that will block known AI scraping and crawling bots (default: false)
+- Cleanup configuration processing code
+
+### Component Changes
+
+- Upgrade gunicorn from 22.0.0 to 23.0.0
+- Replace Materialize CSS 1.2.2 with Bootstrap 5.3.3
+  - Existing Materialize CSS and JS files will be preserved to prevent cached versions of the application from breaking
+  - Materialize-related files will be removed in a future minor release
+- Upgrade Plotly.js from 2.25.2 to 2.28.0 (stable) and from 2.28.0 to 2.35.0 (latest)
+
 ## 2.10.1
 
 ### Application Changes

README.md

@@ -31,6 +31,8 @@ If you would like to help sponsor the continued development and maintenance of t
 
 ## License
 
-This web application is licensed under the terms of the [Apache License 2.0](./LICENSE).
+This web application is licensed under the terms of the [Apache License 2.0](./LICENSE), unless otherwise noted.
 
-Original version of the Apache License 2.0 can also be found at: <http://www.apache.org/licenses/LICENSE-2.0>.
+[Bootstrap](https://github.com/twbs/bootstrap) and [Bootstrap Icons](https://github.com/twbs/icons) are both licensed under the terms of the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE).
+
+[IBM Plex](https://github.com/IBM/plex/) is licensed under the terms of the [SIL Open Font License Version 1.1](https://github.com/IBM/plex/blob/master/LICENSE.txt).

app/__init__.py

@@ -66,12 +66,18 @@ def create_app():
     app.jinja_env.globals["github_sponsor_url"] = _config["settings"].get(
         "github_sponsor_url", ""
     )
-    app.jinja_env.globals["use_latest_plotly"] = _config["settings"][
-        "use_latest_plotly"
-    ]
-    app.jinja_env.globals["use_decimal_scores"] = _config["settings"][
-        "use_decimal_scores"
-    ]
+    app.jinja_env.globals["use_latest_plotly"] = bool(
+        _config["settings"].get("use_latest_plotly", False)
+    )
+    app.jinja_env.globals["block_ai_scrapers"] = bool(
+        _config["settings"].get("block_ai_scrapers", False)
+    )
+    app.jinja_env.globals["use_minified_css"] = bool(
+        _config["settings"].get("use_minified_css", False)
+    )
+    app.jinja_env.globals["use_decimal_scores"] = bool(
+        _config["settings"].get("use_decimal_scores", False)
+    )
 
     # Check to see if panelistscore_decimal column exists and set a flag
     app.config["app_settings"]["has_decimal_scores_column"] = (

app/config.py

@@ -17,6 +17,7 @@ def load_config(
     connection_pool_name: str = "wwdtm_graphs",
     app_time_zone: str = "UTC",
 ) -> dict[str, dict[str, Any]]:
+    """Read configuration and database settings."""
     _config_file_path = Path(config_file_path)
     with _config_file_path.open(mode="r", encoding="utf-8") as config_file:
         app_config = json.load(config_file)
@@ -58,15 +59,6 @@ def load_config(
     settings_config["time_zone"] = time_zone_string
     database_config["time_zone"] = time_zone_string
 
-    # Read in setting on whether to use latest included version of Plotly JS
-    settings_config["use_latest_plotly"] = bool(
-        settings_config.get("use_latest_plotly", False)
-    )
-    # Read in setting on whether to use decimal scores
-    settings_config["use_decimal_scores"] = bool(
-        settings_config.get("use_decimal_scores", False)
-    )
-
     return {
         "database": database_config,
         "settings": settings_config,

app/errors/handlers.py

@@ -16,4 +16,4 @@ def not_found(error) -> tuple[str, Literal[404]]:
 
 def handle_exception(error) -> tuple[str, Literal[500]]:
     """Handle exceptions in a slightly more graceful manner."""
-    return render_template("errors/500.html"), 500
+    return render_template("errors/500.html", error=error), 500

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

@@ -1,50 +1,49 @@
 {% extends "base.html" %}
-{% set page_title = "Aggregate Scores" %}
-{% block title %}{{ page_title }} | Panelists{% endblock %}
+{% block title %}Aggregate Scores | Panelists{% endblock %}
 
 {% block content %}
-<div class="page-breadcrumb hide-on-small-only">
-    <ul>
-        <li>
-            <a href="{{ url_for('main.index') }}">Home</a>
-        </li>
-        <li>
-            <a href="{{ url_for('panelists.index') }}">Panelists</a>
-        </li>
-        <li>
-            {{ page_title }}
-        </li>
-    </ul>
-</div>
+<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>
+    </ol>
+</nav>
 
-<h1>{{ page_title }}</h1>
+<h2>Aggregate Scores</h2>
 
 {% if aggregate_scores.scores %}
 <p>
     This chart displays the score breakdown for all panelists scores.
 </p>
 
-<div id="ww-chart"></div>
+<div class="info py-2">
+    <div id="ww-chart"></div>
+</div>
 
 <script>
     // Set default colors
-    let axisColor = "#212121";
+    let axisColor = "#000";
     let backgroundColor = "#fff";
+    let markerColor = "#0043ce";
     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 = "#f5f5f5";
-        backgroundColor = "#202124";
+        axisColor = "#fff";
+        backgroundColor = "#161616";
+        markerColor = "#78a9ff";
     }
 
     let data = [
         {
-            x: {{ aggregate_scores.scores|safe }},
-            y: {{ aggregate_scores.counts|safe }},
+            x: {{ aggregate_scores.scores | safe }},
+            y: {{ aggregate_scores.counts | safe }},
             name: "Count",
             showlegend: true,
-            type: "bar"
+            type: "bar",
+            marker: {
+                color: markerColor
+            }
         }
     ];
 
@@ -81,7 +80,7 @@ <h1>{{ page_title }}</h1>
                 color: axisColor,
                 size: 20
             },
-            text: "{{ page_title }} Breakdown"
+            text: "Aggregate Scores Breakdown"
         },
         xaxis: {
             color: axisColor,