Metadata layout in 3.0/3.1 version

[rubinatorz]

Hi @isaisabel

The layout of the metadata in the new 3.0/3.1 version of the Navigator is slightly changed compared to the 2.0 version. Values are now aligned with each other, the line height of each line is increased and the width of the tooltip is smaller:

In the previous version it was like this:

I can imagine the choice for this, but in our case it just looks less nice and a bit messy in the new version of the metadata. Is there a chance of having an option to influence this behaviour?

Thanks!

[isaisabel]

Hi @rubinatorz,

Sorry, I did see your comment on the other issue yesterday I just haven't had time to respond until now.

The new tooltip implementation uses a borderless table instead of just a line by line listing. This theoretically improves readability although apparently not in your specific case. Two possible ways to improve the readability for your case:

1. remove the bullet points
2. Empty values could be represented as "" instead of "-".
3. Remove the section breaks, or represent them as empty keys and values to make a blank line:

    { "name": "", "value": ""}

One thing we could possibly change is setting white-space to nowrap for the lefthand side of the key-value pair. This way the metadata name wouldn't wrap when there are multiple words. In practice I'm not sure this actually improves things though:

above: add the following to line 13 of nav-app/src/app/matrix/technique-cell/tooltip/tooltip.component.scss:

        td:first-child {
            white-space: nowrap;
        }

above: how the same metadata looks with the current implementation.

If you wanted to modify the tooltip template yourself, it should be pretty straightforward to modify nav-app/src/app/matrix/technique-cell/tooltip/tooltip.component.html (and the associated SCSS linked above) into a format you find more pleasant. Even if you're not familiar with the ins and outs of Angular the template for the tooltip is quite close to plain HTML.

I'll leave this issue open and marked as "seeking feedback" in case other users want to chime in with their thoughts.

[marcusbakker]

@isaisabel having the option nowrap would be of great help to allow a different style of formatting. Would it be possible to include this in the official version of the Navigator?

[rubinatorz]

Hi @isaisabel

Thanks for getting back on this. I did indeed put this also in a comment on issue #188, but I thought it might be better to make a separate issue for it.

I tried your suggestions and this helps a bit. However empty names and/or values are not allowed, an error is shown when loading the layer into the Navigator:

Having an option to enter empty names and values is indeed useful to have section breaks. I can use a space in both name as value, but then still a colon is shown.

Regarding the no-wrap you suggested: I really love this formatting. So it would be very nice if you could include that in the release.

[isaisabel]

Yeah we can include no-wrap on the key as part of the v3.1 release. @clemiller could you please make sure it makes its way into the branch? The change should be in my comment above (the addition to the tooltip SCSS)

@rubinatorz You're right that it doesn't work. The typechecking we implemented doesn't like empty values on required fields (and empty strings are considered an empty value). However, whitespace does work... except that it includes the colon delimiter which I had forgotten about:

"metadata": [
                {
                    "name": "hello",
                    "value": "world"
                }, 
                {
                    "name": " ",
                    "value": " "
                },
                {
                    "name": "how",
                    "value": "goes"
                }
            ],

[isaisabel]

We can explore adding a section break feature to the metadata format in future updates (the v3.1 deadline is too soon for us to add to that milestone)

[rubinatorz]

Hi @isaisabel

Thanks for planning to incorporate the nowrap in 3.1! Very happy with that!

Regarding the section break, we can for now work around the colon and it would be great to have the section break in the future update.

[isaisabel]

The nowrap change has now been implemented in v3.1. I'm leaving this open to document the need for further improvements in that UI, namely allowing section breaks.

[rubinatorz]

Looks great @isaisabel and @clemiller! Thanks a lot.

We have a temporary workaround for the section break as you can see. Looking forward to a real section break.

[clemiller]

Hi all!

We are implementing the section break feature as a part of the next update (v4.1). We're planning to add the option for a "divider” property, which will add a section break where the property occurs in the list of metadata. This will be shown as a horizontal bar across the table. Before finalizing this implementation, we'd like to seek some feedback. Please feel free to share your thoughts!

Here's an example of the format:

"metadata": [
	{
		"name": "Overlay",
		"value": "Detection"
	},
	{
		"divider": true
	},
	{
		"name": "Applicable to",
		"value": "All"
	},
        ...,
]

[rubinatorz]

Hi @clemiller and @isaisabel, this is great! It looks good and exactly what we need. The way the section break can be inserted looks handy.

[marcusbakker]

Hi @clemiller, that looks awesome!

[clemiller]

Great, we will go ahead with this implementation for the next release. Thank you everyone!

[isaisabel]

The divider feature is now present in the develop branch. We'll be releasing it to the live instance soon.