Rebrand the "report page" as the "discovery page"

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## next
 
+- Rebranded the "report page" as the "discovery page"
+    - Changed text on button `Make report` → `Discover`
+    - Changed page slug `report` → `discovery`
+    - Added redirect for locations `#report...` → `#discovery...`, use `Widget.options.intoreportToDiscoveryRedirect` to disable it
+    - `Widget#reportPageId` → `Widget#discoveryPageId`, with default `discovery` instead of `report`
+    - `Widget.options.reportPageId` → `Widget.options.discoveryPageId`
+    - `navButtons.reportPage` → `navButtons.discoveryPage`, button's `name` changed into `discovery-page`
+    - CSS classes:
+        - `.report-*` → `.discovery-*`
+        - `.discovery-editor` → `.discovery-view-editor`
 - Added `positionMode` option for `popup` view. When set to "natural", the popup attempts to position itself at the bottom right side if dimensions allow, instead of positioning towards the larger available space by default (value "safe" for the option)
 - Added `pointerOffsetX` and `pointerOffsetY` options for `popup` view and `view.tooltip`
 - Enabled `positionMode: natural` for tooltips by default, can be changed via tooltip options

src/main/app.js

@@ -29,7 +29,7 @@ export class App extends Widget {
 
         if (options.mode !== 'modelfree') {
             extensions.push(navButtons.indexPage);
-            extensions.push(navButtons.reportPage);
+            extensions.push(navButtons.discoveryPage);
         }
 
         if (coalesceOption(options.upload, false)) {
@@ -175,9 +175,9 @@ export class App extends Widget {
     }
 
     loadDataFromEvent(event, options) {
-        if (this.options.mode === 'modelfree' && this.defaultPageId !== this.reportPageId) {
+        if (this.options.mode === 'modelfree' && this.defaultPageId !== this.discoveryPageId) {
             this._defaultPageId = this.defaultPageId;
-            this.defaultPageId = this.reportPageId;
+            this.defaultPageId = this.discoveryPageId;
             this.setPageHash(this.pageHash, true);
             this.cancelScheduledRender();
         }

src/main/widget.js

@@ -63,7 +63,8 @@ export class Widget extends Emitter {
             darkmodePersistent = false,
             defaultPage,
             defaultPageId,
-            reportPageId,
+            discoveryPageId,
+            reportToDiscoveryRedirect = true,
             extensions,
             inspector: useInspector = false
         } = this.options;
@@ -110,7 +111,8 @@ export class Widget extends Emitter {
         this.prepare = data => data;
 
         this.defaultPageId = defaultPageId || 'default';
-        this.reportPageId = reportPageId || 'report';
+        this.discoveryPageId = discoveryPageId || 'discovery';
+        this.reportToDiscoveryRedirect = Boolean(reportToDiscoveryRedirect); // TODO: to make bookmarks work, remove sometime in the future
         this.pageId = this.defaultPageId;
         this.pageRef = null;
         this.pageParams = {};
@@ -621,7 +623,12 @@ export class Widget extends Emitter {
     }
 
     setPageHash(hash, replace = false) {
-        const { pageId, pageRef, pageParams } = this.decodePageHash(hash);
+        let { pageId, pageRef, pageParams } = this.decodePageHash(hash);
+
+        // TODO: remove sometime in the future
+        if (this.reportToDiscoveryRedirect && pageId === 'report') {
+            setTimeout(() => this.pageId === 'report' && this.setPage('discovery', this.pageRef, this.pageParams, true));
+        }
 
         if (this.pageId !== pageId ||
             this.pageRef !== pageRef ||

src/nav/buttons.js

@@ -6,11 +6,11 @@ export function indexPage(host) {
     });
 }
 
-export function reportPage(host) {
+export function discoveryPage(host) {
     host.nav.append({
-        name: 'report-page',
-        when: '#.widget | pageId != reportPageId',
-        data: '{ text: "Make report", href: pageLink(#.widget.reportPageId) }'
+        name: 'discovery-page',
+        when: '#.widget | pageId != discoveryPageId',
+        data: '{ text: "Discover", href: pageLink(#.widget.discoveryPageId) }'
     });
 }
 

src/pages/discover.css

@@ -0,0 +1,41 @@
+@import url('./discover/header.css');
+@import url('./discover/editor-common.css');
+@import url('./discover/editor-query.css');
+@import url('./discover/editor-view.css');
+
+.page-discovery {
+    padding-top: 20px !important;
+}
+.discovery:not([data-dzen]) .page-discovery > .discovery-content {
+    min-height: calc(100vh - 121px);
+}
+
+/********************************
+* Error
+********************************/
+
+.page-discovery > .discovery-editor .discovery-error,
+.page-discovery > .discovery-content > .discovery-error {
+    display: block;
+    overflow: hidden;
+    border-left: 3px solid rgba(255, 0, 0, 0.8);
+    background: rgba(225, 75, 75, 0.2);
+    background-clip: padding-box;
+    padding: 8px 12px;
+    font-size: 12px;
+    white-space: pre-wrap;
+    font-family: var(--discovery-monospace-font-family);
+    font-size: 11px;
+}
+.page-discovery > .discovery-editor .discovery-error::before,
+.page-discovery > .discovery-content > .discovery-error::before {
+    display: block;
+    margin-bottom: .5em;
+    font-size: 16px;
+}
+.page-discovery > .discovery-editor .query-error::before {
+    content: 'Query error';
+}
+.page-discovery > .discovery-content > .render-error::before {
+    content: 'Render error';
+}

src/pages/report.js → src/pages/discover.js

@@ -1,9 +1,9 @@
 /* eslint-env browser */
 import { createElement } from '../core/utils/dom.js';
-import { encodeParams, decodeParams } from './report/params.js';
-import createHeader from './report/header.js';
-import createQueryEditor from './report/editor-query.js';
-import createViewEditor from './report/editor-view.js';
+import { encodeParams, decodeParams } from './discover/params.js';
+import createHeader from './discover/header.js';
+import createQueryEditor from './discover/editor-query.js';
+import createViewEditor from './discover/editor-view.js';
 
 export default function(host) {
     function updateParams(delta, replace) {
@@ -23,23 +23,23 @@ export default function(host) {
         const viewEditor = createViewEditor(host, updateParams);
 
         // layout elements
-        const reportEditorEl = createElement('div', { class: 'report-editor discovery-hidden-in-dzen', hidden: true }, [
+        const discoverEditorEl = createElement('div', { class: 'discovery-editor discovery-hidden-in-dzen', hidden: true }, [
             queryEditor.el,
             viewEditor.el
         ]);
-        const reportContentEl = createElement('div', 'report-content');
+        const discoverContentEl = createElement('div', 'discovery-content');
         const layout = [
             ...header.el,
-            reportEditorEl,
-            reportContentEl
+            discoverEditorEl,
+            discoverContentEl
         ];
 
         return refs = {
             header,
             queryEditor,
             viewEditor,
-            reportEditorEl,
-            reportContentEl,
+            discoverEditorEl,
+            discoverContentEl,
             layout
         };
     }
@@ -50,19 +50,19 @@ export default function(host) {
     //
     // Page
     //
-    host.page.define('report', function(el, data, context) {
+    host.page.define('discovery', function(el, data, context) {
         const {
             header,
             queryEditor,
             viewEditor,
-            reportEditorEl,
-            reportContentEl
+            discoverEditorEl,
+            discoverContentEl
         } = get();
 
         // process noedit setting
-        reportEditorEl.hidden = context.params.noedit;
+        discoverEditorEl.hidden = context.params.noedit;
 
-        // update report title
+        // update page title
         header.render(data, context);
 
         // perform query
@@ -74,14 +74,14 @@ export default function(host) {
 
             if (queryResult.error) {
                 viewEditor.el.hidden = true;
-                reportContentEl.hidden = true;
+                discoverContentEl.hidden = true;
                 return;
             }
 
             viewEditor.el.hidden = false;
-            reportContentEl.hidden = false;
+            discoverContentEl.hidden = false;
 
-            viewEditor.render(queryResult.computed, /* queryResult.context */ context, reportContentEl);
+            viewEditor.render(queryResult.computed, /* queryResult.context */ context, discoverContentEl);
         });
     }, {
         reuseEl: true,

src/pages/report/editor-common.css → src/pages/discover/editor-common.css

@@ -2,85 +2,85 @@
 * Tabs
 ********************************/
 
-.page-report > .report-editor .report-editor-tabs {
+.page-discovery > .discovery-editor .discovery-editor-tabs {
     overflow: hidden;
     display: inline-block;
     vertical-align: top;
 }
-.page-report > .report-editor .data-query-result::before,
-.page-report > .report-editor .report-editor-tabs::before {
+.page-discovery > .discovery-editor .data-query-result::before,
+.page-discovery > .discovery-editor .discovery-editor-tabs::before {
     padding: 3px 4px;
     width: 40px;
     text-align: right;
     box-sizing: border-box;
     font-size: 11px;
     color: rgba(141, 141, 141, 0.75);
 }
-.page-report > .report-editor .report-editor-tab {
+.page-discovery > .discovery-editor .discovery-editor-tab {
     display: inline-block;
     margin: 0 1px 1px 0;
     padding: 2px 12px;
     background: rgba(200, 200, 200, 0.2);
     font-size: 12px;
     cursor: pointer;
 }
-.page-report > .report-editor .report-editor-tab.active {
+.page-discovery > .discovery-editor .discovery-editor-tab.active {
     padding-bottom: 3px;
     margin-bottom: 0;
     background: rgba(108, 188, 241, 0.15);
     cursor: default;
 }
-.page-report > .report-editor .report-editor-tab:not(.active):hover {
+.page-discovery > .discovery-editor .discovery-editor-tab:not(.active):hover {
     background: rgba(187, 187, 187, 0.4);
 }
-.page-report > .report-editor .report-editor-tab:first-child {
+.page-discovery > .discovery-editor .discovery-editor-tab:first-child {
     border-top-left-radius: 4px;
 }
-.page-report > .report-editor .report-editor-tab.active:first-child {
+.page-discovery > .discovery-editor .discovery-editor-tab.active:first-child {
     border-bottom-left-radius: 4px;
     padding-bottom: 2px;
     margin-bottom: 1px;
 }
-.page-report > .report-editor .report-editor-tab:last-child {
+.page-discovery > .discovery-editor .discovery-editor-tab:last-child {
     border-top-right-radius: 4px;
 }
-.page-report > .report-editor .report-editor-tab:not(.active):last-child {
+.page-discovery > .discovery-editor .discovery-editor-tab:not(.active):last-child {
     border-bottom-right-radius: 4px;
 }
 
 /********************************
 * Editor
 ********************************/
 
-.page-report > .report-editor .editor-toolbar {
+.page-discovery > .discovery-editor .editor-toolbar {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: baseline;
     gap: 10px;
 }
-.page-report > .report-editor .editor-toolbar label {
+.page-discovery > .discovery-editor .editor-toolbar label {
     padding: 4px;
     margin: 0 1ex;
     white-space: nowrap;
 }
-.page-report > .report-editor .editor-toolbar .syntax-hint {
+.page-discovery > .discovery-editor .editor-toolbar .syntax-hint {
     padding-left: 10px;
     flex: 1;
     color: rgba(141, 141, 141, 0.75);
     font-size: 12px;
     align-self: start;
 }
-.page-report > .report-editor .editor-toolbar .view-checkbox__label {
+.page-discovery > .discovery-editor .editor-toolbar .view-checkbox__label {
     margin-right: 0;
 }
 
-.page-report > .report-editor .discovery-editor-error {
+.page-discovery > .discovery-editor .discovery-editor-error {
     border-bottom: 1px solid rgba(255, 0, 0, .6);
     background: rgba(255, 215, 209, 0.3);
 }
 
-.page-report > .report-editor textarea {
+.page-discovery > .discovery-editor textarea {
     padding: 8px;
     width: 100%;
     box-sizing: border-box;
@@ -93,7 +93,7 @@
     box-shadow: inset 0 1px 1px rgba(142, 142, 142, .2);
     resize: vertical;
 }
-.page-report > .report-editor textarea:focus {
+.page-discovery > .discovery-editor textarea:focus {
     border-color: #0af;
     box-shadow: 0 0 1px 3px rgba(0, 170, 255, .2), inset 0 1px 1px rgba(142, 142, 142, .2) !important;
     outline: 0;