Merge pull request #151 from RhoInc/dev-v2.1.2

revert layout
RhoInc · Jun 13, 2019 · 635ab0e · 635ab0e
2 parents 2aea898 + 7d30fd8
commit 635ab0e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "query-overview",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Interactive bar chart for exploration of query data from clinical trials",
   "module": "./src/index.js",
   "main": "./queryOverview.js",

diff --git a/queryOverview.js b/queryOverview.js
@@ -692,7 +692,12 @@
         Controls
       \--------------------------------------------------------------------------------------***/
             '.qo-component--controls {' + '    width: 100%;' + '}',
-            '.qo-component--controls .wc-controls {' + '    margin-bottom: 0;' + '}',
+            '.qo-component--controls .wc-controls {' +
+                '    margin-bottom: 0;' +
+                '    display: flex;' +
+                '    width: 90%;' +
+                '    justify-content: space-around;' +
+                '}',
             '.qo-control-grouping {' + '    display: inline-block;' + '}',
             '.qo-button {' + '    float: left;' + '    display: block;' + '}',
             '.qo-control-grouping--label,' +
@@ -711,8 +716,11 @@
         Other controls
       \---------------------------------------------------------------------------------****/
             '.qo-control-grouping--other-controls {' +
-                '    width: 20%;' +
-                '    float: right;' +
+                '    float: left;' +
+                '    display: flex;' +
+                '    flex-wrap: wrap;' +
+                '    justify-content: space-evenly;' +
+                '    width: 25%;' +
                 '}',
             '.qo-control-grouping--other-controls .control-group {' +
                 '    width: 100%;' +
@@ -733,7 +741,7 @@
                 '    justify-content: center;' +
                 '    flex-wrap: wrap;' +
                 '}',
-            '.qo-radio .wc-control-label {' + '    width: 100%;' + '}',
+            '.qo-radio .wc-control-label {' + '    width: 50%;' + '}',
             '.qo-radio .radio {' + '    margin-top: 0 !important;' + '}', //checkboxes
             '.qo-checkbox {' +
                 '    display: flex !important;' +
@@ -745,8 +753,8 @@
         Filters
       \---------------------------------------------------------------------------------****/
             '.qo-control-grouping--filters {' +
-                '    width: 20%;' +
                 '    float: left;' +
