Graph builder modal (#16061)

* Bugfix and restyle Graph Builder

* Add disclaimer box to modal footer

* Change color gradient for pracision graphs

* Add default preselections to graph settings

docs/_static/css/custom.css

@@ -1,38 +1,46 @@
-/* misc */
+/* Misc */
 /* =================================================== */
 .switcher-set {
     margin-bottom:1rem;
 }
+
 main img {
     cursor: pointer;
 }
+
 .doxyrest-title-code-block {
     margin-bottom: 0;
 } 
+
 main  .searchForm {
     margin-bottom: 2rem;
     margin-top: 2rem;
 }
+
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
-/* navigation panels override */
+
+/* Navigation panels override */
 /* =================================================== */
-/* hide home item in the top bar */
+/* Hide home item in the top bar */
 ul#navbar-main-elements li:first-of-type { 
     display: none;
 }
+
 /* items on hover */
 #bd-docs-nav div ul a:hover {
     text-decoration: underline;
 }
+
 ul#navbar-main-elements > li:hover { 
     text-decoration: underline;
 }
 
-/* first-level items in the side menu */
+
+/* First-level items in the side menu */
 #bd-docs-nav > div > ul > li {
     padding-bottom: 15px;
 }
@@ -40,69 +48,82 @@ ul#navbar-main-elements > li:hover {
     color: #000000;
     font-weight: bold;
 }
-/* second level items                 */
+
+
+/* Second level items                 */
 #bd-docs-nav > div > ul > li > ul {
     padding-left: 0.3rem;
 }
-/* overwrite menu chevron directions for open and closed states  */
+
+
+/* Overwrite menu chevron directions for open and closed states  */
 .toctree-checkbox~label i {
     transform: rotate(270deg);
 }
+
 .toctree-checkbox:checked~label i {
     transform: rotate(0deg);
 }
 
 
-
+/* Footer links */
-
-/* footer links */
 /* =================================================== */
 footer div.container div.footer-item p a {
     float: left;
     margin-right: 30px;
 }
+
 footer div.container div.footer-item p a:nth-child(1) {
     margin-right: 50px;
 }
+
 footer div.container div.footer-item p:nth-child(2) {
     clear: both;
 }
 
-/* doc version dropdown formatting override */
+
+/* Doc version dropdown formatting override */
 /* =================================================== */
 [aria-labelledby="version-selector"]  {
     min-width: 125px!important;
     overflow-x: hidden!important;
 }
+
 .sst-dropdown #version-selector {
     min-width: 125px!important;
 }
+
 [aria-labelledby="version-selector"]  .dropdown-item { 
     padding: 0.25rem 0.5rem!important;
 }
 
+
 /* Content in two columns */
 /* =================================================== */
 .row-two-col-content {
     display: flex;
 }
+
 .column-two-col-content {
     flex: 50%;
     padding-right: 10px!important;
 }
 
-/* code reference text formatting override */
+
+/* Code reference text formatting override */
 /* =================================================== */
 code {
     color: black !important;
     font-weight: bold;
 }
 
+
 /* Table Sort Button */
 /* =================================================== */
 .sort-header {
     cursor: pointer;
 }
