Add search capability to CSET UI

Additionally included is a conversion of the index to JSON Lines (In
theory it should be more efficient, but in practice we still load the
whole string first. At least it looks nicer in the index file.)

Non-useful entries are removed from the index before it is written, so
it only contains information the client will need.

Author: jfrost-mo

src/CSET/cset_workflow/app/finish_website/bin/finish_website.py

@@ -29,7 +29,7 @@
 from importlib.metadata import version
 from pathlib import Path
 
-from CSET._common import combine_dicts, sort_dict
+from CSET._common import sort_dict
 
 logging.basicConfig(
     level=os.getenv("LOGLEVEL", "INFO"), format="%(asctime)s %(levelname)s %(message)s"
@@ -64,35 +64,25 @@ def install_website_skeleton(www_root_link: Path, www_content: Path):
 def construct_index(www_content: Path):
     """Construct the plot index."""
     plots_dir = www_content / "plots"
-    index = {}
-    # Loop over all diagnostics and append to index.
-    for metadata_file in plots_dir.glob("**/*/meta.json"):
-        try:
-            with open(metadata_file, "rt", encoding="UTF-8") as fp:
-                plot_metadata = json.load(fp)
-
-            category = plot_metadata["category"]
-            case_date = plot_metadata.get("case_date", "")
-            relative_url = str(metadata_file.parent.relative_to(plots_dir))
-
-            record = {
-                category: {
-                    case_date if case_date else "Aggregation": {
-                        relative_url: plot_metadata["title"].strip()
-                    }
-                }
-            }
-        except (json.JSONDecodeError, KeyError, TypeError) as err:
-            logging.error("%s is invalid, skipping.\n%s", metadata_file, err)
-            continue
-        index = combine_dicts(index, record)
-
-    # Sort index of diagnostics.
-    index = sort_dict(index)
-
-    # Write out website index.
-    with open(plots_dir / "index.json", "wt", encoding="UTF-8") as fp:
-        json.dump(index, fp, indent=2)
+    with open(plots_dir / "index.jsonl", "wt", encoding="UTF-8") as index_fp:
+        # Loop over all diagnostics and append to index. The glob is sorted to
+        # ensure a consistent ordering.
+        for metadata_file in sorted(plots_dir.glob("**/*/meta.json")):
+            try:
+                with open(metadata_file, "rt", encoding="UTF-8") as plot_fp:
+                    plot_metadata = json.load(plot_fp)
+                plot_metadata["path"] = str(metadata_file.parent.relative_to(plots_dir))
+                # Remove keys that are not useful for the index.
+                plot_metadata.pop("description", None)
+                plot_metadata.pop("plots", None)
+                # Sort plot metadata.
+                plot_metadata = sort_dict(plot_metadata)
+                # Write metadata into website index.
+                json.dump(plot_metadata, index_fp, separators=(",", ":"))
+                index_fp.write("\n")
+            except (json.JSONDecodeError, KeyError, TypeError) as err:
+                logging.error("%s is invalid, skipping.\n%s", metadata_file, err)
+                continue
 
 
 def bust_cache(www_content: Path):

src/CSET/cset_workflow/app/finish_website/file/html/index.html

@@ -14,10 +14,20 @@
         <header>
             <h1>CSET</h1>
             <button id="clear-plots">⎚ Clear view</button>
+            <button id="clear-query">⌫ Clear search</button>
             <button id="description-toggle">⇲ Hide description</button>
+            <search>
+                <input type="search" name="query" id="filter-query" placeholder="Filter...">
+                <!-- TODO: Add help for query syntax. -->
+                <fieldset id="filter-facets">
+                    <legend>Search facets</legend>
+                </fieldset>
+            </search>
         </header>
-        <hr>
-        <!-- Links to diagnostics get inserted here. -->
+        <ul id="diagnostics">
+            <!-- Links to diagnostics get inserted here. -->
+            <loading-throbber></loading-throbber>
+        </ul>
     </nav>
     <main>
         <article id="single-frame">