@neovici/cosmoz-treenode-navigator 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [5.2.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.1.0...v5.2.0) (2022-08-01)
+
+
+### Features
+
+* **cosmoz-treenode-navigator:** improve performance ([ac12d74](https://github.com/neovici/cosmoz-treenode-navigator/commit/ac12d74345501e34cdccde6962563a24d6efed4f))
+
 # [5.1.0](https://github.com/neovici/cosmoz-treenode-navigator/compare/v5.0.1...v5.1.0) (2022-07-28)
 
 

package/cosmoz-treenode-navigator.js

@@ -1,19 +1,17 @@
 import { component, useEffect, useState, useMemo, useCallback } from 'haunted';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
+import { guard } from 'lit-html/directives/guard.js';
 import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 import '@neovici/cosmoz-input';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
 import {
+	getParentPath,
 	computeDataPlane,
 	computeRowClass,
-	computeSearching,
-	normalizeNodes,
 	onNodeDblClicked,
-	renderLevel,
-	showGlobalSearchBtn,
 } from './helpers';
 import styles from './cosmoz-treenode-navigator.styles';
 
@@ -42,19 +40,6 @@ const TreenodeNavigator = (host) => {
 		 * The path of the opened node
 		 */
 		[openNodePath, setOpenNodePath] = useState(''),
-		/**
-		 * The nodes on the path of the opened node
-		 */
-		nodesOnOpenNodePath = useMemo(
-			() =>
-				openNodePath
-					? normalizeNodes(
-							tree,
-							tree.getPathNodes(openNodePath).filter((item) => item)
-					  )
-					: [],
-			[tree, openNodePath]
-		),
 		/**
 		 * The highlighted (focused) node
 		 * This is the node which is currently selected in the list
@@ -64,20 +49,16 @@ const TreenodeNavigator = (host) => {
 		 * The search string
 		 */
 		[searchValue, setSearchValue] = useState(''),
-		isSearching = useMemo(
-			() => computeSearching(searchValue, searchMinLength),
+		search = useMemo(
+			() => (searchValue?.length > searchMinLength && searchValue) || undefined,
 			[searchValue, searchMinLength]
 		),
-		renderedLevel = useMemo(
-			() => renderLevel(openNodePath, tree),
-			[openNodePath, tree]
-		),
 		/**
 		 * The currently displayed node list
 		 */
 		dataPlane = useMemo(
-			() => computeDataPlane(isSearching, searchValue, renderedLevel, tree),
-			[isSearching, searchValue, renderedLevel, tree]
+			() => computeDataPlane(tree, search, openNodePath),
+			[tree, search, openNodePath]
 		),
 		/**
 		 * Opens a node (renderLevel) based on a given path
@@ -86,42 +67,11 @@ const TreenodeNavigator = (host) => {
 		 */
 		openNode = useCallback(
 			(clickedNode) => {
-				if (tree.hasChildren(clickedNode)) {
-					setOpenNodePath(clickedNode.path);
-					setSearchValue('');
-				}
-				if (!clickedNode) {
-					setOpenNodePath('');
-					setSearchValue('');
-					setHighlightedNode(null);
-				}
+				setOpenNodePath(clickedNode?.pathLocator || '');
+				setSearchValue('');
+				setHighlightedNode();
 			},
 			[tree]
-		),
-		/**
-		 * Returns true, if the path of a node should be visible in the view
-		 * @param {Number} index - The node's current index in the list
-		 * @param {Object} parentSectionName - The nodes current parent section name
-		 * @return {Boolean} - If the path should be visible
-		 */
-		renderSection = useCallback(
-			(index, parentSectionName) => {
-				if (
-					!isSearching ||
-					index == null ||
-					dataPlane == null ||
-					index >= dataPlane.length ||
-					parentSectionName == null
-				) {
-					return false;
-				}
-				if (index === 0) {
-					return true;
-				}
-				const prevItem = dataPlane[index - 1];
-				return prevItem.parentSectionName !== parentSectionName;
-			},
-			[isSearching, dataPlane]
 		);
 
 	useEffect(() => {
@@ -133,31 +83,35 @@ const TreenodeNavigator = (host) => {
 
 	useEffect(() => {
 		if (nodePath !== undefined) {
-			host.dispatchEvent(
-				new CustomEvent('select-node', {
-					detail: {},
-				})
-			);
+			host.dispatchEvent(new CustomEvent('select-node'));
 		}
 	}, [nodePath]);
 
 	useEffect(() => {
-		notifyProperty(host, 'highlightedNodePath', highlightedNode?.path || '');
+		notifyProperty(
+			host,
+			'highlightedNodePath',
+			highlightedNode?.pathLocator || ''
+		);
 	}, [highlightedNode]);
 
 	const meta = useMeta({ dataPlane, highlightedNode, openNode });
 
 	useEffect(() => {
+		// eslint-disable-next-line max-lines-per-function
 		const handler = (e) => {
 			if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
 				return;
 			}
-			const { dataPlane: items, highlightedNode: node, openNode: open } = meta;
+			const { dataPlane: items, highlightedNode: node, openNode: open } = meta,
+				getIndex = () =>
+					items.findIndex((i) => i.pathLocator === node?.pathLocator);
+
 			switch (e.key) {
 				case 'Up':
 				case 'ArrowUp':
 					{
-						const idx = items.findIndex((i) => i.path === node?.path);
+						const idx = getIndex();
 						e.preventDefault();
 						setHighlightedNode(items[Math.max(idx - 1, 0)]);
 					}
@@ -165,7 +119,7 @@ const TreenodeNavigator = (host) => {
 				case 'Down':
 				case 'ArrowDown':
 					{
-						const idx = items.findIndex((i) => i.path === node?.path);
+						const idx = getIndex();
 						if (idx < items.length - 1) {
 							e.preventDefault();
 							setHighlightedNode(items[idx + 1]);
@@ -173,9 +127,15 @@ const TreenodeNavigator = (host) => {
 					}
 					break;
 
+				case 'Enter':
+					if (node) {
+						e.preventDefault();
+						host.dispatchEvent(new CustomEvent('select-node'));
+					}
+					break;
+
 				case 'Right':
 				case 'ArrowRight':
-				case 'Enter':
 					if (node) {
 						e.preventDefault();
 						open(node);
@@ -191,16 +151,24 @@ const TreenodeNavigator = (host) => {
 	}, [meta]);
 
 	const renderItem = (node, index) => html` <div class="item">
-		${when(
-			renderSection(index, node.parentSectionName),
-			() => html` <div class="section">${node.parentSectionName}</div> `
-		)}
+		${((parentPath) =>
+			when(
+				search &&
+					(index === 0 ||
+						parentPath !== getParentPath(tree, dataPlane[index - 1])),
+				() =>
+					html`
+						<div class="section">
+							${tree.getPathString(parentPath, tree.searchProperty)}
+						</div>
+					`
+			))(getParentPath(tree, node))}
 		<div
 			class=${computeRowClass('node', node, highlightedNode)}
 			@click=${() => setHighlightedNode(node)}
 			@dblclick=${(e) => onNodeDblClicked(e, host)}
 		>
-			<div class="name">${node.name}</div>
+			<div class="name">${node[tree.searchProperty]}</div>
 			${when(
 				tree.hasChildren(node),
 				() => html`
@@ -239,12 +207,16 @@ const TreenodeNavigator = (host) => {
 						<g><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
 					</svg>
 				</span>
-				${nodesOnOpenNodePath.map((node) => {
-					return html` <span class="slash">/</span>
-						<span class="pointer" tabindex="0" @click=${() => openNode(node)}
-							>${node[tree.searchProperty]}</span
-						>`;
-				})}
+				${guard([tree, openNodePath], () =>
+					((openNodePath && tree.getPathNodes(openNodePath)) || []).map(
+						(node) => html`
+							<span class="slash">/</span>
+							<span class="pointer" tabindex="0" @click=${() => openNode(node)}
+								>${node[tree.searchProperty]}</span
+							>
+						`
+					)
+				)}
 			</h3>
 			<cosmoz-input
 				tabindex="0"
@@ -261,7 +233,7 @@ const TreenodeNavigator = (host) => {
 			</div>`
 		)}
 		${when(
-			showGlobalSearchBtn(isSearching, openNodePath),
+			search && openNodePath,
 			() => html`
 				<button class="btn-ghost" @click=${() => setOpenNodePath('')}>
 					${searchGlobalPlaceholder}

package/helpers.js

@@ -1,72 +1,26 @@
 export const //
-	/**
-	 * Returns true, if a search string is eligable to trigger a search
-	 * @param {String} value - The search string
-	 * @param {Number} searchMinLength - The minimum length of value to be valid
-	 * @return {Boolean} - If a search should be triggered
-	 */
-	computeSearching = (value, searchMinLength) => {
-		return value && value.length >= searchMinLength && value !== '';
-	},
-	/**
-	 * Normalizes and returns an Array of nodes
-	 * with the properties name, path, parentSectionName, children
-	 * @param {Object} tree - The cosmoz tree
-	 * @param {Array} nodes - The input nodes
-	 * @return {Array} - The normalized nodes
-	 */
-	normalizeNodes = (tree, nodes) => {
-		if (!Array.isArray(nodes)) {
-			return [];
-		}
-		return nodes.map((node) => {
-			if (!node) {
-				return node;
-			}
-			const path = node.pathLocator || node.path,
-				pathLocatorSeparator = tree.pathLocatorSeparator,
-				parentPath = path.includes(pathLocatorSeparator)
-					? path.substring(0, path.lastIndexOf(pathLocatorSeparator))
-					: path;
-			return {
-				name: node[tree.searchProperty],
-				path,
-				children: node[tree.childProperty],
-				parentSectionName: tree.getPathString(parentPath, tree.searchProperty),
-				id: node.id,
-				pathLocator: node.pathLocator,
-			};
-		});
-	},
-	/**
-	 * Returns the found nodes based on a search string and a given tree to be searched
-	 * @param {Boolean} searching - If true, a search should be executed
-	 * @param {String} searchString - The search string
-	 * @param {Array} renderedLevel - The node list on which the search should be executed
-	 * @param {Tree} tree - The main tree
-	 * @return {Array} - The found nodes
-	 */
-	computeDataPlane = (searching, searchString, renderedLevel, tree) => {
-		if (searching && tree) {
-			const results = tree.searchNodes(searchString, renderedLevel, false);
-			return normalizeNodes(tree, results);
-		}
-		return renderedLevel;
+	getParentPath = (tree, node) => {
+		const path = node.pathLocator || node.path,
+			pathLocatorSeparator = tree.pathLocatorSeparator;
+		return path.includes(pathLocatorSeparator)
+			? path.substring(0, path.lastIndexOf(pathLocatorSeparator))
+			: path;
 	},
 	/**
 	 * Returns a node array with the children of a node on the given path
 	 * If the node doesn't have children, the node gets returned
-	 * @param {String} pathLocator - The separated address parts of a node
 	 * @param {Tree} tree - The main tree
+	 * @param {String} pathLocator - The separated address parts of a node
 	 * @return {Array} - Nodes
 	 */
-	renderLevel = (pathLocator, tree) => {
+	renderLevel = (tree, pathLocator) => {
 		if (!tree) {
 			return;
 		}
 		const node = tree.getNodeByPathLocator(pathLocator),
 			children = tree.getChildren(node),
-			level = tree.hasChildren(node) ? children : node,
+			level = children.length > 0 ? children : node,
+			searchProperty = tree.searchProperty,
 			sortFunc = (a, b) => {
 				// First sort based on "folder" status (containing children)
 				if (tree.hasChildren(a)) {
@@ -77,8 +31,8 @@ export const //
 					return 1;
 				}
 				// Then sort on searchProperty
-				const val1 = a[tree.searchProperty],
-					val2 = b[tree.searchProperty];
+				const val1 = a[searchProperty],
+					val2 = b[searchProperty];
 
 				if (val1 > val2) {
 					return 1;
@@ -88,7 +42,21 @@ export const //
 				}
 				return 0;
 			};
-		return normalizeNodes(tree, level).sort(sortFunc);
+		return level.sort(sortFunc);
+	},
+	/**
+	 * Returns the found nodes based on a search string and a given tree to be searched
+	 * @param {Tree} tree - The main tree
+	 * @param {String|undefined} search - The search string
+	 * @param {String} pathLocator - The separated address parts of a node
+	 * @return {Array} - The found nodes
+	 */
+	computeDataPlane = (tree, search, pathLocator) => {
+		if (!tree) {
+			return [];
+		}
+		const nodes = renderLevel(tree, pathLocator);
+		return search ? tree.searchNodes(search, nodes, false) : nodes;
 	},
 	/**
 	 * Returns the classes of a row based its selection state
@@ -122,15 +90,6 @@ export const //
 			})
 		);
 	},
-	/**
-	 * Returns true, if the button should be visible
-	 * @param {Boolean} searching - If a search is currently executed
-	 * @param {String} openNodeLevelPath - The open node level
-	 * @return {Boolean} - The visibility of the button
-	 */
-	showGlobalSearchBtn = (searching, openNodeLevelPath) => {
-		return searching && openNodeLevelPath !== '';
-	},
 	/**
 	 * Returns the nodes on a path specified by a given path locator
 	 * @param {String} pathLocator - The separated address parts of a node
@@ -141,7 +100,7 @@ export const //
 		if (!tree || !pathLocator) {
 			return [];
 		}
-		return normalizeNodes(tree, tree.getPathNodes(pathLocator));
+		return tree.getPathNodes(pathLocator);
 	},
 	/**
 	 * Returns a node based on a given path locator.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-treenode-navigator",
-	"version": "5.1.0",
+	"version": "5.2.0",
 	"description": "A Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.",
 	"keywords": [
 		"polymer",

package/test/cosmoz-treenode-navigator.test.js

@@ -2,18 +2,17 @@ import { assert, fixture, html } from '@open-wc/testing';
 import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
 import basicTree from './data/basicTree.js';
 import '../cosmoz-treenode-navigator';
-import { computeDataPlane, computeSearching, renderLevel } from '../helpers';
+import { computeDataPlane } from '../helpers';
 
 suite('cosmoz-treenode-navigator', () => {
 	let navigator;
 
 	setup(async () => {
-		navigator = await fixture(html`
-			<cosmoz-treenode-navigator
-					.tree=${ new DefaultTree(basicTree) }
-					.searchPlaceholder="${ 'Custom search placeholder' }"
-					.searchMinLength="${ 2 }"
-			>`);
+		navigator = await fixture(html` <cosmoz-treenode-navigator
+			.tree=${new DefaultTree(basicTree)}
+			.searchPlaceholder="${'Custom search placeholder'}"
+			.searchMinLength="${2}"
+		></cosmoz-treenode-navigator>`);
 	});
 
 	test('instantiating the element', () => {
@@ -27,10 +26,9 @@ suite('cosmoz-treenode-navigator', () => {
 		navigator.openNodePath = '1000';
 
 		const dataPlane = computeDataPlane(
-			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.tree,
 			navigator.searchValue,
-			renderLevel(navigator.openNodePath, navigator.tree),
-			navigator.tree
+			navigator.openNodePath
 		);
 		// then I can see the contents of the node
 		// and it is ordered folder-first, then alphabetically
@@ -41,27 +39,34 @@ suite('cosmoz-treenode-navigator', () => {
 
 	test('set proper search placeholder', () => {
 		assert.equal(
-			navigator.shadowRoot.querySelector('cosmoz-input')
-				.shadowRoot
-				.querySelector('input').placeholder,
-			'Custom search placeholder');
-	});
-
-	test('compute search if value is bigger than searchMinLength', () => {
-		assert.equal(computeSearching('long string', navigator.searchMinLength), true);
-		assert.equal(computeSearching('a', navigator.searchMinLength), false);
+			navigator.shadowRoot
+				.querySelector('cosmoz-input')
+				.shadowRoot.querySelector('input').placeholder,
+			'Custom search placeholder'
+		);
 	});
 
 	test('should check if node has children', () => {
 		const node = {
 			name: 'D:',
 			path: '1000',
-			children: { 1001: { name: 'Data', pathLocator: '1000.1001', children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' }}}},
+			children: {
+				1001: {
+					name: 'Data',
+					pathLocator: '1000.1001',
+					children: { 1002: { name: 'John', pathLocator: '1000.1001.1002' } },
+				},
+			},
 			parentSectionName: 'D:',
-			pathLocator: '1000'
+			pathLocator: '1000',
 		};
 		assert.equal(navigator.tree.hasChildren(node), true);
-		const node2 = { name: 'Git', path: '1.5.7', parentSectionName: 'C:/Program Files', pathLocator: '1.5.7' };
+		const node2 = {
+			name: 'Git',
+			path: '1.5.7',
+			parentSectionName: 'C:/Program Files',
+			pathLocator: '1.5.7',
+		};
 		assert.equal(navigator.tree.hasChildren(node2), false);
 	});
 
@@ -71,16 +76,14 @@ suite('cosmoz-treenode-navigator', () => {
 		navigator.searchValue = 'John';
 
 		const dataPlane = computeDataPlane(
-			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.tree,
 			navigator.searchValue,
-			renderLevel('1000', navigator.tree),
-			navigator.tree
+			'1000'
 		);
 
 		//then I can see only 1 item matching 'John'
 		assert.lengthOf(dataPlane, 1);
 		assert.equal(dataPlane[0].name, 'John');
-
 	});
 
 	test('not match search string', () => {
@@ -88,10 +91,9 @@ suite('cosmoz-treenode-navigator', () => {
 		// when I search for 'NONEXISTING'
 		navigator.searchValue = 'NONEXISTING';
 		const dataPlane = computeDataPlane(
-			computeSearching(navigator.searchValue, navigator.searchMinLength),
+			navigator.tree,
 			navigator.searchValue,
-			renderLevel('1000', navigator.tree),
-			navigator.tree
+			'1000'
 		);
 
 		//then I can see that is no contents