+                '    align-content: baseline;' +
                 (typeof navigator !== 'undefined' && !/trident/i.test(navigator.userAgent)
                     ? '    display: flex;' +
                       '    flex-wrap: wrap;' +
@@ -755,7 +763,6 @@
                 '}',
             '.qo-subsetter {' +
                 '    margin: 5px 2px !important;' +
-                '    border-top: 1px solid #aaa;' +
                 '    padding-top: 5px;' +
                 '    display: inline-block !important;' +
                 '    vertical-align: top;' +
@@ -770,8 +777,9 @@
         Chart
       \--------------------------------------------------------------------------------------***/
             '.qo-component--chart {' +
-                '    width: 58%;' +
+                '    width: 100%;' +
                 '    margin: 0 auto;' +
+                '    float: left;' +
                 '    position: relative;' +
                 '}',
             '.qo-button--reset-chart {' +
@@ -1058,7 +1066,7 @@
 
         this.controls.filters = {
             container: this.controls.wrap
-                .insert('div', '.qo-subsetter')
+                .insert('div', ':first-child') //placing filter controls first
                 .classed('qo-control-grouping qo-control-grouping--filters', true)
         };
         this.controls.filters.container
@@ -1080,7 +1088,7 @@
 
         this.controls.otherControls = {
             container: this.controls.wrap
-                .insert('div', ':first-child')
+                .insert('div', '.qo-dropdown')
                 .classed('qo-control-grouping qo-control-grouping--other-controls', true)
         };
         this.controls.otherControls.label = this.controls.otherControls.container
@@ -1117,7 +1125,7 @@
             'Query Age':
                 'Open queries are broken down into how long they have been open. All other queries are classified by status (answered, closed, cancelled).',
             'Query Status':
-                'Open: site has not responded to the issue\nAnswered: site has responded to issue; DM needs to review\nClosed: issue resolved\nCancelled: query cancelled by DM',
+                'Open: site has not responded to the issue\nAnswered: site has responded to issue; individual opening query needs to review\nClosed: issue resolved\nCancelled: query cancelled by DM',
             'Query Recency':
                 'Number of days a query has been open, regardless of its current status (applies only to queries opened in the past 30 days)',
             Form:

diff --git a/scripts/configuration-wiki.md b/scripts/configuration-wiki.md
@@ -3,7 +3,7 @@ The most straightforward way to customize query-overview is by using a configura
 In addition to the standard Webcharts settings several custom settings not available in the base Webcharts library have been added to query-overview to facilitate data mapping and other custom functionality. These custom settings are described in detail below. All defaults can be overwritten by users.
 
 # Renderer-specific settings
-The sections below describe each query-overview setting as of version 2.1.0.
+The sections below describe each query-overview setting as of version 2.1.2.
 
 ## settings.site_col
 `string`
@@ -447,7 +447,7 @@ cell text past this cutoff will be truncated and the full text will be captured
 **default:** `100`
 
 # Webcharts settings
-The objects below contain Webcharts settings for each display as of version 2.1.0 of the Query Overview.
+The objects below contain Webcharts settings for each display as of version 2.1.2 of the Query Overview.
 
 ## Chart
 ```

diff --git a/settings-schema.json b/settings-schema.json
@@ -2,7 +2,7 @@
     "title": "settings",
     "description": "JSON schema for the configuration of query-overview",
     "overview": "The most straightforward way to customize query-overview is by using a configuration object whose properties describe the behavior and appearance of the chart. Since query-overview is a Webcharts `chart` object, many default Webcharts settings are set in the [chartSettings.js file](https://github.com/RhoInc/query-overview/blob/master/src/configuration/chartSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings.\nIn addition to the standard Webcharts settings several custom settings not available in the base Webcharts library have been added to query-overview to facilitate data mapping and other custom functionality. These custom settings are described in detail below. All defaults can be overwritten by users.",
-    "version": "2.1.0",
+    "version": "2.1.2",
     "type": "object",
     "data-guidelines": "The Query Overview accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). The renderer visualizes clinical query data with **one row per query** plus the required variables specified below.",
     "data-structure": "one record per query",

diff --git a/src/chart/onLayout/addControlTooltips.js b/src/chart/onLayout/addControlTooltips.js
@@ -16,7 +16,7 @@ export default function addControlTooltips() {
         'Query Age':
             'Open queries are broken down into how long they have been open. All other queries are classified by status (answered, closed, cancelled).',
         'Query Status':
-            'Open: site has not responded to the issue\nAnswered: site has responded to issue; DM needs to review\nClosed: issue resolved\nCancelled: query cancelled by DM',
+            'Open: site has not responded to the issue\nAnswered: site has responded to issue; individual opening query needs to review\nClosed: issue resolved\nCancelled: query cancelled by DM',
         'Query Recency':
             'Number of days a query has been open, regardless of its current status (applies only to queries opened in the past 30 days)',
         Form:

diff --git a/src/chart/onLayout/groupControls.js b/src/chart/onLayout/groupControls.js
@@ -4,7 +4,7 @@ export default function groupControls() {
     //Group filters.
     this.controls.filters = {
         container: this.controls.wrap
-            .insert('div', '.qo-subsetter')
+            .insert('div', ':first-child') //placing filter controls first
             .classed('qo-control-grouping qo-control-grouping--filters', true)
     };
     this.controls.filters.container
@@ -27,7 +27,7 @@ export default function groupControls() {
     //Group other controls.
     this.controls.otherControls = {
         container: this.controls.wrap
-            .insert('div', ':first-child')
+            .insert('div', '.qo-dropdown')
             .classed('qo-control-grouping qo-control-grouping--other-controls', true)
     };
     this.controls.otherControls.label = this.controls.otherControls.container

diff --git a/src/styles.js b/src/styles.js
@@ -29,6 +29,9 @@ export default function styles(document) {
             '}',
             '.qo-component--controls .wc-controls {' +
             '    margin-bottom: 0;' +
+            '    display: flex;' +
+            '    width: 90%;' +
+            '    justify-content: space-around;' +
             '}',
             '.qo-control-grouping {' +
             '    display: inline-block;' +
@@ -56,9 +59,13 @@ export default function styles(document) {
               Other controls
             \---------------------------------------------------------------------------------****/
 
+
                 '.qo-control-grouping--other-controls {' +
-                '    width: 20%;' +
-                '    float: right;' +
+                '    float: left;' +
+                '    display: flex;' +
+                '    flex-wrap: wrap;' +
+                '    justify-content: space-evenly;' +
+                '    width: 25%;' +
                 '}',
                 '.qo-control-grouping--other-controls .control-group {' +
                 '    width: 100%;' +
@@ -88,7 +95,7 @@ export default function styles(document) {
                 '    flex-wrap: wrap;' +
                 '}',
                 '.qo-radio .wc-control-label {' +
-                '    width: 100%;' +
+                '    width: 50%;' +
                 '}',
                 '.qo-radio .radio {' +
                 '    margin-top: 0 !important;' +
@@ -111,8 +118,8 @@ export default function styles(document) {
             \---------------------------------------------------------------------------------****/
 
                 '.qo-control-grouping--filters {' +
-                '    width: 20%;' +
                 '    float: left;' +
+                '    align-content: baseline;' +
                 (
                     typeof navigator !== 'undefined' && !/trident/i.test(navigator.userAgent)
                         ? '    display: flex;' +
@@ -123,7 +130,6 @@ export default function styles(document) {
                 '}',
                 '.qo-subsetter {' +
                 '    margin: 5px 2px !important;' +
-                '    border-top: 1px solid #aaa;' +
                 '    padding-top: 5px;' +
                 '    display: inline-block !important;' +
                 '    vertical-align: top;' +
@@ -143,8 +149,9 @@ export default function styles(document) {
         \--------------------------------------------------------------------------------------***/
 
             '.qo-component--chart {' +
-            '    width: 58%;' +
+            '    width: 100%;' +
             '    margin: 0 auto;' +
+            '    float: left;' +
             '    position: relative;' +
             '}',
             '.qo-button--reset-chart {' +