feat: Create tree component #999

MarkoOleksiyenko · 2024-11-04T12:45:08Z

Before submitting the PR, please make sure you do the following:

Read the Contributing Guidelines
Reference your PR to an issue that was discussed ahead of time
The PR should contain a clear description of the problem it solves
Ideally, include a test that fails without this PR but passes with it.

Tests and linting

Run the unit tests with npm run test
Run the linting with npm run lint
Run the e2e tests with npm run e2e

Thank you for contributing to AgnosUI!

codecov · 2024-11-04T14:55:39Z

Codecov Report

Attention: Patch coverage is 86.46617% with 18 lines in your changes missing coverage. Please review.

Project coverage is 91.82%. Comparing base (de19c38) to head (6f9a977).
Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
core/src/components/tree/tree.ts	86.95%	4 Missing and 8 partials ⚠️
...ar/bootstrap/src/components/tree/tree.component.ts	72.22%	5 Missing ⚠️
core-bootstrap/src/components/tree/tree.ts	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #999      +/-   ##
==========================================
- Coverage   92.11%   91.82%   -0.29%     
==========================================
  Files          94       98       +4     
  Lines        2535     2668     +133     
  Branches      421      438      +17     
==========================================
+ Hits         2335     2450     +115     
- Misses        130      140      +10     
- Partials       70       78       +8

Flag	Coverage Δ
e2e	`83.20% <86.46%> (+0.17%)`	⬆️
unit	`84.42% <55.43%> (-1.38%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

ExFlo · 2024-11-05T13:58:14Z

Hi the screenreader is not fully working when expanding / collapsing the node.

ExFlo

Fix the keyboard navigation with screenreader

angular/bootstrap/src/components/tree/tree.component.ts

core/src/components/tree/tree.ts

angular/bootstrap/src/components/tree/tree.component.ts

ExFlo · 2024-11-13T11:44:37Z

core-bootstrap/src/scss/_variables.scss

+$au-tree-expand-button-border-radius: 0.375rem !default;
+$au-tree-expand-button-background-color: transparent !default;
+$au-tree-expand-button-background-color-hover: #c5d5f9 !default;
+$au-tree-expand-icon-color-default: blue !default; // TODO change to a proper color


use proper css var of BS with default value like for the slider

ExFlo · 2024-11-13T11:49:03Z

core-bootstrap/src/scss/tree.scss

+
+	.au-tree-expand-button-placeholder {
+		display: flex;
+		width: 2.75rem;


no css var ?

ExFlo · 2024-11-13T11:49:22Z

core-bootstrap/src/scss/tree.scss

+
+	.au-tree-expand-button {
+		position: relative;
+		width: 2.25rem;


ExFlo · 2024-11-13T11:54:45Z

core/src/components/tree/tree.ts

+		attributes: {
+			'aria-label': computed(() => {
+				const {item} = treeItemContext$();
+				return `Toggle ${item.label}`;


can't we customize this ?

ExFlo · 2024-11-13T11:56:29Z

react/bootstrap/src/components/tree/tree.tsx

+};
+
+/**
+ * A functional component that renders a tree item elemen.


ExFlo · 2024-11-13T11:58:18Z

svelte/bootstrap/src/components/tree/Tree.svelte

+	const widget = callWidgetFactory({
+		factory: createTree,
+		widgetName: 'tree',
+		props: {...props},


don't you need a getter here ?

yeah, the new update

divdavem · 2024-11-19T16:46:46Z

core/src/components/tree/tree.ts

+	const _expandedMap$ = writable(new WeakMap<TreeItem, boolean | undefined>());
+	const _parentMap$ = writable(new WeakMap<TreeItem, TreeItem | undefined>());
+	const _htmlElementMap$ = writable(new WeakMap<TreeItem, HTMLElement>());


As far as I understand:
These three stores seem to never change.
I think you should use simple variables, having stores here does not bring any value.
I think it would make sense to re-initialize those stores just before a new tree traversal, to be sure any previous node is no longer in these WeakMaps.

quentinderoubaix

Some comments, thanks @MarkoOleksiyenko for this new component !

angular/bootstrap/src/components/tree/tree.component.ts

svelte/bootstrap/src/components/tree/TreeDefaultRoot.svelte

svelte/bootstrap/src/components/tree/TreeDefaultStructure.svelte

svelte/demo/src/bootstrap/samples/tree/Basic.route.svelte

react/bootstrap/src/components/tree/tree.tsx

demo/src/lib/components-metadata.ts

core-bootstrap/src/scss/_variables.scss

demo/src/routes/docs/[framework]/components/tree/+layout.server.ts

quentinderoubaix

Tagged all fixed comments as resolved, thx @MarkoOleksiyenko !

quentinderoubaix · 2024-11-21T10:08:23Z

angular/bootstrap/src/components/tree/tree.component.ts

+	imports: [SlotDirective],
+	template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template> `,
+})
+export class TreeComponent extends BaseWidgetDirective<TreeWidget> {


Add some jsdoc to the TreeComponent too.

quentinderoubaix · 2024-11-21T13:34:30Z

react/demo/src/bootstrap/samples/tree/Basic.route.tsx

+			],
+		},
+	];
+	return (


@MarkoOleksiyenko you still kept an unnecessary <> </> around the Tree

MarkoOleksiyenko force-pushed the tree-component branch 3 times, most recently from ab1a56b to 8ff4407 Compare November 4, 2024 14:49

MarkoOleksiyenko force-pushed the tree-component branch 4 times, most recently from 451b793 to a1dda6b Compare November 4, 2024 16:06

MarkoOleksiyenko linked an issue Nov 4, 2024 that may be closed by this pull request

Implement Tree widget #752

Open

MarkoOleksiyenko requested review from ExFlo, quentinderoubaix, divdavem, fbasso and ValentinNelu November 5, 2024 09:25

MarkoOleksiyenko force-pushed the tree-component branch from a1dda6b to 0fa9f4e Compare November 5, 2024 09:27

ExFlo requested changes Nov 5, 2024

View reviewed changes

MarkoOleksiyenko force-pushed the tree-component branch from 0fa9f4e to 71add32 Compare November 12, 2024 16:40

MarkoOleksiyenko requested a review from ExFlo November 12, 2024 16:46

MarkoOleksiyenko force-pushed the tree-component branch 2 times, most recently from 208c027 to 16b8cac Compare November 13, 2024 10:54

ExFlo reviewed Nov 13, 2024

View reviewed changes

MarkoOleksiyenko force-pushed the tree-component branch 5 times, most recently from 80fd954 to 24d5a34 Compare November 18, 2024 11:58

MarkoOleksiyenko requested a review from ExFlo November 18, 2024 12:14

MarkoOleksiyenko force-pushed the tree-component branch 2 times, most recently from 1802fac to 47e95d2 Compare November 19, 2024 15:56

divdavem reviewed Nov 19, 2024

View reviewed changes

quentinderoubaix reviewed Nov 19, 2024

View reviewed changes

react/bootstrap/src/components/tree/tree.tsx Outdated Show resolved Hide resolved

quentinderoubaix reviewed Nov 19, 2024

View reviewed changes

demo/src/lib/components-metadata.ts Show resolved Hide resolved

quentinderoubaix reviewed Nov 19, 2024

View reviewed changes

core-bootstrap/src/scss/_variables.scss Outdated Show resolved Hide resolved

quentinderoubaix reviewed Nov 19, 2024

View reviewed changes

demo/src/routes/docs/[framework]/components/tree/+layout.server.ts Show resolved Hide resolved

MarkoOleksiyenko force-pushed the tree-component branch 2 times, most recently from dae3cbc to de2b3ee Compare November 20, 2024 15:43

MarkoOleksiyenko requested review from quentinderoubaix and divdavem November 20, 2024 16:00

quentinderoubaix reviewed Nov 21, 2024

View reviewed changes

MarkoOleksiyenko force-pushed the tree-component branch 2 times, most recently from 93d0b87 to 3c0643e Compare November 22, 2024 16:27

feat: Create tree component

6f9a977

MarkoOleksiyenko force-pushed the tree-component branch from 3c0643e to 6f9a977 Compare November 22, 2024 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Create tree component #999

feat: Create tree component #999

MarkoOleksiyenko commented Nov 4, 2024

codecov bot commented Nov 4, 2024 •

edited

Loading

ExFlo commented Nov 5, 2024

ExFlo left a comment

ExFlo Nov 13, 2024

ExFlo Nov 13, 2024

ExFlo Nov 13, 2024

ExFlo Nov 13, 2024

ExFlo Nov 13, 2024

ExFlo Nov 13, 2024

MarkoOleksiyenko Nov 13, 2024

divdavem Nov 19, 2024 •

edited

Loading

quentinderoubaix left a comment

quentinderoubaix left a comment

quentinderoubaix Nov 21, 2024

quentinderoubaix Nov 21, 2024

feat: Create tree component #999

Are you sure you want to change the base?

feat: Create tree component #999

Conversation

MarkoOleksiyenko commented Nov 4, 2024

Before submitting the PR, please make sure you do the following:

Tests and linting

codecov bot commented Nov 4, 2024 • edited Loading

Codecov Report

ExFlo commented Nov 5, 2024

ExFlo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

divdavem Nov 19, 2024 • edited Loading

Choose a reason for hiding this comment

quentinderoubaix left a comment

Choose a reason for hiding this comment

quentinderoubaix left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Nov 4, 2024 •

edited

Loading

divdavem Nov 19, 2024 •

edited

Loading