| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="filter.css"> |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
| <script src='https://unpkg.com/vue-select'></script> |
| <script src="http://underscorejs.org/underscore-min.js"></script> |
| <script src="./graph_data.js"></script> |
| <script src="./line_plotter.js"></script> |
| <script src="./box_plotter.js"></script> |
| <script src="./graph_plotter.js"></script> |
| <script src="./dot_plotter.js"></script> |
| <script src="./graph_utils.js"></script> |
| <script src="./metric_significance.js"></script> |
| <script src="../../tracing/third_party/mannwhitneyu/mannwhitneyu.js"></script> |
| <script src="./stat_test_summary.js"></script> |
| <script src="https://d3js.org/d3.v5.min.js"></script> |
| <script src="./bar_plotter.js"></script> |
| <script src="./stacked_bar_plotter.js"></script> |
| <script src="state_manager.js"></script> |
| </head> |
| |
| <body> |
| <style> |
| body { |
| font-family: Arial, Helvetica, sans-serif; |
| } |
| </style> |
| |
| <script type="text/x-template" id="table-template"> |
| 'use strict'; |
| <table> |
| <thead> |
| <tr> |
| <template v-for='key in columns'> |
| <th |
| @click="sortBy(key)" |
| :class="{ active: state.sortKey == key }"> |
| {{ key | capitalize }} |
| <span class="arrow" :class="state.sortOrders[key] > 0 ? 'asc' : 'dsc'"> |
| </span> |
| </th> |
| </template> |
| <template v-for='add in additional'> |
| <th |
| @click="sortBy(add)" |
| :class="{ active: state.sortKey == add }"> |
| <input type='checkbox' @click='pickHeadTable(add)' class='checkbox-head'/> |
| {{ add | capitalize }} |
| <span class="arrow" :class="state.sortOrders[add] > 0 ? 'asc' : 'dsc'"> |
| </span> |
| </th> |
| </template> |
| </tr> |
| </thead> |
| <tbody> |
| <template v-for="entry in filteredData"> |
| <tr |
| id='entry'> |
| <td @click.self='toggleMetric(entry)' |
| :class="{'state.openedMetric': state.openedMetric.includes(entry.id)}"> |
| <input type='checkbox' @click='pickTableMetric(entry)' class='checkbox-metric'/> |
| {{entry['metric']}} |
| </td> |
| <template v-for='add in additional'> |
| <td> |
| {{entry[add]}} |
| </td> |
| </template> |
| </tr> |
| <template v-if='state.openedMetric.includes(entry.id)'> |
| <template v-for='story in state.storiesEntries'> |
| <tr |
| id ='story-row'> |
| <td id='story-story' @click.self='toggleStory(story)' |
| :class="{'state.openedStory': state.openedStory.includes(story.story)}"> |
| <input type='checkbox'@click='pickTableStory(story)' class='checkbox-story'/> |
| {{ story.story }} |
| </td> |
| <template v-for='el of additional'> |
| <td id='story-sample'> {{story[el]}}</td> |
| </template> |
| </tr> |
| <template v-if='state.openedStory.includes(story.story)'> |
| <tr> |
| <v-select placeholder='Available storysetRepeats' |
| multiple v-model='state.selected_diagnostics' |
| :options='diagnostics_options' |
| v-if='seen_diagnostics' |
| id='storySetRepeats'></v-select> |
| </tr> |
| </template> |
| </template> |
| </template> |
| </template> |
| </tbody> |
| </table> |
| </script> |
| |
| <!-- Template for stats_test_summary_component.js --> |
| <script type="text/x-template" id="stat-test-summary-template"> |
| 'use strict'; |
| <div id="statistical-sig"> |
| <div v-if="testResults.length"> |
| <p> Reference Column: {{referenceColumn}}</p> |
| <p>Statistically significant metrics:</p> |
| <ol> |
| <li v-for="result in testResults"> |
| <p class="link" |
| v-bind:class="result.evidence.type" |
| v-on:click="splitMemoryMetric(result.metric)"> |
| {{ result.metric }} |
| </p> |
| <p> |
| p: {{result.evidence.p}} |
| </p> |
| <div v-if="result.stories.length"> |
| <p>Stories</p> |
| <ol> |
| <li v-for="story in result.stories"> |
| <p v-bind:class="story.evidence.type"> |
| {{ story.story }} |
| </p> |
| <p> |
| p: {{story.evidence.p}} |
| </p> |
| </li> |
| </ol> |
| </div> |
| <p v-else> |
| Insufficient evidence for statistically significant changes in stories under this metric. |
| </p> |
| </li> |
| </ol> |
| </div> |
| <p v-else>No statistically significant changes found.</p> |
| </div> |
| </script> |
| |
| <div class="app-layout"> |
| <div class='menuLeft' id='menu'> |
| <input type='file' id='file-input' class='file_input'/> |
| <div id='filterItem'> |
| <sup>Memory metrics</sup> |
| <v-select placeholder='browser' |
| :options = 'browserOptions' |
| v-model='state.browser' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='subprocess' |
| :options = 'subprocessOptions' |
| v-model='state.subprocess' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='size' |
| :options='sizeOptions' |
| v-model='state.size' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='component' |
| :options='componentsOptions' |
| v-model='state.component' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='subcomponent' |
| id='subcomponentBox' |
| v-model='state.subcomponent' |
| :options='firstSubcompOptions' |
| ></v-select> |
| <v-select placeholder='subcomponent' |
| id='subcomponentBox_' |
| v-model='state.subsubcomponent' |
| :options='secondSubcompOptions' |
| ></v-select> |
| <button v-on:click="apply" |
| id='apply_button'> |
| Apply</button> |
| </div> |
| <v-select placeholder="Please select a reference column" |
| :options="allLabels" |
| v-model="state.referenceColumn"></v-select> |
| <stat-test-summary |
| v-bind:test-results="state.testResults" |
| v-bind:reference-column="state.referenceColumn"></stat-test-summary> |
| </div> |
| <!-- the root component --> |
| <div class='appRight' id='app'> |
| <div id='canvas'></div> |
| <form id="search"> |
| <input v-if="gridDataLoaded" |
| id='inputBox' |
| placeholder="Search a metric" |
| name="query" |
| v-model="state.searchQuery"> |
| <v-select placeholder='Pick type of plot' |
| id='globalTypeOfPlot' |
| :options='state.typesOfPlot' |
| v-model='state.chosenTypeOfPlot' |
| v-if='gridDataLoaded'></v-select> |
| </form> |
| <button v-if="hasHistory()" v-on:click="undo">BACK</button> |
| |
| <button v-if='data_loaded' |
| id='reset_table' |
| v-on:click='resetTableData()'> |
| Reset table |
| </button> |
| <data-table v-if="gridDataLoaded" |
| :data="state.gridData" |
| :columns="gridColumns" |
| :filter-key="state.searchQuery" |
| :additional='columnsForChosenDiagnostic' |
| :plot = 'state.chosenTypeOfPlot' |
| ref='tableComponent'> |
| </data-table> |
| </div |
| |
| </div> |
| <script src='app.js'></script> |
| <script src="filter.js"></script> |
| <script src='table_component.js'></script> |
| <script src='metrics_parser.js'></script> |
| </body> |
| </html> |
