Skip to content

feat(vue3): upgrade to vue 3#303

Merged
floryst merged 52 commits intomainfrom
vue3
May 24, 2023
Merged

feat(vue3): upgrade to vue 3#303
floryst merged 52 commits intomainfrom
vue3

Conversation

@floryst
Copy link
Contributor

@floryst floryst commented Apr 13, 2023

  • Upgrades vuetify 3
  • Upgrades vue 3
  • Drops usePanel, since vuetify 3's panels are key-based
  • MeasurementsList is removed in favor of tool-specific components (e.g. RulerList, RectangleList).
  • nav drawer is no longer resizable
  • Theming options are available. Note that the light theme is not well-tested.
  • The color function range slider has been replaced with a shift + width slider duo. I haven't been able to port over the old ColorFunctionSlider from vuetify 2.
  • Refactoring some reactivity usage.
  • Some minor clean-up as I go through the codebase

@netlify
Copy link

netlify bot commented Apr 13, 2023

Deploy Preview for volview-dev ready!

Name Link
🔨 Latest commit 9fb5435
🔍 Latest deploy log https://app.netlify.com/sites/volview-dev/deploys/64679db4cbd9ce00085e2b7c
😎 Deploy Preview https://deploy-preview-303--volview-dev.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

floryst added 2 commits April 14, 2023 10:16
This is an incomplete upgrade commit to vue 3 and vuetify 3. Most of the
work is done, but a few bugs and missing functionality remain.
floryst added 13 commits April 19, 2023 11:06
The vuetify vue-cli plugin auto-injects vuetify's plugin for us.
Watching pointState means we properly time our visibility update.
Watching widget will trigger updateVisibility() too early.
vue-toastification v2 cannot render vuetify components. This is a
workaround for now, until we decide to drop this library.
Ensure we disable color range rescaling *before* setting the colorBy
property.
@floryst
Copy link
Contributor Author

floryst commented Apr 20, 2023

I think this will be ready to test and evaluate after the rectangle tool gets merged.

floryst added 5 commits April 24, 2023 12:51
Watching widget means updateVisibility gets called too soon and
out-of-order.
The old ColorTransferFunctionSlider component is difficult to port over
to vuetify 3.
This fixes an issue where selecting the currently selected dataset would
result in a flickering 3D view. This is resolved by ensuring render() is
not called unnecessarily.

- Computed values depending on baseImageRep would trigger unnecessarily
due to a deep watcher on the representation object, when nothing of
importance has changed.
- Add selective arrayEquals checks.
- Add renderLater, which schedules a render for the next JS task.
- Refactors VtkThreeView to reduce the size of setup().
- Listen to CVR parameters in a fine-grained fashion.
@floryst floryst marked this pull request as ready for review April 24, 2023 20:58
@floryst floryst requested review from PaulHax and aylward April 24, 2023 20:59
@floryst
Copy link
Contributor Author

floryst commented Apr 24, 2023

This is ready to evaluate. There are a lot of changes in this PR, partly due to vuetify/vue 3 upgrades and partly due to some refactoring in order to address some subtle bugs that appeared when upgrading.

A code review would be nice, but given the size of this PR a skim should be sufficient. What is important is that the application preview operates as expected.

@floryst
Copy link
Contributor Author

floryst commented Apr 25, 2023

Summary of latest commits:

  • splits out view config store into several different stores.
  • fixes the aforementioned window-level bug
  • fixes the aforementioned rotation bug

Copy link
Collaborator

@PaulHax PaulHax left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The DICOMWeb data browser components have runtime errors. I'll open a PR on this one to fix.

@PaulHax
Copy link
Collaborator

PaulHax commented Apr 26, 2023

Another window level issue:

  1. Load Volume
  2. Load another volume
  3. Adjust window level <- W/L range goes to 0-1 and image gets "blown out"

@floryst
Copy link
Contributor Author

floryst commented Apr 26, 2023

Summary of recent commits:

  • sync window/level min/max values
  • guard against deleted patient
  • some style adjustments

@sankhesh @aylward FYI this is ready to evaluate. The deploy preview link is provided above.

floryst added 4 commits April 28, 2023 13:27
vue-toastification won't show toasts, since it likely isn't mounting
until after the main app fully mounts.
@sankhesh
Copy link
Collaborator

Looks good overall. The warning box for volume quality slider is orange and too in the face. In the current version, it has a color set on it -

border="top"
border-color
dark
color="secondary"
type="warning"
elevation="2"
close-text="Close Warning"
transition="slide-y-transition"
dense

Batch all render calls inside a single task to the next task.
@floryst
Copy link
Contributor Author

