diff --git a/CHANGELOG.md b/CHANGELOG.md index cebd6795..7212ee06 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/main/app.js b/src/main/app.js index ad942a73..28604ecc 100644 --- a/src/main/app.js +++ b/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(); } diff --git a/src/main/widget.js b/src/main/widget.js index 77a550f9..db0b3558 100644 --- a/src/main/widget.js +++ b/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 || diff --git a/src/nav/buttons.js b/src/nav/buttons.js index 55afd46a..1051d0d4 100644 --- a/src/nav/buttons.js +++ b/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) }' }); } diff --git a/src/pages/discover.css b/src/pages/discover.css new file mode 100644 index 00000000..1218ee73 --- /dev/null +++ b/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'; +} diff --git a/src/pages/report.js b/src/pages/discover.js similarity index 65% rename from src/pages/report.js rename to src/pages/discover.js index 573c9b86..5d0653fe 100644 --- a/src/pages/report.js +++ b/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, diff --git a/src/pages/report/editor-common.css b/src/pages/discover/editor-common.css similarity index 61% rename from src/pages/report/editor-common.css rename to src/pages/discover/editor-common.css index 9a0e6437..e23ec52c 100644 --- a/src/pages/report/editor-common.css +++ b/src/pages/discover/editor-common.css @@ -2,13 +2,13 @@ * 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; @@ -16,7 +16,7 @@ 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; @@ -24,27 +24,27 @@ 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; } @@ -52,35 +52,35 @@ * 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; diff --git a/src/pages/report/editor-query.css b/src/pages/discover/editor-query.css similarity index 52% rename from src/pages/report/editor-query.css rename to src/pages/discover/editor-query.css index ef25d13b..1502627c 100644 --- a/src/pages/report/editor-query.css +++ b/src/pages/discover/editor-query.css @@ -1,4 +1,4 @@ -.page-report > .report-editor .query-graph { +.page-discovery > .discovery-editor .query-graph { position: relative; display: flex; flex-direction: row; @@ -6,12 +6,12 @@ gap: 50px; margin: 0 0 10px; } -.page-report > .report-editor .query-graph .query-graph-box { +.page-discovery > .discovery-editor .query-graph .query-graph-box { display: flex; flex-direction: column; gap: 1px; } -.page-report > .report-editor .query-graph .query-graph-node { +.page-discovery > .discovery-editor .query-graph .query-graph-node { --color: #8888; display: block; width: 10px; @@ -25,10 +25,10 @@ transition: .2s ease-in-out; transition-property: box-shadow, background-color; } -.page-report > .report-editor .query-graph .query-graph-node[data-state="computing"] { +.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"] { --color: #f6f61cb5; /* #979729 */ } -.page-report > .report-editor .query-graph .query-graph-node[data-state="computing"]::before { +.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"]::before { content: ''; position: absolute; display: block; @@ -40,40 +40,40 @@ /* box-shadow: 0 0 0 1px var(--discovery-background-color), 0 0 0 3px var(--color); */ border-radius: 50%; clip-path: inset(0px 0px 50% 50%); - animation: report-graph-computing .65s forwards infinite linear; + animation: discovery-graph-computing .65s forwards infinite linear; } -@keyframes report-graph-computing { +@keyframes discovery-graph-computing { to { rotate: 360deg } } -.page-report > .report-editor .query-graph .query-graph-node[data-state="successful"] { +.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="successful"] { --color: #4da32fcf; transition: none; } -.page-report > .report-editor .query-graph .query-graph-node[data-state="failed"] { +.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="failed"] { --color: #d84343; } -.page-report > .report-editor .query-graph .query-graph-node[data-state="canceled"] { +.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="canceled"] { background-image: radial-gradient(transparent calc(50% - 2px), var(--discovery-color) 50%); background-color: transparent; } -.page-report > .report-editor .query-graph .query-graph-node.current { +.page-discovery > .discovery-editor .query-graph .query-graph-node.current { /* background-color: #4da32fcf; */ } -.page-report > .report-editor .query-graph .query-graph-node.target { +.page-discovery > .discovery-editor .query-graph .query-graph-node.target { pointer-events: none; /* background-color: #f6f61cb5; */ box-shadow: 0 0 0 2px var(--color) inset, 0 0 0 3px var(--discovery-background-color) inset; outline: 1px solid var(--discovery-background-color); cursor: default; } -.page-report > .report-editor .query-graph .query-graph-node:not(.target):hover { +.page-discovery > .discovery-editor .query-graph .query-graph-node:not(.target):hover { /* scale: 1.25; */ opacity: 1; box-shadow: 0 0 0 2px #888 inset, 0 0 0 3px var(--discovery-background-color) inset; outline: 1px solid var(--discovery-background-color); transition: none; } -.page-report > .report-editor .query-graph > svg { +.page-discovery > .discovery-editor .query-graph > svg { position: absolute; inset: 0; width: 100%; @@ -136,10 +136,10 @@ font-size: 12px; } -.page-report > .report-editor .query-path { +.page-discovery > .discovery-editor .query-path { opacity: .35; } -.page-report > .report-editor .query-path .query { +.page-discovery > .discovery-editor .query-path .query { background: #eee; border: solid #888; border-width: 1px 1px 0 1px; @@ -155,29 +155,29 @@ text-overflow: ellipsis; cursor: pointer; } -.discovery-root-darkmode .page-report > .report-editor .query-path .query { +.discovery-root-darkmode .page-discovery > .discovery-editor .query-path .query { background: #333; } -.page-report > .report-editor .query-path .query:last-child { +.page-discovery > .discovery-editor .query-path .query:last-child { padding-bottom: 7px; } -.page-report > .report-editor .query-path .query:empty::before { +.page-discovery > .discovery-editor .query-path .query:empty::before { content: ''; } -.page-report > .report-editor .query-path .query:hover { +.page-discovery > .discovery-editor .query-path .query:hover { background: #ccc; } -.discovery-root-darkmode .page-report > .report-editor .query-path .query:hover { +.discovery-root-darkmode .page-discovery > .discovery-editor .query-path .query:hover { background: #444; } -.page-report > .report-editor .query-editor { +.page-discovery > .discovery-editor .query-editor { position: relative; } -.page-report > .report-editor .query-editor > .discovery-editor { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor { /* gap: 1px; */ } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__input-panel { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__input-panel { display: grid; grid-template-areas: 'actions input engine' @@ -189,11 +189,11 @@ border-radius: 1px 1px 0 0; gap: 0 1px; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__input-panel.details-expanded { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__input-panel.details-expanded { gap: 1px; border-bottom: 1px solid var(--editor-border-color, #888); } -.page-report > .report-editor .query-editor > .discovery-editor .query-engine { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine { grid-area: engine; background-color: rgba(192, 192, 192, .175); padding: 1px 8px 3px; @@ -201,45 +201,45 @@ color: var(--discovery-color); text-decoration: none; } -.page-report > .report-editor .query-editor > .discovery-editor .query-engine:hover { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine:hover { background-color: rgba(165,165,165,.3); } -.page-report > .report-editor .query-editor > .discovery-editor .query-engine::before { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine::before { content: 'Syntax: '; color: #888; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input { grid-area: input; display: flex; gap: 1px; font-size: 12px; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-data, -.page-report > .report-editor .query-editor > .discovery-editor .query-input-context { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-data, +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-context { flex: 1; padding: 1px 8px 3px; background-color: rgba(192, 192, 192, .175); cursor: pointer; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-data:hover, -.page-report > .report-editor .query-editor > .discovery-editor .query-input-context:hover { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-data:hover, +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-context:hover { background-color: rgba(165,165,165,.3) !important; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input[data-details="data"] .query-input-data, -.page-report > .report-editor .query-editor > .discovery-editor .query-input[data-details="context"] .query-input-context { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="data"] .query-input-data, +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="context"] .query-input-context { /* padding-top: 2px; */ margin-bottom: -1px; background-color: #cdcdcd1a; background-clip: padding-box; border-bottom: 1px solid #cdcdcd1a; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-variable { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable { position: relative; padding-right: 14px; color: var(--discovery-fmt-variable-color); font-family: var(--discovery-monospace-font-family); } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-variable::before { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable::before { content: ''; background: url(./img/expand.svg) no-repeat center; background-size: 12px; @@ -252,30 +252,30 @@ transform: rotate(-90deg); margin-right: 2px; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input[data-details="data"] .query-input-data .query-input-variable::before, -.page-report > .report-editor .query-editor > .discovery-editor .query-input[data-details="context"] .query-input-context .query-input-variable::before { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="data"] .query-input-data .query-input-variable::before, +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="context"] .query-input-context .query-input-variable::before { transform: rotate(0deg); } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-variable::after { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable::after { content: ' (' attr(data-name) ') '; color: #888; font-family: var(--discovery-font-family); } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-details { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details { display: none; grid-area: details; max-height: max(30vh, 150px); overflow: auto; } -.page-report > .report-editor .query-editor > .discovery-editor .discovery-editor__input-panel.details-expanded .query-input-details { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .discovery-view-editor__input-panel.details-expanded .query-input-details { display: block; margin-bottom: 1px; } -.page-report > .report-editor .query-editor > .discovery-editor .query-input-details > .view-struct { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details > .view-struct { margin: 0; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel { display: grid; grid-template-areas: 'result buttons'; @@ -285,34 +285,34 @@ overflow: hidden; border-radius: 0 0 1px 1px; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel.details-expanded { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel.details-expanded { grid-template-areas: 'result buttons' 'details details'; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel > .buttons { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons { grid-area: buttons; display: flex; gap: 1px; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel > .buttons .view-button { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-button { font-size: 12px; padding: 3px 8px 4px; border-radius: 0px; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel > .buttons .view-checkbox { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox { padding: 2px 8px 2px 22px; background-color: rgba(192, 192, 192, .175); font-size: 12px; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel > .buttons .view-checkbox .view-checkbox__label { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox .view-checkbox__label { margin-right: 0; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel > .buttons .view-checkbox:hover { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox:hover { background-color: rgba(165, 165, 165, .3); } -.page-report > .report-editor .data-query-result .query-result-data { +.page-discovery > .discovery-editor .data-query-result .query-result-data { display: flex; flex: 1; padding: 2px 8px; @@ -320,22 +320,22 @@ font-size: 12px; cursor: pointer; } -.page-report > .report-editor .data-query-result .query-result-data:hover { +.page-discovery > .discovery-editor .data-query-result .query-result-data:hover { background-color: rgba(165, 165, 165, .3); } -.page-report > .report-editor .data-query-result .query-result-data > .query-output-message { +.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-message { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.page-report > .report-editor .data-query-result .query-result-data > .query-output-prelude { +.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-prelude { color: #888; position: relative; display: inline-block; padding-right: 20px; } -.page-report > .report-editor .data-query-result .query-result-data > .query-output-prelude::before { +.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-prelude::before { content: ''; background: url(./img/expand.svg) no-repeat center; background-size: 12px; @@ -348,34 +348,34 @@ transform: rotate(-90deg); margin-right: 2px; } -.page-report > .report-editor .data-query-result .query-result-data.error { +.page-discovery > .discovery-editor .data-query-result .query-result-data.error { background-color: #ff2d2836; } -.page-report > .report-editor .discovery-editor__output-panel.details-expanded .data-query-result .query-result-data > .query-output-prelude::before { +.page-discovery > .discovery-editor .discovery-view-editor__output-panel.details-expanded .data-query-result .query-result-data > .query-output-prelude::before { transform: rotate(0deg); } -.page-report > .report-editor .data-query-result { +.page-discovery > .discovery-editor .data-query-result { grid-area: result; overflow: hidden; } -.page-report > .report-editor .data-query-result > * { +.page-discovery > .discovery-editor .data-query-result > * { overflow: hidden; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel .data-query-result-details { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details { grid-area: details; max-height: max(50vh, 200px); overflow: auto; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel:not(.details-expanded) .data-query-result-details { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel:not(.details-expanded) .data-query-result-details { display: none; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel .data-query-result-details > .view-struct { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details > .view-struct { margin: 0; } -.page-report > .report-editor .query-editor > .discovery-editor > .discovery-editor__output-panel .data-query-result-details .state-message { +.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details .state-message { padding: 4px 8px; font-size: 12px; background-color: rgba(205, 205, 205, 0.1); diff --git a/src/pages/report/editor-query.js b/src/pages/discover/editor-query.js similarity index 99% rename from src/pages/report/editor-query.js rename to src/pages/discover/editor-query.js index 7264804a..1ce3114b 100644 --- a/src/pages/report/editor-query.js +++ b/src/pages/discover/editor-query.js @@ -560,7 +560,7 @@ export default function(host, updateParams) { break; case 'failed': queryEditorResultDetailsEl.innerHTML = - '
' + + '
' + escapeHtml(computation.error.message) + '
'; break; diff --git a/src/pages/report/editor-view.css b/src/pages/discover/editor-view.css similarity index 57% rename from src/pages/report/editor-view.css rename to src/pages/discover/editor-view.css index 4caaaa34..237bd94b 100644 --- a/src/pages/report/editor-view.css +++ b/src/pages/discover/editor-view.css @@ -1,4 +1,4 @@ -.page-report > .report-editor .view-editor-form { +.page-discovery > .discovery-editor .view-editor-form { margin: 12px calc(-1 * var(--discovery-page-padding-right)) @@ -6,33 +6,33 @@ calc(-1 * var(--discovery-page-padding-left)); } -.page-report > .report-editor .view-editor-form-header { +.page-discovery > .discovery-editor .view-editor-form-header { display: flex; flex-wrap: wrap-reverse; margin-right: var(--discovery-page-padding-right); } -.page-report > .report-editor .view-editor-form-header-links { +.page-discovery > .discovery-editor .view-editor-form-header-links { flex: 1; margin: 2px 0 0 10px; text-align: right; font-size: 12px; } -.page-report > .report-editor .report-editor-tabs.view-mode::before { +.page-discovery > .discovery-editor .discovery-editor-tabs.view-mode::before { display: inline-block; content: 'View:'; } -.page-report > .report-editor .report-editor-tabs.presets { +.page-discovery > .discovery-editor .discovery-editor-tabs.presets { margin-left: 3ex; } -.page-report > .report-editor .report-editor-tabs.presets::before { +.page-discovery > .discovery-editor .discovery-editor-tabs.presets::before { content: 'View presets:' } -.page-report > .report-editor .report-editor-tabs.presets .report-editor-tab:first-child { +.page-discovery > .discovery-editor .discovery-editor-tabs.presets .discovery-editor-tab:first-child { border-bottom-left-radius: 4px; } -.page-report > .report-editor .view-editor-form-content { +.page-discovery > .discovery-editor .view-editor-form-content { padding: 8px var(--discovery-page-padding-right) @@ -41,7 +41,7 @@ margin-bottom: 1px; background-color: rgba(108, 188, 241, 0.15) } -.page-report > .report-editor .view-editor-form-content .formatting { +.page-discovery > .discovery-editor .view-editor-form-content .formatting { position: absolute; left: 5px; width: 30px; @@ -54,19 +54,19 @@ border-color: rgba(21, 98, 148, 0.3); } -.page-report > .report-editor .view-editor-form-content .view-expand { +.page-discovery > .discovery-editor .view-editor-form-content .view-expand { width: 100%; margin-top: 5px; } -.page-report > .report-editor .view-editor-form-content .view-expand .header { +.page-discovery > .discovery-editor .view-editor-form-content .view-expand .header { background: none; } -.page-report > .report-editor .view-editor-form-content .view-expand .header:hover { +.page-discovery > .discovery-editor .view-editor-form-content .view-expand .header:hover { background: rgba(0, 0, 0, .05); } -.page-report > .report-editor .view-editor-form-content .view-editor-view-list { +.page-discovery > .discovery-editor .view-editor-form-content .view-editor-view-list { display: none; padding: 15px 8px; font-size: 12px; @@ -76,10 +76,10 @@ column-gap: 20px; margin-right: -190px; } -.page-report > .report-editor .view-editor-form-content .view-editor-view-list.visible { +.page-discovery > .discovery-editor .view-editor-form-content .view-editor-view-list.visible { display: block; } -.page-report > .report-editor .view-editor-form-content .view-editor-view-list .item:not([href]) { +.page-discovery > .discovery-editor .view-editor-form-content .view-editor-view-list .item:not([href]) { color: #888; } diff --git a/src/pages/report/editor-view.js b/src/pages/discover/editor-view.js similarity index 92% rename from src/pages/report/editor-view.js rename to src/pages/discover/editor-view.js index 8453d2bc..a630cb78 100644 --- a/src/pages/report/editor-view.js +++ b/src/pages/discover/editor-view.js @@ -31,7 +31,7 @@ const defaultViewPresets = [ function createPresetTab(name, content, updateParams) { return createElement('div', { - class: 'report-editor-tab', + class: 'discovery-editor-tab', onclick: () => updateParams({ view: content // JSON.stringify(content, null, 4) }) @@ -57,16 +57,16 @@ export default function(host, updateParams) { const viewEditorButtonsEl = createElement('div', 'buttons'); const viewEditorFormEl = createElement('div', 'form view-editor-form', [ createElement('div', 'view-editor-form-header', [ - createElement('div', 'report-editor-tabs view-mode', viewModeTabsEls = ['Default', 'Custom'].map(viewMode => + createElement('div', 'discovery-editor-tabs view-mode', viewModeTabsEls = ['Default', 'Custom'].map(viewMode => createElement('div', { - class: 'report-editor-tab', + class: 'discovery-editor-tab', 'data-mode': viewMode.toLowerCase(), onclick: () => updateParams({ view: viewMode === 'Default' ? undefined : defaultViewSource }, true) }, viewMode) )), - /* availablePresetListEl = */createElement('div', 'report-editor-tabs presets', viewPresets.map(({ name, content }) => + /* availablePresetListEl = */createElement('div', 'discovery-editor-tabs presets', viewPresets.map(({ name, content }) => createPresetTab(name, content, updateParams) )), createElement('div', 'view-editor-form-header-links', 'Views showcase') @@ -167,7 +167,7 @@ export default function(host, updateParams) { return { el: viewEditorFormEl, - render(data, context, reportContentEl) { + render(data, context, discoveryContentEl) { const viewContext = contextWithoutEditorParams(context, lastView.context); const viewMode = typeof context.params.view === 'string' ? 'custom' : 'default'; let pageView = context.params.view; @@ -188,14 +188,14 @@ export default function(host, updateParams) { } if (lastView.view !== pageView || lastView.data !== data || lastView.context !== viewContext) { - reportContentEl.innerHTML = ''; + discoveryContentEl.innerHTML = ''; try { view = Function('return ' + (pageView ? '0,' + pageView : 'null'))(); - host.view.render(reportContentEl, view, data, viewContext); + host.view.render(discoveryContentEl, view, data, viewContext); } catch (e) { - host.view.render(reportContentEl, el => { - el.className = 'report-error render-error'; + host.view.render(discoveryContentEl, el => { + el.className = 'discovery-error render-error'; el.innerHTML = escapeHtml(String(e)) + '
(see details in console)'; host.log('error', e); }); diff --git a/src/pages/report/header.css b/src/pages/discover/header.css similarity index 63% rename from src/pages/report/header.css rename to src/pages/discover/header.css index 24fa3c78..16d2de45 100644 --- a/src/pages/report/header.css +++ b/src/pages/discover/header.css @@ -1,4 +1,4 @@ -.page-report > .report-header { +.page-discovery > .discovery-header { display: flex; flex-direction: row; line-height: 1.2; @@ -11,23 +11,23 @@ background-color: rgba(255, 255, 255, .92); transition: background-color .25s ease-in; } -.discovery-root-darkmode .page-report > .report-header { +.discovery-root-darkmode .page-discovery > .discovery-header { background-color: rgba(36, 36, 36, .92); } -.page-report.page_overscrolled > .report-header { +.page-discovery.page_overscrolled > .discovery-header { box-shadow: 0 0 3px rgba(0, 0, 0, .2); transition-property: background-color, box-shadow; } -.discovery-root-darkmode .page-report.page_overscrolled > .report-header { +.discovery-root-darkmode .page-discovery.page_overscrolled > .discovery-header { box-shadow: 0 0 3px rgba(0, 0, 0, .5); } @supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) { - .page-report > .report-header { + .page-discovery > .discovery-header { background-color: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } - .discovery-root-darkmode .page-report > .report-header { + .discovery-root-darkmode .page-discovery > .discovery-header { background-color: rgba(36, 36, 36, .8); } } @@ -36,19 +36,19 @@ * Header text ********************************/ -.page-report > .report-header .report-header-text { +.page-discovery > .discovery-header .discovery-header-text { flex: 1; position: relative; font-size: 220%; } -.page-report > .report-header .report-header-text::before { +.page-discovery > .discovery-header .discovery-header-text::before { content: attr(data-title); white-space: pre; } -.page-report > .report-header .report-header-text:focus-within:before { +.page-discovery > .discovery-header .discovery-header-text:focus-within:before { visibility: hidden; } -.page-report > .report-header .report-header-text input { +.page-discovery > .discovery-header .discovery-header-text input { font: inherit; color: inherit; position: absolute; @@ -63,16 +63,16 @@ background-color: transparent; transition: box-shadow .15s ease-out; } -.page-report > .report-header .report-header-text input:hover, -.page-report > .report-header .report-header-text input:focus { +.page-discovery > .discovery-header .discovery-header-text input:hover, +.page-discovery > .discovery-header .discovery-header-text input:focus { opacity: 1; } -.page-report > .report-header .report-header-text input:focus { +.page-discovery > .discovery-header .discovery-header-text input:focus { border-bottom-color: #0af; box-shadow: 0 3px 0 0 rgba(0, 170, 255, .2) !important; outline: 0; } -.page-report > .report-header .report-header-text .timestamp { +.page-discovery > .discovery-header .discovery-header-text .timestamp { display: block; font-size: 10px; color: rgba(153, 153, 153, 0.5); @@ -83,7 +83,7 @@ * Actions ********************************/ -.page-report > .report-actions { +.page-discovery > .discovery-actions { position: sticky; top: 34px; transition: top .25s; @@ -94,7 +94,7 @@ margin-bottom: -61px; pointer-events: none; } -.page-report > .report-actions button { +.page-discovery > .discovery-actions button { width: 42px; height: 42px; background: center no-repeat; @@ -107,27 +107,27 @@ outline: none; pointer-events: auto; } -.page-report > .report-actions button.discovery-view-popup-active, -.page-report > .report-actions button:hover, -.page-report > .report-actions button:focus { +.page-discovery > .discovery-actions button.discovery-view-popup-active, +.page-discovery > .discovery-actions button:hover, +.page-discovery > .discovery-actions button:focus { background-color: rgba(0, 0, 0, .03125); opacity: 1; } -.page-report > .report-actions button.toggle-fullscreen { +.page-discovery > .discovery-actions button.toggle-fullscreen { background-image: url(./img/fullscreen-on.svg); background-size: 25px; } -.page-report > .report-actions button.edit-mode { +.page-discovery > .discovery-actions button.edit-mode { background-image: url(./img/edit.svg); background-size: 20px; } -.page-report > .report-actions button.edit-mode:not(.disabled) { +.page-discovery > .discovery-actions button.edit-mode:not(.disabled) { opacity: 1; } -.page-report > .report-actions button.edit-mode.disabled { +.page-discovery > .discovery-actions button.edit-mode.disabled { filter: grayscale(); } -.page-report > .report-actions button.share { +.page-discovery > .discovery-actions button.share { background-image: url(./img/share.svg); background-size: 25px; } @@ -136,9 +136,9 @@ * Dzen mode ********************************/ -.discovery[data-dzen] .page-report > .report-actions { +.discovery[data-dzen] .page-discovery > .discovery-actions { top: 20px; } -.discovery[data-dzen] .page-report > .report-actions button.toggle-fullscreen { +.discovery[data-dzen] .page-discovery > .discovery-actions button.toggle-fullscreen { background-image: url(./img/fullscreen-off.svg); } diff --git a/src/pages/report/header.js b/src/pages/discover/header.js similarity index 84% rename from src/pages/report/header.js rename to src/pages/discover/header.js index f0c1226e..84907c96 100644 --- a/src/pages/report/header.js +++ b/src/pages/discover/header.js @@ -2,8 +2,16 @@ import { createElement } from '../../core/utils/dom.js'; import copyText from '../../core/utils/copy-text.js'; -function exportReportAsJson(pageParams) { - const quote = s => s.replace(/\\/g, '\\\\').replace(/\t/g, '\\t').replace(/\r/g, '\\r').replace(/\n/g, '\\n').replace(/'/g, '\\\''); +function quote(str) { + return str + .replace(/\\/g, '\\\\') + .replace(/\t/g, '\\t') + .replace(/\r/g, '\\r') + .replace(/\n/g, '\\n') + .replace(/'/g, '\\\''); +} + +function exportStateAsJson(pageParams) { let { title, query, view } = pageParams; const res = { title, query, view }; @@ -48,17 +56,17 @@ export default function(host, updateParams) { view: 'menu', data: [ { - text: 'Copy report permalink', + text: 'Copy page permalink', disabled: !host.action.has('permalink'), action: async () => copyText(await host.action.call('permalink', host.pageHash)) }, { - text: 'Copy report as page hash', + text: 'Copy page hash', action: () => copyText(host.pageHash) }, { - text: 'Copy report as JSON', - action: () => copyText(exportReportAsJson(host.pageParams)) + text: 'Copy page as JSON', + action: () => copyText(exportStateAsJson(host.pageParams)) } ], onClick(item) { @@ -68,7 +76,7 @@ export default function(host, updateParams) { }) }); - const reportActions = createElement('div', 'report-actions', [ + const actionsPanel = createElement('div', 'discovery-actions', [ noeditToggleEl = createElement('button', { class: 'edit-mode discovery-hidden-in-dzen', title: 'Toggle edit mode', @@ -102,11 +110,11 @@ export default function(host, updateParams) { const updateHeaderTitle = target => { target.parentNode.dataset.title = target.value || target.placeholder; }; - const headerEl = createElement('div', 'report-header', [ - createElement('div', { class: 'report-header-text', 'data-title': '\xA0' }, [ + const headerEl = createElement('div', 'discovery-header', [ + createElement('div', { class: 'discovery-header-text', 'data-title': '\xA0' }, [ titleInputEl = createElement('input', { class: 'discovery-hidden-in-dzen', - placeholder: 'Untitled report', + placeholder: 'Untitled discovery', oninput: ({ target }) => { updateHeaderTitle(target); }, @@ -131,7 +139,7 @@ export default function(host, updateParams) { return { el: [ - reportActions, + actionsPanel, headerEl ], render(data, context) { diff --git a/src/pages/report/img/clone.svg b/src/pages/discover/img/clone.svg similarity index 100% rename from src/pages/report/img/clone.svg rename to src/pages/discover/img/clone.svg diff --git a/src/pages/report/img/delete.svg b/src/pages/discover/img/delete.svg similarity index 100% rename from src/pages/report/img/delete.svg rename to src/pages/discover/img/delete.svg diff --git a/src/pages/report/img/edit.svg b/src/pages/discover/img/edit.svg similarity index 100% rename from src/pages/report/img/edit.svg rename to src/pages/discover/img/edit.svg diff --git a/src/pages/report/img/expand.svg b/src/pages/discover/img/expand.svg similarity index 100% rename from src/pages/report/img/expand.svg rename to src/pages/discover/img/expand.svg diff --git a/src/pages/report/img/formatting.svg b/src/pages/discover/img/formatting.svg similarity index 100% rename from src/pages/report/img/formatting.svg rename to src/pages/discover/img/formatting.svg diff --git a/src/pages/report/img/fullscreen-off.svg b/src/pages/discover/img/fullscreen-off.svg similarity index 100% rename from src/pages/report/img/fullscreen-off.svg rename to src/pages/discover/img/fullscreen-off.svg diff --git a/src/pages/report/img/fullscreen-on.svg b/src/pages/discover/img/fullscreen-on.svg similarity index 100% rename from src/pages/report/img/fullscreen-on.svg rename to src/pages/discover/img/fullscreen-on.svg diff --git a/src/pages/report/img/share.svg b/src/pages/discover/img/share.svg similarity index 100% rename from src/pages/report/img/share.svg rename to src/pages/discover/img/share.svg diff --git a/src/pages/report/img/stash.svg b/src/pages/discover/img/stash.svg similarity index 100% rename from src/pages/report/img/stash.svg rename to src/pages/discover/img/stash.svg diff --git a/src/pages/report/img/subquery.svg b/src/pages/discover/img/subquery.svg similarity index 100% rename from src/pages/report/img/subquery.svg rename to src/pages/discover/img/subquery.svg diff --git a/src/pages/report/params.js b/src/pages/discover/params.js similarity index 100% rename from src/pages/report/params.js rename to src/pages/discover/params.js diff --git a/src/pages/index.css b/src/pages/index.css index d3bbaf82..a73230d9 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -1,3 +1,3 @@ @import url('./default.css'); -@import url('./report.css'); +@import url('./discover.css'); @import url('./views-showcase.css'); diff --git a/src/pages/index.js b/src/pages/index.js index 00e1bae2..576b2546 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,4 +1,4 @@ export { default as default } from './default.js'; export { default as notFound } from './not-found.js'; -export { default as report } from './report.js'; +export { default as discover } from './discover.js'; export { default as viewsShowcase } from './views-showcase.js'; diff --git a/src/pages/report.css b/src/pages/report.css deleted file mode 100644 index ca36fbd4..00000000 --- a/src/pages/report.css +++ /dev/null @@ -1,41 +0,0 @@ -@import url('./report/header.css'); -@import url('./report/editor-common.css'); -@import url('./report/editor-query.css'); -@import url('./report/editor-view.css'); - -.page-report { - padding-top: 20px !important; -} -.discovery:not([data-dzen]) .page-report > .report-content { - min-height: calc(100vh - 121px); -} - -/******************************** -* Error -********************************/ - -.page-report > .report-editor .report-error, -.page-report > .report-content > .report-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-report > .report-editor .report-error::before, -.page-report > .report-content > .report-error::before { - display: block; - margin-bottom: .5em; - font-size: 16px; -} -.page-report > .report-editor .query-error::before { - content: 'Query error'; -} -.page-report > .report-content > .render-error::before { - content: 'Render error'; -} diff --git a/src/views/editor/editors.css b/src/views/editor/editors.css index e5fa079a..7e729bd4 100644 --- a/src/views/editor/editors.css +++ b/src/views/editor/editors.css @@ -2,7 +2,7 @@ @import url('codemirror/theme/neo.css'); @import url('./editors-hint.css'); -.discovery-editor { +.discovery-view-editor { --editor-border-color: rgba(124, 124, 124, 0.65); display: flex; flex-direction: column; @@ -11,18 +11,18 @@ border-radius: 3px; background-color: var(--discovery-background-color); } -.discovery-editor:focus-within { +.discovery-view-editor:focus-within { --editor-border-color: rgba(0, 141, 255, 0.75); box-shadow: 0 0 1px 3px rgba(0, 170, 255, .2), inset 0 1px 1px rgba(142, 142, 142, .2) !important; } -.discovery-editor .discovery-editor__input-panel { +.discovery-view-editor .discovery-view-editor__input-panel { order: 0; } -.discovery-editor .discovery-editor__output-panel { +.discovery-view-editor .discovery-view-editor__output-panel { order: 2; } -.discovery-editor .CodeMirror { +.discovery-view-editor .CodeMirror { order: 1; height: auto; overflow-y: hidden !important; @@ -34,64 +34,64 @@ transition: .25s ease-in; transition-property: background-color, color; } -.discovery-root-darkmode .discovery-editor .CodeMirror { +.discovery-root-darkmode .discovery-view-editor .CodeMirror { color: #d1c7c3; } -.discovery-editor .CodeMirror-scroll { +.discovery-view-editor .CodeMirror-scroll { min-height: 6.5em; height: auto; overflow-y: hidden !important; cursor: text; } -.discovery-editor .CodeMirror .CodeMirror-line { +.discovery-view-editor .CodeMirror .CodeMirror-line { padding: 0; } -.discovery-editor .CodeMirror-cursor { +.discovery-view-editor .CodeMirror-cursor { border-left: 1px solid var(--discovery-color, black); background: none; } -.discovery-editor .CodeMirror-focused .CodeMirror-selected { +.discovery-view-editor .CodeMirror-focused .CodeMirror-selected { background-color: rgba(0, 170, 255, 0.22); } -.discovery-editor .CodeMirror-selected { +.discovery-view-editor .CodeMirror-selected { background-color: rgba(126, 126, 126, 0.3); } -.discovery-editor .CodeMirror .cm-comment { +.discovery-view-editor .CodeMirror .cm-comment { color: var(--discovery-fmt-comment-color); } -.discovery-editor .CodeMirror .cm-keyword { +.discovery-view-editor .CodeMirror .cm-keyword { color: var(--discovery-fmt-keyword-color); } -.discovery-editor .CodeMirror .cm-property { +.discovery-view-editor .CodeMirror .cm-property { color: var(--discovery-fmt-property-color); } -.discovery-editor .CodeMirror .cm-atom { +.discovery-view-editor .CodeMirror .cm-atom { color: var(--discovery-fmt-atom-color); } -.discovery-editor .CodeMirror .cm-number { +.discovery-view-editor .CodeMirror .cm-number { color: var(--discovery-fmt-number-color); } -.discovery-editor .CodeMirror .cm-type { +.discovery-view-editor .CodeMirror .cm-type { color: var(--discovery-fmt-type-color); } -.discovery-editor .CodeMirror .cm-node, -.discovery-editor .CodeMirror .cm-tag { +.discovery-view-editor .CodeMirror .cm-node, +.discovery-view-editor .CodeMirror .cm-tag { color: #9c3328; } -.discovery-editor .CodeMirror .cm-string, -.discovery-editor .CodeMirror .cm-string-2 { +.discovery-view-editor .CodeMirror .cm-string, +.discovery-view-editor .CodeMirror .cm-string-2 { color: var(--discovery-fmt-string-color); } -.discovery-editor .CodeMirror .cm-variable, -.discovery-editor .CodeMirror .cm-variable-2, -.discovery-editor .CodeMirror .cm-def, -.discovery-editor .CodeMirror .cm-qualifier { +.discovery-view-editor .CodeMirror .cm-variable, +.discovery-view-editor .CodeMirror .cm-variable-2, +.discovery-view-editor .CodeMirror .cm-def, +.discovery-view-editor .CodeMirror .cm-qualifier { color: var(--discovery-fmt-variable-color); } -.discovery-editor .CodeMirror .cm-discovery-view-name { +.discovery-view-editor .CodeMirror .cm-discovery-view-name { background-color: var(--discovery-fmt-string-highlight-color); border-bottom: 1px dashed; } diff --git a/src/views/editor/editors.js b/src/views/editor/editors.js index 468a0ebd..f4dfd6bf 100644 --- a/src/views/editor/editors.js +++ b/src/views/editor/editors.js @@ -36,7 +36,7 @@ class Editor extends Emitter { super(); this.el = document.createElement('div'); - this.el.className = 'discovery-editor'; + this.el.className = 'discovery-view-editor'; const self = this; const cm = CodeMirror(this.el, { @@ -140,8 +140,8 @@ class QueryEditor extends Editor { }; } }); - this.inputPanelEl = createElement('div', 'discovery-editor__input-panel'); - this.outputPanelEl = createElement('div', 'discovery-editor__output-panel'); + this.inputPanelEl = createElement('div', 'discovery-view-editor__input-panel'); + this.outputPanelEl = createElement('div', 'discovery-view-editor__output-panel'); this.el.append(this.inputPanelEl, this.outputPanelEl); } setValue(value, data, context) {