[IMP] web_timeline: optional dependency arrows toggle

web_timeline/__manifest__.py

@@ -5,7 +5,7 @@
 {
     "name": "Web timeline",
     "summary": "Interactive visualization chart to show events in time",
-    "version": "19.0.1.0.0",
+    "version": "19.0.1.1.0",
     "development_status": "Production/Stable",
     "author": "ACSONE SA/NV, "
     "Tecnativa, "

web_timeline/readme/USAGE.md

@@ -28,3 +28,8 @@ Double-click on the record to edit it. Double-click in open area to
 create a new record with the group and start date linked to the area you
 clicked in. By holding the Ctrl key and dragging left to right, you can
 create a new record with the dragged start and end date.
+
+When the view defines dependency arrows (the `dependency_arrow` attribute),
+a **Dependencies** button appears in the toolbar. Arrows are shown by
+default; click the button to hide them and click again to show them. This
+is useful when a large number of links makes the chart hard to read.

web_timeline/static/src/views/timeline/timeline_renderer.esm.js

@@ -31,6 +31,9 @@ export class TimelineRenderer extends Component {
         this.min_height = this.params.min_height;
         this.date_start = this.params.date_start;
         this.dependency_arrow = this.params.dependency_arrow;
+        // Dependency arrows are shown by default when configured, but can be
+        // toggled off at runtime through the button in the toolbar.
+        this.showDependencies = useState({data: Boolean(this.dependency_arrow)});
         this.fields = this.params.fields;
         this.timeline = false;
         this.initial_data_loaded = false;
@@ -89,6 +92,16 @@ export class TimelineRenderer extends Component {
         }
     }
 
+    /**
+     * Toggle the display of dependency arrows.
+     *
+     * @private
+     */
+    _onToggleDependenciesClicked() {
+        this.showDependencies.data = !this.showDependencies.data;
+        this.draw_canvas();
+    }
+
     /**
      * Scale the timeline window to a day.
      *
@@ -257,7 +270,7 @@ export class TimelineRenderer extends Component {
      */
     draw_canvas() {
         this.canvas.clear();
-        if (this.dependency_arrow) {
+        if (this.dependency_arrow && this.showDependencies.data) {
             this.draw_dependencies();
         }
     }

web_timeline/static/src/views/timeline/timeline_renderer.xml

@@ -25,6 +25,13 @@
                         t-on-click="_onScaleYearClicked"
                     >Year</button>
                 </div>
+                <button
+                    t-if="dependency_arrow"
+                    t-att-class="'oe_timeline_button_dependencies btn btn-sm ms-2 ' + (showDependencies.data ? 'btn-primary' : 'btn-default')"
+                    t-att-aria-pressed="showDependencies.data"
+                    t-on-click="_onToggleDependenciesClicked"
+                    title="Show or hide dependency arrows"
+                >Dependencies</button>
             </div>
             <div class="oe_timeline_widget" t-ref="canvas" />
         </div>

web_timeline/static/tests/web_timeline_view_tests.esm.js

@@ -190,4 +190,38 @@ QUnit.module("Views", (hooks) => {
         await click($item_content);
         assert.containsNone($item_content.parentElement, ".vis-delete");
     });
+
+    QUnit.test("no dependency toggle without dependency_arrow", async (assert) => {
+        await makeView({
+            type: "timeline",
+            resModel: "order",
+            serverData,
+            arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id"/>',
+        });
+        assert.containsNone(target, ".oe_timeline_button_dependencies");
+    });
+
+    QUnit.test("toggle dependency arrows", async (assert) => {
+        serverData.models.order.fields.dependency_ids = {
+            string: "Dependencies",
+            type: "many2many",
+            relation: "order",
+        };
+        for (const rec of serverData.models.order.records) {
+            rec.dependency_ids = [];
+        }
+        await makeView({
+            type: "timeline",
+            resModel: "order",
+            serverData,
+            arch: '<timeline date_start="date_start" date_stop="date_stop" default_group_by="partner_id" dependency_arrow="dependency_ids"/>',
+        });
+        const $btn = target.querySelector(".oe_timeline_button_dependencies");
+        assert.ok($btn, "dependency toggle button should be present");
+        assert.hasClass($btn, "btn-primary", "arrows are shown by default");
+        await click($btn);
+        assert.doesNotHaveClass($btn, "btn-primary", "arrows hidden after toggle");
+        await click($btn);
+        assert.hasClass($btn, "btn-primary", "arrows shown again after re-toggle");
+    });
 });