floryst commented May 12, 2023

Good point. I'll tone down the colors a bit.

@floryst
Copy link
Contributor Author

floryst commented May 16, 2023

I've adjusted some styles and improved the About popup.

@floryst
Copy link
Contributor Author

floryst commented May 16, 2023

FYI all of these commits will be squashed prior to merging.

@floryst
Copy link
Contributor Author

floryst commented May 24, 2023

This seems good to go. We can revert if needed.

@floryst floryst merged commit 3c4456a into main May 24, 2023
@floryst floryst deleted the vue3 branch July 20, 2023 18:35
PaulHax added a commit to PaulHax/VolView that referenced this pull request Apr 24, 2025
* feat(vue3): upgrade to vue 3 and vuetify 3

This is an incomplete upgrade commit to vue 3 and vuetify 3. Most of the
work is done, but a few bugs and missing functionality remain.

* feat(theme): customized themes

* chore(vue-cli): use vuetify cli plugin

The vuetify vue-cli plugin auto-injects vuetify's plugin for us.

* fix: vuetify 3 changes

* feat(PersistentOverlay): use custom overlay

* fix(vuetify): bad theme test

* fix(App): use toolbutton loading prop

* fix: default expansion panel behavior

* fix(Annotations): show empty-state messages

* fix(ruler): watch pointState instead of widget

Watching pointState means we properly time our visibility update.
Watching widget will trigger updateVisibility() too early.

* fix: misc styles update

* fix(messages): toasts cannot render vuetify

vue-toastification v2 cannot render vuetify components. This is a
workaround for now, until we decide to drop this library.

* fix(style): nicer light theme colors

* fix(view): out-of-order disabling of rescale

Ensure we disable color range rescaling *before* setting the colorBy
property.

* fix(RulerWidget): guard against nonexistent ruler

* fix(RectangleWidget2D): watch pointState

Watching widget means updateVisibility gets called too soon and
out-of-order.

* feat(VolumeRendering): simpler shift/width sliders

The old ColorTransferFunctionSlider component is difficult to port over
to vuetify 3.

* fix(VtkThreeView): flicker on same selection

This fixes an issue where selecting the currently selected dataset would
result in a flickering 3D view. This is resolved by ensuring render() is
not called unnecessarily.

- Computed values depending on baseImageRep would trigger unnecessarily
due to a deep watcher on the representation object, when nothing of
importance has changed.
- Add selective arrayEquals checks.
- Add renderLater, which schedules a render for the next JS task.
- Refactors VtkThreeView to reduce the size of setup().
- Listen to CVR parameters in a fine-grained fashion.

* feat(Annotations): show rectangles

* fix(Ruler/pointState): getRuler can be undefined

* chore: upgrade vtk.js

* refactor(useSceneBuilder): simplify computed

* fix(useSceneBuilder): check for array changes

This is a sanity check to guard against the potential case for the watch
to trigger when nothing in the array actually changed.

This commit also simplifies adding representations to the view.

* fix(LPSView2DProxy): don't call parent addRep

The parent addRepresentation method updates the slicing mode based on
model.axis. This commit does two things:
- Instead of calling the parent addRepresentation, we skip all of the
unneeded code and just add directly.
- We set model.axis in case another codepath depends on a valid value.

* feat(windowingStore): split out windowing store

- Fixes windowing synchronization bugs
- Uses a simpler DoubleKeyRecord type

* feat(viewSliceStore): split out slicing store

* feat(viewCameraStore): split out camera store

* feat(volumeColoringStore): split coloring store

* feat(layerColoring): split out layer config store

* fix(layout): menu and switching errors

* fix(VtkThreeView): reset camera after scene

* fix(Browser): do not hide layerable button

* fix(dicomweb): rename v-expansion-panel components and v-overlay

* fix(windowing): sync min/max as well

* fix(PatientBrowser): auto flex basis on header

* fix(PatientBrowser): guard against deleted patient

* fix(App): show loading notification

vue-toastification won't show toasts, since it likely isn't mounting
until after the main app fully mounts.

* chore: remove @vue/composition-api

* style: prettier adjustments

* fix: switch to using renderLater

Batch all render calls inside a single task to the next task.

* fix(VolumeProperties): less intrusive alert

* fix(AboutBox): improved layout and styles

Adjusts the mobile breakpoint to be more lenient.

* fix(App): adjust styles for mobile

* fix(AboutBox): Discourse link and adjust styles

* fix(AboutBox): move version info block lower

* style: delete unused code

---------

Co-authored-by: Paul Elliott <paul.elliott@kitware.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants