Features Mapping in case.md

[Malmahrouqi3]

Description

Concerning #303,
To reproduce, please look at the PR code or https://github.com/Malmahrouqi3/MFC-mo2/tree/features-mapping
Demo'ed concepts @https://malmahrouqi3.github.io/documentation/md_case.html

Trade-Offs of Concepts

Matrix of Features

	Feature A	Feature B	Feature C	Feature D	Feature E	Feature F
Feature A	..	..	..	..	..	..
Feature B	..	..	..	..	..	..
Feature C	..	..	..	..	..	..
Feature D	..	..	..	..	..	..
Feature E	..	..	..	..	..	..
Feature F	..	..	..	..	..	..

Raw markdown content which needlessly would occupy too much space and sorta confusing with a plenty of features (>10).

Doxygen Map

Doxygen-native feature with easy-to-implement format. Inspired by ALib docs.
Check out the PR code, but below it is demonstrated how you just define elements with their dependencies. Also, you can add url to link features with their definition @ MFC simulation namespaces

\dot
digraph MFC_features
{
    newrank=true
    compound=true;
    fontsize="10";
    fontname="Open Sans";
    node [shape=plaintext, fontsize="10", fontname="Open Sans"]
    Bootstrap      [label= "Bootstrap"   shape= "box"        color="black" penwidth=2];                             
    //--- dependencies base module -> base module 
    BitBuffer       -> { Monomem Containers }            [ color="gray15"  ];
    ThreadModel     -> { Boxing Containers Monomem }     [ color="gray15"  ];
}
\enddot

Interactive Map

Static HTML Script enclosed by \htmlonly & \endhtmlonly to be rendered as-is by Doxygen. It is simply a clustered map of features which helps out when composing a case file and could house as many features as there could be. Select one, then you can only select other compatible ones till reaching the end of the trail when finally you hit reset. You cannot select incompatible features. To utilize, just define all features and their cross-compatibility as shown below.

    const features = [
        { id: 'A', name: 'Feature A', x: 15, y: 20 },
        { id: 'B', name: 'Feature B', x: 45, y: 15 },
        { id: 'C', name: 'Feature C', x: 75, y: 20 },
        { id: 'D', name: 'Feature D', x: 25, y: 50 },
        { id: 'E', name: 'Feature E', x: 55, y: 45 },
        { id: 'F', name: 'Feature F', x: 85, y: 55 },
        { id: 'G', name: 'Feature G', x: 35, y: 80 },
        { id: 'H', name: 'Feature H', x: 70, y: 85 }
    ];
    const compatibility = {
        'A': ['A', 'B', 'D', 'E', 'G'],
        'B': ['A', 'B', 'C', 'E', 'F', 'H'],
        'C': ['B', 'C', 'F', 'H'],
        'D': ['A', 'D', 'E', 'G'],
        'E': ['A', 'B', 'D', 'E', 'F', 'G', 'H'],
        'F': ['B', 'C', 'E', 'F', 'H'],
        'G': ['A', 'D', 'E', 'G'],
        'H': ['B', 'C', 'E', 'F', 'H']
    };