+
 .sort-btn {
     content: "";
     background-image:url('media/arrow-small-opposite-v.svg');
@@ -115,23 +136,29 @@ code {
     position:relative;
     top:0.5rem;
 }
+
 .sort-btn.sort-active.ascending,
 .sort-btn.sort-active {
     background-size: 100% 70%;
 }
+
 .sort-btn.sort-active.ascending {
     background-image: url('media/union-down.svg');
 }
+
 .sort-btn.sort-active {
     background-image: url('media/union-up.svg');
 }
+
 div.highlight {
     margin-bottom: 1.15rem;
 }
+
 .highlight .err {
     border:none;
     color:inherit;
 }
+
 .opt-notice-wrapper {
     position: fixed;
     bottom:0;
@@ -141,6 +168,7 @@ div.highlight {
     padding: 1rem;
     z-index: 1000;
 }
+
 .opt-notice {
     margin-bottom: 0;
     position: absolute;
@@ -151,6 +179,7 @@ div.highlight {
     color: #fff;
 }
 
+
 /* Transition banner */
 /* =================================================== */
 .transition-banner {
@@ -190,11 +219,13 @@ div.highlight {
     text-shadow: 0 1px 0 #fff;
     opacity: .5;
 }
+
 .hidden-banner {
     display: none!important;
 }
 
-/* responsiveness */
+
+/* Responsiveness */
 /* =================================================== */
 @media (max-width: 720px) {
     .transition-banner {
@@ -217,19 +248,29 @@ div.highlight {
 /* =================================================== */
 .configure-graphs-header {
     padding-left: 16px;
+    display: flex;
+    justify-content: space-between;
 }
+
 .configure-graphs-header h3 {
     float: left;
 }
+
+.configure-graphs-content {
+    overflow: auto;
+}
+
 .header-inactive {
     color: lightgray;
 }
+
 .configure-graphs-btn {
     padding: 4px 20px;
     background-color: #0054AE;
     border-color: #0054AE;
     color: #fefefe;
 }
+
 .graph-chart-title-header {
     font-size: 1.4rem;
     line-height: 2rem;
@@ -237,6 +278,7 @@ div.highlight {
     padding: 12px 0;
     margin: 0;
 }
+
 .empty-chart-container {
   height: 80px;
   line-height: 80px;
@@ -245,41 +287,50 @@ div.highlight {
   background-color: #f3f3f3;
   border-radius: 5px;
 }
+
 .graph-chart-title {
     vertical-align: middle;
     padding: 12px 0;
 }
+
 .chart-column-header-container {
     padding-top: 8px;
     display: flex;
     flex-direction: row;
     width: 100%;
 }
+
 .chart-column-title {
     min-width: 20%;
     flex-grow: 0 1;
 }
+
 .chart-column-title .icon {
     margin-top: 6px;
     margin-right: 8px;
     flex-grow: 0;
     float: left;
 }
+
 .chart-column-title .chart-header {
     flex-grow: 1;
     float: left;
 }
+
 .chart-column-title .title {
     font-size: 1rem;
     font-weight: 400;
 }
+
 .chart-column-title .subtitle {
     font-size: .8rem;
     color: gray;
 }
+
 .chart-labels-container {
     width: 18%;
 }
+
 .chart-labels-container .title {
     text-align: right;
     text-overflow: ellipsis;
@@ -290,18 +341,19 @@ div.highlight {
     line-height: 3.42rem;
     color: gray;
 }
+
 .chevron-right-btn {
     content: url('media/chevron-right.svg');
     vertical-align: middle;
     padding-left: 8px;
 }
+
 .chevron-down-btn {
     content: url('media/chevron-down.svg');
     vertical-align: middle;
     padding-left: 8px;
 }
 
-
 .chart {
     height: 500px;
     padding:0;
@@ -357,63 +409,21 @@ div.highlight {
 .efficiency-icon {
     content: url('media/icon-efficiency.svg');
 }
+
 .latency-icon {
     content: url('media/icon-latency.svg');
 }
+
 .throughput-icon {
     content: url('media/icon-throughput.svg');
 }
+
 .value-icon {
     content: url('media/icon-value.svg');
 }
 
+
 /* Modal */
-
-/* The Close Button */
-.modal-close {
-    color: #aaaaaa;
-    float: right;
-    font-size: 28px;
-    line-height: 24px;
-    padding-right: 4px;
-}
-
-.modal-close:hover,
-.modal-close:focus {
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.clear-all-btn {
-    float: right;
-    cursor: pointer;
-    line-height: 4rem;
-}
-
-.clear-all-btn-content {
-    border: 1.5px solid black;
-    padding: 6px 10px;
-}
-
-.edit-settings-btn {
-    float: right;
-    color: #0054AE;
-    font-size: 1.05rem;
-    cursor: pointer;
-    line-height: 4rem;
-    display: none;
-}
-
-.edit-settings-text {
-    vertical-align: middle;
-}
-
-.edit-settings-icon {
-    vertical-align: middle;
-    content: url('media/edit-settings.svg');
-}
-
 .modal {
     display: block;
     position: fixed;
@@ -426,10 +436,6 @@ div.highlight {
     background-color: rgba(0, 0, 0, 0.4);
 }
 
-.modal .models-column-one label {
-    word-break: break-word;
-}
-
 .modal-content {
     overflow: auto;
     background-color: #fefefe;
@@ -437,7 +443,8 @@ div.highlight {
     padding: 36px;
     border: 1px solid #888;
     width: 95%;
-    max-height: 90%;
+    max-width: 1140px;
+    max-height: 85%;
 }
 
 .modal-content h2 {
@@ -454,21 +461,32 @@ div.highlight {
     padding-bottom: 1px;
 }
 
-.modal-header-grid-container {
+.modal-header {
-    display: grid;
+    display: flex;
-    padding: 12px 64px 2px 16px;
+    justify-content: space-between;
-    grid-template-columns: 40% 20% 20% 10% 10%;
+    border: 0;
-    column-gap: 16px;
+    padding: 0;
+}
+
+.modal-configure-graphs,
+.modal-display-graphs {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 
 .modal-content-grid-container {
     display: grid;
-    padding-left: 24px;
+    padding: 0.75rem 4rem 0.125rem 1rem;
-    padding-right: 64px;
+    grid-template-columns: repeat(3, 1fr);
-    padding-top: 8px;
+    grid-template-rows: auto;
-    grid-template-columns: 20% 20% 20% 20% 10% 10%;
+    gap: 2rem 1rem;
-    column-gap: 12px;
+}
-    font-size: .78rem;
+
+.modal-content-grid {
+    display: grid;
+    padding-top: .5rem;
+    grid-template-columns: 1fr;
 }
 
 .modal-content-grid-container .column {
@@ -488,29 +506,11 @@ div.highlight {
     margin-left: -14px;
 }
 
-.modal-header-grid-item h5 {
+.modal-content-grid-item h5 {
     font-weight: 530;
     margin: 0;
 }
 
-.modal-grid-item h5 {
-    margin: 0;
-}
-
-.modal-build-graphs-btn {
-    margin-bottom: 10px;
-    margin-right: 3px;
-    padding: 4px 16px;
-    float: right;
-    border-color: #0054AE;
-    background-color: #0054AE;
-    color: #fff;
-}
-.modal-build-graphs-btn:disabled {
-    border-color: #8C8C8C;
-    background-color: lightgray;
-}
-
 .modal-footer {
     display: none;
     padding: 0;
@@ -521,7 +521,25 @@ div.highlight {
     left: 0;
 }
 
+.modal-footer-content {
+    display: flex;
+    justify-content: space-between;
+}
+
+.modal-disclaimer-box {
+    padding-right: 0.5rem;
+}
+
+.modal-disclaimer-box p {
+    color: #00000098;
+    font-size: 0.8rem;
+    margin-bottom: 0rem;
+}
+
 .benchmark-graph-results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding-left: 16px;
 }
 
@@ -539,16 +557,118 @@ div.highlight {
     width: 20%;
 }
 
+@media screen and (max-width:768px) {
+    .modal-content-grid-container {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: auto;
+        padding-right: 1rem;
+    }
+}
+
+@media screen and (max-width: 530px) {
+    .buttons-nav {
+        margin-top: 0.125rem;
+        margin-bottom: 0.125rem;
+        flex-direction: column;
+        gap: .5rem;
+    }
+
+    .clear-all-btn {
+        padding: 0;
+    }
+
+    .modal-content-grid-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        padding-right: 1rem;
+    }
+
+}
+
+@media screen and (min-width: 530px) {
+    .modal-content-grid--cols-2 {
+        display: grid;
+        padding-top: .5rem;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 1rem;
+    }
+
+    .span-element-big {
+        grid-column: 1 / span 2;
+}
+}
+
+
+/* Modal buttons */
+.modal-close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    line-height: 24px;
+    padding-right: 4px;
+}
+
+.modal-close:hover,
+.modal-close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.buttons-nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.build-graphs-btn {
+    border-color: #0054AE;
+    background-color: #0054AE;
+    color: #fff;
+}
+
+.build-graphs-btn:disabled {
+    border-color: #8C8C8C;
+    background-color: lightgray;
+}
+
+.clear-all-btn {
+    cursor: pointer;
+}
+
+.clear-all-btn-content {
+    border: 1.5px solid black;
+    padding: 6px 10px;
+}
+
+.edit-settings-btn {
+    color: #0054AE;
+    font-size: 1.05rem;
+    cursor: pointer;
+    line-height: 4rem;
+}
+
+.edit-settings-text {
+    vertical-align: middle;
+}
+
+.edit-settings-icon {
+    vertical-align: middle;
+    content: url('media/edit-settings.svg');
+}
+
 .close-btn {
     padding: 4px 16px;
     border-color: #0054AE;
     background-color: #0054AE;
     color: #fefefe;
     float: right;
+    align-self: flex-start;
 }
 
 
-/* content formatting for the benchmark pages */
+/* Content formatting for the benchmark pages */
 .picker-options {
     margin: 15px 0;
 }
@@ -639,7 +759,7 @@ div.highlight {
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
-  top: 2px;
+  top: 5px;
   left: 0;
   height: 15px;
   width: 15px;
@@ -660,6 +780,11 @@ div.highlight {
   background-color: #0054AE;
 }
 
+.checkmark-container input:disabled ~ .checkmark {
+    background: #d3d3d3;
+    border: 2px solid #8C8C8C;
+}
+
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";

docs/_static/html/modal.html

@@ -1,64 +1,78 @@
 <div>
-    <div style="width: 100%">
+    <div class="modal-header">
-        <span style="float: left"><h2>Benchmark Graph Builder</h2></span>
+        <h2>Benchmark Graph Builder</h2>
         <span class="modal-close">&times;</span>
     </div>
     <div class="modal-line-divider"></div>
+    <section id="modal-configure-graphs" class="modal-configure-graphs">
         <div id="configure-graphs-header" class="configure-graphs-header">
+            <h3>Configure Graphs</h3>
+            <div class="buttons-nav">
+                <div>
+                    <button id="build-graphs-btn" disabled="disabled" class="build-graphs-btn">Build Graphs</button>
+                </div>
+                <div class="clear-all-btn">
+                    <span class="clear-all-btn-content">Clear All</span>
+                </div>
+            </div>
+        </div>
+        <div class="configure-graphs-content">
+            <div class="modal-content-grid-container">
+                <div class="modal-content-grid-item span-element-big">
+                    <h5>Models</h5>
+                    <div class="modal-line-divider"></div>
+                    <div class="modal-content-grid modal-content-grid--cols-2">
+                        <div class="models-column-one column"></div>
+                        <div class="models-column-two column"></div>
+                    </div>
+                </div>
+                <div class="modal-content-grid-item">
+                    <h5>Platform Type</h5>
+                    <div class="modal-line-divider"></div>
+                    <div class="modal-content-grid">
+                        <div class="ietype-column column"></div>
+                    </div>
+                </div>
+                <div class="modal-content-grid-item">
+                    <h5>Platforms</h5>
+                    <div class="modal-line-divider"></div>
+                    <div class="modal-content-grid">
+                        <div class="client-platform-column column"></div>
+                    </div>
+                </div>
+                <div class="modal-content-grid-item">
+                    <h5>Parameters</h5>
+                    <div class="modal-line-divider"></div>
+                    <div class="modal-content-grid">
+                        <div class="kpi-column column"></div>
+                    </div>
+                </div>
+                <div class="modal-content-grid-item">
+                    <h5>Precision</h5>
+                    <div class="modal-line-divider"></div>
+                    <div class="modal-content-grid">
+                        <div class="precisions-column column"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section id="modal-display-graphs" class="modal-display-graphs">
+        <div class="benchmark-graph-results-header">
+            <h3>Graph Results</h3>
             <div class="edit-settings-btn">
                 <div class="edit-settings-text">Edit Settings
                     <span class="edit-settings-icon"></span>
                 </div>
             </div>
-        <span class="clear-all-btn">
-            <span class="clear-all-btn-content">Clear All</span>
-        </span>
-        <h3>STEP 1: Configure Graphs</h3>
-    </div>
-    <div class="configure-graphs-content">
-        <div class="modal-header-grid-container">
-            <div class="modal-header-grid-item">
-                <h5>Models</h5>
-                <div class="modal-line-divider"></div>
-            </div>
-            <div class="modal-header-grid-item">
-                <h5>Platform Type</h5>
-                <div class="modal-line-divider"></div>
-            </div>
-            <div class="modal-header-grid-item">
-                <h5>Platforms</h5>
-                <div class="modal-line-divider"></div>
-            </div>
-            <div class="modal-header-grid-item">
-                <h5>Parameters</h5>
-                <div class="modal-line-divider"></div>
-            </div>
-            <div class="modal-header-grid-item">
-                <h5>Precision</h5>
-                <div class="modal-line-divider"></div>
-            </div>
-        </div>
-        <div class="modal-content-grid-container">
-            <div class="models-column-one column"></div>
-            <div class="models-column-two column"></div>
-            <div class="ietype-column column"></div>
-            <div class="client-platform-column column">
-            </div>
-            <div class="kpi-column column"></div>
-            <div class="precisions-column column">
-            </div>
-        </div>
-        <div class="modal-content-footer">
-            <button id="modal-build-graphs-btn" disabled="disabled" class="modal-build-graphs-btn">Build Graphs</button>
-        </div>
-    </div>
-    <div class="modal-line-divider"></div>
-    <div class="benchmark-graph-results-header">
-        <h3 class="header-inactive">STEP 2: Benchmark Graph Results</h3>
         </div>
         <div class="chart-placeholder"></div>
-    <div class="modal-line-divider"></div>
+    </section>
     <div class="modal-footer">
+        <div class="modal-line-divider"></div>
+        <div class="modal-footer-content">
+            <div class="modal-disclaimer-box"></div>
             <button class="close-btn">Close</button>
         </div>
     </div>
+</div>

docs/_static/js/graphs.js

@@ -1,3 +1,33 @@
+// general output config
+const chartDisclaimers = {
+    Value: 'Value: Performance/(No_of_sockets * Price_of_CPU_dGPU), where prices are in USD as of December 2022.',
+    Efficiency: 'Efficiency: Performance/(No_of_sockets * TDP_of_CPU_dGPU), where total power dissipation (TDP) is in Watt as of December 2022.'
+}
+
+const defaultSelections = {
+    platforms: {name: 'platform',
+        data: [
+            'Intel® Core™  i9-12900K CPU-only',
+            'Intel® Core™  i5-10500TE CPU-only',
+            'Intel® Core™  i5-8500 CPU-only',
+            'Intel® Core™  i7-8700T CPU-only',
+            'Intel® Core™  i9-10900TE CPU-only',
+            'Intel® Core™  i7-1165G7 CPU-only'
+        ]
+    },
+    platformFilters: {name: 'coretype', data: ['CPU']},
+    models: {name: 'networkmodel',
+        data: [
+            'bert-large-uncased-whole-word-masking-squad-0001 ',
+            'mobilenet-ssd ',
+            'resnet-50',
+            'yolo_v3_tiny'
+        ]
+    },
+    parameters: {name: 'kpi', data: ['Throughput']},
+    pracision: {name: 'precision', data: ['INT8', 'FP32']}
+}
+
 class Filter {
 
     // param: GraphData[], networkModels[]
@@ -284,9 +314,9 @@ class Graph {
             case 'int8':
                 return { data: null, color: '#00C7FD', label: 'FPS (INT8)' };
             case 'fp16':
-                return { data: null, color: '#0068B5', label: 'FPS (FP16)' };
+                return { data: null, color: '#009fca', label: 'FPS (FP16)' };
             case 'fp32':
-                return { data: null, color: '#00C7FD', label: 'FPS (FP32)' };
+                return { data: null, color: '#007797', label: 'FPS (FP32)' };
             default:
                 return {};
         }
@@ -315,19 +345,12 @@ $(document).ready(function () {
     function clickBuildGraphs(graph, networkModels, ietype, platforms, kpis, precisions) {
         renderData(graph, networkModels, ietype, platforms, kpis, precisions);
 
-        $('.edit-settings-btn').show();
-        $('.clear-all-btn').hide();
         $('.modal-footer').show();
-        $('.configure-graphs-header h3').addClass('header-inactive');
+        $('#modal-display-graphs').show();
-        $('.benchmark-graph-results-header h3').removeClass('header-inactive');
-
         $('.edit-settings-btn').on('click', (event) => {
-            $('.configure-graphs-content').show();
+            $('#modal-configure-graphs').show();
-            $('.edit-settings-btn').hide();
+            $('#modal-display-graphs').hide();
-            $('.clear-all-btn').show();
             $('.modal-footer').hide();
-            $('.configure-graphs-header h3').removeClass('header-inactive');
-            $('.benchmark-graph-results-header h3').addClass('header-inactive');
             $('.chart-placeholder').empty();
         });
 
@@ -367,7 +390,7 @@ $(document).ready(function () {
     }
 
     function getSelectedNetworkModels() {
-        return $('.models-column-one input:checked, .models-column-two input:checked').map(function () {
+        return $('.models-column-one input:checked, .models-column-two input:checked').not('[data-networkmodel="Select All"]').map(function () {
             return $(this).data('networkmodel');
         }).get();
     }
@@ -392,7 +415,7 @@ $(document).ready(function () {
         }).get();
     }
     function getSelectedPrecisions() {
-        return $('.precisions-column .selected').map(function () {
+        return $('.precisions-column input:checked').map(function () {
             return $(this).data('precision');
         }).get();
     }
@@ -404,16 +427,16 @@ $(document).ready(function () {
         && getSelectedKpis().length > 0) {
             if (getSelectedKpis().includes('Throughput')) {
                 if (getSelectedPrecisions().length > 0) {
-                    $('#modal-build-graphs-btn').prop('disabled', false);
+                    $('#build-graphs-btn').prop('disabled', false);
                     return;
                 }
-                $('#modal-build-graphs-btn').prop('disabled', true);
+                $('#build-graphs-btn').prop('disabled', true);
                 return;
             }
-            $('#modal-build-graphs-btn').prop('disabled', false);
+            $('#build-graphs-btn').prop('disabled', false);
             return;
         }
-        $('#modal-build-graphs-btn').prop('disabled', true);
+        $('#build-graphs-btn').prop('disabled', true);
     }
 
     function renderModal(result) {
@@ -436,13 +459,16 @@ $(document).ready(function () {
             modalContent.addClass('modal-content');
             modal.append(modalContent);
 
-            // hide edit settings button
-            $('.edit-settings-btn').hide();
-
             const models = networkModels.map((networkModel) => createCheckMark(networkModel, 'networkmodel'));
-            modal.find('.models-column-one').append(models.slice(0, models.length / 2));
+            const selectAllModelsButton = createCheckMark('Select All', 'networkmodel')
+            modal.find('.models-column-one').append(selectAllModelsButton).append(models.slice(0, models.length / 2));
             modal.find('.models-column-two').append(models.slice(models.length / 2));
 
+            const precisions = Modal.getPrecisionsLabels().map((precision) => createCheckMark(precision, 'precision'));
+            modal.find('.precisions-column').append(precisions);
+            selectAllCheckboxes(precisions);
+            disableAllCheckboxes(precisions);
+
             const types = ieTypes.map((ieType) => {
                 var labelText = Modal.getIeTypeLabel(ieType);
                 if (labelText) {
@@ -456,6 +482,8 @@ $(document).ready(function () {
                     return item;
                 }
             });
+            modal.find('#modal-display-graphs').hide();
+
             modal.find('.ietype-column').append(types);
             modal.find('.ietype-column input').first().prop('checked', true);
 
@@ -464,45 +492,65 @@ $(document).ready(function () {
 
             $('body').prepend(modal);
 
-            var fPlatforms = filterClientPlatforms(graph.data, getSelectedNetworkModels(), getSelectedIeType(), Modal.getCoreTypes(getSelectedCoreTypes()));
+            renderClientPlatforms(graph.data, modal, true);
-            renderClientPlatforms(modal, Graph.getPlatformNames(fPlatforms));
+            preselectDefaultSettings(graph.data, modal);
 
-            $('.clear-all-btn').on('click', () => {
+            $('.clear-all-btn').on('click', clearAll);
-                $('.modal-content-grid-container input:checkbox').each((index, object) => $(object).prop('checked', false));
+            $('#build-graphs-btn').on('click', () => {
-                $('.precisions-column').empty();
+                $('#modal-configure-graphs').hide();
-                modal.find('.ietype-column input').first().prop('checked', true);
-                validateSelections();
-            });
-
-            $('#modal-build-graphs-btn').on('click', () => {
-                $('.configure-graphs-content').hide();
                 clickBuildGraphs(graph, getSelectedNetworkModels(), getSelectedIeType(), getSelectedClientPlatforms(), getSelectedKpis(), Modal.getPrecisions(getSelectedPrecisions()));
             });
-
             $('.modal-close').on('click', hideModal);
             $('.close-btn').on('click', hideModal);
-            modal.find('.ietype-column input').on('click', function (event) {
+            modal.find('.models-column-one input[data-networkmodel="Select All"]').on('click', function() {
-                if (getSelectedIeType() === 'core') {
+                if ($(this).prop('checked'))
-                    showCoreSelectorTypes(Modal.getCoreTypesLabels(), graph.data, modal);
+                    selectAllCheckboxes(models);
-                }
+                else deSelectAllCheckboxes(models);
-                else {
-                    hideCoreSelectorTypes();
-                }
-                var fPlatforms = filterClientPlatforms(graph.data, getSelectedNetworkModels(), getSelectedIeType(), Modal.getCoreTypes(getSelectedCoreTypes()));
-                renderClientPlatforms(modal, Graph.getPlatformNames(fPlatforms));
-            });
-            modal.find('.kpi-column input').on('click', function (event) {
-                if (getSelectedKpis().includes('Throughput')) {
-                    showPrecisionSelectorTypes(Modal.getPrecisionsLabels());
-                }
-                else {
-                    hidePrecisionSelectorTypes();
-                }
             });
+            modal.find('.ietype-column input').on('click', () => renderClientPlatforms(graph.data, modal, true));
+            modal.find('.kpi-column input').on('click', validateThroughputSelection);
             modal.find('input').on('click', validateSelections);
         });
     }
     
+    function validateThroughputSelection() {
+        const precisions = $('.precisions-column').find('input')
+        if (getSelectedKpis().includes('Throughput')) {
+            precisions.prop('disabled', false);
+        }
+        else {
+            precisions.prop('disabled', true);
+        }
+    }
+
+    function clearAll() {
+        $('.modal-content-grid-container input:checkbox').each((index, object) => $(object).prop('checked', false));
+        // Uncomment if you want the Clear All button to reset the Platform Type column as well
+        // modal.find('.ietype-column input').first().prop('checked', true);
+        validateThroughputSelection();
+        validateSelections();
+    }
+
+    function preselectDefaultSettings(data, modal) {
+        if (defaultSelections.platformFilters) {
+            const filters = modal.find('.selectable-box-container').children('.selectable-box');
+            filters.removeClass('selected');
+            defaultSelections.platformFilters.data.forEach(selection => {
+                filters.filter(`[data-${defaultSelections.platformFilters.name}="${selection}"]`).addClass('selected');
+            });
+            renderClientPlatforms(data, modal);
+        }
+        clearAll();
+        for (setting in defaultSelections) {
+            let name = defaultSelections[setting].name;
+            defaultSelections[setting].data.forEach(selection => {
+                $(`input[data-${name}="${selection}"]`).prop('checked', true);
+            });
+        }
+        validateThroughputSelection();
+        validateSelections();
+    }
+
     function showCoreSelectorTypes(coreTypes, graphDataArr,  modal) {
         if ($('.client-platform-column').find('.selectable-box-container').length) {
             $('.client-platform-column').find('.selectable-box-container').show();
@@ -524,7 +572,7 @@ $(document).ready(function () {
                 $(this).addClass('selected');
             }
             var fPlatforms = filterClientPlatforms(graphDataArr, getSelectedNetworkModels(), getSelectedIeType(), Modal.getCoreTypes(getSelectedCoreTypes()));
-            renderClientPlatforms(modal, Graph.getPlatformNames(fPlatforms));
+            renderClientPlatformsItems(modal, Graph.getPlatformNames(fPlatforms), true);
             validateSelections();
         });
     }
@@ -533,36 +581,6 @@ $(document).ready(function () {
         $('.client-platform-column').find('.selectable-box-container').hide();
     }
 
-    function showPrecisionSelectorTypes(precisions) {
-
-        if ($('.precisions-column').find('.selectable-box-container').length) {
-            $('.precisions-column').find('.selectable-box-container').show();
-            return;
-        }
-        var container = $('<div>');
-        container.addClass('selectable-box-container');
-        precisions.forEach((prec) => {
-            var box = $('<div>' + prec + '</div>');
-            box.attr('data-precision', prec);
-            box.addClass('selectable-box');
-            container.append(box);
-
-        });
-        $('.precisions-column').prepend(container);
-        $('.precisions-column .selectable-box').on('click', function () {
-            if ($(this).hasClass('selected')) {
-                $(this).removeClass('selected');
-            } else {
-                $(this).addClass('selected');
-            }
-            validateSelections();
-        });
-    }
-
-    function hidePrecisionSelectorTypes() {
-        $('.precisions-column').find('.selectable-box-container').hide();
-    }
-
     function filterClientPlatforms(data, networkModels, ietype, coreTypes) {
         // No longer filtering on the network type, if at some point we want the network type as a filter, uncomment this
         // var first = Filter.FilterByNetworkModel(data, networkModels);
@@ -575,9 +593,21 @@ $(document).ready(function () {
         return Array.from(optionMap.values());
     }
 
-    function renderClientPlatforms(modal, platformNames) {
+    function renderClientPlatforms(data, modal, preselectEveryItem) {
+        if (getSelectedIeType() === 'core') {
+            showCoreSelectorTypes(Modal.getCoreTypesLabels(), data, modal);
+        }
+        else {
+            hideCoreSelectorTypes();
+        }
+        var fPlatforms = filterClientPlatforms(data, getSelectedNetworkModels(), getSelectedIeType(), Modal.getCoreTypes(getSelectedCoreTypes()));
+        renderClientPlatformsItems(modal, Graph.getPlatformNames(fPlatforms), preselectEveryItem);
+    }
+
+    function renderClientPlatformsItems(modal, platformNames, preselectEveryItem) {
         $('.client-platform-column .checkmark-container').remove();
         const clientPlatforms = platformNames.map((platform) => createCheckMark(platform, 'platform'));
+        if (preselectEveryItem)
             selectAllCheckboxes(clientPlatforms);
         modal.find('.client-platform-column').append(clientPlatforms);
         modal.find('.client-platform-column input').on('click', validateSelections);
@@ -597,7 +627,25 @@ $(document).ready(function () {
     // receives a jquery list of items and selects all input checkboxes
     function selectAllCheckboxes(items) {
         items.forEach((item) => {
-            item.find(':input').attr('checked', true);
+            item.find(':input').prop('checked', true);
+        });
+    }
+
+    function enableAllCheckboxes(items) {
+        items.forEach((item) => {
+            item.find(':input').prop('disabled', false);
+        })
+    }
+
+    function disableAllCheckboxes(items) {
+        items.forEach((item) => {
+            item.find(':input').prop('disabled', true);
+        })
+    }
+
+    function deSelectAllCheckboxes(items) {
+        items.forEach((item) => {
+            item.find(':input').prop('checked', false);
         });
     }
 
@@ -659,8 +707,8 @@ $(document).ready(function () {
     function renderData(graph, networkModels, ietype, platforms, kpis, precisions) {
 
         $('.chart-placeholder').empty();
+        $('.modal-disclaimer-box').empty();
         networkModels.forEach((networkModel) => {
-            // graph title
             var chartName = networkModel;
             var chartSlug = chartName.replace(')', '').replace(' (', '-');
             var chartContainer = $('<div>');
@@ -686,8 +734,12 @@ $(document).ready(function () {
             } else {
               createEmptyChartContainer(chartContainer);
             }
-
         })
+       
+        for (let kpi of kpis) {
+            if (chartDisclaimers[kpi])
+                $('.modal-disclaimer-box').append($('<p>').text(chartDisclaimers[kpi]))
+        }
     };
 
     function createEmptyChartContainer(chartContainer) {