dash/20756-edit-mode-change-event

[ddragula]

Added edit mode events. Changed the way components are updated in edit mode. See #20756.

---

Closes #20756

TO DO:

• Change the moment of component update in the edit mode accordion.
• Add edit-mode events called when updating component options.
• Add edit-mode events called when editing the layout.
• Add a modal popup confirming whether to cancel component editing when clicked out of the accordion.
• Add regression tests.
• Update docs.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1206750034786913

[highsoft-bot]

File size comparison

Sizes for compiled+gzipped (bold) and compiled files.

	master	candidate	difference
dashboards/dashboards.js	43.2 kB 148.6 kB	43.2 kB 148.7 kB	17 B 67 B
dashboards/modules/layout.js	11.7 kB 45.9 kB	12.3 kB 48.4 kB	553 B 2532 B

[highsoft-bot]

Lighthouse report

dashboards-demo-minimal.json

	Reference	Proposed	Diff
performance – score	1	1	0.00
first-contentful-paint – score	1	1	0.00
first-contentful-paint – milliseconds	220.89	187.91	-32.98
first-meaningful-paint – score	1	1	0.00
first-meaningful-paint – milliseconds	453.85	433.59	-20.26
dom-size – score	1	1	0.00
dom-size – elements	344	344	0.00

[highsoft-bot]

Visual test results - No difference found

[highsoft-bot]

Dashboard visual diffs

No differences found

[highsoft-bot]

Benchmark report - Dashboards

benchmarks/Dashboards/DataPool-CSV-constructor.bench.ts

Sample size	This PR avg (ms)	master avg (ms)	Diff	Percent diff
2500000	0.17	0.17	0	-2%

See all

Sample size	This PR avg (ms)	master avg (ms)	Diff	Percent diff
100	0.16	0.16	0	0%
1000	0.17	0.17	0	0%
10000	0.16	0.17	-0.01	-4%
100000	0.17	0.16	0	3%
1000000	0.17	0.16	0.01	3%
2500000	0.17	0.17	0	-2%

benchmarks/Dashboards/DataTable-loading-columns.bench.ts

Sample size	This PR avg (ms)	master avg (ms)	Diff	Percent diff
2500000	16.51	16.63	-0.12	-1%

See all

Sample size	This PR avg (ms)	master avg (ms)	Diff	Percent diff
100	0.25	0.24	0.01	4%
1000	0.24	0.24	0	0%
10000	0.44	0.28	0.16	57.99999999999999%
100000	2.34	2.31	0.03	1%
1000000	9.41	9.15	0.26	3%
2500000	16.51	16.63	-0.12	-1%

benchmarks/Dashboards/DataTable-loading-rows.bench.ts

Sample size	This PR avg (ms)	master avg (ms)	Diff	Percent diff
2500000	743.86	743.14	0.72	0%

See all

Sample size	This PR avg (ms)	master avg (ms)	Diff	Percent diff
100	0.29	0.3	-0.01	-2%
1000	0.51	0.53	-0.02	-4%
10000	3.18	2.9	0.28	10%
100000	15.9	20.64	-4.74	-23%
1000000	289.4	290.31	-0.92	0%
2500000	743.86	743.14	0.72	0%

[karolkolodziej]

1. Maskiis missing steps: edit component -> click outside of the sidebar -> click cancel
   2. IMO clicking outside of the dashboard's container should not trigger the popup

[stitot]

Nice work! Are docs unclear on the fact that not all changes will trigger events, such as component (not chart) options such as title? Possible to add support for these as well?

PS. Really nice(!) that components are updated when fields are unfocused!

[ddragula]

Are docs unclear on the fact that not all changes will trigger events, such as component (not chart) options such as title? Possible to add support for these as well?

In what case did you observe this, @stitot? My point was that events are always emitted when confirming or cancelling changes, regardless of the option type. I can't reproduce this, it seems to work here too.

[stitot]

Hm, it work fine now, @vazonik . When I tried last time only chart options, not component, triggered the event. All good!