stylized layer icons in legend (future data-menu) #3220
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,8 @@ | |
| New Features | ||
| ------------ | ||
|
|
||
| * New design for viewer legend. [#3220] | ||
|
|
||
| Cubeviz | ||
| ^^^^^^^ | ||
|
|
||
|
|
||
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,107 @@ | ||
| <template> | ||
| <j-tooltip :tooltipcontent="tooltipContent(tooltip, label, visible, colormode, colors, linewidth, is_subset)"> | ||
| <v-btn | ||
| :rounded="is_subset" | ||
| @click="(e) => $emit('click', e)" | ||
| :style="'padding: 0px; margin-bottom: 4px; background: '+visibilityBackgroundStyle(visible)+', '+colorBackgroundStyle(colors, cmap_samples)+'; '+btn_style" | ||
| width="30px" | ||
| min-width="30px" | ||
| height="30px" | ||
| :disabled="disabled" | ||
| > | ||
| <span :style="'color: white; text-shadow: 0px 0px 3px black; '+borderStyle(linewidth)"> | ||
| {{ icon }} | ||
| </span> | ||
| </v-btn> | ||
| </j-tooltip> | ||
| </template> | ||
|
|
||
| <script> | ||
| module.exports = { | ||
| // tooltip: undefined will use default generated, empty will skip tooltips, any other string will be used directly | ||
| props: ['label', 'icon', 'visible', 'is_subset', 'colors', 'linewidth', 'colormode', 'cmap_samples', 'btn_style', 'tooltip', 'disabled'], | ||
| methods: { | ||
| tooltipContent(tooltip, label, visible, colormode, colors, linewidth, is_subset) { | ||
| if (tooltip !== undefined) { | ||
| return tooltip | ||
| } | ||
| var tooltip = label | ||
| if (visible === 'mixed') { | ||
| tooltip += '<br/>Visibility: mixed' | ||
| } else if (!visible) { | ||
| tooltip += '<br/>Visibility: hidden' | ||
| } | ||
| if (colormode === 'mixed' && !is_subset) { | ||
| tooltip += '<br/>Color mode: mixed' | ||
| } | ||
| if (colors.length > 1) { | ||
| if (colormode === 'Colormaps' && !is_subset) { | ||
| tooltip += '<br/>Colormap: mixed' | ||
| } else if (colormode === 'mixed' && !is_subset) { | ||
| tooltip += '<br/>Color/colormap: mixed' | ||
| } else { | ||
| tooltip += '<br/>Color: mixed' | ||
| } | ||
| } | ||
| if (linewidth == 'mixed' && !is_subset) { | ||
| tooltip += '<br/>Linewidth: mixed' | ||
| } | ||
| return tooltip | ||
| }, | ||
| visibilityBackgroundStyle(visible) { | ||
| if (visible === 'mixed'){ | ||
| return 'repeating-linear-gradient(30deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3) 3px, transparent 3px, transparent 3px, transparent 10px)' | ||
| } | ||
| else if (visible) { | ||
| return 'repeating-linear-gradient(30deg, transparent, transparent 10px)' | ||
| } else { | ||
| return 'repeating-linear-gradient(30deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4) 8px, transparent 8px, transparent 8px, transparent 10px)' | ||
| } | ||
| }, | ||
| colorBackgroundStyle(colors, cmap_samples) { | ||
|
There was a problem hiding this comment. I don't expect that these loops to evaluate the colormap for the icons cost much. But is there a way to prove to ourselves that this is true? There was a problem hiding this comment. we could try to profile it? All this is doing though is taking the input lists generated in python and joining them into a string, with a bit of math to set the widths of each entry, so I really don't expect it to show up in anything. |
||
| const strip_width = 42 / colors.length | ||
| var cmap_strip_width = strip_width | ||
| var style_colors = [] | ||
| var style = 'repeating-linear-gradient( 135deg, ' | ||
|
|
||
| for ([mi, color_or_cmap] of colors.entries()) { | ||
| if (color_or_cmap == 'from_list') { | ||
| /* follow-up: use actual colors from the DQ plugins */ | ||
| color_or_cmap = 'rainbow' | ||
|
Comment on lines
+69
to
+70
There was a problem hiding this comment. I'm not sure what color DQ should get. We could take the first N colors from the DQ colormap like you're probably saying in this comment, but they're (intentionally) random, and this might not be the most visually meaningful way to represent DQ. |
||
| } | ||
|
|
||
| if (color_or_cmap.startsWith('#')) { | ||
| style_colors = [color_or_cmap] | ||
| } else { | ||
| style_colors = cmap_samples[color_or_cmap] | ||
| } | ||
|
|
||
| cmap_strip_width = strip_width / style_colors.length | ||
| for ([ci, color] of style_colors.entries()) { | ||
| var start = mi*strip_width + ci*cmap_strip_width | ||
| var end = mi*strip_width+(ci+1)*cmap_strip_width | ||
| style += color + ' '+start+'px, ' + color + ' '+end+'px' | ||
| if (ci !== style_colors.length-1) { | ||
| style += ', ' | ||
| } | ||
| } | ||
| if (mi !== colors.length-1) { | ||
| style += ', ' | ||
| } | ||
| } | ||
|
|
||
| style += ')' | ||
| return style | ||
| }, | ||
| borderStyle(linewidth) { | ||
| if (linewidth != 'mixed' && linewidth > 0) { | ||
| return 'border-bottom: '+Math.min(linewidth, 5)+'px solid white' | ||
| } | ||
| return '' | ||
| }, | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| </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
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
Oops, something went wrong.
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.
Should we specify
cursor: defaultuntil the icons are clickable (and thenpointer)?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.
good idea, done via passing
disabledto the underlyingv-btn.