data-menu: implement action bar (delete, edit subset, metadata) #3264
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <j-tooltip | ||
| :tooltipcontent="'sublayer of '+icon[0].toUpperCase()" | ||
| span_style="display: inline-block" | ||
| > | ||
| <v-icon dense>mdi-layers-outline</v-icon> | ||
| </j-tooltip> | ||
| </template> | ||
|
|
||
| <script> | ||
| module.exports = { | ||
| props: ['icon'] | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <template> | ||
| <v-menu | ||
| absolute | ||
| offset-y | ||
| left | ||
| > | ||
| <template v-slot:activator="{ on, attrs }"> | ||
| <j-tooltip | ||
| :span_style="'display: inline-block; float: right; ' + (delete_enabled ? '' : 'cursor: default;')" | ||
| :tooltipcontent="delete_tooltip" | ||
| > | ||
| <v-btn | ||
| icon | ||
| v-bind="attrs" | ||
| v-on="on" | ||
| :disabled="!delete_enabled" | ||
| > | ||
| <v-icon class="invert-if-dark">mdi-delete</v-icon> | ||
| </v-btn> | ||
| </j-tooltip> | ||
| </template> | ||
| <v-list dense style="width: 200px"> | ||
| <v-list-item> | ||
| <v-list-item-content> | ||
| <j-tooltip | ||
| :tooltipcontent="delete_viewer_tooltip" | ||
| > | ||
| <span | ||
| style="cursor: pointer; width: 100%" | ||
| @click="() => {$emit('remove-from-viewer')}" | ||
| > | ||
| Remove from viewer | ||
|
There was a problem hiding this comment. Very nit-picky on the phrasing, but it bothers me a little bit that for data, this actually removes the data from the viewer, but with a subset, it just makes it invisible. Could we have conditional text here to reflect what is actually happening in the subset case? I know that's extra complicated since you could select both a subset and a data layer, this isn't a deal breaker for me. There was a problem hiding this comment. yeah, agreed. We could handle this with the text and/or tooltip changing based on the selection or we could disable it entirely if a subset is selected. @Jenneh - thoughts? There was a problem hiding this comment. @rosteen what do you think of updating the tooltip for subsets to say "hide from viewer" rather than "remove selected data"? would that be enough to clarify? There was a problem hiding this comment. there could also be three versions of the tooltip text that change based on the selection: (but I'd vote to maybe keep the button text fixed since it maps to the API method) There was a problem hiding this comment. how is this? Screen.Recording.2024-11-07.at.1.05.11.PM.mov |
||
| </span> | ||
| </j-tooltip> | ||
| </v-list-item-content> | ||
| </v-list-item> | ||
| <v-list-item> | ||
| <v-list-item-content> | ||
| <j-tooltip | ||
| :span_style="'display: inline-block; float: right; ' + (delete_app_enabled ? '' : 'cursor: default;')" | ||
| :tooltipcontent="delete_app_tooltip" | ||
| > | ||
| <span | ||
| :style="'width: 100%; ' + (delete_app_enabled ? 'cursor: pointer;' : '')" | ||
| :disabled="!delete_app_enabled" | ||
| @click="() => {if (delete_app_enabled) {$emit('remove-from-app')}}" | ||
| > | ||
| Remove from app | ||
| </span> | ||
| </j-tooltip> | ||
| </v-list-item-content> | ||
| </v-list-item> | ||
| </v-list> | ||
| </v-menu> | ||
| </template> | ||
|
|
||
| <script> | ||
| module.exports = { | ||
| props: ['delete_enabled', 'delete_tooltip', 'delete_viewer_tooltip', 'delete_app_enabled', 'delete_app_tooltip'], | ||
| }; | ||
| </script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <template> | ||
| <v-menu | ||
| v-if="selected_n_subsets > 0" | ||
| absolute | ||
| offset-y | ||
| bottom | ||
| left | ||
| > | ||
| <template v-slot:activator="{ on, attrs }"> | ||
| <j-tooltip | ||
| :span_style="'display: inline-block; float: right; ' + (subset_edit_enabled ? '' : 'cursor: default;')" | ||
| :tooltipcontent="subset_edit_tooltip" | ||
| > | ||
| <v-btn | ||
| text | ||
| class="invert-if-dark" | ||
| v-bind="attrs" | ||
| v-on="on" | ||
| :disabled="!subset_edit_enabled" | ||
| > | ||
| Edit Subset | ||
| </v-btn> | ||
| </j-tooltip> | ||
| </template> | ||
| <v-list dense style="width: 300px"> | ||
| <v-list-item> | ||
| <v-list-item-content> | ||
| <j-tooltip :tooltipcontent="'Open '+subset_selected+' in Subset Tools plugin'"> | ||
| <span | ||
| style="cursor: pointer; width: 100%" | ||
| @click="() => {$emit('view-info')}" | ||
| > | ||
| Edit in plugin | ||
| </span> | ||
| </j-tooltip> | ||
| </v-list-item-content> | ||
| </v-list-item> | ||
|
|
||
| <v-divider></v-divider> | ||
|
|
||
| <v-list-item | ||
| v-for="mode_item in subset_edit_modes" | ||
| @mouseover="() => {hover_mode=mode_item.glue_name}" | ||
| @mouseleave="() => {if (hover_mode == mode_item.glue_name) {hover_mode=''}}" | ||
| > | ||
| <v-list-item-icon style="margin-right: 4px"> | ||
| <img :src="mode_item.icon"/> | ||
| </v-list-item-icon> | ||
| <v-list-item-content> | ||
| <!-- | ||
| <data-menu-subset-edit-modify | ||
| :mode_item="mode_item" | ||
| /> | ||
| --> | ||
| {{ mode_item.glue_name }} | ||
| </v-list-item-content> | ||
| <v-list-item-action style="display: inline-block" v-if="hover_mode == mode_item.glue_name"> | ||
| <j-tooltip | ||
| v-for="tool in subset_tools.slice().reverse()" | ||
| :span_style="'display: inline-block; float: right;'" | ||
| :tooltipcontent="'Interactively apply \'' + mode_item.glue_name + '\' logic to ' + subset_selected + ' using the ' + tool.name + ' tool'" | ||
| > | ||
| <v-btn | ||
| icon | ||
| max-height="24px" | ||
| max-width="24px" | ||
| @click="() => {$emit('modify-subset', mode_item.glue_name, tool.name)}" | ||
| > | ||
| <img :src="tool.img" class="invert-if-dark" width="20"/> | ||
| </v-btn> | ||
| </j-tooltip> | ||
| </v-list-item-action> | ||
| </v-list-item> | ||
|
|
||
| </v-list> | ||
| </v-menu> | ||
| </template> | ||
|
|
||
| <script> | ||
| module.exports = { | ||
| data: function () { | ||
| return { | ||
| hover_mode: '', | ||
| } | ||
| }, | ||
| props: ['subset_selected', 'subset_edit_enabled', 'subset_edit_tooltip', 'selected_n_subsets', 'subset_edit_modes', 'subset_tools'], | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .v-list-item__icon, .v-list-item__content, .v-list-item__action { | ||
| /* even denser than dense */ | ||
| padding-top: 2px !important; | ||
| padding-bottom: 2px !important; | ||
| margin-top: 0px !important; | ||
| margin-bottom: 0px !important; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <j-tooltip | ||
| tooltipcontent="plugin results automatically update" | ||
| span_style="display: inline-block" | ||
| > | ||
| <v-icon dense>mdi-reload-alert</v-icon> | ||
| </j-tooltip> | ||
| </template> | ||
|
|
||
| <script> | ||
| module.exports = { | ||
| props: [] | ||
| }; | ||
| </script> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@bmorris3 - can you confirm if this is correct? I ran into this bug when adding test coverage (where it would complain otherwise that
data_label == ''was not available asnew_parent). Do you think this should be split out to a separate PR and backported?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I actually just encountered this yesterday too! I was experimenting with @eteq's unloading-data questions and was trying to untangle the bug. It looks like this is probably what we need. Testing this out now.