Skip to content

GitLab

T
tangled
Commit 4cbd3ae2 authored by James Long's avatar James Long Committed by Commit Bot
Browse files
Options

[Lorenz] Update UI to use Material design 

This change brings in the vue-material package and updates the UI to use
its Material design components. All the graph controls are now in a
sidebar, and the graph canvas is responsive to fit the size of the page.

Bug: 1102546
Change-Id: If47d8319337a9700bd921ba3938d3fe3da7b67b9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2347407Reviewed-by: default avatarMohamed Heikal <mheikal@chromium.org>
Reviewed-by: default avatarSamuel Huang <huangs@chromium.org>
Commit-Queue: James Long <yjlong@google.com>
Cr-Commit-Position: refs/heads/master@{#796945}
parent 3ab681ee
Hide whitespace changes
Inline Side-by-side
Showing with 445 additions and 214 deletions
tools/android/dependency_analysis/js/package.json
View file @ 4cbd3ae2
......@@ -11,7 +11,8 @@
"dependencies": {
"@trevoreyre/autocomplete-vue": "^2.2.0",
"d3": "^5.16.0",
"vue": "^2.6.11"
"vue": "^2.6.11",
"vue-material": "^1.0.0-beta-14"
},
"devDependencies": {
"copy-webpack-plugin": "^6.0.3",
......
tools/android/dependency_analysis/js/src/class_view.html
View file @ 4cbd3ae2
......@@ -3,6 +3,8 @@
<head>
<link rel="icon" type="image/png"
href="https://fonts.gstatic.com/s/i/googlematerialicons/account_tree/v6/gm_blue-48dp/1x/gm_account_tree_gm_blue_48dp.png">
<link rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
</head>
<body>
<div id="class-graph-page"></div>
......
tools/android/dependency_analysis/js/src/class_view.js
View file @ 4cbd3ae2
......@@ -2,13 +2,39 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import Vue from 'vue';
import ClassGraphPage from './vue_components/class_graph_page.vue';
import {loadGraph} from './load_graph.js';
import * as d3 from 'd3';
import Vue from 'vue';
import {
MdButton,
MdCheckbox,
MdDivider,
MdField,
MdIcon,
MdList,
// MdMenu is a dependency of MdField's MdSelect, see
// https://github.com/vuematerial/vue-material/issues/1974
MdMenu,
MdRadio,
MdSubheader,
} from 'vue-material/dist/components';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
document.addEventListener('DOMContentLoaded', () => {
loadGraph().then(data => {
Vue.use(MdButton);
Vue.use(MdCheckbox);
Vue.use(MdDivider);
Vue.use(MdField);
Vue.use(MdIcon);
Vue.use(MdList);
Vue.use(MdMenu);
Vue.use(MdRadio);
Vue.use(MdSubheader);
new Vue({
el: '#class-graph-page',
render: createElement => createElement(
......@@ -21,6 +47,6 @@ document.addEventListener('DOMContentLoaded', () => {
),
});
}).catch(e => {
document.write("Error loading graph.");
document.write('Error loading graph.');
});
});
tools/android/dependency_analysis/js/src/graph_view.js
View file @ 4cbd3ae2
......@@ -350,9 +350,10 @@ class GraphView {
.classed('graph-labels', true)
.attr('pointer-events', 'none');
// TODO(yjlong): SVG should be resizable & these values updated.
const width = +svg.attr('width');
const height = +svg.attr('height');
// Using .style() instead of .attr() gets px-based measurements of
// percentage-based widths and heights.
const width = parseInt(svg.style('width'), 10);
const height = parseInt(svg.style('height'), 10);
const centeringStrengthY = 0.1;
const centeringStrengthX = centeringStrengthY * (height / width);
......
tools/android/dependency_analysis/js/src/package_view.html
View file @ 4cbd3ae2
......@@ -3,6 +3,8 @@
<head>
<link rel="icon" type="image/png"
href="https://fonts.gstatic.com/s/i/googlematerialicons/account_tree/v6/gm_blue-48dp/1x/gm_account_tree_gm_blue_48dp.png">
<link rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
</head>
<body>
<div id="package-graph-page"></div>
......
tools/android/dependency_analysis/js/src/package_view.js
View file @ 4cbd3ae2
......@@ -2,13 +2,39 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import Vue from 'vue';
import PackageGraphPage from './vue_components/package_graph_page.vue';
import {loadGraph} from './load_graph.js';
import * as d3 from 'd3';
import Vue from 'vue';
import {
MdButton,
MdCheckbox,
MdDivider,
MdField,
MdIcon,
MdList,
// MdMenu is a dependency of MdField's MdSelect, see
// https://github.com/vuematerial/vue-material/issues/1974
MdMenu,
MdRadio,
MdSubheader,
} from 'vue-material/dist/components';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
document.addEventListener('DOMContentLoaded', () => {
loadGraph().then(data => {
Vue.use(MdButton);
Vue.use(MdCheckbox);
Vue.use(MdDivider);
Vue.use(MdField);
Vue.use(MdIcon);
Vue.use(MdList);
Vue.use(MdMenu);
Vue.use(MdRadio);
Vue.use(MdSubheader);
new Vue({
el: '#package-graph-page',
render: createElement => createElement(
......@@ -21,6 +47,6 @@ document.addEventListener('DOMContentLoaded', () => {
),
});
}).catch(e => {
document.write("Error loading graph.");
document.write('Error loading graph.');
});
});
tools/android/dependency_analysis/js/src/vue_components/class_graph_hull_settings.vue
View file @ 4cbd3ae2
......@@ -9,15 +9,15 @@
v-for="hullDisplay in HullDisplay"
:key="hullDisplay"
@change="displayOptionChanged">
<input
<MdRadio
:id="hullDisplay"
v-model="internalSelectedHullDisplay"
class="md-primary hull-settings-option"
type="radio"
name="hullDisplayRadioButtons"
:value="hullDisplay">
<label :for="hullDisplay">
{{ hullDisplay }}
</label>
</MdRadio>
</div>
</div>
</template>
......@@ -58,4 +58,8 @@ export default ClassGraphHullSettings;
flex-direction: column;
margin-bottom: 10px;
}
.hull-settings-option {
margin: 0;
}
</style>
tools/android/dependency_analysis/js/src/vue_components/class_graph_page.vue
View file @ 4cbd3ae2
......@@ -4,31 +4,12 @@
<template>
<div id="page-container">
<div id="page-controls">
<GraphFilterInput
:node-ids="pageModel.getNodeIds()"
:nodes-already-in-filter="
displaySettingsData.nodeFilterData.filterList"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
<GraphFilterItems
:node-filter-data="displaySettingsData.nodeFilterData"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_REMOVE]="filterRemoveNode"
@[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
@[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"/>
<NumericInput
description="Change inbound (blue) depth:"
input-id="inbound-input"
:input-value.sync="displaySettingsData.inboundDepth"
:min-value="0"/>
<NumericInput
description="Change outbound (yellow) depth:"
input-id="outbound-input"
:input-value.sync="displaySettingsData.outboundDepth"
:min-value="0"/>
</div>
<div id="graph-and-node-details-container">
<div id="title-and-graph-container">
<div
id="title"
class="md-headline">
Clank Dependency Viewer - Class Graph
</div>
<GraphVisualization
:graph-update-triggers="[
getNodeGroup,
......@@ -39,25 +20,61 @@
:get-node-group="getNodeGroup"
@[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
@[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
<div id="node-details-container">
<GraphDisplayPanel
:display-settings-data="displaySettingsData"
:display-settings-preset.sync="
displaySettingsData.displaySettingsPreset">
<GraphDisplaySettings
:display-settings-data="displaySettingsData"
@[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
<ClassGraphHullSettings
:selected-hull-display.sync="displaySettingsData.hullDisplay"
@[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
</GraphDisplayPanel>
<GraphSelectedNodeDetails
:selected-node-details-data="pageModel.selectedNodeDetailsData"
@[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
@[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode"/>
<ClassDetailsPanel
:selected-class="pageModel.selectedNodeDetailsData.selectedNode"/>
</div>
<div
id="page-sidebar"
class="md-elevation-3">
<MdSubheader class="sidebar-subheader">
Node Filter
</MdSubheader>
<GraphFilterItems
id="graph-filter-items"
:node-filter-data="displaySettingsData.nodeFilterData"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_REMOVE]="filterRemoveNode"
@[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
@[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"/>
<GraphFilterInput
:node-ids="pageModel.getNodeIds()"
:nodes-already-in-filter="
displaySettingsData.nodeFilterData.filterList"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
<MdSubheader class="sidebar-subheader">
Display Options
</MdSubheader>
<div id="inbound-outbound-depth-inputs">
<NumericInput
description="Inbound Depth"
input-id="inbound-input"
:input-value.sync="displaySettingsData.inboundDepth"
:min-value="0"/>
<NumericInput
description="Outbound Depth"
input-id="outbound-input"
:input-value.sync="displaySettingsData.outboundDepth"
:min-value="0"/>
</div>
<GraphDisplayPanel
:display-settings-data="displaySettingsData"
:display-settings-preset.sync="
displaySettingsData.displaySettingsPreset">
<GraphDisplaySettings
:display-settings-data="displaySettingsData"
@[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
<ClassGraphHullSettings
:selected-hull-display.sync="displaySettingsData.hullDisplay"
@[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
</GraphDisplayPanel>
<MdSubheader class="sidebar-subheader">
Node Details
</MdSubheader>
<GraphSelectedNodeDetails
:selected-node-details-data="pageModel.selectedNodeDetailsData"
@[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
@[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode"/>
<ClassDetailsPanel
:selected-class="pageModel.selectedNodeDetailsData.selectedNode"/>
</div>
</div>
</template>
......@@ -247,19 +264,48 @@ export default ClassGraphPage;
</style>
<style scoped>
#title {
padding: 10px;
}
#page-container {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
#title-and-graph-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
#page-controls {
#page-sidebar {
display: flex;
flex-direction: column;
flex-grow: 0;
overflow-y: scroll;
padding: 0 20px;
width: 30vw;
}
.sidebar-subheader {
padding: 0;
}
#graph-filter-items {
margin-bottom: 10px;
}
#inbound-outbound-depth-inputs {
display: flex;
flex-direction: row;
height: 15vh;
}
#graph-and-node-details-container {
#page-controls {
display: flex;
flex-direction: row;
height: 15vh;
}
</style>
tools/android/dependency_analysis/js/src/vue_components/graph_display_panel.vue
View file @ 4cbd3ae2
......@@ -5,21 +5,31 @@
<template>
<div id="display-panel">
<div id="preset-container">
<select
v-model="internalDisplaySettingsPreset"
@change="applySelectedPreset">
<option
v-for="presetName in DisplaySettingsPreset"
:key="presetName"
:value="presetName">
{{ presetName }}
</option>
</select>
<button @click="settingsExpanded = !settingsExpanded">
{{ settingsExpanded ? 'Collapse' : 'Expand' }} Advanced Settings
</button>
<MdField id="preset-select-container">
<label for="preset-select">Display Preset</label>
<MdSelect
id="preset-select"
v-model="internalDisplaySettingsPreset"
@md-selected="applySelectedPreset">
<MdOption
v-for="presetName in DisplaySettingsPreset"
:key="presetName"
:value="presetName">
{{ presetName }}
</MdOption>
</MdSelect>
</MdField>
<MdButton
class="md-primary md-raised md-dense"
@click="settingsExpanded = !settingsExpanded">
{{ settingsExpanded ? 'Hide' : 'Show' }} Advanced
</MdButton>
</div>
<div
v-if="settingsExpanded"
id="advanced-panel">
<slot/>
</div>
<slot v-if="settingsExpanded"/>
</div>
</template>
......@@ -63,8 +73,19 @@ export default GraphDisplaySettings;
<style scoped>
#preset-container {
align-items: baseline;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#preset-select-container {
margin-bottom: 0;
width: 60%;
}
#advanced-panel {
margin: 0 20px;
}
#display-panel {
......
tools/android/dependency_analysis/js/src/vue_components/graph_display_settings.vue
View file @ 4cbd3ae2
......@@ -4,34 +4,36 @@
<template>
<div id="display-settings">
<div>
<input
id="curve-edges"
v-model="displaySettingsData.curveEdges"
type="checkbox"
@change="displayOptionChanged">
<label for="curve-edges">Curve graph edges</label>
</div>
<div>
<input
id="color-on-hover"
v-model="displaySettingsData.colorOnlyOnHover"
type="checkbox"
@change="displayOptionChanged">
<label for="color-on-hover">Color graph edges only on node hover</label>
</div>
<label for="graph-edge-color">Graph edge color scheme:</label>
<select
id="graph-edge-color"
v-model="displaySettingsData.graphEdgeColor"
<MdField class="display-settings-option">
<label for="graph-edge-color">Graph edge color scheme:</label>
<MdSelect
id="graph-edge-color"
v-model="displaySettingsData.graphEdgeColor"
@md-selected="displayOptionChanged">
<MdOption
v-for="edgeColor in GraphEdgeColor"
:key="edgeColor"
:value="edgeColor">
{{ edgeColor }}
</MdOption>
</MdSelect>
</MdField>
<MdCheckbox
id="curve-edges"
v-model="displaySettingsData.curveEdges"
class="md-primary display-settings-option"
type="checkbox"
@change="displayOptionChanged">
<option
v-for="edgeColor in GraphEdgeColor"
:key="edgeColor"
:value="edgeColor">
{{ edgeColor }}
</option>
</select>
Curve graph edges
</MdCheckbox>
<MdCheckbox
id="color-on-hover"
v-model="displaySettingsData.colorOnlyOnHover"
class="md-primary display-settings-option"
type="checkbox"
@change="displayOptionChanged">
Color graph edges only on node hover
</MdCheckbox>
</div>
</template>
......@@ -63,4 +65,8 @@ export default GraphDisplaySettings;
flex-direction: column;
margin-bottom: 10px;
}
.display-settings-option {
margin: 5px 0;
}
</style>
tools/android/dependency_analysis/js/src/vue_components/graph_filter_input.vue
View file @ 4cbd3ae2
......@@ -4,7 +4,11 @@
<template>
<div class="user-input-group">
<label for="filter-input">Add node to filter (exact name):</label>
<label
class="md-subheading"
for="filter-input">
Add Node
</label>
<Autocomplete
id="filter-input"
ref="autocomplete"
......@@ -76,16 +80,23 @@ export default GraphFilterInput;
<style>
#filter-input {
width: 500px;
width: 100%;
}
.autocomplete-result-list {
background: #fff;
box-sizing: content-box;
list-style: none;
max-height: 600px;
margin: 0;
max-height: 40vh;
overflow-y: auto;
padding: 0;
/* !important since Autocomplete hard-codes z-index into its HTML template */
z-index: 10 !important;
}
.autocomplete-result {
word-wrap: break-word;
}
.autocomplete-result:hover,
......
tools/android/dependency_analysis/js/src/vue_components/graph_filter_items.vue
View file @ 4cbd3ae2
......@@ -5,28 +5,36 @@
<template>
<div id="filter-items-container">
<div id="controls">
<button @click="checkAll">
<MdButton
class="md-primary md-raised md-dense"
@click="checkAll">
Check All
</button>
<button @click="uncheckAll">
</MdButton>
<MdButton
class="md-primary md-raised md-dense"
@click="uncheckAll">
Uncheck All
</button>
</MdButton>
</div>
<ul id="filter-list">
<li
<MdList
id="filter-list"
class="md-scrollbar">
<MdListItem
v-for="node in filterList"
:key="node.name">
<div class="filter-list-item">
<div @click="removeFromFilter(node.name)">
x
</div>
<input
v-model="node.checked"
type="checkbox">
<div>{{ shortenName(node.name) }}</div>
<MdButton
class="numeric-input-button md-icon-button md-dense"
@click="removeFromFilter(node.name)">
<MdIcon>clear</MdIcon>
</MdButton>
<MdCheckbox
v-model="node.checked"
class="md-primary"/>
<div class="filter-items-text md-list-item-text">
{{ shortenName(node.name) }}
</div>
</li>
</ul>
</MdListItem>
</MdList>
</div>
</template>
......@@ -58,6 +66,13 @@ const GraphFilterItems = {
export default GraphFilterItems;
</script>
<style>
#filter-list .md-list-item-content {
min-height: 0;
padding: 0;
}
</style>
<style scoped>
ul {
list-style-type: none;
......@@ -70,20 +85,21 @@ ul {
min-width: 100px;
}
.filter-items-text{
display: inline-block;
margin-left: 15px;
white-space: normal;
width: 100%;
word-wrap: break-word;
}
#filter-list {
margin: 0;
overflow-x: hidden;
max-height: 30vh;
overflow-y: scroll;
padding: 0;
}
#controls {
display: flex;
flex-direction: row;
}
.filter-list-item {
display: flex;
flex-direction: row;
}
</style>
tools/android/dependency_analysis/js/src/vue_components/graph_selected_node_details.vue
View file @ 4cbd3ae2
......@@ -5,28 +5,39 @@
<template>
<div class="selected-node-details">
<template v-if="selectedNode !== null">
<ul>
<li>Name: {{ selectedNode.id }}</li>
<li>Display Name: {{ selectedNode.displayName }}</li>
<li
v-for="(value, key) in selectedNode.visualizationState"
:key="key">
{{ key }}: {{ value }}
</li>
</ul>
<button
<MdList class="md-double-line">
<MdListItem>
<div class="md-list-item-text">
<span class="selected-node-details-text">
{{ selectedNode.id }}
</span>
<span>Name</span>
</div>
</MdListItem>
<MdListItem>
<div class="md-list-item-text">
<span class="selected-node-details-text">
{{ selectedNode.displayName }}
</span>
<span>Display Name</span>
</div>
</MdListItem>
</MdList>
<MdButton
v-if="selectedNode.visualizationState.selectedByFilter"
class="md-primary md-raised md-dense"
@click="uncheckNodeInFilter">
Uncheck in filter
</button>
<button
</MdButton>
<MdButton
v-else
class="md-primary md-raised md-dense"
@click="checkNodeInFilter">
Add/check in filter
</button>
</MdButton>
</template>
<div v-else>
Click a node for more details.
(Click a node for more details.)
</div>
</div>
</template>
......@@ -59,6 +70,12 @@ export default GraphSelectedNodeDetails;
.selected-node-details {
display: flex;
flex-direction: column;
min-width: 400px;
}
.selected-node-details-text{
display: inline-block;
white-space: normal;
width: 100%;
word-wrap: break-word;
}
</style>
tools/android/dependency_analysis/js/src/vue_components/graph_visualization.vue
View file @ 4cbd3ae2
......@@ -5,8 +5,8 @@
<template>
<svg
id="graph-svg"
width="960"
height="600"/>
width="100%"
height="100%"/>
</template>
<script>
......@@ -72,9 +72,12 @@ export default GraphVisualization;
</script>
<style>
svg text {
font-family: Roboto;
}
.graph-hull-labels text {
dominant-baseline: baseline;
font-family: sans-serif;
font-size: 10px;
font-weight: bold;
text-anchor: middle;
......@@ -89,7 +92,6 @@ export default GraphVisualization;
}
.graph-labels text {
font-family: sans-serif;
font-size: 12px;
}
......
tools/android/dependency_analysis/js/src/vue_components/numeric_input.vue
View file @ 4cbd3ae2
......@@ -4,20 +4,26 @@
<template>
<div class="numeric-input-container">
<label :for="inputId">{{ description }}</label>
<div class="input-and-button-container">
<input
<MdField
class="input-field">
<label :for="inputId">{{ description }}</label>
<MdInput
:id="inputId"
v-model="internalInputValue"
type="number">
<div class="button-group">
<button @click="internalInputValue++">
+
</button>
<button @click="internalInputValue--">
-
</button>
</div>
class="numeric-input-value"
type="number"/>
</MdField>
<div class="button-group">
<MdButton
class="numeric-input-button md-icon-button md-dense"
@click="internalInputValue++">
<MdIcon>expand_less</MdIcon>
</MdButton>
<MdButton
class="numeric-input-button md-icon-button md-dense"
@click="internalInputValue--">
<MdIcon>expand_more</MdIcon>
</MdButton>
</div>
</div>
</template>
......@@ -57,25 +63,28 @@ export default NumericInput;
<style scoped>
.numeric-input-container {
display: flex;
flex-direction: column;
max-width: 150px;
}
.input-and-button-container {
display: flex;
flex-direction: row;
}
.button-group {
align-items: center;
display: flex;
flex-direction: column;
}
input {
.numeric-input-button {
margin: 0;
}
.numeric-input-value {
width: 100%;
}
.input-field {
width: 50%;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
......
tools/android/dependency_analysis/js/src/vue_components/package_details_panel.vue
View file @ 4cbd3ae2
......@@ -58,8 +58,9 @@ export default PackageDetailsPanel;
<style scoped>
.package-details-panel {
max-height: 300px;
overflow: hidden;
max-height: 400px;
min-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
tools/android/dependency_analysis/js/src/vue_components/package_graph_page.vue
View file @ 4cbd3ae2
......@@ -4,31 +4,12 @@
<template>
<div id="page-container">
<div id="page-controls">
<GraphFilterInput
:node-ids="pageModel.getNodeIds()"
:nodes-already-in-filter="
displaySettingsData.nodeFilterData.filterList"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
<GraphFilterItems
:node-filter-data="displaySettingsData.nodeFilterData"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_REMOVE]="filterRemoveNode"
@[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
@[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"/>
<NumericInput
description="Change inbound (blue) depth:"
input-id="inbound-input"
:input-value.sync="displaySettingsData.inboundDepth"
:min-value="0"/>
<NumericInput
description="Change outbound (yellow) depth:"
input-id="outbound-input"
:input-value.sync="displaySettingsData.outboundDepth"
:min-value="0"/>
</div>
<div id="graph-and-node-details-container">
<div id="title-and-graph-container">
<div
id="title"
class="md-headline">
Clank Dependency Viewer - Package Graph
</div>
<GraphVisualization
:graph-update-triggers="[
displaySettingsData,
......@@ -37,22 +18,58 @@
:display-settings-data="displaySettingsData"
@[CUSTOM_EVENTS.NODE_CLICKED]="graphNodeClicked"
@[CUSTOM_EVENTS.NODE_DOUBLE_CLICKED]="graphNodeDoubleClicked"/>
<div id="node-details-container">
<GraphDisplayPanel
:display-settings-data="displaySettingsData"
:display-settings-preset.sync="
displaySettingsData.displaySettingsPreset">
<GraphDisplaySettings
:display-settings-data="displaySettingsData"
@[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
</GraphDisplayPanel>
<GraphSelectedNodeDetails
:selected-node-details-data="pageModel.selectedNodeDetailsData"
@[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
@[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode"/>
<PackageDetailsPanel
:selected-package="pageModel.selectedNodeDetailsData.selectedNode"/>
</div>
<div
id="page-sidebar"
class="md-elevation-3">
<MdSubheader class="sidebar-subheader">
Node Filter
</MdSubheader>
<GraphFilterItems
id="graph-filter-items"
:node-filter-data="displaySettingsData.nodeFilterData"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_REMOVE]="filterRemoveNode"
@[CUSTOM_EVENTS.FILTER_CHECK_ALL]="filterCheckAll"
@[CUSTOM_EVENTS.FILTER_UNCHECK_ALL]="filterUncheckAll"/>
<GraphFilterInput
:node-ids="pageModel.getNodeIds()"
:nodes-already-in-filter="
displaySettingsData.nodeFilterData.filterList"
:shorten-name="filterShortenName"
@[CUSTOM_EVENTS.FILTER_SUBMITTED]="filterAddOrCheckNode"/>
<MdSubheader class="sidebar-subheader">
Display Options
</MdSubheader>
<div id="inbound-outbound-depth-inputs">
<NumericInput
description="Inbound Depth"
input-id="inbound-input"
:input-value.sync="displaySettingsData.inboundDepth"
:min-value="0"/>
<NumericInput
description="Outbound Depth"
input-id="outbound-input"
:input-value.sync="displaySettingsData.outboundDepth"
:min-value="0"/>
</div>
<GraphDisplayPanel
:display-settings-data="displaySettingsData"
:display-settings-preset.sync="
displaySettingsData.displaySettingsPreset">
<GraphDisplaySettings
:display-settings-data="displaySettingsData"
@[CUSTOM_EVENTS.DISPLAY_OPTION_CHANGED]="displayOptionChanged"/>
</GraphDisplayPanel>
<MdSubheader class="sidebar-subheader">
Node Details
</MdSubheader>
<GraphSelectedNodeDetails
:selected-node-details-data="pageModel.selectedNodeDetailsData"
@[CUSTOM_EVENTS.DETAILS_CHECK_NODE]="filterAddOrCheckNode"
@[CUSTOM_EVENTS.DETAILS_UNCHECK_NODE]="filterUncheckNode"/>
<PackageDetailsPanel
:selected-package="pageModel.selectedNodeDetailsData.selectedNode"/>
</div>
</div>
</template>
......@@ -221,24 +238,48 @@ export default PackageGraphPage;
</style>
<style scoped>
#title {
padding: 10px;
}
#page-container {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
#title-and-graph-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
#page-controls {
#page-sidebar {
display: flex;
flex-direction: row;
height: 15vh;
flex-direction: column;
flex-grow: 0;
overflow-y: scroll;
padding: 0 20px;
width: 30vw;
}
.sidebar-subheader {
padding: 0;
}
#graph-and-node-details-container {
#graph-filter-items {
margin-bottom: 10px;
}
#inbound-outbound-depth-inputs {
display: flex;
flex-direction: row;
}
#node-details-container {
#page-controls {
display: flex;
flex-direction: column;
flex-direction: row;
height: 15vh;
}
</style>
tools/android/dependency_analysis/js/webpack.config.js
View file @ 4cbd3ae2
......@@ -59,7 +59,6 @@ module.exports = {
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'),
use: ['vue-style-loader', 'style-loader', 'css-loader'],
},
],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment