Add a Segment Management Page #23885

tzi · 2025-12-09T14:38:49Z

Description

UX-326

We propose the introduction of a new page in Matomo, titled "Segments."
This page will serve as a combined reporting and management tool to make it easy to view (and edit) all segments for a website, and also provide a clean dashboard to view All segment data at once.

Features

The search input allow us to filter the segments
We can star and unstar segments according to the current user right.
If needed, a tooltip explain why we cannot do an action. If it is a global segment, the tooltip precise that starring/unstarring it will affect all websites.
We can see Visits / Actions / Evolution Visits for each segment according to the selected period.
We can go back to the dashboard with a specific segment selected
We can edit a segment, according to the current user right.
If we choose to edit a segment, it opens the segmentEditorPanel
We can delete a segment, according to the current user right.
If we choose to delete a segment, it opens the segmentEditorPanel and trigger a new modal that ask confirmation before deleting it.
We can create a new segment according to the user right AND segment configuration.

Data Synchronization with the Panel

Starring/Unstarring will reorder segments without reload. The Page and the Panel are always synchronized.

Editing from Page	Editing from Panel

Menus

in the Dashboard menu	in the Administration Menu
Visitors > Segments	Websites > Segments

We added an outlink icon to the administration because this link goes back to the Dashboard. We choose this behaviour because the website / date / segment selector are needed and not available in the administration layout.

Plugins

This PR will have impact on plugins UI screenshots:

TagManager: https://github.com/matomo-org/tag-manager/pull/1077/changes

Checklist

[NA] I have understood, reviewed, and tested all AI outputs before use
[NA] All AI instructions respect security, IP, and privacy rules

Review

tzi · 2026-01-12T15:46:14Z

plugins/CoreHome/stylesheets/dataTable/_dataTable.less

+tr:nth-last-child(1 of .dataTable_row-group) td {
+  border-bottom: 3px solid @theme-color-background-tinyContrast !important;
+}


ℹ️ This create a large border after the last item in a row with the class dataTable_row-group.

Only "All Visits" has this class "All Visits" and "zefzef" are brothers and have this class

tzi · 2026-01-12T15:48:37Z

