Skip to content
This repository has been archived by the owner. It is now read-only.

Vue: implement 'Segmentation' UI component(s) #150

Closed
7 tasks
isms opened this issue Oct 5, 2017 · 19 comments
Closed
7 tasks

Vue: implement 'Segmentation' UI component(s) #150

isms opened this issue Oct 5, 2017 · 19 comments

Comments

@isms
Copy link
Contributor

@isms isms commented Oct 5, 2017

This issue will remain open until all the checkboxes are checked! PRs can reference this issue and will get credit even if the whole issue is not yet closed 馃憤

Note: split off from #110


Design doc reference here: http://concept-to-clinic.readthedocs.io/en/latest/design-doc.html#segment

Mock-up:

Expected Behavior

  • Display an image view of a given slice of the selected nodule. Allow navigation between slices.
  • Overlay the current vertices on top of the nodule image to see the predicted boundary.
  • Allow the user to move existing vertices.
  • Allow the user to delete existing vertices.
  • Allow the user to add a new vertex splitting a line segment connecting two vertices.
  • Allow the user to extend the nodule boundary along the Z axis by extending the currently terminal polygon up or down to the adjacent slice which still has unhighlighted nodule.
  • Indicate to the user the Z axis extent of slices.

Mocking data

Feel free to mock data for state if it is not yet implemented in the backend API, and feel free to POST to API endpoints that don't exist yet

@swederik
Copy link

@swederik swederik commented Oct 18, 2017

In Cornerstone Tools (https://github.com/chafey/cornerstoneTools) we have an ROI tool that could be a good starting point for building the nodule boundary selection tool:
https://rawgit.com/chafey/cornerstoneTools/master/examples/freehandRoi/index.html

@jjjmm
Copy link
Contributor

@jjjmm jjjmm commented Oct 19, 2017

i am planning to start implementing this component on this weekend, if no one wants to start earlier

@jjjmm
Copy link
Contributor

@jjjmm jjjmm commented Oct 19, 2017

@isms I have a question about Segmentation component. Should it be in the sync with Annotate component? When nodule in Annotate selected, should it be also selected in Segmentation component? If so, could i put both Annotate and Segmentation components under the same Nodule (as on added picture)? If i understood correctly, both components represent data of same nodule segmentation

Or selection actions should be independent and implemented as on current design mock?

@isms
Copy link
Contributor Author

@isms isms commented Oct 19, 2017

@jjjmm Yes, they should be in sync, the segmentation screen on the right is showing the same nodule so that the radiologist can see what they are annotating and validate or redraw the predicted borders.

Thanks for asking!

@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Nov 20, 2017

@jjjmm are you still working on this issue? If yes, do you need any help?

@jjjmm
Copy link
Contributor

@jjjmm jjjmm commented Nov 20, 2017

@Serhiy-Shekhovtsov currently not, you can take this issue if you want

@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Nov 21, 2017

I am taking it. If anyone willing to join - you can post a comment or ping me on gitter, so we can collaborate on this.

@vessemer
Copy link
Contributor

@vessemer vessemer commented Nov 21, 2017

I'm currently working on that, but only over cornerstone-tools segmentation part, thus will be glad to collaborate on this.
Also, waiting for merge #226 and #242 PRs.

@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Nov 22, 2017

Have a look at Area Canvas Editor as well:

Area Canvas Editor

It has some advantages over ROI tool:

  1. no cornerstone-tools dependency, you can put it in any div element. and you can make a separate Vue.js component
  2. user can add new points to existing area
  3. user can remove points
  4. dragging of entire area. It doesn't work on demo page, but I can see it in the code, so we can debug and fix it
  5. the code looks pretty clear, we can probably improve it and get rid of jQuery dependency

I didn't start implementing such component yet, only did small research.

@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Nov 24, 2017

@vessemer I have copied and improved the mentioned project to fit our needs in this PR: #249.

vue-area-select

@lamby
Copy link
Contributor

@lamby lamby commented Nov 26, 2017

Fixed in 5ffde73

@lamby lamby closed this Nov 26, 2017
@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Nov 26, 2017

@lamby I think it's too early to close this one yet :) I've only implemented a component for area selection, but still there things to be implemented:

  • Display an image view of a given slice of the selected nodule. Allow navigation between slices.
    • Code from #148 can be used as an example
  • Overlay the current vertices on top of the nodule image to see the predicted boundary.
    • The component is ready, we should read the area and initialize AreaSelect
  • Allow the user to move existing vertices.
    already supported by AreaSelect, we should listen to selection-changed event and update the model
  • Allow the user to delete existing vertices.
  • Allow the user to add a new vertex splitting a line segment connecting two vertices.
    • Not sure what this is means :)
  • Allow the user to extend the nodule boundary along the Z axis by extending the currently terminal polygon up or down to the adjacent slice which still has unhighlighted nodule.
    • We should observe stack.currentImageIdIndex change and reinit AreaSelect to display the nodule area at current slice
  • Indicate to the user the Z axis extent of slices.
    already supported by DICOM viewer

@isms
Copy link
Contributor Author

@isms isms commented Dec 4, 2017

@lamby I agree with @Serhiy-Shekhovtsov - this is not done. Reopening.

@isms isms reopened this Dec 4, 2017
@pjbull
Copy link
Member

@pjbull pjbull commented Dec 4, 2017

As a heads up for anyone thinking about this issue, the DrivenData team be doing some work on this feature for some upcoming demos, so the master branch is subject to change!

@isms isms removed this from the 2-feature-building milestone Jan 5, 2018
@isms isms added this to the 3-packaging milestone Jan 5, 2018
@isms isms removed this from the 3-packaging milestone Jan 5, 2018
louisgv added a commit to louisgv/concept-to-clinic that referenced this issue Jan 16, 2018
@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Jan 16, 2018

@louisgv are you working on this?

@louisgv
Copy link
Contributor

@louisgv louisgv commented Jan 16, 2018

@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Jan 16, 2018

Cool. I will take it and finish this page.

@wanghaisheng
Copy link

@wanghaisheng wanghaisheng commented Jan 22, 2018

can i annotate some area with rectangle ?

@Serhiy-Shekhovtsov
Copy link
Contributor

@Serhiy-Shekhovtsov Serhiy-Shekhovtsov commented Jan 22, 2018

@wanghaisheng sorry, didn't get your question. With this tool you can select an area of any shape.
Btw, this issue can be closed now, as it has been implemented in #291

@reubano reubano closed this Jan 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants