tools/winscope/src/TreeView.vue - platform/development - Git at Google

 <!-- Copyright (C) 2017 The Android Open Source Project

      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at

           http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
 <template>
   <div class="tree-view" v-if="item">
     <div class="node"
       :class="[{
         leaf: isLeaf,
         selected: isSelected,
         'child-selected': immediateChildSelected,
         clickable: isClickable,
         hover: nodeHover,
         'child-hover': childHover,
       }, diffClass]"
       :style="nodeOffsetStyle"
       @click="clicked"
       @contextmenu.prevent="openContextMenu"
       ref="node"
     >
       <button
         class="toggle-tree-btn"
         @click="toggleTree"
         v-if="!isLeaf && !flattened"
         v-on:click.stop
       >
         <i aria-hidden="true" class="md-icon md-theme-default material-icons">
           {{isCollapsed ? "chevron_right" : "expand_more"}}
         </i>
       </button>
       <div class="leaf-node-icon-wrapper" v-else>
         <i class="leaf-node-icon"/>
       </div>
       <div class="description">
         <div v-if="elementView">
           <component
             :is="elementView"
             :item="item"
             :simplify-names="simplifyNames"
           />
         </div>
         <div v-else>
           <DefaultTreeElement
             :item="item"
             :simplify-names="simplifyNames"
             :errors="errors"
             :transitions="transitions"
           />
         </div>
       </div>
       <div v-show="isCollapsed">
         <button
           class="expand-tree-btn"
           :class="[{
             'child-selected': isCollapsed && childIsSelected
             }, collapseDiffClass]"
           v-if="children"
           @click="expandTree"
           v-on:click.stop
         >
           <i
             aria-hidden="true"
             class="md-icon md-theme-default material-icons"
           >
             more_horiz
           </i>
         </button>
       </div>
     </div>

     <node-context-menu
       ref="nodeContextMenu"
       v-on:collapseAllOtherNodes="collapseAllOtherNodes"
     />

     <div class="children" v-if="children" v-show="!isCollapsed" :style="childrenIndentation()">
       <tree-view
         v-for="(c,i) in children"
         :item="c"
         @item-selected="childItemSelected"
         :selected="selected"
         :key="i"
         :filter="childFilter(c)"
         :flattened="flattened"
         :onlyVisible="onlyVisible"
         :simplify-names="simplifyNames"
         :flickerTraceView="flickerTraceView"
         :presentTags="currentTags"
         :presentErrors="currentErrors"
         :force-flattened="applyingFlattened"
         v-show="filterMatches(c)"
         :items-clickable="itemsClickable"
         :initial-depth="depth + 1"
         :collapse="collapseChildren"
         :collapseChildren="collapseChildren"
         :useGlobalCollapsedState="useGlobalCollapsedState"
         v-on:hoverStart="childHover = true"
         v-on:hoverEnd="childHover = false"
         v-on:selected="immediateChildSelected = true"
         v-on:unselected="immediateChildSelected = false"
         :elementView="elementView"
         v-on:collapseSibling="collapseSibling"
         v-on:collapseAllOtherNodes="collapseAllOtherNodes"
         v-on:closeAllContextMenus="closeAllContextMenus"
         ref="children"
       />
     </div>
   </div>
 </template>

 <script>
 import DefaultTreeElement from './DefaultTreeElement.vue';
 import NodeContextMenu from './NodeContextMenu.vue';
 import {DiffType} from './utils/diff.js';
 import {isPropertyMatch} from './utils/utils.js';

 /* in px, must be kept in sync with css, maybe find a better solution... */
 const levelOffset = 24;

 export default {
   name: 'tree-view',
   props: [
     'item',
     'selected',
     'filter',
     'simplify-names',
     'flattened',
     'force-flattened',
     'items-clickable',
     'initial-depth',
     'collapse',
     'collapseChildren',
     // Allows collapse state to be tracked by Vuex so that collapse state of
     // items with same stableId can remain consisten accross time and easily
     // toggled from anywhere in the app.
     // Should be true if you are using the same TreeView to display multiple
     // trees throughout the component's lifetime to make sure same nodes are
     // toggled when switching back and forth between trees.
     // If true, requires all nodes in tree to have a stableId.
     'useGlobalCollapsedState',
     // Custom view to use to render the elements in the tree view
     'elementView',
     'onlyVisible',
     'flickerTraceView',
     'presentTags',
     'presentErrors',
   ],
   data() {
     const isCollapsedByDefault = this.collapse ?? false;

     return {
       isChildSelected: false,
       immediateChildSelected: false,
       clickTimeout: null,
       isCollapsedByDefault,
       localCollapsedState: isCollapsedByDefault,
       collapseDiffClass: null,
       nodeHover: false,
       childHover: false,
       diffSymbol: {
         [DiffType.NONE]: '',
         [DiffType.ADDED]: '+',
         [DiffType.DELETED]: '-',
         [DiffType.MODIFIED]: '.',
         [DiffType.MOVED]: '.',
       },
       currentTags: [],
       currentErrors: [],
       transitions: [],
       errors: [],
     };
   },
   watch: {
     stableId() {
       // Update anything that is required to change when item changes.
       this.updateCollapsedDiffClass();
     },
     hasDiff(hasDiff) {
       if (!hasDiff) {
         this.collapseDiffClass = null;
       } else {
         this.updateCollapsedDiffClass();
       }
     },
     currentTimestamp() {
       // Update anything that is required to change when time changes.
       this.currentTags = this.getCurrentItems(this.presentTags);
       this.currentErrors = this.getCurrentItems(this.presentErrors);
       this.transitions = this.getCurrentTransitions();
       this.errors = this.getCurrentErrorTags();
       this.updateCollapsedDiffClass();
     },
     isSelected(isSelected) {
       if (isSelected) {
         this.$emit('selected');
       } else {
         this.$emit('unselected');
       }
     },
   },
   methods: {
     setCollapseValue(isCollapsed) {
       if (this.useGlobalCollapsedState) {
         this.$store.commit('setCollapsedState', {
           item: this.item,
           isCollapsed,
         });
       } else {
         this.localCollapsedState = isCollapsed;
       }
     },
     toggleTree() {
       this.setCollapseValue(!this.isCollapsed);
       if (!this.isCollapsed) {
         this.openedToSeeAttributeField(this.item.name)
       }
     },
     expandTree() {
       this.setCollapseValue(false);
     },
     selectNext(found, inCollapsedTree) {
       // Check if this is the next visible item
       if (found && this.filterMatches(this.item) && !inCollapsedTree) {
         this.select();
         return false;
       }

       // Set traversal state variables
       if (this.isSelected) {
         found = true;
       }
       if (this.isCollapsed) {
         inCollapsedTree = true;
       }

       // Travers children trees recursively in reverse to find currently
       // selected item and select the next visible one
       if (this.$refs.children) {
         for (const c of this.$refs.children) {
           found = c.selectNext(found, inCollapsedTree);
         }
       }

       return found;
     },
     selectPrev(found, inCollapsedTree) {
       // Set inCollapseTree flag to make sure elements in collapsed trees are
       // not selected.
       const isRootCollapse = !inCollapsedTree && this.isCollapsed;
       if (isRootCollapse) {
         inCollapsedTree = true;
       }

       // Travers children trees recursively in reverse to find currently
       // selected item and select the previous visible one
       if (this.$refs.children) {
         for (const c of [...this.$refs.children].reverse()) {
           found = c.selectPrev(found, inCollapsedTree);
         }
       }

       // Unset inCollapseTree flag as we are no longer in a collapsed tree.
       if (isRootCollapse) {
         inCollapsedTree = false;
       }

       // Check if this is the previous visible item
       if (found && this.filterMatches(this.item) && !inCollapsedTree) {
         this.select();
         return false;
       }

       // Set found flag so that the next visited visible item can be selected.
       if (this.isSelected) {
         found = true;
       }

       return found;
     },
     childItemSelected(item) {
       this.isChildSelected = true;
       this.$emit('item-selected', item);
     },
     select() {
       this.$emit('item-selected', this.item);
     },
     clicked(e) {
       if (window.getSelection().type === 'range') {
         // Ignore click if is selection
         return;
       }

       if (!this.isLeaf && e.detail % 2 === 0) {
         // Double click collapsable node
         this.toggleTree();
       } else {
         this.select();
       }
     },
     filterMatches(c) {
       // If a filter is set, consider the item matches if the current item or
       // any of its children matches.
       if (this.filter) {
         const thisMatches = this.filter(c);
         const childMatches = (child) => this.filterMatches(child);
         return thisMatches || (!this.applyingFlattened &&
             c.children && c.children.some(childMatches));
       }
       return true;
     },
     childFilter(c) {
       if (this.filter) {
         if (this.filter(c)) {
           // Filter matched c, don't apply further filtering on c's children.
           return undefined;
         }
       }
       return this.filter;
     },
     isCurrentSelected() {
       return this.selected === this.item;
     },
     updateCollapsedDiffClass() {
       // NOTE: Could be memoized in $store map like collapsed state if
       // performance ever becomes a problem.
       if (this.item) {
         this.collapseDiffClass = this.computeCollapseDiffClass();
       }
     },
     getAllDiffTypesOfChildren(item) {
       if (!item.children) {
         return new Set();
       }

       const classes = new Set();
       for (const child of item.children) {
         if (child.diff) {
           classes.add(child.diff.type);
         }
         for (const diffClass of this.getAllDiffTypesOfChildren(child)) {
           classes.add(diffClass);
         }
       }

       return classes;
     },
     computeCollapseDiffClass() {
       if (!this.isCollapsed) {
         return '';
       }

       const childrenDiffClasses = this.getAllDiffTypesOfChildren(this.item);

       childrenDiffClasses.delete(DiffType.NONE);
       childrenDiffClasses.delete(undefined);

       if (childrenDiffClasses.size === 0) {
         return '';
       }
       if (childrenDiffClasses.size === 1) {
         const diff = childrenDiffClasses.values().next().value;
         return diff;
       }

       return DiffType.MODIFIED;
     },
     collapseAllOtherNodes() {
       this.$emit('collapseAllOtherNodes');
       this.$emit('collapseSibling', this.item);
     },
     collapseSibling(item) {
       if (!this.$refs.children) {
         return;
       }

       for (const child of this.$refs.children) {
         if (child.item === item) {
           continue;
         }

         child.collapseAll();
       }
     },
     collapseAll() {
       this.setCollapseValue(true);

       if (!this.$refs.children) {
         return;
       }

       for (const child of this.$refs.children) {
         child.collapseAll();
       }
     },
     openContextMenu(e) {
       this.closeAllContextMenus();
       // vue-context takes in the event and uses clientX and clientY to
       // determine the position of the context meny.
       // This doesn't satisfy our use case so we specify our own positions for
       // this.
       this.$refs.nodeContextMenu.open({
         clientX: e.x,
         clientY: e.y,
       });
     },
     closeAllContextMenus(requestOrigin) {
       this.$refs.nodeContextMenu.close();
       this.$emit('closeAllContextMenus', this.item);
       this.closeAllChildrenContextMenus(requestOrigin);
     },
     closeAllChildrenContextMenus(requestOrigin) {
       if (!this.$refs.children) {
         return;
       }

       for (const child of this.$refs.children) {
         if (child.item === requestOrigin) {
           continue;
         }

         child.$refs.nodeContextMenu.close();
         child.closeAllChildrenContextMenus();
       }
     },
     childrenIndentation() {
       if (this.flattened || this.forceFlattened) {
         return {
           marginLeft: '0px',
           paddingLeft: '0px',
           marginTop: '0px',
         }
       } else {
         //Aligns border with collapse arrows
         return {
           marginLeft: '12px',
           paddingLeft: '11px',
           borderLeft: '1px solid rgb(238, 238, 238)',
           marginTop: '0px',
         }
       }
     },

     /** Performs check for id match between entry and present tags/errors
      * exits once match has been found
      */
     matchItems(flickerItems) {
       var match = false;
       flickerItems.every(flickerItem => {
         if (isPropertyMatch(flickerItem, this.item)) {
           match = true;
           return false;
         }
       });
       return match;
     },
     /** Returns check for id match between entry and present tags/errors */
     isEntryTagMatch() {
       return this.matchItems(this.currentTags) || this.matchItems(this.currentErrors);
     },

     getCurrentItems(items) {
       if (!items) return [];
       else return items.filter(item => item.timestamp===this.currentTimestamp);
     },
     getCurrentTransitions() {
       var transitions = [];
       var ids = [];
       this.currentTags.forEach(tag => {
         if (!ids.includes(tag.id) && isPropertyMatch(tag, this.item)) {
           transitions.push(tag.transition);
           ids.push(tag.id);
         }
       });
       return transitions;
     },
     getCurrentErrorTags() {
       return this.currentErrors.filter(error => isPropertyMatch(error, this.item));
     },
   },
   computed: {
     hasDiff() {
       return this.item?.diff !== undefined;
     },
     stableId() {
       return this.item?.stableId;
     },
     currentTimestamp() {
       return this.$store.state.currentTimestamp;
     },
     isCollapsed() {
       if (!this.item.children || this.item.children?.length === 0) {
         return false;
       }

       if (this.useGlobalCollapsedState) {
         return this.$store.getters.collapsedStateStoreFor(this.item) ??
         this.isCollapsedByDefault;
       }

       return this.localCollapsedState;
     },
     isSelected() {
       return this.selected === this.item;
     },
     childIsSelected() {
       if (this.$refs.children) {
         for (const c of this.$refs.children) {
           if (c.isSelected || c.childIsSelected) {
             return true;
           }
         }
       }

       return false;
     },
     diffClass() {
       return this.item.diff ? this.item.diff.type : '';
     },
     applyingFlattened() {
       return (this.flattened && this.item.flattened) || this.forceFlattened;
     },
     children() {
       return this.applyingFlattened ? this.item.flattened : this.item.children;
     },
     isLeaf() {
       return !this.children || this.children.length === 0;
     },
     isClickable() {
       return !this.isLeaf || this.itemsClickable;
     },
     depth() {
       return this.initialDepth || 0;
     },
     nodeOffsetStyle() {
       const offset = levelOffset * (this.depth + this.isLeaf) + 'px';

       var display = "";
       if (!this.item.timestamp
         && this.flattened
         && (this.onlyVisible && !this.item.isVisible ||
             this.flickerTraceView && !this.isEntryTagMatch())) {
         display = 'none';
       }

       return {
         marginLeft: '-' + offset,
         paddingLeft: offset,
         display: display,
       };
     },
   },
   mounted() {
     // Prevent highlighting on multiclick of node element
     this.nodeMouseDownEventListner = (e) => {
       if (e.detail > 1) {
         e.preventDefault();
         return false;
       }

       return true;
     };
     this.$refs.node?.addEventListener('mousedown',
         this.nodeMouseDownEventListner);

     this.updateCollapsedDiffClass();

     this.nodeMouseEnterEventListener = (e) => {
       this.nodeHover = true;
       this.$emit('hoverStart');
     };
     this.$refs.node?.addEventListener('mouseenter',
         this.nodeMouseEnterEventListener);

     this.nodeMouseLeaveEventListener = (e) => {
       this.nodeHover = false;
       this.$emit('hoverEnd');
     };
     this.$refs.node?.addEventListener('mouseleave',
         this.nodeMouseLeaveEventListener);
   },
   beforeDestroy() {
     this.$refs.node?.removeEventListener('mousedown',
         this.nodeMouseDownEventListner);
     this.$refs.node?.removeEventListener('mouseenter',
         this.nodeMouseEnterEventListener);
     this.$refs.node?.removeEventListener('mouseleave',
         this.nodeMouseLeaveEventListener);
   },
   components: {
     DefaultTreeElement,
     NodeContextMenu,
   },
 };
 </script>
 <style>
 .data-card > .tree-view {
   border: none;
 }

 .tree-view {
   display: block;
 }

 .tree-view .node {
   display: flex;
   padding: 2px;
   align-items: flex-start;
 }

 .tree-view .node.clickable {
   cursor: pointer;
 }

 .tree-view .node:hover:not(.selected) {
   background: #f1f1f1;
 }

 .tree-view .node:not(.selected).added,
 .tree-view .node:not(.selected).addedMove,
 .tree-view .expand-tree-btn.added,
 .tree-view .expand-tree-btn.addedMove {
   background: #03ff35;
 }

 .tree-view .node:not(.selected).deleted,
 .tree-view .node:not(.selected).deletedMove,
 .tree-view .expand-tree-btn.deleted,
 .tree-view .expand-tree-btn.deletedMove {
   background: #ff6b6b;
 }

 .tree-view .node:not(.selected).modified,
 .tree-view .expand-tree-btn.modified {
   background: cyan;
 }

 .tree-view .node.addedMove:after,
 .tree-view .node.deletedMove:after {
   content: 'moved';
   margin: 0 5px;
   background: #448aff;
   border-radius: 5px;
   padding: 3px;
   color: white;
 }

 .tree-view .node.child-selected + .children {
   border-left: 1px solid #b4b4b4;
 }

 .tree-view .node.selected + .children {
   border-left: 1px solid rgb(200, 200, 200);
 }

 .tree-view .node.child-hover + .children {
   border-left: 1px solid #b4b4b4;
 }

 .tree-view .node.hover + .children {
   border-left: 1px solid rgb(200, 200, 200);
 }

 .kind {
   color: #333;
   font-weight: bold;
 }

 .selected {
   background-color: #365179;
   color: white;
 }

 .childSelected {
   border-left: 1px solid rgb(233, 22, 22)
 }

 .selected .kind {
   color: #e9e9e9;
 }

 .toggle-tree-btn, .expand-tree-btn {
   background: none;
   color: inherit;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
 }

 .expand-tree-btn {
   margin-left: 5px;
 }

 .expand-tree-btn.child-selected {
   color: #3f51b5;
 }

 .description {
   display: flex;
   flex: 1 1 auto;
 }

 .description > div {
   display: flex;
   flex: 1 1 auto;
 }

 .leaf-node-icon-wrapper {
   width: 24px;
   height: 24px;
   display: inline-flex;
   align-content: center;
   align-items: center;
   justify-content: center;
 }

 .leaf-node-icon {
   content: "";
   display: inline-block;
   height: 5px;
   width: 5px;
   margin-top: -2px;
   border-radius: 50%;
   background-color: #9b9b9b;
 }

 </style>
	<!-- Copyright (C) 2017 The Android Open Source Project

	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->
	<template>
	<div class="tree-view" v-if="item">
	<div class="node"
	:class="[{
	leaf: isLeaf,
	selected: isSelected,
	'child-selected': immediateChildSelected,
	clickable: isClickable,
	hover: nodeHover,
	'child-hover': childHover,
	}, diffClass]"
	:style="nodeOffsetStyle"
	@click="clicked"
	@contextmenu.prevent="openContextMenu"
	ref="node"
	>
	<button
	class="toggle-tree-btn"
	@click="toggleTree"
	v-if="!isLeaf && !flattened"
	v-on:click.stop
	>
	<i aria-hidden="true" class="md-icon md-theme-default material-icons">
	{{isCollapsed ? "chevron_right" : "expand_more"}}
	</i>
	</button>
	<div class="leaf-node-icon-wrapper" v-else>
	<i class="leaf-node-icon"/>
	</div>
	<div class="description">
	<div v-if="elementView">
	<component
	:is="elementView"
	:item="item"
	:simplify-names="simplifyNames"
	/>
	</div>
	<div v-else>
	<DefaultTreeElement
	:item="item"
	:simplify-names="simplifyNames"
	:errors="errors"
	:transitions="transitions"
	/>
	</div>
	</div>
	<div v-show="isCollapsed">
	<button
	class="expand-tree-btn"
	:class="[{
	'child-selected': isCollapsed && childIsSelected
	}, collapseDiffClass]"
	v-if="children"
	@click="expandTree"
	v-on:click.stop
	>
	<i
	aria-hidden="true"
	class="md-icon md-theme-default material-icons"
	>
	more_horiz
	</i>
	</button>
	</div>
	</div>

	<node-context-menu
	ref="nodeContextMenu"
	v-on:collapseAllOtherNodes="collapseAllOtherNodes"
	/>

	<div class="children" v-if="children" v-show="!isCollapsed" :style="childrenIndentation()">
	<tree-view
	v-for="(c,i) in children"
	:item="c"
	@item-selected="childItemSelected"
	:selected="selected"
	:key="i"
	:filter="childFilter(c)"
	:flattened="flattened"
	:onlyVisible="onlyVisible"
	:simplify-names="simplifyNames"
	:flickerTraceView="flickerTraceView"
	:presentTags="currentTags"
	:presentErrors="currentErrors"
	:force-flattened="applyingFlattened"
	v-show="filterMatches(c)"
	:items-clickable="itemsClickable"
	:initial-depth="depth + 1"
	:collapse="collapseChildren"
	:collapseChildren="collapseChildren"
	:useGlobalCollapsedState="useGlobalCollapsedState"
	v-on:hoverStart="childHover = true"
	v-on:hoverEnd="childHover = false"
	v-on:selected="immediateChildSelected = true"
	v-on:unselected="immediateChildSelected = false"
	:elementView="elementView"
	v-on:collapseSibling="collapseSibling"
	v-on:collapseAllOtherNodes="collapseAllOtherNodes"
	v-on:closeAllContextMenus="closeAllContextMenus"
	ref="children"
	/>
	</div>
	</div>
	</template>

	<script>
	import DefaultTreeElement from './DefaultTreeElement.vue';
	import NodeContextMenu from './NodeContextMenu.vue';
	import {DiffType} from './utils/diff.js';
	import {isPropertyMatch} from './utils/utils.js';

	/* in px, must be kept in sync with css, maybe find a better solution... */
	const levelOffset = 24;

	export default {
	name: 'tree-view',
	props: [
	'item',
	'selected',
	'filter',
	'simplify-names',
	'flattened',
	'force-flattened',
	'items-clickable',
	'initial-depth',
	'collapse',
	'collapseChildren',
	// Allows collapse state to be tracked by Vuex so that collapse state of
	// items with same stableId can remain consisten accross time and easily
	// toggled from anywhere in the app.
	// Should be true if you are using the same TreeView to display multiple
	// trees throughout the component's lifetime to make sure same nodes are
	// toggled when switching back and forth between trees.
	// If true, requires all nodes in tree to have a stableId.
	'useGlobalCollapsedState',
	// Custom view to use to render the elements in the tree view
	'elementView',
	'onlyVisible',
	'flickerTraceView',
	'presentTags',
	'presentErrors',
	],
	data() {
	const isCollapsedByDefault = this.collapse ?? false;

	return {
	isChildSelected: false,
	immediateChildSelected: false,
	clickTimeout: null,
	isCollapsedByDefault,
	localCollapsedState: isCollapsedByDefault,
	collapseDiffClass: null,
	nodeHover: false,
	childHover: false,
	diffSymbol: {
	[DiffType.NONE]: '',
	[DiffType.ADDED]: '+',
	[DiffType.DELETED]: '-',
	[DiffType.MODIFIED]: '.',
	[DiffType.MOVED]: '.',
	},
	currentTags: [],
	currentErrors: [],
	transitions: [],
	errors: [],
	};
	},
	watch: {
	stableId() {
	// Update anything that is required to change when item changes.
	this.updateCollapsedDiffClass();
	},
	hasDiff(hasDiff) {
	if (!hasDiff) {
	this.collapseDiffClass = null;
	} else {
	this.updateCollapsedDiffClass();
	}
	},
	currentTimestamp() {
	// Update anything that is required to change when time changes.
	this.currentTags = this.getCurrentItems(this.presentTags);
	this.currentErrors = this.getCurrentItems(this.presentErrors);
	this.transitions = this.getCurrentTransitions();
	this.errors = this.getCurrentErrorTags();
	this.updateCollapsedDiffClass();
	},
	isSelected(isSelected) {
	if (isSelected) {
	this.$emit('selected');
	} else {
	this.$emit('unselected');
	}
	},
	},
	methods: {
	setCollapseValue(isCollapsed) {
	if (this.useGlobalCollapsedState) {
	this.$store.commit('setCollapsedState', {
	item: this.item,
	isCollapsed,
	});
	} else {
	this.localCollapsedState = isCollapsed;
	}
	},
	toggleTree() {
	this.setCollapseValue(!this.isCollapsed);
	if (!this.isCollapsed) {
	this.openedToSeeAttributeField(this.item.name)
	}
	},
	expandTree() {
	this.setCollapseValue(false);
	},
	selectNext(found, inCollapsedTree) {
	// Check if this is the next visible item
	if (found && this.filterMatches(this.item) && !inCollapsedTree) {
	this.select();
	return false;
	}

	// Set traversal state variables
	if (this.isSelected) {
	found = true;
	}
	if (this.isCollapsed) {
	inCollapsedTree = true;
	}

	// Travers children trees recursively in reverse to find currently
	// selected item and select the next visible one
	if (this.$refs.children) {
	for (const c of this.$refs.children) {
	found = c.selectNext(found, inCollapsedTree);
	}
	}

	return found;
	},
	selectPrev(found, inCollapsedTree) {
	// Set inCollapseTree flag to make sure elements in collapsed trees are
	// not selected.
	const isRootCollapse = !inCollapsedTree && this.isCollapsed;
	if (isRootCollapse) {
	inCollapsedTree = true;
	}

	// Travers children trees recursively in reverse to find currently
	// selected item and select the previous visible one
	if (this.$refs.children) {
	for (const c of [...this.$refs.children].reverse()) {
	found = c.selectPrev(found, inCollapsedTree);
	}
	}

	// Unset inCollapseTree flag as we are no longer in a collapsed tree.
	if (isRootCollapse) {
	inCollapsedTree = false;
	}

	// Check if this is the previous visible item
	if (found && this.filterMatches(this.item) && !inCollapsedTree) {
	this.select();
	return false;
	}

	// Set found flag so that the next visited visible item can be selected.
	if (this.isSelected) {
	found = true;
	}

	return found;
	},
	childItemSelected(item) {
	this.isChildSelected = true;
	this.$emit('item-selected', item);
	},
	select() {
	this.$emit('item-selected', this.item);
	},
	clicked(e) {
	if (window.getSelection().type === 'range') {
	// Ignore click if is selection
	return;
	}

	if (!this.isLeaf && e.detail % 2 === 0) {
	// Double click collapsable node
	this.toggleTree();
	} else {
	this.select();
	}
	},
	filterMatches(c) {
	// If a filter is set, consider the item matches if the current item or
	// any of its children matches.
	if (this.filter) {
	const thisMatches = this.filter(c);
	const childMatches = (child) => this.filterMatches(child);
	return thisMatches \|\| (!this.applyingFlattened &&
	c.children && c.children.some(childMatches));
	}
	return true;
	},
	childFilter(c) {
	if (this.filter) {
	if (this.filter(c)) {
	// Filter matched c, don't apply further filtering on c's children.
	return undefined;
	}
	}
	return this.filter;
	},
	isCurrentSelected() {
	return this.selected === this.item;
	},
	updateCollapsedDiffClass() {
	// NOTE: Could be memoized in $store map like collapsed state if
	// performance ever becomes a problem.
	if (this.item) {
	this.collapseDiffClass = this.computeCollapseDiffClass();
	}
	},
	getAllDiffTypesOfChildren(item) {
	if (!item.children) {
	return new Set();
	}

	const classes = new Set();
	for (const child of item.children) {
	if (child.diff) {
	classes.add(child.diff.type);
	}
	for (const diffClass of this.getAllDiffTypesOfChildren(child)) {
	classes.add(diffClass);
	}
	}

	return classes;
	},
	computeCollapseDiffClass() {
	if (!this.isCollapsed) {
	return '';
	}

	const childrenDiffClasses = this.getAllDiffTypesOfChildren(this.item);

	childrenDiffClasses.delete(DiffType.NONE);
	childrenDiffClasses.delete(undefined);

	if (childrenDiffClasses.size === 0) {
	return '';
	}
	if (childrenDiffClasses.size === 1) {
	const diff = childrenDiffClasses.values().next().value;
	return diff;
	}

	return DiffType.MODIFIED;
	},
	collapseAllOtherNodes() {
	this.$emit('collapseAllOtherNodes');
	this.$emit('collapseSibling', this.item);
	},
	collapseSibling(item) {
	if (!this.$refs.children) {
	return;
	}

	for (const child of this.$refs.children) {
	if (child.item === item) {
	continue;
	}

	child.collapseAll();
	}
	},
	collapseAll() {
	this.setCollapseValue(true);

	if (!this.$refs.children) {
	return;
	}

	for (const child of this.$refs.children) {
	child.collapseAll();
	}
	},
	openContextMenu(e) {
	this.closeAllContextMenus();
	// vue-context takes in the event and uses clientX and clientY to
	// determine the position of the context meny.
	// This doesn't satisfy our use case so we specify our own positions for
	// this.
	this.$refs.nodeContextMenu.open({
	clientX: e.x,
	clientY: e.y,
	});
	},
	closeAllContextMenus(requestOrigin) {
	this.$refs.nodeContextMenu.close();
	this.$emit('closeAllContextMenus', this.item);
	this.closeAllChildrenContextMenus(requestOrigin);
	},
	closeAllChildrenContextMenus(requestOrigin) {
	if (!this.$refs.children) {
	return;
	}

	for (const child of this.$refs.children) {
	if (child.item === requestOrigin) {
	continue;
	}

	child.$refs.nodeContextMenu.close();
	child.closeAllChildrenContextMenus();
	}
	},
	childrenIndentation() {
	if (this.flattened \|\| this.forceFlattened) {
	return {
	marginLeft: '0px',
	paddingLeft: '0px',
	marginTop: '0px',
	}
	} else {
	//Aligns border with collapse arrows
	return {
	marginLeft: '12px',
	paddingLeft: '11px',
	borderLeft: '1px solid rgb(238, 238, 238)',
	marginTop: '0px',
	}
	}
	},

	/** Performs check for id match between entry and present tags/errors
	* exits once match has been found
	*/
	matchItems(flickerItems) {
	var match = false;
	flickerItems.every(flickerItem => {
	if (isPropertyMatch(flickerItem, this.item)) {
	match = true;
	return false;
	}
	});
	return match;
	},
	/** Returns check for id match between entry and present tags/errors */
	isEntryTagMatch() {
	return this.matchItems(this.currentTags) \|\| this.matchItems(this.currentErrors);
	},

	getCurrentItems(items) {
	if (!items) return [];
	else return items.filter(item => item.timestamp===this.currentTimestamp);
	},
	getCurrentTransitions() {
	var transitions = [];
	var ids = [];
	this.currentTags.forEach(tag => {
	if (!ids.includes(tag.id) && isPropertyMatch(tag, this.item)) {
	transitions.push(tag.transition);
	ids.push(tag.id);
	}
	});
	return transitions;
	},
	getCurrentErrorTags() {
	return this.currentErrors.filter(error => isPropertyMatch(error, this.item));
	},
	},
	computed: {
	hasDiff() {
	return this.item?.diff !== undefined;
	},
	stableId() {
	return this.item?.stableId;
	},
	currentTimestamp() {
	return this.$store.state.currentTimestamp;
	},
	isCollapsed() {
	if (!this.item.children \|\| this.item.children?.length === 0) {
	return false;
	}

	if (this.useGlobalCollapsedState) {
	return this.$store.getters.collapsedStateStoreFor(this.item) ??
	this.isCollapsedByDefault;
	}

	return this.localCollapsedState;
	},
	isSelected() {
	return this.selected === this.item;
	},
	childIsSelected() {
	if (this.$refs.children) {
	for (const c of this.$refs.children) {
	if (c.isSelected \|\| c.childIsSelected) {
	return true;
	}
	}
	}

	return false;
	},
	diffClass() {
	return this.item.diff ? this.item.diff.type : '';
	},
	applyingFlattened() {
	return (this.flattened && this.item.flattened) \|\| this.forceFlattened;
	},
	children() {
	return this.applyingFlattened ? this.item.flattened : this.item.children;
	},
	isLeaf() {
	return !this.children \|\| this.children.length === 0;
	},
	isClickable() {
	return !this.isLeaf \|\| this.itemsClickable;
	},
	depth() {
	return this.initialDepth \|\| 0;
	},
	nodeOffsetStyle() {
	const offset = levelOffset * (this.depth + this.isLeaf) + 'px';

	var display = "";
	if (!this.item.timestamp
	&& this.flattened
	&& (this.onlyVisible && !this.item.isVisible \|\|
	this.flickerTraceView && !this.isEntryTagMatch())) {
	display = 'none';
	}

	return {
	marginLeft: '-' + offset,
	paddingLeft: offset,
	display: display,
	};
	},
	},
	mounted() {
	// Prevent highlighting on multiclick of node element
	this.nodeMouseDownEventListner = (e) => {
	if (e.detail > 1) {
	e.preventDefault();
	return false;
	}

	return true;
	};
	this.$refs.node?.addEventListener('mousedown',
	this.nodeMouseDownEventListner);

	this.updateCollapsedDiffClass();

	this.nodeMouseEnterEventListener = (e) => {
	this.nodeHover = true;
	this.$emit('hoverStart');
	};
	this.$refs.node?.addEventListener('mouseenter',
	this.nodeMouseEnterEventListener);

	this.nodeMouseLeaveEventListener = (e) => {
	this.nodeHover = false;
	this.$emit('hoverEnd');
	};
	this.$refs.node?.addEventListener('mouseleave',
	this.nodeMouseLeaveEventListener);
	},
	beforeDestroy() {
	this.$refs.node?.removeEventListener('mousedown',
	this.nodeMouseDownEventListner);
	this.$refs.node?.removeEventListener('mouseenter',
	this.nodeMouseEnterEventListener);
	this.$refs.node?.removeEventListener('mouseleave',
	this.nodeMouseLeaveEventListener);
	},
	components: {
	DefaultTreeElement,
	NodeContextMenu,
	},
	};
	</script>
	<style>
	.data-card > .tree-view {
	border: none;
	}

	.tree-view {
	display: block;
	}

	.tree-view .node {
	display: flex;
	padding: 2px;
	align-items: flex-start;
	}

	.tree-view .node.clickable {
	cursor: pointer;
	}

	.tree-view .node:hover:not(.selected) {
	background: #f1f1f1;
	}

	.tree-view .node:not(.selected).added,
	.tree-view .node:not(.selected).addedMove,
	.tree-view .expand-tree-btn.added,
	.tree-view .expand-tree-btn.addedMove {
	background: #03ff35;
	}

	.tree-view .node:not(.selected).deleted,
	.tree-view .node:not(.selected).deletedMove,
	.tree-view .expand-tree-btn.deleted,
	.tree-view .expand-tree-btn.deletedMove {
	background: #ff6b6b;
	}

	.tree-view .node:not(.selected).modified,
	.tree-view .expand-tree-btn.modified {
	background: cyan;
	}

	.tree-view .node.addedMove:after,
	.tree-view .node.deletedMove:after {
	content: 'moved';
	margin: 0 5px;
	background: #448aff;
	border-radius: 5px;
	padding: 3px;
	color: white;
	}

	.tree-view .node.child-selected + .children {
	border-left: 1px solid #b4b4b4;
	}

	.tree-view .node.selected + .children {
	border-left: 1px solid rgb(200, 200, 200);
	}

	.tree-view .node.child-hover + .children {
	border-left: 1px solid #b4b4b4;
	}

	.tree-view .node.hover + .children {
	border-left: 1px solid rgb(200, 200, 200);
	}

	.kind {
	color: #333;
	font-weight: bold;
	}

	.selected {
	background-color: #365179;
	color: white;
	}

	.childSelected {
	border-left: 1px solid rgb(233, 22, 22)
	}

	.selected .kind {
	color: #e9e9e9;
	}

	.toggle-tree-btn, .expand-tree-btn {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	}

	.expand-tree-btn {
	margin-left: 5px;
	}

	.expand-tree-btn.child-selected {
	color: #3f51b5;
	}

	.description {
	display: flex;
	flex: 1 1 auto;
	}

	.description > div {
	display: flex;
	flex: 1 1 auto;
	}

	.leaf-node-icon-wrapper {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	}

	.leaf-node-icon {
	content: "";
	display: inline-block;
	height: 5px;
	width: 5px;
	margin-top: -2px;
	border-radius: 50%;
	background-color: #9b9b9b;
	}

	</style>