plugins/CoreVue/types/index.d.ts

  interface PiwikHelperGlobal {
    escape(text: string): string;
    redirect(params?: any);
+    getCurrentQueryStringWithParametersModified(newparams: string);


ℹ️ This function already exists (and is useful!) but it is now available outside of the piwikHelper.

tzi · 2026-01-12T15:49:16Z

core/Menu/MenuAdmin.php

+    public function addMeasurableItem($menuName, $url, $order = 50, $tooltip = false, $icon = false)
    {
-        $this->addItem('CoreAdminHome_MenuMeasurables', $menuName, $url, $order, $tooltip);
+        $this->addItem('CoreAdminHome_MenuMeasurables', $menuName, $url, $order, $tooltip, $icon);


ℹ️ This argument already exists and it is false by default. I only made it available in a higher level.

tzi · 2026-01-12T15:50:15Z

plugins/CoreHome/vue/src/Sparkline/Sparkline.less

+.sparklineEvolution {
+  color: black;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.sparklineEvolution-positive {
+  color: green;
+}
+
+.sparklineEvolution-negative {
+  color: red;
+}
+
+.sparklineEvolution_icon {
+  margin-right: 1em;
+  vertical-align: middle;
+}


ℹ️ Inspired from the "All Websites" design, but now available everywhere.

tzi · 2026-01-12T15:51:35Z

plugins/Goals/Menu.php


        if (Piwik::isUserHasWriteAccess($idSite)) {
-            $menu->addMeasurableItem('Goals_Goals', $this->urlForAction('manage', array('idSite' => $idSite)), 40);
+            $menu->addMeasurableItem('Goals_Goals', $this->urlForAction('manage', array('idSite' => $idSite)), 15);


ℹ️ Goals item should be higher in the Administration Menu. It is more obvious now that we add a "Segments" item.

tzi · 2026-01-12T15:56:09Z

plugins/SegmentEditor/javascripts/Segmentation.js

        }

        function addTooltip(element, title) {
+          $('.ui-tooltip').remove();


ℹ️ Avoid bug, when several tooltips are stack. It happens when DOM that trigger the tooltip is destroyed, for example when clicking on a star, the star is rebuild.

tzi · 2026-01-12T15:57:16Z

plugins/SegmentEditor/javascripts/Segmentation.js

-          updateStarSegmentTooltip($segment, segment);
+        function updateStarredSegment(segment, isError = false) {
+          starCallbackList.forEach(function(callback) {
+            callback(segment, isError);


ℹ️ When the state of a segment change, it changes automatically for the segmentEditor and the segmentPage in the same time.

tzi · 2026-01-12T15:58:04Z

plugins/SegmentEditor/javascripts/Segmentation.js

+        window.SegmentEditorPanel = {
+          addTooltip,
+          askToDeleteSegment,
+          closePanel,
+          getDeleteSegmentTitle,
+          getEditSegmentTitle,
+          getIsUserCanEditSegment,
+          getSegmentFromId,
+          normalizeSearchString,
+          onSegmentsStarChange,
+          openPanel,
+          openEditFormGivenIdSegment,
+          togglePanel,
+          toggleStarredSegment,
+          triggerStarAnimation,
+          updateStarSegmentTooltip,
+        };


ℹ️ Theses functions are also useful for the SegmentPage and the SegmentPanel, so we make it public to avoid duplication and inconsistency.

tzi · 2026-01-12T15:59:02Z

plugins/SegmentEditor/lang/en.json

        "AddANDorORCondition": "Add %s condition",
-        "AddNewSegment": "Add new segment",
-        "AreYouSureDeleteSegment": "Are you sure you want to delete this segment?",
+        "AddNewSegment": "Create new segment",


ℹ️ For consistency with Form / Funnels / Reports, we changed the label from "Add" to "Create" and displayed a "+" icon.

tzi · 2026-01-12T16:00:49Z

plugins/SegmentEditor/stylesheets/segmentation.less

-        display: flex;
-        width: 16px;
-        height: 16px;
+.segmentAction {


ℹ️ Reduce selector complexity to improve reusability

tzi · 2026-01-12T16:02:24Z

plugins/SegmentEditor/templates/_segmentSelector.twig

            </ul>

            {% if authorizedToCreateSegments %}
-                <a tabindex="4" class="add_new_segment btn">{{ 'SegmentEditor_AddNewSegment'|translate }}</a>


ℹ️ <a> tag without href attribute is an anchor and is not accessible.

tzi · 2026-01-12T16:03:20Z

plugins/SegmentEditor/templates/manageSegments.twig

+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+                                            <path stroke="black" stroke-width="3" fill="none" d="M9.153 5.408C10.42 3.136 11.053 2 12 2c.947 0 1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182.28.213.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506-.766.582-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452-.347 0-.674.15-1.329.452l-.595.274c-2.303 1.06-3.455 1.59-4.22 1.01-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882.293-.941 1.523-1.22 3.983-1.776l.636-.144c.699-.158 1.048-.237 1.329-.45.28-.213.46-.536.82-1.182l.328-.588Z"/>
+                                        </svg>


ℹ️ Star, in a future PR, will be handled with a background image to reduce the page weight and improve reusability

tzi · 2026-01-14T10:12:30Z

plugins/SegmentEditor/javascripts/manageSegmentsPage.js

+    var tooltip = $(root).parents('.matomo-widget').tooltip('instance');
+    if (tooltip) {
+      tooltip.disable();
+    }
+    window.SegmentEditorPanel.updateStarSegmentTitle($starButton, segment);
+    if (tooltip) {
+      tooltip.enable();
+    }


ℹ️ Without this trick, I had broken state at the first hovering: the old tooltip wasn’t closed and the new one wasn’t in the jqueryUI style. With the second hovering, everything goes to normal again.

Add 'All Visits at the top' Reorder segments: fixed > selected > starred > others Add highlighted styles to fixed and selected segments Allow star/unstar segments Reorder data Add view, edit, and delete actions Synchronize UI between the editor panel and the management page Align number to the right Add right management Use translation for the page description Implement the search segment Add tooltip on view action Add a create segment button Add sparkline UX Meeting feedback Add a menu entry into the Administration menu + colored evolution Fix range selection Update evolution tooltip Add manage segment button Remove tooltip on sparkline when using a custom range Reorder administration menu and add an outlink icon Use generic table tooltip instead of custom ones Fix PHPCS Fix PHP errors Update the Scheduled Reports help box about segment Move JavaScript in a separate file and fix a bug when we unstar selected segment Bugfix: not all users are allowed to create segments

tzi force-pushed the ux-326-2 branch from c419fe2 to f1b587f Compare December 12, 2025 11:37

tzi force-pushed the ux-326-2 branch 9 times, most recently from 13932db to 597f770 Compare December 23, 2025 08:26

tzi force-pushed the ux-326-2 branch 2 times, most recently from adcf8af to 6fb66bd Compare December 30, 2025 14:02

tzi force-pushed the ux-326-2 branch 2 times, most recently from fc0cb9b to e353f4f Compare January 12, 2026 10:49

tzi commented Jan 12, 2026

View reviewed changes

tzi removed the Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. label Jan 12, 2026

tzi requested a review from a team January 12, 2026 17:01

tzi marked this pull request as ready for review January 12, 2026 17:01

tzi added the Needs Review PRs that need a code review label Jan 12, 2026

tzi force-pushed the ux-326-2 branch 3 times, most recently from 58c8392 to ff37dbc Compare January 13, 2026 08:52

tzi mentioned this pull request Jan 13, 2026

Update UI screenshots after Administration menu change matomo-org/tag-manager#1077

Draft

tzi added this to the 5.7.0 milestone Jan 13, 2026

tzi force-pushed the ux-326-2 branch 5 times, most recently from 9b0745b to 6939639 Compare January 13, 2026 14:02

tzi mentioned this pull request Jan 13, 2026

Simplify tooltip handling in segment selector #23962

Merged

10 tasks

tzi force-pushed the ux-326-2 branch from 6939639 to 1fd639a Compare January 14, 2026 10:09

tzi commented Jan 14, 2026

View reviewed changes

tzi added 3 commits January 16, 2026 10:15

Update UI screenshots and fix tests

1b6e7c5

Change translation key since the parameters changed

09dc053

tzi force-pushed the ux-326-2 branch from 1fd639a to 09dc053 Compare January 16, 2026 09:15

Uh oh!

Add a Segment Management Page #23885

Are you sure you want to change the base?

Add a Segment Management Page #23885

Uh oh!

Conversation

tzi commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Features

Data Synchronization with the Panel

Menus

Plugins

Checklist

Review

Uh oh!

tzi Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tzi Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

tzi Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

tzi commented Dec 9, 2025 •

edited

Loading

tzi Jan 12, 2026 •

edited

Loading

tzi Jan 12, 2026 •

edited

Loading

tzi Jan 12, 2026 •

edited

Loading

tzi Jan 12, 2026 •

edited

Loading

tzi Jan 12, 2026 •

edited

Loading

tzi Jan 12, 2026 •

edited

Loading