feat(segmentation): Enhanced segmentation panel design for TMTV #3988

IbrahimCSAE · 2024-03-14T07:06:25Z

Context

Addresses issue #3790

Changes & Results

Pending

Screenshots

Notes

Most work is complete, remaining piece is to switch out the TMTV panel

netlify · 2024-03-14T07:06:42Z

✅ Deploy Preview for ohif-platform-docs canceled.

Name	Link
🔨 Latest commit	`15fb306`
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/660cc8fc5d0f8d00082103be

netlify · 2024-03-14T07:06:46Z

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	`15fb306`
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/660cc8fc6e8d570008f756a8

codecov · 2024-03-14T07:21:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 44.37%. Comparing base (8a335bd) to head (15fb306).
Report is 275 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3988      +/-   ##
==========================================
- Coverage   46.23%   44.37%   -1.87%     
==========================================
  Files          78       80       +2     
  Lines        1276     1334      +58     
  Branches      312      327      +15     
==========================================
+ Hits          590      592       +2     
- Misses        548      589      +41     
- Partials      138      153      +15

see 10 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e8e2092...15fb306. Read the comment docs.

cypress · 2024-03-14T07:27:14Z

Passing run #3787 ↗︎

0	43	0	0	0

Details:

fix build
Project: Viewers	Commit: `15fb3069a0`
Status: Passed	Duration: 05:49 💡
Started: Apr 3, 2024 3:23 AM	Ended: Apr 3, 2024 3:29 AM

Review all test suite changes for PR #3988 ↗︎

platform/ui/src/assets/styles/styles.css

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx

sedghi

see my comments please, great work

sedghi

can we make the scrollbar outside the header

number box is too big

needs to be half

can you add the new segmetnation to the tmtv

fix this toggle as well please

check the design for folded and the i location

if we can make the scrollbar starts after the header that would be great

--

AddSgement should not touch the bottom, it has top padding seems like

this is going overflow hidden for some reason

this thing should be centered

probably wrong padding on bottom

IbrahimCSAE · 2024-04-02T02:53:24Z

Fixes:

Scrollbar outside header for dropdown and expanded (I needed to set max height 500px]

2.number box sizing fixed

Reload data patient info size is corrected and smaller

Added new segmentation panel to tmtv (some features do not work as I'm not sure how it should function in tmtv)

Fixed visibility toggle bug, now it works as expected
fixed I icon location when expanded/unexpanded

scroll bars start after header now

8.Fixed add segment padding

Tooltips reworked with react portals
centered settings icon

Fixed add segmentation padding

@sedghi please take a look, we just need to add the tools and fix up panel in tmtv.

IbrahimCSAE · 2024-04-02T11:11:36Z

extensions/default/src/Toolbar/Toolbar.tsx

@@ -33,16 +31,7 @@ export function Toolbar({ servicesManager }) {
          />
        );

-        return disabled ? (


duplicate tooltip bug

IbrahimCSAE · 2024-04-02T11:12:11Z

platform/ui/src/components/Tooltip/Tooltip.tsx

-          </svg>
-        </div>
-      </div>
+      {tooltipContainer && ReactDOM.createPortal(tooltipContent, tooltipContainer)}


react portals

IbrahimCSAE · 2024-04-02T11:12:49Z

modes/segmentation/src/segmentationButtons.ts

@@ -95,7 +95,7 @@ const toolbarButtons: Button[] = [
        {
          id: 'Threshold',
          icon: 'icon-tool-threshold',
-          label: 'Eraser',
+          label: 'Threshold Tool',


fix tool name

IbrahimCSAE · 2024-04-02T11:15:57Z

react portals in action, looks good

sedghi · 2024-04-02T13:18:13Z

platform/ui/src/components/Tooltip/Tooltip.tsx

+  useEffect(() => {
+    if (isOpen && parentRef.current && tooltipRef.current) {


Nice!

Can you please add a comment on what is happening for future devs, newX, newY, parent ...

if (!isOpen || !parentRef.current || !tooltipRef.current){
return
}

--> less indentation --> more clear

sedghi

Getting there,

Patient info has wrong icon

The dropdown for the modal seems like getting in the div (maybe we need portal here as well?)

CleanShot.2024-04-02.at.09.11.27.mp4

Empty Segmentation should have one segment at least, so we should add segment 1 programmatically

CleanShot.2024-04-02.at.09.12.13.mp4

suv peak display text does not appear for some reason below the segment index

CleanShot.2024-04-02.at.09.13.18.mp4

seems like active segment cannot be ch

CleanShot.2024-04-02.at.09.15.09.mp4

anged

…tangleROIStartEndThreshold

…nServiceTypes and SegmentationGroupTable components

…#3988) Co-authored-by: Alireza <ar.sedghi@gmail.com>

patient info complete

1eb02d0

IbrahimCSAE added 2 commits March 19, 2024 03:02

progress

dc40e6c

displayText

c6d9932

IbrahimCSAE requested a review from sedghi March 19, 2024 07:25

sedghi reviewed Mar 20, 2024

View reviewed changes

platform/ui/src/assets/styles/styles.css Show resolved Hide resolved

sedghi reviewed Mar 20, 2024

View reviewed changes

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx Outdated Show resolved Hide resolved

sedghi reviewed Mar 20, 2024

View reviewed changes

platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx Outdated Show resolved Hide resolved

sedghi reviewed Mar 20, 2024

View reviewed changes

IbrahimCSAE and others added 4 commits March 21, 2024 02:38

fixes

d988429

Merge branch 'master' into feat/enhanced-segmentation-panel-design

374d04b

legacy panel

9439b6f

fixes

2b5f0a2

sedghi reviewed Mar 27, 2024

View reviewed changes

sedghi changed the title ~~DRAFT: feat(segmentation): Enhanced segmentation panel design for TMTV~~ feat(segmentation): Enhanced segmentation panel design for TMTV Mar 27, 2024

IbrahimCSAE and others added 3 commits April 1, 2024 20:39

Merge branch 'master' into feat/enhanced-segmentation-panel-design

5db3fbb

fixes

8aaed11

fixes

4298b42

react portals

702da97

IbrahimCSAE commented Apr 2, 2024

View reviewed changes

IbrahimCSAE requested a review from sedghi April 2, 2024 11:12

updates

e5af7fe

sedghi reviewed Apr 2, 2024

View reviewed changes

IbrahimCSAE and others added 6 commits April 2, 2024 11:04

fix all

fce3d6c

Merge branch 'master' into feat/enhanced-segmentation-panel-design

6244f6b

Add disabledText to toolbar buttons

7ca5742

Add getToolbarModule to tmtvExtension and createButtonSection for Rec…

c67d850

…tangleROIStartEndThreshold

Add new toolbar module for RectangleROIOptions and update Segmentatio…

05f4877

…nServiceTypes and SegmentationGroupTable components

Add options for toolbox toolbar buttons

e21c689

sedghi approved these changes Apr 3, 2024

View reviewed changes

fix build

15fb306

sedghi merged commit 9f3235f into master Apr 3, 2024
10 of 11 checks passed

edcheyjr pushed a commit to edcheyjr/Viewers that referenced this pull request Apr 7, 2024

feat(segmentation): Enhanced segmentation panel design for TMTV (OHIF…

efa8621

…#3988) Co-authored-by: Alireza <ar.sedghi@gmail.com>

thanh-nguyen-dang pushed a commit to uc-cdis/Viewers that referenced this pull request May 1, 2024

feat(segmentation): Enhanced segmentation panel design for TMTV (OHIF…

bc8c6fc

…#3988) Co-authored-by: Alireza <ar.sedghi@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(segmentation): Enhanced segmentation panel design for TMTV #3988

feat(segmentation): Enhanced segmentation panel design for TMTV #3988

IbrahimCSAE commented Mar 14, 2024 •

edited

netlify bot commented Mar 14, 2024 •

edited

netlify bot commented Mar 14, 2024 •

edited

codecov bot commented Mar 14, 2024 •

edited

cypress bot commented Mar 14, 2024 •

edited

sedghi left a comment

sedghi left a comment •

edited

IbrahimCSAE commented Apr 2, 2024 •

edited

IbrahimCSAE Apr 2, 2024

IbrahimCSAE Apr 2, 2024

IbrahimCSAE Apr 2, 2024

IbrahimCSAE commented Apr 2, 2024

sedghi Apr 2, 2024

sedghi Apr 2, 2024

sedghi left a comment

		useEffect(() => {
		if (isOpen && parentRef.current && tooltipRef.current) {

feat(segmentation): Enhanced segmentation panel design for TMTV #3988

feat(segmentation): Enhanced segmentation panel design for TMTV #3988

Conversation

IbrahimCSAE commented Mar 14, 2024 • edited

Context

Changes & Results

Screenshots

Notes

netlify bot commented Mar 14, 2024 • edited

✅ Deploy Preview for ohif-platform-docs canceled.

netlify bot commented Mar 14, 2024 • edited

✅ Deploy Preview for ohif-dev canceled.

codecov bot commented Mar 14, 2024 • edited

Codecov Report

cypress bot commented Mar 14, 2024 • edited

Passing run #3787 ↗︎

Review all test suite changes for PR #3988 ↗︎

sedghi left a comment

Choose a reason for hiding this comment

sedghi left a comment • edited

Choose a reason for hiding this comment

IbrahimCSAE commented Apr 2, 2024 • edited

IbrahimCSAE Apr 2, 2024

Choose a reason for hiding this comment

IbrahimCSAE Apr 2, 2024

Choose a reason for hiding this comment

IbrahimCSAE Apr 2, 2024

Choose a reason for hiding this comment

IbrahimCSAE commented Apr 2, 2024

sedghi Apr 2, 2024

Choose a reason for hiding this comment

sedghi Apr 2, 2024

Choose a reason for hiding this comment

sedghi left a comment

Choose a reason for hiding this comment

IbrahimCSAE commented Mar 14, 2024 •

edited

netlify bot commented Mar 14, 2024 •

edited

netlify bot commented Mar 14, 2024 •

edited

codecov bot commented Mar 14, 2024 •

edited

cypress bot commented Mar 14, 2024 •

edited

sedghi left a comment •

edited

IbrahimCSAE commented Apr 2, 2024 •

edited