OSCAL Model Maps - further enhancements

[wendellpiez]

User Story:

Further work is possible improving the XML and JSON model maps as produced for documentation for example in OSCAL documentation.

In particular, we agreed in a Lunch w/ Devs (Dec 3 2020) when looking at mockups, that we would like to produce the map entries with item cardinalities listed to the left of each item, in a tabular arrangement (within the expanding tree), something like as shown in this screenshot:

However, it proves difficult to implement this layout to work consistently across browsers as of this date.

Goals:

Implement a clean, portable map design showing a cleaner "gridded" arrangement with nesting than the current model maps. Show item cardinality on the left as in the screenshot above.

Whitespace and indenting integrity must be maintained as the view is arbitrarily expanded and collapsed. In particular, line wrap must be clean when lines grow too long to fit.

Dependencies:

If browser support for list-style-position on summary is supported across browsers, then summaries can be listed with correct vertical alignment. (See https://www.caniuse.com/?search=summary%20list-item) This is tricky especially since HTML display/summary may be wanted on some items, while other neighboring items are not made to expand.

We also need to make sure that the expansion icon shows even if the summary contains flex boxes (as of now in FF, it does not, while in Chrome, it does), potentially with CSS to that effect.

Tips:

This commit represents a best effort WIP before factoring this work back out: wendellpiez/metaschema@57acadd

• CSS flex boxes summary { display: flex } may help

Acceptance Criteria

• All website and readme documentation affected by the changes in this issue have been updated. Changes to the website can be made in the docs/content directory of your branch.
• A Pull Request (PR) is submitted that fully addresses the goals of this User Story. This issue is referenced in the PR.
• The CI-CD build process runs without any reported errors on the PR. This can be confirmed by reviewing that all checks have passed in the PR.

{The items above are general acceptance criteria for all User Stories. Please describe anything else that must be completed for this issue to be considered resolved.}

[wendellpiez]

Summary version: For what we need to control line items in the tree, fixing widths and flowing where we need, CSS flex (flex boxes) work well. But they do not currently play well with details/summary in some browsers (e.g. in Chrome, which moves markers out of position when summary is not just inline). Where it works (Firefox), the code is clean.

We could get around this by going back to a JS collapse/expansion implementation. Alternatively, Chrome may be updated or there may be a CSS-based solution for Chrome.

[wendellpiez]

Now done in PR usnistgov/metaschema#127.

[wendellpiez]

This is however not done on the XML side, only on the JSON side.

LOE to do it on the XML side is not high. However, it might look better as is (with cardinality at the end of the line).

? Comments welcome

[wendellpiez]

Current JSON map (with cardinality to the left):