diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css index 651097ad963..bc46b75e521 100644 --- a/docs/_static/css/custom.css +++ b/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; @@ -320,7 +372,7 @@ div.highlight { .build-benchmark-section .title { flex-grow: 1; - } +} .build-benchmark-section h3 { margin-top: 1rem; @@ -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 { - display: grid; - padding: 12px 64px 2px 16px; - grid-template-columns: 40% 20% 20% 10% 10%; - column-gap: 16px; +.modal-header { + display: flex; + justify-content: space-between; + border: 0; + 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-right: 64px; - padding-top: 8px; - grid-template-columns: 20% 20% 20% 20% 10% 10%; - column-gap: 12px; - font-size: .78rem; + padding: 0.75rem 4rem 0.125rem 1rem; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto; + gap: 2rem 1rem; +} + +.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: ""; diff --git a/docs/_static/html/modal.html b/docs/_static/html/modal.html index df416715dac..0cdd6cd565f 100644 --- a/docs/_static/html/modal.html +++ b/docs/_static/html/modal.html @@ -1,64 +1,78 @@
-
-

Benchmark Graph Builder

 +
+

Benchmark Graph Builder

×
-
-
-
Edit Settings - +
-
-
-
-
Models
-
-
-
-
Platform Type
-
-
-
-
Platforms
-
-
-
-
Parameters
-
-
-
-
Precision
-
+
+
+
+
Models
+
+
+
+
+
+
+
+
Platform Type
+
+
+
+
+
+
+
Platforms
+
+
+
+
+
+
+
Parameters
+
+
+
+
+
+
+
Precision
+
+
+
+
+
-
-
-
-
-
-
-
-
+ +
-
-
-

STEP 2: Benchmark Graph Results

-
-
-
+
+
- +
+
+
+ +
\ No newline at end of file diff --git a/docs/_static/js/graphs.js b/docs/_static/js/graphs.js index 9680031d995..e743351e191 100644 --- a/docs/_static/js/graphs.js +++ b/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'); - $('.benchmark-graph-results-header h3').removeClass('header-inactive'); - + $('#modal-display-graphs').show(); $('.edit-settings-btn').on('click', (event) => { - $('.configure-graphs-content').show(); - $('.edit-settings-btn').hide(); - $('.clear-all-btn').show(); + $('#modal-configure-graphs').show(); + $('#modal-display-graphs').hide(); $('.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,44 +492,64 @@ $(document).ready(function () { $('body').prepend(modal); - var fPlatforms = filterClientPlatforms(graph.data, getSelectedNetworkModels(), getSelectedIeType(), Modal.getCoreTypes(getSelectedCoreTypes())); - renderClientPlatforms(modal, Graph.getPlatformNames(fPlatforms)); + renderClientPlatforms(graph.data, modal, true); + preselectDefaultSettings(graph.data, modal); - $('.clear-all-btn').on('click', () => { - $('.modal-content-grid-container input:checkbox').each((index, object) => $(object).prop('checked', false)); - $('.precisions-column').empty(); - modal.find('.ietype-column input').first().prop('checked', true); - validateSelections(); - }); - - $('#modal-build-graphs-btn').on('click', () => { - $('.configure-graphs-content').hide(); + $('.clear-all-btn').on('click', clearAll); + $('#build-graphs-btn').on('click', () => { + $('#modal-configure-graphs').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) { - if (getSelectedIeType() === 'core') { - showCoreSelectorTypes(Modal.getCoreTypesLabels(), graph.data, modal); - } - 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('.models-column-one input[data-networkmodel="Select All"]').on('click', function() { + if ($(this).prop('checked')) + selectAllCheckboxes(models); + else deSelectAllCheckboxes(models); }); + 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) { @@ -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 = $('
'); - container.addClass('selectable-box-container'); - precisions.forEach((prec) => { - var box = $('
' + prec + '
'); - 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,10 +593,22 @@ $(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')); - selectAllCheckboxes(clientPlatforms); + 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 = $('
'); @@ -686,8 +734,12 @@ $(document).ready(function () { } else { createEmptyChartContainer(chartContainer); } - }) + + for (let kpi of kpis) { + if (chartDisclaimers[kpi]) + $('.modal-disclaimer-box').append($('

').text(chartDisclaimers[kpi])) + } }; function createEmptyChartContainer(chartContainer) {