How to create dynamic tree view

Hi Team,

I have created custom plugin in Kibana. In my plugin I have a requirement in which I have to create a dynamic tree view. Which would enable user to add/remove nodes from tree view at runtime. It would also be helpful if we could implement click event on the node and get to know which node is clicked.

Regards
Praveer.

Hi Praveer,

The "public" / browser-side of a Kibana plugin can render anything to the DOM so this is really up to you to decide how you'd like to implement such a UI component. We recommend using React since you'll be able to use several helper methods used by other Kibana plugins. You can take a look at EUI's tree view https://elastic.github.io/eui/#/navigation/tree-view but there might be other React components better suited to your needs.

Hi,

I have developed dynamic treeview using https://elastic.github.io/eui/#/navigation/tree-view as shown in below screen shot. When user clicks on any button 'And', 'Or' and 'Query', it gets added to the tree view.

But on editing I am not able to access the clicked node either to edit it or move its position or delete that particular node. Can you help me in how to achieve editing of node in dynamically generated tree view.

Regards
Praveer.

Did you specify a callback function for the EuiTreeViewNodes?

Hi Rudolf,

I have tried using EuiTreeViewNodes but getting error on importing. I couldn't find any documentation regarding this so can you please help me out.

I am referring to below link

https://elastic.github.io/eui/#/navigation/tree-view

Below is the code i have implemented.

import { EuiTreeView } from '@elastic/eui';
import { EuiTreeViewNode }  from '@elastic/eui/src-docs/src/views/tree_view/tree_view_props';

// on button click add node to treeviewItems
const onAndClick = () => {
		let tempItems = [...treeviewItems];
		if (treeviewItems.length === 0) {
			tempItems.push(
				<EuiTreeViewNode label='And' id={htmlIdGenerator()} children={[]} icon={<EuiIcon type="arrowRight" />}
					iconWhenExpanded={<EuiIcon type="arrowDown" />} />
			);
		} else {
			updateTreeView(treeviewItems[0], "And");
		}
		setTreeviewItems(tempItems);
	}

// render treeview component
<EuiTreeView items={treeviewItems} aria-label="Sample Folder Tree" />

Getting below error

ERROR in ./public/components/correlation-rule/new-correlation.tsx
       │          Module not found: Error: Can't resolve '@elastic/eui/src-docs/src/views/tree_view/tree_view_props' in '/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule'
       │          resolve '@elastic/eui/src-docs/src/views/tree_view/tree_view_props' in '/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule'
       │            Parsed request is a module
       │            using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./public/components/correlation-rule)
       │              Field 'browser' doesn't contain a valid alias configuration
       │              resolve as module
       │                /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule/node_modules doesn't exist or is not a directory
       │                /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/node_modules doesn't exist or is not a directory
       │                /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/node_modules doesn't exist or is not a directory
       │                /home/praveer/Praveer/kibana_7.9/plugins/node_modules doesn't exist or is not a directory
       │                /home/praveer/Praveer/node_modules doesn't exist or is not a directory
       │                /home/praveer/node_modules doesn't exist or is not a directory
       │                /home/node_modules doesn't exist or is not a directory
       │                /node_modules doesn't exist or is not a directory
       │                looking for modules in /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules
       │                  using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./node_modules)
       │                    Field 'browser' doesn't contain a valid alias configuration
       │                looking for modules in /home/praveer/Praveer/kibana_7.9/node_modules
       │                  using description file: /home/praveer/Praveer/kibana_7.9/package.json (relative path: ./node_modules)
       │                    Field 'browser' doesn't contain a valid alias configuration
       │                    using description file: /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/package.json (relative path: ./src-docs/src/views/tree_view/tree_view_props)
       │                      no extension
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
       │                      .js
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                    using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props)
       │                      no extension
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js doesn't exist
       │                      .ts
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
       │                      .js
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts doesn't exist
       │                      .tsx
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js doesn't exist
       │                      .ts
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx doesn't exist
       │                      json
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts doesn't exist
       │                      .tsx
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                        /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson doesn't exist
       │                        /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx doesn't exist
       │                      json
       │                        Field 'browser' doesn't contain a valid alias configuration
       │                      as directory
       │                        /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
       │                        /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson doesn't exist
       │                      as directory
       │                        /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule/node_modules]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/node_modules]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/node_modules]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/node_modules]
       │          [/home/praveer/Praveer/node_modules]
       │          [/home/praveer/node_modules]
       │          [/home/node_modules]
       │          [/node_modules]
       │          [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props]
       │          [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props]
       │          [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js]
       │          [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts]
       │          [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx]
       │          [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson]
       │           @ ./public/components/correlation-rule/new-correlation.tsx 5:0-92 707:55-70
       │           @ ./public/components/app.tsx
       │           @ ./public/application.tsx
       │           @ ./public/plugin.ts

If you could provide with some examples or links for documentation it would be helpful.

Regards
Praveer.

Check here the version where this compoenent has been released
Check package.json of your Kibana dev env to see if kibana is using the minimum release version of eui that contain the desired component

Hi,
In the above link version where EuiTreeView is release is specified but EuiTreeViewNode is not specified.

I have also checked package.json of kibana "@elastic/eui": "26.3.3" is specified. I am working on kibana 7.9

Regards
Praveer.

You're importing something from deep inside EUI that wasn't meant to be imported.

I've adapted the example on the EUI docs to show an alert when you click on Item B -> I'm a bug

Hi Rudolf,

I went through your example. Using call back we can call any method, but mine requirement is to either delete or edit (add children to the clicked node). So for that I would need either the node on which user has clicked or it's id so that either by using getElementById or by getting the whole node I can manipulate the node.

In callback how can we pass the clicked node details?

Regards
Praveer.

Hey @praveer,

Because callback is defined on each node independently, you are able to provide the id to your on-click method. For instance:

{
  label: 'Item A',
  id: 'item_a',
  icon: <EuiToken iconType="tokenConstant" />,
  callback: () => myCallbackMethod('item_a')
},
{
  label: "Item B",
  id: 'item_b',
  icon: <EuiToken iconType="tokenEnum" />,
  callback: () => myCallbackMethod('item_b')
},

This would certainly be easier if building the tree from a generated array rather than a static array.
Let me know if this works. If not, we can look to update EUI to automatically provide the node id as part of callback, but this would not be available in Kibana until the 7.11 release at the earliest.

Hi @thompsongl

Thanks for the help, it worked. I would recommend to update EUI so that callback would return the clicked node. As currently we have to iterate through each node using recursive function to update the node. If we could get the clicked node then it would be a lot more easier as we just need to update the clicked node, and also would be faster.

Regards
Praveer.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.