Allow toggling visibility of segments and segment groups

CHANGELOG.unreleased.md

@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added that "Create Animation" jobs will now use the correct segment colors for rendering meshes. [#8605](https://github.com/scalableminds/webknossos/pull/8605)
 - In the NML upload route, the additional form field `description` can be specified. If so, it will overwrite the description contained in the NML files. [#8631](https://github.com/scalableminds/webknossos/pull/8631)
 - Added the possibility for super users to retry manually cancelled jobs from the jobs list. [#8629](https://github.com/scalableminds/webknossos/pull/8629)
+- Added checkboxes to the segments tab that allow to show/hide individual segments. The visibility of segments that are not listed in the segments list can be controlled with a new "Hide unlisted segments" toggle in the layer settings. Additionally, you can right-click a segment in a data viewport and select "Only show this segment" (and similar functionality). [#8546](https://github.com/scalableminds/webknossos/pull/8546)
 
 ### Changed
 - Remove `data.maybe` dependency and replaced with regular Typescript types. [#8563](https://github.com/scalableminds/webknossos/pull/8563)
@@ -42,5 +43,6 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed that deletion of dataset would lead to an error. [#8639](https://github.com/scalableminds/webknossos/pull/8639)
 
 ### Removed
+- The old "Selective Segment Visibility" feature that allowed to only see the active and the hovered segment was removed. From now on the visibility of segments can be controlled with checkboxes in the segment list and with the "Hide unlisted segments" toggle in the layer settings. [#8546](https://github.com/scalableminds/webknossos/pull/8546)
 
 ### Breaking Changes

app/models/annotation/nml/NmlParser.scala

@@ -252,6 +252,8 @@ class NmlParser @Inject()(datasetDAO: DatasetDAO)
       }
       val anchorPositionAdditionalCoordinates = parseAdditionalCoordinateValues(node)
       val metadata = parseMetadata(node \ "metadata" \ "metadataEntry")
+      val color = parseColorOpt(node)
+      val isVisible = parseVisibility(node, color)
       Segment(
         segmentId = getSingleAttribute(node, "id").toLong,
         anchorPosition = anchorPosition,
@@ -260,7 +262,8 @@ class NmlParser @Inject()(datasetDAO: DatasetDAO)
         color = parseColorOpt(node),
         groupId = getSingleAttribute(node, "groupId").toIntOpt,
         anchorPositionAdditionalCoordinates = anchorPositionAdditionalCoordinates,
-        metadata = metadata
+        metadata = metadata,
+        isVisible = isVisible
       )
     })
 

app/models/annotation/nml/NmlWriter.scala

@@ -292,6 +292,7 @@ class NmlWriter @Inject()(implicit ec: ExecutionContext) extends FoxImplicits wi
           s.name.foreach { n =>
             writer.writeAttribute("name", n)
           }
+          s.isVisible.foreach(isVisible => writer.writeAttribute("isVisible", isVisible.toString))
           s.creationTime.foreach { t =>
             writer.writeAttribute("created", t.toString)
           }
@@ -341,6 +342,7 @@ class NmlWriter @Inject()(implicit ec: ExecutionContext) extends FoxImplicits wi
         writer.writeAttribute("id", t.treeId.toString)
         writeColor(t.color)
         writer.writeAttribute("name", t.name)
+        t.isVisible.foreach(isVisible => writer.writeAttribute("isVisible", isVisible.toString))
         t.groupId.foreach(groupId => writer.writeAttribute("groupId", groupId.toString))
         t.`type`.foreach(t => writer.writeAttribute("type", t.toString))
         Xml.withinElementSync("nodes")(writeNodesAsXml(t.nodes.sortBy(_.id)))

frontend/javascripts/dashboard/dataset_view.tsx

@@ -26,6 +26,7 @@ import {
   Tooltip,
 } from "antd";
 import type { ItemType } from "antd/es/menu/interface";
+import FastTooltip from "components/fast_tooltip";
 import FormattedDate from "components/formatted_date";
 import { PricingEnforcedButton } from "components/pricing_enforcers";
 import DatasetTable from "dashboard/advanced_dataset/dataset_table";
@@ -302,7 +303,7 @@ export function DatasetRefreshButton({ context }: { context: DatasetCollectionCo
   const showLoadingIndicator = context.isLoading || context.isChecking;
 
   return (
-    <Tooltip
+    <FastTooltip
       title={showLoadingIndicator ? "Refreshing the dataset list." : "Refresh the dataset list."}
     >
       <Dropdown.Button
@@ -313,7 +314,7 @@ export function DatasetRefreshButton({ context }: { context: DatasetCollectionCo
       >
         {showLoadingIndicator ? <LoadingOutlined /> : <ReloadOutlined />} Refresh
       </Dropdown.Button>
-    </Tooltip>
+    </FastTooltip>
   );
 }
 

frontend/javascripts/libs/cuckoo/abstract_cuckoo_table.ts

@@ -13,6 +13,7 @@ let cachedNullTexture: UpdatableTexture | undefined;
 
 export abstract class AbstractCuckooTable<K, V, Entry extends [K, V]> {
   entryCapacity: number;
+  entryCount: number = 0;
   protected table!: Uint32Array;
   protected seeds!: number[];
   protected seedSubscribers: Array<SeedSubscriberFn> = [];
@@ -61,6 +62,10 @@ export abstract class AbstractCuckooTable<K, V, Entry extends [K, V]> {
         this.getClass().getElementsPerEntry(),
     );
 
+    this.clear();
+  }
+
+  clear() {
     this.initializeTableArray();
     // Initialize the texture once to avoid undefined behavior
     this.flushTableToTexture();
@@ -100,6 +105,7 @@ export abstract class AbstractCuckooTable<K, V, Entry extends [K, V]> {
   }
 
   private initializeTableArray() {
+    this.entryCount = 0;
     this.table = new Uint32Array(this.getClass().getElementsPerEntry() * this.entryCapacity).fill(
       EMPTY_KEY_VALUE,
     );
@@ -204,6 +210,10 @@ export abstract class AbstractCuckooTable<K, V, Entry extends [K, V]> {
       return null;
     }
 
+    // The key does not exist yet, therefore already increment the entry count (if the
+    // internalSet does not succeed, a rehash will happen that resets entryCount to 0).
+    this.entryCount++;
+
     let seedIndex = Math.floor(Math.random() * this.seeds.length);
     while (iterationCounter++ < this.entryCapacity) {
       const seed = this.seeds[seedIndex];
@@ -243,6 +253,7 @@ export abstract class AbstractCuckooTable<K, V, Entry extends [K, V]> {
           hashedAddress,
           !this.autoTextureUpdate,
         );
+        this.entryCount--;
         return;
       }
     }

frontend/javascripts/messages.tsx

@@ -48,7 +48,6 @@ export const settings: Partial<Record<keyof RecommendedConfiguration, string>> =
   renderWatermark: "Logo in Screenshots",
   antialiasRendering: "Antialiasing",
   colorLayerOrder: "Color Layer Order",
-  selectiveSegmentVisibility: "Selective Visibility",
 };
 export const settingsTooltips: Partial<Record<keyof RecommendedConfiguration, string>> = {
   loadingStrategy: `You can choose between loading the best quality first
@@ -82,7 +81,6 @@ export const settingsTooltips: Partial<Record<keyof RecommendedConfiguration, st
   antialiasRendering: "Antialias rendering (can impact performance)",
   colorLayerOrder:
     "Set the order in which color layers are rendered. This setting is only relevant if the cover blend mode is active.",
-  selectiveSegmentVisibility: "When enabled, only the active and hovered segments are visible.",
 };
 export const layerViewConfigurations: Partial<Record<keyof DatasetLayerConfiguration, string>> = {
   color: "Color",

frontend/javascripts/test/helpers/saveHelpers.ts

@@ -34,3 +34,9 @@ export function withoutUpdateTree(
 ): UpdateActionWithoutIsolationRequirement[] {
   return items.filter((item) => item.name !== "updateTree");
 }
+
+export function withoutUpdateSegment(
+  items: UpdateActionWithoutIsolationRequirement[],
+): UpdateActionWithoutIsolationRequirement[] {
+  return items.filter((item) => item.name !== "updateSegment");
+}

frontend/javascripts/test/model/cuckoo_table.spec.ts

@@ -86,8 +86,11 @@ describe("CuckooTableVec3", () => {
         ct.set(entry[0], entry[1]);
         const readValue = ct.get(entry[0]);
         isValueEqual(entry[1], readValue);
+        expect(ct.entryCount).toBe(1);
       }
     }
+    ct.unset(1);
+    expect(ct.entryCount).toBe(0);
   });
 
   it("Should throw error when exceeding capacity", () => {
@@ -112,8 +115,13 @@ describe("CuckooTableVec3", () => {
 
       ct = new CuckooTableVec3(textureWidth);
       entries = generateRandomCuckooEntrySet(generateRandomEntry, ct.getCriticalCapacity());
+      let count = 0;
       for (const entry of entries) {
         ct.set(entry[0], entry[1]);
+        ct.unset(entry[0]);
+        ct.set(entry[0], entry[1]);
+        count++;
+        expect(ct.entryCount).toBe(count);
       }
 
       // Check that all previously set items are still intact

frontend/javascripts/test/puppeteer/dtype_datasets_rendering.screenshot.ts

@@ -22,13 +22,13 @@ import {
   getSupportedValueRangeForElementClass,
 } from "viewer/model/bucket_data_handling/data_rendering_logic";
 import {
-  updateDatasetSettingAction,
   updateLayerSettingAction,
   updateTemporarySettingAction,
 } from "viewer/model/actions/settings_actions";
 import { setPositionAction, setZoomStepAction } from "viewer/model/actions/flycam_actions";
 import type { Action } from "viewer/model/actions/actions";
 import { describe, it, beforeAll, beforeEach, afterEach, expect, test } from "vitest";
+import { setHideUnregisteredSegmentsAction } from "viewer/model/actions/volumetracing_actions";
 
 const testColor = true;
 const testSegmentation = true;
@@ -225,7 +225,7 @@ describe("DType Dataset Rendering", () => {
               .map((el) => Number.parseFloat(el));
 
             const actions: Action[] = [
-              updateDatasetSettingAction("selectiveSegmentVisibility", false),
+              setHideUnregisteredSegmentsAction(false),
               updateTemporarySettingAction("hoveredSegmentId", null),
               setPositionAction([x, y, z]),
               setZoomStepAction(zoomValue),
@@ -274,7 +274,7 @@ describe("DType Dataset Rendering", () => {
           let success = true;
           if (spec.alsoTestSelectiveSegmentId && selectiveSegmentIdByDtype[spec.dtype] != null) {
             const actions = [
-              updateDatasetSettingAction("selectiveSegmentVisibility", true),
+              setHideUnregisteredSegmentsAction(true),
               updateTemporarySettingAction(
                 "hoveredSegmentId",
                 selectiveSegmentIdByDtype[spec.dtype] ?? null,