feat: Selector for seg

[igoroctaviano]

• Support selection and toggling of the specific SEG series #342

Add SEG Series Selection and Toggling Support

Overview

This PR adds support for selection and toggling of SEG (Segmentation) series, replicating the functionality that already exists for ANN (bulk annotations). Users can now select specific SEG series from a dropdown and toggle visibility of all segments within the selected series.

Problem

Previously, SEG series only had individual segment visibility controls without the ability to:

• Select specific SEG series from multiple available series
• Toggle visibility of all segments in a series at once
• Filter segments by series for better organization

This created an inconsistent user experience compared to ANN series, which already had these features.

Solution

Implemented comprehensive SEG series management functionality that mirrors the existing ANN implementation:

🎯 Series Selection Dropdown

• Added dropdown at the top of the Segmentations submenu
• Shows "All Series" option to view segments from all series
• Individual series options with descriptions and segment counts
• Automatic initialization to "All Series" when segments are first loaded

👁️ Global Visibility Toggle

• Added eye/eye-slash switch for quick show/hide all segments
• Works on the currently selected series (or all series if "All Series" is selected)
• Visual feedback showing current visibility state
• Consistent with ANN implementation styling and behavior

🔄 Series-Specific Filtering

• When a specific series is selected, only segments from that series are shown
• When "All Series" is selected, all segments are shown
• Switching series automatically hides segments from other series
• Maintains state consistency across series switches

Changes Made

📁 Files Modified

slim/src/components/SlideViewer/types.ts

• Added selectedSegmentationSeriesInstanceUID?: string to SlideViewerState interface
• Separate state tracking for SEG series selection (independent from ANN series)

slim/src/components/SlideViewer.tsx

• State Initialization: Added selectedSegmentationSeriesInstanceUID: undefined to component state
• Handler Method: Added handleSegmentationSeriesSelection() method that:
  • Hides all currently visible segments when switching series
  • Resets the visible segments state
  • Updates the selected segmentation series
• UI Enhancement: Completely rewrote getSegmentationMenu() method to include:
  • Series grouping logic by SeriesInstanceUID
  • Dropdown options generation with series descriptions and counts
  • Series-specific segment filtering
  • Auto-initialization of series selection

slim/src/components/SegmentList.tsx

• Imports: Added Switch component and eye icons from Ant Design
• Global Toggle: Added handleVisibilityChange() method for global visibility control
• UI Layout: Updated render method to include:
  • Global visibility switch with eye/eye-slash icons
  • Consistent styling with ANN implementation
  • Proper spacing and layout

🧪 Testing

• ✅ TypeScript compilation passes without errors
• ✅ Build process completes successfully
• ✅ No linting errors detected
• ✅ Implementation follows existing code patterns and conventions
• ✅ Maintains backward compatibility with existing SEG functionality

🎨 User Experience Improvements

Before

• Users could only toggle individual segments
• No way to select specific SEG series
• No global visibility control
• Inconsistent experience compared to ANN series

After

• Series Selection: Dropdown to choose specific SEG series or view all
• Global Toggle: One-click show/hide all segments in selected series
• Better Organization: Segments filtered by series for cleaner interface
• Consistent UX: Same functionality as ANN series for unified experience

🔧 Technical Details

State Management

// New state property
selectedSegmentationSeriesInstanceUID?: string

// Handler method
handleSegmentationSeriesSelection = (value: string): void => {
  // Hide all currently visible segments when selection changes
  this.state.visibleSegmentUIDs.forEach(segmentUID => {
    this.volumeViewer.hideSegment(segmentUID)
  })

  // Reset the visible segments state
  this.setState({
    selectedSegmentationSeriesInstanceUID: value,
    visibleSegmentUIDs: new Set()
  })
}

Series Grouping Logic

// Group segments by series
const segmentsBySeries: { [seriesUID: string]: dmv.segment.Segment[] } = {}

segments.forEach((segment, index) => {
  const seriesUID = segmentMetadata[segment.uid]?.[0]?.SeriesInstanceUID ?? 'unknown'
  if (!segmentsBySeries[seriesUID]) {
    segmentsBySeries[seriesUID] = []
  }
  segmentsBySeries[seriesUID].push(segment)
})

🚀 Impact

• Enhanced Usability: Users can now efficiently manage SEG series similar to ANN series
• Consistent Interface: Unified experience across different annotation types
• Better Organization: Series-specific filtering reduces visual clutter
• Improved Workflow: Global visibility toggle speeds up common operations

📋 Checklist

• Added SEG series selection state management
• Implemented series selection dropdown UI
• Added global visibility toggle functionality
• Implemented series-specific filtering logic
• Added handler methods for series switching
• Updated SegmentList component with global toggle
• Maintained consistency with ANN implementation
• Ensured TypeScript compatibility
• Verified build process works correctly

[deepsource-io]

Here's the code health analysis summary for commits eb61284..9a28691. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[fedorov]

Switching from show all segs to a single one resets the seg series toggle.

[igoroctaviano]

@fedorov please try again.

[CPBridge]

I like this new feature, however I do worry that it may not be especially apparent to most users exactly what is happening. They may wonder what the difference is between individual segments (below in the toggles) and the series that they reside in (above in the dropdown), because that is not in my opinion immediately obvious from the user interface.

Not sure on the best way to address this, but I think that we should at least label the part of the panel containing the segment with the word "Segments" or something like that.

[CPBridge]

Also, if there are multiple series selected in the dropdown, should we show which segments belong to which series?

[fedorov]

@CPBridge those are good points, but I think this goes beyond the scope of the issue this PR aims to address. The idea is to have SEG selection to have the same features as ANN (and you can see how that looks in the screenshot here #307 (comment)).

In my view, one of the issues we have with Slim interface is that it is disconnected from the DICOM model. Markus was convinced that the concept of "series" should be hidden from the users. While that might make sense when one has only slides, it becomes very difficult to manage in presence of image-derived series. I think we need to review the UI, across all types of DICOM data it handles, review how other tools expose those derived artifacts, and try to refine it. I don't think we should do it as part of this PR.

[fedorov]

@igoroctaviano it now remembers that the series is selected when I select the first one, but forgets it after I select the second one.

[igoroctaviano]

@igoroctaviano it now remembers that the series is selected when I select the first one, but forgets it after I select the second one.

I see, try again, please.

[fedorov]

Looks good to me! I suggest we merge this, and as I mentioned in #342 revisit other issues noted by @CPBridge separately.

[sonarqubecloud]

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud