From ecbeacf9f91114c0981a4a6c530f39236739e558 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Mon, 3 Dec 2018 12:42:42 +0100 Subject: [PATCH 1/4] prepare next dev version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cdd0cc995..be94b1495 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "tdp_core", "description": "Target discovery platform for exploring rankings of genes, disease models, and other entities.", "homepage": "https://phovea.caleydo.org", - "version": "5.0.3", + "version": "5.0.4-SNAPSHOT", "author": { "name": "datavisyn", "email": "contact@caleydo.org", From 85c8fac8addffce0b3a960641550e809b74ddc7b Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Mon, 3 Dec 2018 17:50:54 +0100 Subject: [PATCH 2/4] add option to show side panel in the collapsed version in the top row instead of side --- src/lineup/ARankingView.ts | 13 +- src/lineup/internal/LineUpPanelActions.ts | 43 ++-- src/styles/_view_lineup.scss | 236 +++++++++++++--------- 3 files changed, 171 insertions(+), 121 deletions(-) diff --git a/src/lineup/ARankingView.ts b/src/lineup/ARankingView.ts index 90ed1e381..9341c9b7a 100644 --- a/src/lineup/ARankingView.ts +++ b/src/lineup/ARankingView.ts @@ -63,7 +63,7 @@ export interface IARankingViewOptions { */ enableZoom: boolean; - enableSidePanel: boolean | 'collapsed'; + enableSidePanel: boolean | 'collapsed' | 'top'; enableAddingColumns: boolean; @@ -233,7 +233,9 @@ export abstract class ARankingView extends AView { if (this.options.enableSidePanel) { this.node.appendChild(this.panel.node); - this.taggle.pushUpdateAble((ctx) => this.panel.panel.update(ctx)); + if (this.options.enableSidePanel !== 'top') { + this.taggle.pushUpdateAble((ctx) => this.panel.panel.update(ctx)); + } } this.selectionHelper = new LineUpSelectionHelper(this.provider, () => this.itemIDType); @@ -248,7 +250,12 @@ export abstract class ARankingView extends AView { // inject stats const base = params.querySelector('form') || params; base.insertAdjacentHTML('beforeend', `
`); - base.lastElementChild!.appendChild(this.stats); + const container = base.lastElementChild!; + container.appendChild(this.stats); + + if (this.options.enableSidePanel === 'top') { + container.insertAdjacentElement('afterbegin', this.panel.node); + } }); } diff --git a/src/lineup/internal/LineUpPanelActions.ts b/src/lineup/internal/LineUpPanelActions.ts index 458939211..1f8d60553 100644 --- a/src/lineup/internal/LineUpPanelActions.ts +++ b/src/lineup/internal/LineUpPanelActions.ts @@ -59,7 +59,8 @@ export default class LineUpPanelActions extends EventHandler { private readonly search: SearchBox | null; - readonly panel: SidePanel; + readonly panel: SidePanel | null; + readonly node: HTMLElement; private overview: HTMLElement; private wasCollapsed = false; @@ -76,13 +77,17 @@ export default class LineUpPanelActions extends EventHandler { }); } - this.panel = new SidePanel(ctx, doc, { - chooser: false - }); - - if (options.enableSidePanel === 'collapsed') { - this.collapse = true; + if (this.options.enableSidePanel !== 'top') { + this.panel = new SidePanel(ctx, doc, { + chooser: false + }); + this.node = this.panel.node; + } else { + this.node = doc.createElement('div'); + this.node.classList.add('lu-side-panel', 'lu-side-panel-top'); } + this.node.classList.add('tdp-view-lineup'); + this.collapse = options.enableSidePanel === 'top' || options.enableSidePanel === 'collapsed'; this.init(); } @@ -118,26 +123,28 @@ export default class LineUpPanelActions extends EventHandler { this.node.style.display = 'flex'; } - get wasHidden() { - return this.node.style.display === 'none'; + private get isTopMode() { + return this.options.enableSidePanel === 'top'; } - get node() { - return this.panel.node; + get wasHidden() { + return this.node.style.display === 'none'; } private init() { this.node.insertAdjacentHTML('afterbegin', ` -
${this.search ? '' : ''}
`); - this.node.querySelector('a')!.addEventListener('click', (evt) => { - evt.preventDefault(); - evt.stopPropagation(); - this.collapse = !this.collapse; - }); + if (!this.isTopMode) { // top mode doesn't need collapse feature + this.node.insertAdjacentHTML('afterbegin', ``); + this.node.querySelector('a')!.addEventListener('click', (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + this.collapse = !this.collapse; + }); + } const buttons = this.node.querySelector('section'); this.appendExtraButtons().forEach((b) => buttons.appendChild(b)); @@ -211,7 +218,7 @@ export default class LineUpPanelActions extends EventHandler { node.innerHTML = ` -
    +
    • Download All Rows
    • CSV (comma separated)
    • TSV (tab separated)
      • diff --git a/src/styles/_view_lineup.scss b/src/styles/_view_lineup.scss index 5bcabe057..cbc9d1b4d 100644 --- a/src/styles/_view_lineup.scss +++ b/src/styles/_view_lineup.scss @@ -11,23 +11,126 @@ line-height: 1; } - %lu-panel-button { - background: #fff; - border: 1px solid #ddd; - padding: 5px 10px; - cursor: pointer; - z-index: 1; - color: #000; - - &:hover { - background-color: #eaeaea; + > div { + flex: 1 1 auto; + position: relative; + } + + &.overview-detail { + > div { + display: flex; + flex-direction: column; + + > header { + flex: 0 0 auto; + } + + > div { + flex: 1 1 auto; + position: relative; + } + } + + header.overview { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; } } +} + +.lu-dialog { + label: { + margin: 0; + } + + &.lu-filter-table > div:first-of-type > * { + flex: 0 0 auto; + } +} + +.lu-collapser { + display: none; +} + +.lineup-engine { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + + > header { + padding-bottom: 1px; // no idea otherwise scrollbar + } + + footer { + display: block !important; + } +} + +$lu_assets: '~lineupjs/src/assets'; + +@at-root { + + .tdp-ranking-export-form { + user-select: none; + -moz-user-select: none; + + .radio { + margin-left: 1em; + } + } + + .tdp-ranking-export-form-handle { + > span { + visibility: hidden; + padding: 0 0.5em 0 1em; + cursor: grab; + } + + &:hover > span, + &.dragging > span { + visibility: visible; + } + + &.dragging { + border: 1px solid lightgray; + border-radius: 3px; + cursor: grabbing; + } + } + + .lu-side-panel > main > section::before { + content: 'Column Summaries'; + } + + .lu-hierarchy .lu-search::before { + height: 19px; + } - .lu-side-panel { + .tdp-view-lineup.lu-side-panel { flex: 0 0 auto; position: relative; + + %lu-panel-button { + background: #fff; + border: 1px solid #ddd; + padding: 5px 10px; + cursor: pointer; + z-index: 1; + color: #000; + + &:hover { + background-color: #eaeaea; + } + } + > section { flex: 0 0 auto; display: flex; @@ -174,105 +277,38 @@ } } - > div { - flex: 1 1 auto; - position: relative; - } + .lu-sidepanel-top-form { + display: flex; - &.overview-detail { - > div { - display: flex; - flex-direction: column; - - > header { - flex: 0 0 auto; - } - - > div { - flex: 1 1 auto; - position: relative; - } + > p { + flex: 1 1 0; } - - header.overview { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - } - } -} - -.lu-dialog { - label: { - margin: 0; - } - - &.lu-filter-table > div:first-of-type > * { - flex: 0 0 auto; - } -} - -.lu-collapser { - display: none; -} - -.lineup-engine { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - - > header { - padding-bottom: 1px; // no idea otherwise scrollbar } - footer { - display: block !important; - } -} + .lu-side-panel-top.tdp-view-lineup.lu-side-panel.collapsed { + display: inline-flex; + flex-direction: row; + z-index: 100; + max-width: unset; + width: unset; + float: right; -$lu_assets: '~lineupjs/src/assets'; - -@at-root { - - .tdp-ranking-export-form { - user-select: none; - -moz-user-select: none; - - .radio { - margin-left: 1em; + > section { + flex-direction: row; + max-width: unset; } - } - .tdp-ranking-export-form-handle { - > span { - visibility: hidden; - padding: 0 0.5em 0 1em; - cursor: grab; + .gap { + margin-top: unset; + margin-left: 1em; } - &:hover > span, - &.dragging > span { - visibility: visible; - } + > div.lu-adder { + margin-top: 0; - &.dragging { - border: 1px solid lightgray; - border-radius: 3px; - cursor: grabbing; + &.once .lu-search { + left: -1.2em; + } } } - - .lu-side-panel > main > section::before { - content: 'Column Summaries'; - } - - .lu-hierarchy .lu-search::before { - height: 19px; - } } From bc3c830ad84823b8ec09703b6d48d0e403270e5f Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Tue, 4 Dec 2018 14:24:40 +0100 Subject: [PATCH 3/4] fix corner cases --- src/lineup/internal/LineUpPanelActions.ts | 2 +- src/styles/_view_lineup.scss | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/lineup/internal/LineUpPanelActions.ts b/src/lineup/internal/LineUpPanelActions.ts index 1f8d60553..5a96db31c 100644 --- a/src/lineup/internal/LineUpPanelActions.ts +++ b/src/lineup/internal/LineUpPanelActions.ts @@ -72,7 +72,7 @@ export default class LineUpPanelActions extends EventHandler { placeholder: 'Add Column...' }); this.search.on(SearchBox.EVENT_SELECT, (item) => { - this.node.querySelector('header')!.classList.remove('once'); + this.node.querySelector('.lu-adder')!.classList.remove('once'); item.action(); }); } diff --git a/src/styles/_view_lineup.scss b/src/styles/_view_lineup.scss index cbc9d1b4d..a8434de44 100644 --- a/src/styles/_view_lineup.scss +++ b/src/styles/_view_lineup.scss @@ -309,6 +309,15 @@ $lu_assets: '~lineupjs/src/assets'; &.once .lu-search { left: -1.2em; } + + &.once::before { + content: ''; + top: -10px; + left: -2.5em; + right: -15em; + bottom: -3em; + position: absolute; + } } } } From 0cde9ba19471fbe2721432261fd7d33a5208bc4e Mon Sep 17 00:00:00 2001 From: sluger Date: Wed, 19 Dec 2018 11:48:23 +0100 Subject: [PATCH 4/4] pin version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index be94b1495..5aa794f76 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "tdp_core", "description": "Target discovery platform for exploring rankings of genes, disease models, and other entities.", "homepage": "https://phovea.caleydo.org", - "version": "5.0.4-SNAPSHOT", + "version": "5.0.4", "author": { "name": "datavisyn", "email": "contact@caleydo.org",