Add visual JSON datasource field picker

CHANGELOG.md

@@ -2,16 +2,17 @@
 
 ## Unreleased
 ### Added
+- Visual field picker for JSON datasources, with a browsable hierarchy and selection preview.
 - Preview live datasource data from the report wizard and sidebar before saving.
 - OCS endpoints to list accessible reports and owned datasets, retrieve report metadata and filtered data including shared reports, and add or delete dataset rows.
 
+### Changed
+- Simplify folder navigation and icons, using the URL to select content and keeping Overview groups collapsed.
+
 ### Fixed
 - Fit report title, subheader, and group fields to the report wizard's left column.
-- Update bundled Moment.js to 2.31.0, which includes the fix for CVE-2026-17495.
-- Update bundled PhpSpreadsheet to 5.10.0 to address known spreadsheet processing vulnerabilities.
+- Update bundled Moment.js to 2.31.0 and PhpSpreadsheet to 5.10.0 to address security vulnerabilities, including CVE-2026-17495 in Moment.js.
 - Restore report tiles for recipients of shared panoramas.
-- Replace the report folder icon with a downward arrow when expanded and remove redundant trailing folder arrows.
-- Use the URL to select content and open its navigation folders without saving navigation state or changing the URL when toggling folders; keep Overview groups collapsed.
 
 ## 7.0.2 - 2026-10-12
 ### Fixed

REUSE.toml

@@ -5,6 +5,12 @@ SPDX-PackageName = "analytics"
 SPDX-PackageSupplier = "Marcel Scherello <analytics@scherello.de>"
 SPDX-PackageDownloadLocation = "https://github.com/rello/analytics"
 
+[[annotations]]
+path = "img/select.svg"
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2026 Google LLC"
+SPDX-License-Identifier = "Apache-2.0"
+
 [[annotations]]
 path = "l10n/**"
 precedence = "aggregate"
@@ -23,6 +29,12 @@ precedence = "aggregate"
 SPDX-FileCopyrightText = "2026 Marcel Scherello"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
+[[annotations]]
+path = "sample_data/sample_orders.json"
+precedence = "override"
+SPDX-FileCopyrightText = "2026 Marcel Scherello"
+SPDX-License-Identifier = "AGPL-3.0-or-later"
+
 [[annotations]]
 path = ["img/app.svg", "img/app-dark.svg", "img/app-color.svg", "img/app-integration.svg", "img/infoIntro.svg", "img/infoReport.svg", "img/infoWiki.svg", "img/save.svg", "img/warning.svg", "img/**.png", "img/**.gif", "img/logo.svg", "img/rename.svg"]
 precedence = "aggregate"

appinfo/routes.php

@@ -94,6 +94,7 @@
 		['name' => 'datasource#own', 'url' => '/datasource/own', 'verb' => 'GET'],
 		['name' => 'datasource#registered', 'url' => '/datasource/registered', 'verb' => 'GET'],
 		['name' => 'datasource#spreadsheetSheets', 'url' => '/datasource/spreadsheet/sheets', 'verb' => 'GET'],
+		['name' => 'datasource#jsonContent', 'url' => '/datasource/json/content', 'verb' => 'POST'],
 		['name' => 'datasource#indexFiltered', 'url' => '/datasource/{datasourceType}', 'verb' => 'GET'],
 
 		// Share

css/style.css

@@ -892,7 +892,8 @@ button, .button {
     vertical-align: middle;
 }
 
-button.datasourceTextVariableEdit {
+button.datasourceTextVariableEdit,
+button.jsonPickerBrowse {
     width: 20px;
     min-width: 20px;
     height: 32px;
@@ -908,7 +909,10 @@ button.datasourceTextVariableEdit {
 
 button.datasourceTextVariableEdit:hover,
 button.datasourceTextVariableEdit:focus,
-button.datasourceTextVariableEdit:active {
+button.datasourceTextVariableEdit:active,
+button.jsonPickerBrowse:hover,
+button.jsonPickerBrowse:focus,
+button.jsonPickerBrowse:active {
     border: 0;
     background-color: transparent;
     box-shadow: none;
@@ -2188,6 +2192,81 @@ div[id^="analytics-content"] .button:not(.analyticsPrimary):hover,
     flex: 0 0 5rem;
 }
 
+.jsonPicker {
+    width: min(620px, calc(100vw - 80px));
+}
+
+.icon-analytics-select {
+    background-image: url(../img/select.svg);
+    background-size: 16px;
+    filter: var(--background-invert-if-dark);
+}
+
+.jsonPickerTree {
+    max-height: 340px;
+    overflow: auto;
+    margin-block: 12px;
+    padding: 8px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--analytics-surface-radius);
+    box-sizing: border-box;
+}
+
+.jsonPickerTree details > :not(summary) {
+    margin-inline-start: 16px;
+}
+
+.jsonPickerTree button {
+    max-width: calc(100% - 16px);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    height: auto;
+}
+
+.jsonPickerTree summary,
+.jsonPickerValue {
+    display: grid;
+    grid-template-columns: 14px minmax(0, 1fr);
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0;
+    overflow-wrap: anywhere;
+}
+
+.jsonPickerTree summary {
+    list-style: none;
+}
+
+.jsonPickerTree summary::-webkit-details-marker {
+    display: none;
+}
+
+.jsonPickerTree summary::before {
+    content: '▸';
+    text-align: center;
+}
+
+.jsonPickerTree details[open] > summary::before {
+    content: '▾';
+}
+
+.jsonPickerValue input[type="checkbox"] {
+    min-height: 0;
+    min-width: 0;
+    width: 14px;
+    height: 14px;
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.jsonPickerPath {
+    color: var(--color-text-maxcontrast);
+    font-size: 12px;
+    margin-bottom: 16px;
+    overflow-wrap: anywhere;
+}
+
 .analyticsTransformPreview {
     overflow-x: auto;
     max-height: 18rem;

js/app.js

@@ -577,6 +577,11 @@ Object.assign(OCA.Analytics.Datasource = {
                 infoColumn.classList.add('datasourceTextVariableCell');
                 infoColumn.appendChild(OCA.Analytics.Datasource.buildTextVariableButton(input));
             }
+            if (templateOption.id === 'path' && [6, 8].includes(Number(datasource))) {
+                const picker = document.importNode(document.getElementById('templateJsonPickerButton').content, true);
+                picker.querySelector('button').addEventListener('click', () => OCA.Analytics.JsonPicker.open(form, datasource, input));
+                infoColumn.appendChild(picker);
+            }
             form.appendChild(tableRow);
             tableRow.appendChild(label);
             tableRow.appendChild(input);