View Annotations and Datasets from Command Palette (#9087)

### Steps to test:
- From anywhere, open the command palette by pressing ctrl + P
- click on "> View dataset..." and select any dataset -> you should be
directed to its view mode
- same for "> View annotaion..." 
- the list of annotations should be sorted like in the dashboard, so the
annotation that was edited most recently should appear first
- Do so in any admin view and within DS/annotation view mode
- when having an annotation open, you should be able to select the
annotation tools and also see the corresponding shortcuts

### Notes
- This adds the library https://www.npmjs.com/package/dompurify

### TODOs:
- [x] check whether closing can be done without changing the key, e.g.
with pending promises in viewDatasetEntry -> didnt find anything better
- [x] fix typing errors
- [x] fix pipeline
- [ wont do ] when hitting "view dataset" (or annotation), reset input
-> does not seem feasable because input is not easy to be manipulated
from outside the libs code (from what i can tell). so I just used a
string that can stay there :)
- [ ] ~~omit dangerouslySetInnerHTML~~

### Issues:
- contributes to #8441  

Co-authored-by: MichaelBuessemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com>

Author: knollengewaechs

.github/common_edge_cases.md

@@ -9,6 +9,7 @@ Will this also work if
  - The user is logged out and views a public dataset or annotation
  - User uses dark mode / light mode
  - There is no local datastore/tracingstore module (Compare [instructions to test this locally](https://github.com/scalableminds/webknossos/wiki/Set-up-a-standalone-datastore-locally))
+ - An annotation is opened by multiple users at the same time
 
 Consider SQL pitfalls:
  - `x IN ()` statements must never called with empty list

frontend/javascripts/admin/dataset/composition_wizard/04_configure_new_dataset.tsx

@@ -32,7 +32,7 @@ import type { APIDataLayer, APIDataset, APITeam, LayerLink } from "types/api_typ
 import { syncValidator } from "types/validation";
 import { WkDevFlags } from "viewer/api/wk_dev";
 import type { Vector3 } from "viewer/constants";
-import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { getReadableURLPart, getViewDatasetURL } from "viewer/model/accessors/dataset_accessor";
 import { flatToNestedMatrix } from "viewer/model/accessors/dataset_layer_transformation_accessor";
 import { checkLandmarksForThinPlateSpline } from "viewer/model/helpers/transformation_helpers";
 import type { WizardComponentProps } from "./common";
@@ -372,7 +372,7 @@ function LinkedLayerForm({
             info="This is the layer which will be linked into the new dataset."
           >
             <a
-              href={`/datasets/${getReadableURLPart({ name: datasetName, id: datasetId })}/view`}
+              href={getViewDatasetURL({ name: datasetName, id: datasetId })}
               target="_blank"
               rel="noreferrer"
             >

frontend/javascripts/admin/dataset/dataset_add_view.tsx

@@ -9,7 +9,7 @@ import { useWkSelector } from "libs/react_hooks";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import type { APIDataStore } from "types/api_types";
-import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { getReadableURLPart, getViewDatasetURL } from "viewer/model/accessors/dataset_accessor";
 import DatasetAddComposeView from "./dataset_add_compose_view";
 
 const { Content, Sider } = Layout;
@@ -306,9 +306,7 @@ const getPostUploadModal = (
               <Button
                 type="primary"
                 onClick={() =>
-                  navigate(
-                    `/datasets/${getReadableURLPart({ name: uploadedDatasetName, id: datasetId })}/view`,
-                  )
+                  navigate(getViewDatasetURL({ name: uploadedDatasetName, id: datasetId }))
                 }
               >
                 View the Dataset

frontend/javascripts/admin/job/job_list_view.tsx

@@ -29,7 +29,7 @@ import type * as React from "react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { type APIJob, APIJobCommand } from "types/api_types";
-import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { getViewDatasetURL } from "viewer/model/accessors/dataset_accessor";
 
 // Unfortunately, the twoToneColor (nor the style) prop don't support
 // CSS variables.
@@ -166,7 +166,10 @@ function JobListView() {
   function getLinkToDataset(job: APIJob) {
     // prefer updated link over legacy link.
     if (job.args.datasetId != null)
-      return `/datasets/${getReadableURLPart({ name: job.args.datasetName || "unknown_name", id: job.args.datasetId })}/view`;
+      return getViewDatasetURL({
+        name: job.args.datasetName || "unknown_name",
+        id: job.args.datasetId,
+      });
     if (
       job.organizationId != null &&
       (job.args.datasetName != null || job.args.datasetDirectoryName != null)

frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx

@@ -20,7 +20,7 @@ import type * as React from "react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import type { APIDataset, APIDatasetCompact } from "types/api_types";
-import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { getReadableURLPart, getViewDatasetURL } from "viewer/model/accessors/dataset_accessor";
 import { getNoActionsAvailableMenu } from "viewer/view/context_menu";
 
 const disabledStyle: React.CSSProperties = {
@@ -259,11 +259,7 @@ function DatasetActionView(props: Props) {
         onShowCreateExplorativeModal={() => setIsCreateExplorativeModalVisible(true)}
         onCloseCreateExplorativeModal={() => setIsCreateExplorativeModalVisible(false)}
       />
-      <LinkWithDisabled
-        to={`/datasets/${getReadableURLPart(dataset)}/view`}
-        title="View Dataset"
-        disabled={isReloading}
-      >
+      <LinkWithDisabled to={getViewDatasetURL(dataset)} title="View Dataset" disabled={isReloading}>
         <EyeOutlined className="icon-margin-right" />
         View
       </LinkWithDisabled>
@@ -319,7 +315,7 @@ export function getDatasetActionContextMenu({
             key: "view",
             label: "View",
             onClick: () => {
-              window.location.href = `/datasets/${getReadableURLPart(dataset)}/view`;
+              window.location.href = getViewDatasetURL(dataset);
             },
           }
         : null,

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -40,7 +40,7 @@ import { Link } from "react-router-dom";
 import type { APIDatasetCompact, APIMaybeUnimportedDataset, FolderItem } from "types/api_types";
 import type { EmptyObject } from "types/globals";
 import { Unicode } from "viewer/constants";
-import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { getViewDatasetURL } from "viewer/model/accessors/dataset_accessor";
 import CategorizationLabel from "viewer/view/components/categorization_label";
 import EditableTextIcon from "viewer/view/components/editable_text_icon";
 import {
@@ -332,7 +332,7 @@ class DatasetRenderer {
 
     return (
       <>
-        <Link to={`/datasets/${getReadableURLPart(this.data)}/view`} title="View Dataset">
+        <Link to={getViewDatasetURL(this.data)} title="View Dataset">
           <img
             src={imgSrc}
             className={`dataset-table-thumbnail ${iconClassName}`}
@@ -342,7 +342,7 @@ class DatasetRenderer {
         </Link>
         <div className="dataset-table-name-container">
           <Link
-            to={`/datasets/${getReadableURLPart(this.data)}/view`}
+            to={getViewDatasetURL(this.data)}
             title="View Dataset"
             className="incognito-link dataset-table-name"
           >
@@ -807,7 +807,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
               },
               onDoubleClick: () => {
                 if (isADataset) {
-                  window.location.href = `/datasets/${getReadableURLPart(data)}/view`;
+                  window.location.href = getViewDatasetURL(data);
                 } else {
                   context.setActiveFolderId(data.key);
                 }

frontend/javascripts/viewer/model/accessors/dataset_accessor.ts

@@ -752,6 +752,12 @@ export function getReadableURLPart(
   return `${getURLSanitizedName(dataset)}-${dataset.id}`;
 }
 
+export function getViewDatasetURL(
+  dataset: APIDataset | APIDatasetCompact | { name: string; id: string },
+) {
+  return `/datasets/${getReadableURLPart(dataset)}/view`;
+}
+
 export function getDatasetIdOrNameFromReadableURLPart(datasetNameAndId: string) {
   const datasetIdOrName = datasetNameAndId.split("-").pop();
   const isId = /^[a-f0-9]{24}$/.test(datasetIdOrName || "");