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
This commit is contained in:
bstankix
GitHub
parent
57cf23857a
commit
226bc301dc
319
docs/_static/css/custom.css
vendored
319
docs/_static/css/custom.css
vendored
@ -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: "";
|
||||
|
||||
110
docs/_static/html/modal.html
vendored
110
docs/_static/html/modal.html
vendored
@ -1,64 +1,78 @@
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<span style="float: left"><h2>Benchmark Graph Builder</h2></span>
|
||||
<div class="modal-header">
|
||||
<h2>Benchmark Graph Builder</h2>
|
||||
<span class="modal-close">×</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>
|
||||
224
docs/_static/js/graphs.js
vendored
224
docs/_static/js/graphs.js
vendored
@ -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,45 +492,65 @@ $(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) {
|
||||
$('.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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user