Patches for upcoming 2.3.0 (#38)

* Sphinx docs for upcoming 2.3.0

- [x] Docs: Favicon, logo, etc
- [x] Docs: Web app section
- [x] Docs: Reference internal links for all pages (for crosslinks)
- [x] Docs: Sphinx lightbox for images
- [x] Docs: General prep
- [x] Docs: Add training to API reference section

* Patches for upcoming 2.3.0

- [x] Labeller: Changed some zustrand state to better account for original and edited sentence workflow
- [x] Labeller: Fixed drawer background and foreground colors to match app-wide color scheme
- [x] Labeller: Better visual indicators for items edited or removed
- [x] Labeller: Refactored editing to warn user in different scenarios where edits could be lost
- [x] Parser: Missed the USDA anchor links on Foundation Foods
- [x] Labeller: Upload bulk did not account for removed entries (if user chose any for removeal)
- [x] General: Moved static data lists to collections
- [x] General: Dropped MantineExtensions in favor of Shared directory
- [x] General: Webtools README

* Biome and sphinx cleanup

* Make separate_name=true default in webtools parser.

---------

Co-authored-by: Tom Strange <tpstrange@gmail.com>

Author: mcioffi

README.md

@@ -2,7 +2,7 @@
 
 The Ingredient Parser package is a Python package for parsing structured information out of recipe ingredient sentences.
 
-![](docs/source/_static/logo.png)
+![](docs/source/_static/logos/logo_wide.png)
 
 ## Documentation
 
@@ -61,41 +61,28 @@ Word-level results:
 
 **Basic**
 
-The development dependencies are in the `requirements-dev.txt` file. Details on the training process can be found in the [Model Guide](https://ingredient-parser.readthedocs.io/en/latest/guide/index.html) documentation.
+Train and fine-tune new ingredient datasets to expand beyond the existing trained model provided in the library. The development dependencies are in the `requirements-dev.txt` file. Details on the training process can be found in the [Model Guide](https://ingredient-parser.readthedocs.io/en/latest/guide/index.html) documentation.
 
-Before committing anything, install [pre-commit](https://pre-commit.com/) and run
-```
-pre-commit install
-```
+**Web App**
 
-to install the pre-commit hooks.
+The ingredient parser library provides a convenient web interface that you can run locally to access most of the library's functionality, including using the parser, browsing the database, labelling entries, and training the model(s). View the [specific README](webtools/README.md) in webtools for a detailed overview.
 
-**Web app**
+| Parser | Labeller | Trainer |
+| :------- | :------- | :------- |
+| ![Screen shot of web parser](docs/source/_static/webtools/app.parser.screenshot.png)     | ![Screen shot of web labeller](docs/source/_static/webtools/app.labeller.screenshot.png)     | ![Screen shot of web trainer](docs/source/_static/webtools/app.trainer.screenshot.png)   |
+
+**Documentation**
 
-There is a simple web app for testing the parser, browsing the database, labelling entries, and running the basic model.
+The dependencies for building the documentation are in the `requirements-doc.txt` file.
 
-To run the web app, follow the prior steps on `requirements-dev.txt`, and separately install [Node](https://nodejs.org/en/download), the JS runtime. Once globally installed on your machine, download your packages in the webtools directory with:
+**Contribution**
 
-```bash
-$ npm install
-```
+Please target the **develop** branch for pull requests. The **main** branch is used for stable releases and hotfixes only.
 
-After package installs, run dev to start.
+Before committing anything, install [pre-commit](https://pre-commit.com/) and run the following to install the hooks:
 
 ```bash
-$ npm run dev
+$ pre-commit install
 ```
 
-*tl;dr — inside package.json, `flask` runs the base server, `sockets` runs the web sockets server, and `watch` runs vite build for the react/typescripe bundle — separate flask instances are required to accommodate better web socket behavior*
-
-![Screen shot of web parser](docs/source/_static/app.parser.screenshot.png)
-![Screen shot of web labeller](docs/source/_static/app.labeller.screenshot.png)
-![Screen shot of web trainer](docs/source/_static/app.trainer.screenshot.png)
-
-**Documentation**
-
-The dependencies for building the documentation are in the `requirements-doc.txt` file.
-
-**Contribution**
-
-Please target the **develop** branch for pull requests. The main branch is used for stable releases and hotfixes only.
+Pre-commit hooks cover both the main python library code and the web app (webtools) code.

docs/source/_static/app.archived.screenshot.png

@@ -1,3 +1,30 @@
+/* Lightbox */
+.lightbox .lb-image {
+  border: none;
+}
+.lightbox .lb-outerContainer {
+  border-radius: 4px;
+  background-color: var(--pst-color-background);
+}
+
+.lightbox .lb-data .lb-close {
+  filter: alpha(Opacity=50);
+  opacity: .5;
+}
+
+/* Left navbar logo iconography */
+.navbar-brand {
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 0.25rem;
+}
+.navbar-brand img {
+  width: 4rem;
+}
+.navbar-brand .title {
+  font-size: 1rem;
+}
+
 /* Tweak cards on homepage */
 .sd-card {
     background-color: var(--pst-color-on-background);
@@ -10,9 +37,44 @@
     border-top: none !important;
 }
 
+/* Layout overrides */
+html[data-theme=dark] {
+    .bd-sidebar-primary {
+    border-right: 1px solid color-mix(in srgb,var(--fg),transparent 66%);
+    }
+    .bd-footer-content {
+        border-top: 1px solid color-mix(in srgb,var(--fg),transparent 66%);
+    }
+}
+html[data-theme=light] {
+    .bd-sidebar-primary {
+        border-right: 1px solid color-mix(in srgb,var(--bg-4),transparent 66%);
+    }
+    .bd-footer-content {
+        border-top: 1px solid color-mix(in srgb,var(--bg-4),transparent 66%);
+    }
+}
+
+nav.bd-links {
+  margin-right: 0 !important;
+}
+nav.page-toc {
+  margin-bottom: 0 !important;
+}
+#pst-back-to-top {
+  top: 95vh;
+}
+.bottom-right {
+  right: 20px;
+  bottom: 20px;
+}
+
 /* Remove border radius from search box */
 .search-button-field {
-    border-radius: revert;
+    border-radius: 0.25rem;
+}
+.search-button-field:hover {
+    box-shadow: 0 0 0 .1rem var(--pst-color-link-hover);
 }
 
 /* Remove bullets from parameter lists in API docs */
@@ -21,23 +83,58 @@
     padding-left: 0;
 }
 
-/* Give <strong> a a different colour */
-strong {
-    color: var(--pst-color-secondary);
-}
-
-/* Remove underline from abbreviations */
-abbr[title] {
-    text-decoration: 1px dotted var(--pst-color-link);
-}
-
 /* Add better separation between function and classes */
 .class, .function {
     margin-top: 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--pst-color-on-surface);
 }
 
+/* Globals */
+:root {
+	color-scheme: dark;
+	--bg: #1d2021;
+	--bg-s: #32302f;
+	--bg-1: #3c3836;
+	--bg-2: #504945;
+	--bg-3: #665c54;
+	--bg-4: #7c6f64;
+	--fg: #fbf1c7;
+	--fg-1: #ebdbb2;
+	--fg-2: #d5c4a1;
+	--fg-3: #bdae93;
+	--fg-4: #a89984;
+	--gray: #928374;
+	--white: #ffffff;
+	--black: #333333;
+	--red: #cc241d;
+	--red-blend: #982823;
+	--red-alt: #fb4934;
+	--green: #98971a;
+	--green-blend: #98971a;
+	--green-alt: #b8bb26;
+	--yellow: #d79921;
+	--yellow-blend: #9f7625;
+	--yellow-alt: #fabd2f;
+	--blue: #458588;
+	--blue-blend: #3e686a;
+	--blue-alt: #83a598;
+	--purple: #b16286;
+	--purple-blend: #865169;
+	--purple-alt: #d3869b;
+	--orange: #d65d0e;
+	--orange-blend: #9f4e19;
+	--orange-alt: #fe8019;
+	--aqua: #689d6a;
+	--aqua-blend: #567856;
+	--aqua-alt: #8ec07c;
+}
+
+
+html {
+    --pst-header-height: 2.5rem;
+}
+
 /* Set theme using gruvbox colours */
 html[data-theme=dark] {
     --pst-color-primary: #b8bb26;
@@ -80,7 +177,7 @@ html[data-theme=dark] {
     --pst-color-inline-code: #fe8019;
     --pst-color-inline-code-links: var(--pst-color-inline-code);
     --pst-color-target: #3e686ab3;
-    --pst-color-background: #1d2021;
+    --pst-color-background: #32302f;
     --pst-color-on-background: #504945;
     --pst-color-surface: #3c3836;
     --pst-color-on-surface: #bdae93;
@@ -145,6 +242,16 @@ html[data-theme=light] {
     --pst-color-table-row-hover-bg: #b1628620;
 }
 
+/* Give <strong> a a different colour */
+strong {
+    color: var(--pst-color-secondary);
+}
+
+/* Remove underline from abbreviations */
+abbr[title] {
+    text-decoration: 1px dotted var(--pst-color-link);
+}
+
 /* Fix text colour in search box on search result page */
 input.form-control {
     color: var(--pst-color-text-base)
@@ -153,4 +260,4 @@ input.form-control {
 /* Remove background from images in dark theme */
 html[data-theme=dark] .bd-content img:not(.only-dark):not(.dark-light) {
     background: revert;
-}
+}