From 05fa477e2edb96c3942556c87be26a623cabe226 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 17 Nov 2020 17:14:51 +0000
Subject: [PATCH 01/23] Bump dot-prop from 4.2.0 to 4.2.1

Bumps [dot-prop](https://github.com/sindresorhus/dot-prop) from 4.2.0 to 4.2.1.
- [Release notes](https://github.com/sindresorhus/dot-prop/releases)
- [Commits](https://github.com/sindresorhus/dot-prop/compare/v4.2.0...v4.2.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 909bf75..a88c72a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3041,8 +3041,12 @@
       }
     },
     "dot-prop": {
-      "version": "4.2.0",
-      "resolved": ""
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+      "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
+      "requires": {
+        "is-obj": "^1.0.0"
+      }
     },
     "dotenv": {
       "version": "5.0.1",
@@ -4641,6 +4645,11 @@
         }
       }
     },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",

From e2de759d93325007c06220406ba601ef031770f1 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <rbirmin@emory.edu>
Date: Tue, 17 Nov 2020 13:59:08 -0500
Subject: [PATCH 02/23] datascope -> eaglescope

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 87d5618..4449cea 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "datascope",
+  "name": "eaglescope",
   "version": "1.0.0",
   "description": "Data Cohort Visualization ",
   "main": "index.js",
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://www.github.com/sharmalab/datascope.git"
+    "url": "https://www.github.com/sharmalab/eaglescope.git"
   },
   "keywords": [
     "data",

From cab6b1abe097e39d247733304d316095f686bf96 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 11 Jan 2021 13:05:57 -0500
Subject: [PATCH 03/23] start homebutton

---
 source/component/HomeButton.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 source/component/HomeButton.js

diff --git a/source/component/HomeButton.js b/source/component/HomeButton.js
new file mode 100644
index 0000000..2563a08
--- /dev/null
+++ b/source/component/HomeButton.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import BaseVisualization from './BaseVisualization.js'
+
+class HomeButton extends BaseVisualization {
+  constructor(props, ctx) {
+    super(props, ctx);
+  }
+  goHome(){
+    alert("this will go to a home link")
+  }
+  render() {
+    return <div id={this.id} onClick={()=>{this.goHome()}>HOME</div>
+
+  }
+}
+
+export default HomeButton

From a97b146853c85c66fd25b8cfd87603269727c72b Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 11 Jan 2021 13:06:59 -0500
Subject: [PATCH 04/23] link homebutton

---
 source/index.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/source/index.js b/source/index.js
index 91da112..491e977 100644
--- a/source/index.js
+++ b/source/index.js
@@ -4,6 +4,7 @@ import RestDataSource from "./xfRestDataSource.js";
 import VisTypes from "./component/VisTypes.js";
 import vegaSpecs from "./vegaSpecs.js";
 import ResetButton from "./component/ResetButton.js";
+import HomeButton from "./component/HomeButton.js";
 import { render } from "react-dom";
 import Spinner from 'react-bootstrap/Spinner'
 import VisGridView from "./component/Layout/VisGridView/VisGridView.js";
@@ -31,9 +32,9 @@ import 'react-virtualized/styles.css';
 // config for view grid and vis compoments
 import _CONFIG_ from "../config/vis-config.json";
 
-// var __DM = null; 
+// var __DM = null;
 function isNumeric(str) {
-  if (typeof str != "string") return false // we only process strings!  
+  if (typeof str != "string") return false // we only process strings!
   return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
          !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
 }
@@ -105,9 +106,9 @@ class App extends React.Component {
 
   }
   // {
-  //    id: 
-  //    field:xxx, 
-  //    operation:, eq,  gt, gte, in, lt, lte, ne, nin, 
+  //    id:
+  //    field:xxx,
+  //    operation:, eq,  gt, gte, in, lt, lte, ne, nin,
   //    value: value, value, value, list, value, value, value, list, []
   // }
   addFiltersHandler(filters) {
@@ -115,7 +116,7 @@ class App extends React.Component {
     const old_filters = [...this.state.filters];
 
 
-    // remove first 
+    // remove first
     let new_filters = old_filters.filter(of => filters.some(nf => !(of.id == nf.id)))
 
 
@@ -165,7 +166,7 @@ class App extends React.Component {
         this.setState({
           isLoaded: true,
           data: data
-        });        
+        });
       })
 
     } else if (_CONFIG_.DATA_FORMAT === 'json') {

From 43e3866dc0528f52f9ff16c6caaf9b932b313dc6 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Tue, 12 Jan 2021 13:25:51 -0500
Subject: [PATCH 05/23] home button using url param

---
 source/component/HomeButton.js | 7 +++++--
 source/index.html              | 2 +-
 source/index.js                | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/source/component/HomeButton.js b/source/component/HomeButton.js
index 2563a08..90fc15e 100644
--- a/source/component/HomeButton.js
+++ b/source/component/HomeButton.js
@@ -6,10 +6,13 @@ class HomeButton extends BaseVisualization {
     super(props, ctx);
   }
   goHome(){
-    alert("this will go to a home link")
+    const query = new URLSearchParams(window.location.search);
+    const homeUrl = query.get("homeurl") || "../"
+    console.log(homeUrl)
+    window.location.href = homeUrl;
   }
   render() {
-    return <div id={this.id} onClick={()=>{this.goHome()}>HOME</div>
+    return <button id={this.id} onClick={()=>{this.goHome()}}>HOME</button>
 
   }
 }
diff --git a/source/index.html b/source/index.html
index ab1cfdc..e50ef25 100644
--- a/source/index.html
+++ b/source/index.html
@@ -6,7 +6,7 @@
     content="width=device-width, initial-scale=1, shrink-to-fit=no"
   />
   <link rel="shortcut icon" href="./favicon.ico" />
-  <title>DataScope 2</title>
+  <title>EagleScope</title>
   <body>
     <div id="root"></div>
     <script src="./index.js"></script>
diff --git a/source/index.js b/source/index.js
index 491e977..cd2a2b2 100644
--- a/source/index.js
+++ b/source/index.js
@@ -231,6 +231,7 @@ class App extends React.Component {
             <span className="navbar-brand mb-0 h1 whitetext" >
               TCIA Clinical Data Explorer
           </span>
+          <HomeButton/>
             <div style={{ width: '450px' }}>
               <ProgressBar
                 min={0}

From 6d295012e83198ec69e4f855fa38f22d96e8c57c Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Tue, 12 Jan 2021 13:28:42 -0500
Subject: [PATCH 06/23] update dependencies

---
 package-lock.json | 252 +++++++++++++++++++++++-----------------------
 package.json      |  10 +-
 2 files changed, 131 insertions(+), 131 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a88c72a..22aafb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "datascope",
+  "name": "eaglescope",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -851,9 +851,9 @@
       }
     },
     "@fortawesome/react-fontawesome": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.12.tgz",
-      "integrity": "sha512-kV6HtqotM3K4YIXlTVvomuIi6QgGCvYm++ImyEx2wwgmSppZ6kbbA29ASwjAUBD63j2OFU0yoxeXpZkjrrX0qQ==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
       "requires": {
         "prop-types": "^15.7.2"
       }
@@ -1012,9 +1012,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz",
-      "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ=="
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
     },
     "@ranfdev/deepobj": {
       "version": "1.0.2",
@@ -1027,12 +1027,12 @@
       "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
     },
     "@restart/hooks": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
-      "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
       "requires": {
-        "lodash": "^4.17.15",
-        "lodash-es": "^4.17.15"
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20"
       }
     },
     "@types/classnames": {
@@ -1795,14 +1795,14 @@
       }
     },
     "chokidar": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
-      "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.0.tgz",
+      "integrity": "sha512-JgQM9JS92ZbFR4P90EvmzNpSGhpPBGBSj10PILeDyYFwp4h2/D9OM03wsJ4zW1fEp4ka2DGrnUeD7FuvQ2aZ2Q==",
       "dev": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -1821,9 +1821,9 @@
           }
         },
         "binary-extensions": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
-          "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
           "dev": true
         },
         "braces": {
@@ -1845,9 +1845,9 @@
           }
         },
         "fsevents": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
-          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
+          "integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
           "dev": true,
           "optional": true
         },
@@ -4999,9 +4999,9 @@
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash-es": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
-      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
     },
     "lodash.clone": {
       "version": "4.5.0",
@@ -6525,9 +6525,9 @@
       }
     },
     "react-bootstrap": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.0.tgz",
-      "integrity": "sha512-0BMzgeUAxH126v7VYDzIXbHxQVHSnniPVKpz9fblumdQpWaiElMnnzk+u8h8DoELX0nCXwPlcUzgXqmpncdc2Q==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.3.tgz",
+      "integrity": "sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==",
       "requires": {
         "@babel/runtime": "^7.4.2",
         "@restart/context": "^2.1.4",
@@ -6535,7 +6535,7 @@
         "@types/classnames": "^2.2.10",
         "@types/invariant": "^2.2.33",
         "@types/prop-types": "^15.7.3",
-        "@types/react": "^16.9.35",
+        "@types/react": ">=16.9.35",
         "@types/react-transition-group": "^4.4.0",
         "@types/warning": "^3.0.0",
         "classnames": "^2.2.6",
@@ -6558,9 +6558,9 @@
           }
         },
         "csstype": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
         },
         "dom-helpers": {
           "version": "5.2.0",
@@ -6709,9 +6709,9 @@
           }
         },
         "csstype": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
         },
         "dom-helpers": {
           "version": "5.2.0",
@@ -6854,9 +6854,9 @@
       }
     },
     "react-virtualized": {
-      "version": "9.22.2",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.2.tgz",
-      "integrity": "sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==",
+      "version": "9.22.3",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+      "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
       "requires": {
         "@babel/runtime": "^7.7.2",
         "clsx": "^1.0.4",
@@ -6875,9 +6875,9 @@
           }
         },
         "csstype": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-          "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
         },
         "dom-helpers": {
           "version": "5.2.0",
@@ -7250,9 +7250,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.29.0.tgz",
-      "integrity": "sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==",
+      "version": "1.32.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.4.tgz",
+      "integrity": "sha512-N0BT0PI/t3+gD8jKa83zJJUb7ssfQnRRfqN+GIErokW6U4guBpfYl8qYB+OFLEho+QvnV5ZH1R9qhUC/Z2Ch9w==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -8417,23 +8417,23 @@
       "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
     },
     "vega": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/vega/-/vega-5.17.0.tgz",
-      "integrity": "sha512-2Rm9aS3cSMXE55YgjfkuOmvSBMtiM/85/qX/WHLc+YiJacKGiwY9yzeC+w2Ft50JUs3nKZc1KB90ePgf5mfo0Q==",
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/vega/-/vega-5.18.0.tgz",
+      "integrity": "sha512-ysqouhboWNXSuQNN7W5IGOXsnEJNFVX5duCi0tTwRsFLc61FshpqVh4+4VoXg5pH0ZCxwpqbOwd2ULZWjJTx6g==",
       "requires": {
         "vega-crossfilter": "~4.0.5",
         "vega-dataflow": "~5.7.3",
         "vega-encode": "~4.8.3",
         "vega-event-selector": "~2.0.6",
-        "vega-expression": "~3.0.0",
+        "vega-expression": "~4.0.1",
         "vega-force": "~4.0.7",
         "vega-format": "~1.0.4",
-        "vega-functions": "~5.8.0",
-        "vega-geo": "~4.3.7",
+        "vega-functions": "~5.11.0",
+        "vega-geo": "~4.3.8",
         "vega-hierarchy": "~4.0.9",
         "vega-label": "~1.0.0",
         "vega-loader": "~4.4.0",
-        "vega-parser": "~6.1.0",
+        "vega-parser": "~6.1.2",
         "vega-projection": "~1.4.5",
         "vega-regression": "~1.0.9",
         "vega-runtime": "~6.1.3",
@@ -8442,9 +8442,9 @@
         "vega-statistics": "~1.7.9",
         "vega-time": "~2.0.4",
         "vega-transforms": "~4.9.3",
-        "vega-typings": "~0.19.0",
+        "vega-typings": "~0.19.2",
         "vega-util": "~1.16.0",
-        "vega-view": "~5.9.0",
+        "vega-view": "~5.9.2",
         "vega-view-transforms": "~4.5.8",
         "vega-voronoi": "~4.1.5",
         "vega-wordcloud": "~4.1.3"
@@ -8456,11 +8456,11 @@
           "integrity": "sha512-UwCu50Sqd8kNZ1X/XgiAY+QAyQUmGFAwyDu7y0T5fs6/TPQnDo/Bo346NgSgINBEhEKOAMY1Nd/rPOk4UEm/ew=="
         },
         "vega-expression": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-3.0.0.tgz",
-          "integrity": "sha512-/ObjIOK94MB+ziTuh8HZt2eWlKUPT/piRJLal5tx5QL1sQbfRi++7lHKTaKMLXLqc4Xqp9/DewE3PqQ6tYzaUA==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-4.0.1.tgz",
+          "integrity": "sha512-ZrDj0hP8NmrCpdLFf7Rd/xMUHGoSYsAOTaYp7uXZ2dkEH5x0uPy5laECMc8TiQvL8W+8IrN2HAWCMRthTSRe2Q==",
           "requires": {
-            "vega-util": "^1.15.2"
+            "vega-util": "^1.16.0"
           }
         },
         "vega-util": {
@@ -8486,9 +8486,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "vega-util": {
           "version": "1.16.0",
@@ -8555,9 +8555,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-interpolate": {
           "version": "2.0.1",
@@ -8627,9 +8627,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-format": {
           "version": "2.0.0",
@@ -8652,27 +8652,27 @@
       }
     },
     "vega-functions": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/vega-functions/-/vega-functions-5.8.0.tgz",
-      "integrity": "sha512-xaUqWZHEX+EuJuKfN0Biux3rrCHDEHmMbW7LHYyyEqguR0i6+zhtOSUEWmYqDfzB/+BlIwCk5Vif6q6/mzJxbQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/vega-functions/-/vega-functions-5.11.0.tgz",
+      "integrity": "sha512-/p0QIDiA3RaUZ7drxHuClpDQCrIScSHJlY0oo0+GFYGfp+lvb29Ox1T4a+wtqeCp6NRaTWry+EwDxojnshTZIQ==",
       "requires": {
         "d3-array": "^2.7.1",
         "d3-color": "^2.0.0",
         "d3-geo": "^2.0.1",
         "vega-dataflow": "^5.7.3",
-        "vega-expression": "^3.0.0",
+        "vega-expression": "^4.0.1",
         "vega-scale": "^7.1.1",
         "vega-scenegraph": "^4.9.2",
-        "vega-selections": "^5.1.4",
+        "vega-selections": "^5.2.0",
         "vega-statistics": "^1.7.9",
         "vega-time": "^2.0.4",
-        "vega-util": "^1.15.2"
+        "vega-util": "^1.16.0"
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-color": {
           "version": "2.0.0",
@@ -8688,11 +8688,11 @@
           }
         },
         "vega-expression": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-3.0.0.tgz",
-          "integrity": "sha512-/ObjIOK94MB+ziTuh8HZt2eWlKUPT/piRJLal5tx5QL1sQbfRi++7lHKTaKMLXLqc4Xqp9/DewE3PqQ6tYzaUA==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-4.0.1.tgz",
+          "integrity": "sha512-ZrDj0hP8NmrCpdLFf7Rd/xMUHGoSYsAOTaYp7uXZ2dkEH5x0uPy5laECMc8TiQvL8W+8IrN2HAWCMRthTSRe2Q==",
           "requires": {
-            "vega-util": "^1.15.2"
+            "vega-util": "^1.16.0"
           }
         },
         "vega-util": {
@@ -8703,9 +8703,9 @@
       }
     },
     "vega-geo": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/vega-geo/-/vega-geo-4.3.7.tgz",
-      "integrity": "sha512-5HC1D9Z/WYuM1Gmlk8PxuRKgeN8snNWsfKO4E9PTmR7wo7tuU/2SGlRoE27aTsgwMMpBIrpRbSgKtgh5l/fMUQ==",
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/vega-geo/-/vega-geo-4.3.8.tgz",
+      "integrity": "sha512-fsGxV96Q/QRgPqOPtMBZdI+DneIiROKTG3YDZvGn0EdV16OG5LzFhbNgLT5GPzI+kTwgLpAsucBHklexlB4kfg==",
       "requires": {
         "d3-array": "^2.7.1",
         "d3-color": "^2.0.0",
@@ -8718,9 +8718,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-color": {
           "version": "2.0.0",
@@ -8851,13 +8851,13 @@
       }
     },
     "vega-parser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/vega-parser/-/vega-parser-6.1.0.tgz",
-      "integrity": "sha512-u14bHXV8vtcuMIJkMNoDAJ4Xu3lwKIkep+YEkPumWvlwl3fClWy26EAcwTneeM3rXu2F6ZJI6W3ddu/If8u13w==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/vega-parser/-/vega-parser-6.1.2.tgz",
+      "integrity": "sha512-aGyZrNzPrBruEb/WhemKDuDjQsIkMDGIgnSJci0b+9ZVxjyAzMl7UfGbiYorPiJlnIercjUJbMoFD6fCIf4gqQ==",
       "requires": {
         "vega-dataflow": "^5.7.3",
         "vega-event-selector": "^2.0.6",
-        "vega-functions": "^5.8.0",
+        "vega-functions": "^5.10.0",
         "vega-scale": "^7.1.1",
         "vega-util": "^1.15.2"
       },
@@ -8884,9 +8884,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-geo": {
           "version": "2.0.1",
@@ -8910,9 +8910,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "vega-util": {
           "version": "1.16.0",
@@ -8950,9 +8950,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-interpolate": {
           "version": "2.0.1",
@@ -9020,20 +9020,20 @@
       "integrity": "sha512-Tc85J2ofMZZOsxiqDM9sbvfsa+Vdo3GwNLjEEsPOsCDeYqsUHKAlc1IpbbhPLZ6jusyM9Lk0e1izF64GGklFDg=="
     },
     "vega-selections": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/vega-selections/-/vega-selections-5.1.4.tgz",
-      "integrity": "sha512-L7CHwcIjVf90GoW2tS2x5O496O5Joaerp5A1KM6VJ1uo4z6KfqxY6M/328a/uaAs0LC5qbQgXT3htFbtUrPW/A==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vega-selections/-/vega-selections-5.2.0.tgz",
+      "integrity": "sha512-Xf3nTTJHRGw4tQMbt+0sBI/7WkEIzPG9E4HXkZk5Y9Q2HsGRVLmrAEXHSfpENrBLWTBZk/uvmP9rKDG7cbcTrg==",
       "requires": {
-        "vega-expression": "^3.0.0",
-        "vega-util": "^1.15.2"
+        "vega-expression": "^4.0.1",
+        "vega-util": "^1.16.0"
       },
       "dependencies": {
         "vega-expression": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-3.0.0.tgz",
-          "integrity": "sha512-/ObjIOK94MB+ziTuh8HZt2eWlKUPT/piRJLal5tx5QL1sQbfRi++7lHKTaKMLXLqc4Xqp9/DewE3PqQ6tYzaUA==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-4.0.1.tgz",
+          "integrity": "sha512-ZrDj0hP8NmrCpdLFf7Rd/xMUHGoSYsAOTaYp7uXZ2dkEH5x0uPy5laECMc8TiQvL8W+8IrN2HAWCMRthTSRe2Q==",
           "requires": {
-            "vega-util": "^1.15.2"
+            "vega-util": "^1.16.0"
           }
         },
         "vega-util": {
@@ -9052,9 +9052,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         }
       }
     },
@@ -9074,9 +9074,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-time": {
           "version": "2.0.0",
@@ -9111,9 +9111,9 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "vega-util": {
           "version": "1.16.0",
@@ -9123,9 +9123,9 @@
       }
     },
     "vega-typings": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-0.19.1.tgz",
-      "integrity": "sha512-OSyNYwMJ8FayTTNU/gohprbt1EFQBpoiMPP9p2vqo1O9z45XVnotQ92jYHAhraI6gWiMIIfo4OjPbSe/GX7etg==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-0.19.2.tgz",
+      "integrity": "sha512-YU/S9rDk4d+t4+4eTa9fzuw87PMNteeVtpcL51kUO8H7HvGaoW7ll8RHKLkR0NYBEGPRoFDKUxnoyMvhgjsdYw==",
       "requires": {
         "vega-util": "^1.15.2"
       },
@@ -9143,24 +9143,24 @@
       "integrity": "sha512-14pdEnGn6MUPvQhoh3mwq/3hznO0ByefOdkamI2sRRz8PaPGXQOXt16Z/hItY5dREpNlk8eqFO56JGeMvh8qWg=="
     },
     "vega-view": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/vega-view/-/vega-view-5.9.0.tgz",
-      "integrity": "sha512-HqRFuqO2OwoPHHK+CVt8vB8fu2L8GjQerLpmEpglWtCPDns5+gn5B6F7M8Ah8v24WlfqW7cLrY81t9OloPZOyw==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/vega-view/-/vega-view-5.9.2.tgz",
+      "integrity": "sha512-XAwKWyVjLClR3aCbTLCWdZj7aZozOULNg7078GxJIgVcBJOENCAidceI/H7JieyUZ96p3AiEHLQdWr167InBpg==",
       "requires": {
         "d3-array": "^2.7.1",
         "d3-timer": "^2.0.0",
         "vega-dataflow": "^5.7.3",
         "vega-format": "^1.0.4",
-        "vega-functions": "^5.8.0",
+        "vega-functions": "^5.10.0",
         "vega-runtime": "^6.1.3",
         "vega-scenegraph": "^4.9.2",
         "vega-util": "^1.15.2"
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
-          "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
+          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
         },
         "d3-timer": {
           "version": "2.0.0",
diff --git a/package.json b/package.json
index 4449cea..aee37a3 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "bootstrap": "^4.4.1",
     "crossfilter2": "^1.5.2",
     "d3": "^5.16.0",
@@ -33,17 +33,17 @@
     "mdbreact": "^4.26.0",
     "parcel-bundler": "^1.12.4",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^16.13.1",
     "react-grid-layout": "^0.16.6",
-    "react-virtualized": "^9.21.2",
+    "react-virtualized": "^9.22.3",
     "style": "0.0.3",
-    "vega": "^5.11.1",
+    "vega": "^5.18.0",
     "vega-embed": "^4.2.5",
     "vega-lite": "^3.4.0",
     "vega-tooltip": "^0.17.2"
   },
   "devDependencies": {
-    "sass": "^1.26.5"
+    "sass": "^1.32.4"
   }
 }

From 7825ddb05709953504c81b71c63bbcc5abc73197 Mon Sep 17 00:00:00 2001
From: Jasox NaN <linanldj@gmail.com>
Date: Thu, 14 Jan 2021 13:50:40 -0500
Subject: [PATCH 07/23] Finished The Tasks: TCIAP25 (User-customizable column
 order) TCIAP26 (User-customizable visibility) TCIAP27 (Adjustable column
 width)

---
 .gitignore                                    |   1 +
 config/vis-config.json                        |  32 +-
 package-lock.json                             | 434 ++++++++++--------
 package.json                                  |  27 +-
 source/component/BarChart.js                  | 104 -----
 source/component/DataTable.js                 |  32 --
 source/component/DetailButton.js              |  15 -
 source/component/Histogram.js                 | 107 -----
 .../VisGridView/VisGridItem/VisGridItem.css   |   1 -
 .../VisGridView/VisGridItem/VisGridItem.js    |  18 +-
 .../VisGridItemContent/VisGridItemContent.css |   2 +-
 .../VisGridItemContent/VisGridItemContent.js  |   7 -
 .../VisGridItemControl/VisGridItemControl.css |  10 +-
 .../VisGridItemControl/VisGridItemControl.js  |  20 +-
 .../VisGridItemHeader/VisGridItemHeader.css   |  20 +-
 .../VisGridItemHeader/VisGridItemHeader.js    |  25 +-
 .../Layout/VisGridView/VisGridView.css        |   9 +-
 .../Layout/VisGridView/VisGridView.js         |  48 +-
 source/component/Placeholder.js               |  15 -
 source/component/PureVegaLitePlot.js          |  30 --
 source/component/ResetButton.js               |  19 -
 source/component/SampleVisualization.js       |  19 -
 source/component/ScatterPlot.js               | 103 -----
 source/component/SearchBar.js                 |  48 --
 source/component/VegaLitePlot.js              | 134 ------
 source/component/VisSelect.js                 |  37 --
 source/component/VisTypes.js                  |  25 -
 .../component/VisualTools/Chart/BarChart.js   |   6 +-
 .../VisualTools/Chart/HorizontalBarChart.js   |   7 +-
 .../component/VisualTools/Chart/PieChart.js   |   2 +-
 .../VisualTools/VisDataTable/VisDataTable.css | 107 ++++-
 .../VisualTools/VisDataTable/VisDataTable.js  | 160 ++++++-
 .../VisDataTableControl.css                   |  20 +
 .../VisDataTableControl.js                    |  64 +++
 .../VisSortableItem/VisSortableItem.css       |  39 ++
 .../VisSortableItem/VisSortableItem.js        |  21 +
 source/index.js                               |  31 +-
 source/style/main.scss                        |   8 +-
 38 files changed, 764 insertions(+), 1043 deletions(-)
 delete mode 100644 source/component/BarChart.js
 delete mode 100644 source/component/DataTable.js
 delete mode 100644 source/component/DetailButton.js
 delete mode 100644 source/component/Histogram.js
 delete mode 100644 source/component/Placeholder.js
 delete mode 100644 source/component/PureVegaLitePlot.js
 delete mode 100644 source/component/ResetButton.js
 delete mode 100644 source/component/SampleVisualization.js
 delete mode 100644 source/component/ScatterPlot.js
 delete mode 100644 source/component/SearchBar.js
 delete mode 100644 source/component/VegaLitePlot.js
 delete mode 100644 source/component/VisSelect.js
 delete mode 100644 source/component/VisTypes.js
 create mode 100644 source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css
 create mode 100644 source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
 create mode 100644 source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css
 create mode 100644 source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js

diff --git a/.gitignore b/.gitignore
index dab2e77..9d067d2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 .vscode/
 .cache/
 node_modules/
+dist/
 build
 .DS_Store
 *.tgz
diff --git a/config/vis-config.json b/config/vis-config.json
index 6848333..e419a50 100644
--- a/config/vis-config.json
+++ b/config/vis-config.json
@@ -2,7 +2,7 @@
     "HEIGHT_OF_VIS_HEADER": 30,
     "MARGIN_OF_VIS": [10, 10],
 
-    "UNIT_OF_GRID_VIEW": [220,200],
+    "UNIT_OF_GRID_VIEW": [224,200],
     "MARGIN_OF_GRID_VIEW": [10, 10],
     "DATA_RESOURCE_URL":"https://pathdb.cancerimagingarchive.net/pathdb/sparql?format=csv&query=prefix+%3A+%3Chttps%3A%2F%2Fbmi.stonybrookmedicine.edu%2Ftil%2Fns%2F%3E%0ASELECT+*+WHERE+{graph+%3Chttps%3A%2F%2Fbmi.stonybrookmedicine.edu%2Ftil%3E+{%0A++++%3Fsss+%3APathDBID+%3FPathDBID%3B+%3Aclinicaltrialsubjectid+%3FslideID+.+%3Fss+%3Asubmitter_id+%3Fsubmitter_id%3B+%3Apercent_pos+%3Fpercent_pos%3B+%3ATIL_classhalf+%3FTIL_classhalf%3B+%3Acollapsed_stage+%3Fcollapsed_stage%3B+%3AsurvivalB+%3FsurvivalB+.+%3Fs%0A++++++%3Asubmitter_id+%3Fsubmitter_id%3B%0A++++++%3Aajcc_pathologic_stage+%3Fajcc_pathologic_stage%3B%0A++++++%3Aprimary_diagnosis+%3Fprimary_diagnosis%3B%0A++++++%3Aprior_malignancy+%3Fprior_malignancy%3B%0A++++++%3Avital_status+%3Fvital_status%3B%0A++++++%3Avital_status+%3Fvital_status%3B%0A++++++%3ABreast_Tumor_Type+%3FBreast_Tumor_Type%3B%0A++++++%3AsurvivalA+%3FsurvivalA%3B%0A++++++%3AslideID+%3FslideID%3B%0A++++++%3APercent_TILs_in_tumor_region+%3FPercent_TILs_in_tumor_region%3B%0A++++++%3AImmune_Subtype+%3FImmune_Subtype%3B%0A++++++%3AMolwxular_Cybersort_Lymphocytes+%3FMolwxular_Cybersort_Lymphocytes%3B%0A++++++%3AGlobal_Pattern+%3FGlobal_Pattern}}",
     "DATA_FORMAT":"csv",
@@ -155,8 +155,7 @@
           "fields":[
             {
               "dataKey":"submitter_id",
-              "label":"ID",
-              "width":0.1
+              "label":"ID"
             },
             {
               "dataKey":"slideID",
@@ -164,44 +163,35 @@
               "link":{
                 "url":"https://pathdb.cancerimagingarchive.net/caMicroscope/apps/viewer/viewer.html?mode=pathdb&slideId=",
                 "field":"PathDBID"
-              },
-              "width":0.1
+              }
             },
             {
               "dataKey":"ajcc_pathologic_stage",
-              "label":"Pathologic Stage",
-              "width":0.1
+              "label":"Pathologic Stage"
             },
             {
               "dataKey":"vital_status",
-              "label":"Vital Status",
-              "width":0.08
+              "label":"Vital Status"
             },
             {
               "dataKey":"Breast_Tumor_Type",
-              "label":"Breast Tumor Type",
-              "width":0.08
+              "label":"Breast Tumor Type"
             },
             {
               "dataKey":"survivalA",
-              "label":"Survival A",
-              "width":0.08
+              "label":"Survival A"
             },{
               "dataKey":"Percent_TILs_in_tumor_region",
-              "label":"TILs Percent",
-              "width":0.08
+              "label":"TILs Percent"
             },{
               "dataKey":"Immune_Subtype",
-              "label":"Immune Subtype",
-              "width":0.05
+              "label":"Immune Subtype"
             },{
               "dataKey":"Molwxular_Cybersort_Lymphocytes",
-              "label":"Lymphocytes",
-              "width":0.08
+              "label":"Lymphocytes"
             },{
               "dataKey":"Global_Pattern",
-              "label":"Global Pattern",
-              "width":0.15
+              "label":"Global Pattern"
             }],
           "size": [4, 2],
           "priority": 70
diff --git a/package-lock.json b/package-lock.json
index 22aafb1..feea6b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -835,6 +835,36 @@
         }
       }
     },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+          "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+        }
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-Uv5NQCYjyisNVTu/1Xjs+z8vwQjbfT6hiqYvQNfF0n8qdgfWLM581bAfVMQ3BCs1SPy+eEUKNcGkK4n0FihFHg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+          "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+        }
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
@@ -1041,9 +1071,9 @@
       "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw=="
     },
     "@types/clone": {
-      "version": "0.1.30",
-      "resolved": "https://registry.npmjs.org/@types/clone/-/clone-0.1.30.tgz",
-      "integrity": "sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/clone/-/clone-2.1.0.tgz",
+      "integrity": "sha512-d/aS/lPOnUSruPhgNtT8jW39fHRVTLQy9sodysP1kkG8EdAtdZu1vt8NJaYA8w/6Z9j8izkAsx1A/yJhcYR1CA=="
     },
     "@types/fast-json-stable-stringify": {
       "version": "2.0.0",
@@ -1111,6 +1141,11 @@
         "@types/react": "*"
       }
     },
+    "@types/sortablejs": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.6.tgz",
+      "integrity": "sha512-QRz8Z+uw2Y4Gwrtxw8hD782zzuxxugdcq8X/FkPsXUa1kfslhGzy13+4HugO9FXNo+jlWVcE6DYmmegniIQ30A=="
+    },
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -1243,6 +1278,16 @@
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
     },
+    "array-flat-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-flat-polyfill/-/array-flat-polyfill-1.0.1.tgz",
+      "integrity": "sha512-hfJmKupmQN0lwi0xG6FQ5U8Rd97RnIERplymOv/qpq8AoNKPPAnxJadjFA23FNWm88wykh9HmpLJUUwUtNU/iw=="
+    },
+    "array-move": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/array-move/-/array-move-3.0.1.tgz",
+      "integrity": "sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg=="
+    },
     "array-unique": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
@@ -1727,11 +1772,6 @@
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
       "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
     },
-    "camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -1944,26 +1984,26 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg=="
     },
     "cliui": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
       "requires": {
-        "string-width": "^3.1.0",
-        "strip-ansi": "^5.2.0",
-        "wrap-ansi": "^5.1.0"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
-            "ansi-regex": "^4.1.0"
+            "ansi-regex": "^5.0.0"
           }
         }
       }
@@ -2844,11 +2884,6 @@
         "ms": "^2.1.1"
       }
     },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -3100,9 +3135,9 @@
       }
     },
     "emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -3209,6 +3244,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -3422,9 +3462,9 @@
       }
     },
     "fast-deep-equal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -3439,6 +3479,11 @@
         "micromatch": "^3.1.10"
       }
     },
+    "fast-json-patch": {
+      "version": "3.0.0-1",
+      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.0.0-1.tgz",
+      "integrity": "sha512-6pdFb07cknxvPzCeLsFHStEy+MysPJPgZQ9LbQ/2O67unQF93SNqfdSqnPPl71YMHX+AD8gbl7iuoGFzHEdDuw=="
+    },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
@@ -3494,14 +3539,6 @@
         }
       }
     },
-    "find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "requires": {
-        "locate-path": "^3.0.0"
-      }
-    },
     "focus-trap": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-4.0.2.tgz",
@@ -4597,9 +4634,9 @@
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
     "is-glob": {
       "version": "4.0.1",
@@ -4984,15 +5021,6 @@
         "json5": "^1.0.1"
       }
     },
-    "locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "requires": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      }
-    },
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
@@ -5049,6 +5077,14 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
     "magic-string": {
       "version": "0.22.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
@@ -5663,27 +5699,6 @@
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
-    "p-limit": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
-      "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "requires": {
-        "p-limit": "^2.0.0"
-      }
-    },
-    "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-    },
     "pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
@@ -5809,11 +5824,6 @@
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
       "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
     },
-    "path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
-    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -6792,6 +6802,25 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-sortable-hoc": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz",
+      "integrity": "sha512-v1CDCvdfoR3zLGNp6qsBa4J1BWMEVH25+UKxF/RvQRh+mrB+emqtVHMgZ+WreUiKJoEaiwYoScaueIKhMVBHUg==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.7"
+      }
+    },
+    "react-sortablejs": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-6.0.0.tgz",
+      "integrity": "sha512-vzi+TWOnofcYg+dYnC/Iz/ZZkBGG76uM6KaLwuAqBk0349JQxIy3PZizbK0TJdLlK6NnLt4CiEyyQXSSnVYvEw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "tiny-invariant": "^1.1.0"
+      }
+    },
     "react-text-mask": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.4.3.tgz",
@@ -7157,11 +7186,6 @@
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
-    "require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-    },
     "resolve": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
@@ -7390,11 +7414,6 @@
         "send": "0.17.1"
       }
     },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -7596,6 +7615,11 @@
         }
       }
     },
+    "sortablejs": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz",
+      "integrity": "sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -7746,26 +7770,26 @@
       }
     },
     "string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+      "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
       "requires": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
-            "ansi-regex": "^4.1.0"
+            "ansi-regex": "^5.0.0"
           }
         }
       }
@@ -8515,29 +8539,32 @@
       }
     },
     "vega-embed": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-4.2.5.tgz",
-      "integrity": "sha512-3iUv5oU5y/sa7jC+shw79hPmHMpWMhMTGSovtl3+O98hLq7LQgordWKgoxKcqwhSIHMIgj+cInTNPWM4kru7Ug==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.15.0.tgz",
+      "integrity": "sha512-/+Xlf0D4ErI21R20ElkP0ZP+qFHJoLsnbBGidJSYmnUGn5mPcnPmRKigaKEaXeKl9a5PCxxxIdjyfiFf99n3OA==",
       "requires": {
-        "d3-selection": "^1.4.0",
+        "fast-json-patch": "^3.0.0-1",
         "json-stringify-pretty-compact": "^2.0.0",
-        "semver": "^6.3.0",
-        "vega-schema-url-parser": "^1.1.0",
-        "vega-themes": "^2.3.2",
-        "vega-tooltip": "^0.18.1"
+        "semver": "^7.3.4",
+        "vega-schema-url-parser": "^2.1.0",
+        "vega-themes": "^2.9.1",
+        "vega-tooltip": "^0.24.2"
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
         },
         "vega-tooltip": {
-          "version": "0.18.1",
-          "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.18.1.tgz",
-          "integrity": "sha512-g/i69QLTVhGeHNT8k646Qr8SFss9kbnt6XmU9ujjqgaW5B/p1FPUrMzFh/88rMF704EHYyBH7Aj3t0ds1cCHbQ==",
+          "version": "0.24.2",
+          "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.24.2.tgz",
+          "integrity": "sha512-b7IeYQl/piNVsMmTliOgTnwSOhBs67KqoZ9UzP1I3XpH7TKbSuc3YHA7b1CSxkRR0hHKdradby4UI8c9rdH74w==",
           "requires": {
-            "vega-util": "^1.10.0"
+            "vega-util": "^1.15.2"
           }
         }
       }
@@ -8575,16 +8602,16 @@
       }
     },
     "vega-event-selector": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-2.0.1.tgz",
-      "integrity": "sha512-FGU1PefYhW9An6zVs6TE5f/XGYsIispxFErG/p9KThxL22IC90WVZzMQXKN9M8OcARq5OyWjHg3qa9Qp/Z6OJw=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-2.0.6.tgz",
+      "integrity": "sha512-UwCu50Sqd8kNZ1X/XgiAY+QAyQUmGFAwyDu7y0T5fs6/TPQnDo/Bo346NgSgINBEhEKOAMY1Nd/rPOk4UEm/ew=="
     },
     "vega-expression": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-2.6.1.tgz",
-      "integrity": "sha512-LXyacmJCswaXfBKQbwUBYLzSuSYkygKwNNlZ+xHNQ2+Mab6/oAGlG1jfsJPo90qQefmlvL61ynCi7Bk0vUEafQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-3.0.1.tgz",
+      "integrity": "sha512-+UwOFEkBnAWo8Zud6i8O4Pd2W6QqmPUOaAhjNtj0OxRL+d+Duoy7M4edUDZ+YuoUcMnjjBFfDQu7oRAA1fIMEQ==",
       "requires": {
-        "vega-util": "^1.11.0"
+        "vega-util": "^1.15.2"
       }
     },
     "vega-force": {
@@ -8783,36 +8810,33 @@
       }
     },
     "vega-lite": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-3.4.0.tgz",
-      "integrity": "sha512-RJg9uBNh5g0hA8xTzAcALUfNx0cEq7E7xx+vxPEGSMgI8z+A5KlE9u4jUx6nKu7Mjg1qZO8WOyWCmBS1kdFWPg==",
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-4.17.0.tgz",
+      "integrity": "sha512-MO2XsaVZqx6iWWmVA5vwYFamvhRUsKfVp7n0pNlkZ2/21cuxelSl92EePZ2YGmzL6z4/3K7r/45zaG8p+qNHeg==",
       "requires": {
-        "@types/clone": "~0.1.30",
+        "@types/clone": "~2.1.0",
         "@types/fast-json-stable-stringify": "^2.0.0",
+        "array-flat-polyfill": "^1.0.1",
         "clone": "~2.1.2",
-        "fast-deep-equal": "~2.0.1",
-        "fast-json-stable-stringify": "~2.0.0",
+        "fast-deep-equal": "~3.1.3",
+        "fast-json-stable-stringify": "~2.1.0",
         "json-stringify-pretty-compact": "~2.0.0",
-        "tslib": "~1.10.0",
-        "vega-event-selector": "~2.0.0",
-        "vega-expression": "~2.6.0",
-        "vega-typings": "0.7.2",
-        "vega-util": "~1.10.0",
-        "yargs": "~13.3.0"
+        "tslib": "~2.0.3",
+        "vega-event-selector": "~2.0.6",
+        "vega-expression": "~3.0.0",
+        "vega-util": "~1.16.0",
+        "yargs": "~16.0.3"
       },
       "dependencies": {
-        "vega-typings": {
-          "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-0.7.2.tgz",
-          "integrity": "sha512-BReB2qRERA/Ke+QoxKDQ7fES25A9Q3qKRm1CJxwvpLGhAl4k5cGDORx6yW+J3rFHMzpJlmdRM+kb489EuphxZQ==",
-          "requires": {
-            "vega-util": "^1.10.0"
-          }
+        "fast-json-stable-stringify": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+          "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
         },
-        "vega-util": {
-          "version": "1.10.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.10.0.tgz",
-          "integrity": "sha512-fTGnTG7FhtTG9tiYDL3k5s8YHqB71Ml5+aC9B7eaBygeB8GKXBrcbTXLOzoCRxT3Jr5cRhr99PMBu0AkqmhBog=="
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
         }
       }
     },
@@ -9015,9 +9039,9 @@
       }
     },
     "vega-schema-url-parser": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/vega-schema-url-parser/-/vega-schema-url-parser-1.1.0.tgz",
-      "integrity": "sha512-Tc85J2ofMZZOsxiqDM9sbvfsa+Vdo3GwNLjEEsPOsCDeYqsUHKAlc1IpbbhPLZ6jusyM9Lk0e1izF64GGklFDg=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vega-schema-url-parser/-/vega-schema-url-parser-2.1.0.tgz",
+      "integrity": "sha512-JHT1PfOyVzOohj89uNunLPirs05Nf59isPT5gnwIkJph96rRgTIBJE7l7yLqndd7fLjr3P8JXHGAryRp74sCaQ=="
     },
     "vega-selections": {
       "version": "5.2.0",
@@ -9059,9 +9083,9 @@
       }
     },
     "vega-themes": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/vega-themes/-/vega-themes-2.5.0.tgz",
-      "integrity": "sha512-mkyYhcRhmMBWLfvCBPTVx0S/OnxeIfVY/TmFfYP5sPdW8X1kMyHtLI34bMhzosPrkhNyHsC8FNHJyU/dOQnX4A=="
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/vega-themes/-/vega-themes-2.9.1.tgz",
+      "integrity": "sha512-N6GU8u1EpfqxswXpBKLYouD3gYGfvrKWTC07JSrnlvGUzKzXMPDm4fN8FP8+cBpTwBL6JDZBd86A1Haea/nTfQ=="
     },
     "vega-time": {
       "version": "2.0.4",
@@ -9090,14 +9114,6 @@
         }
       }
     },
-    "vega-tooltip": {
-      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.17.2.tgz",
-      "integrity": "sha512-mQ/pXWUPd6Sirp7ZZ9Ov/fzSqAm5etM17RVNeHcKeY7t+JBjXbU0iGad6Yo9wNJ1smhaGfiDYf3iN5UXEmvFpA==",
-      "requires": {
-        "vega-util": "^1.10.0"
-      }
-    },
     "vega-transforms": {
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/vega-transforms/-/vega-transforms-4.9.3.tgz",
@@ -9138,9 +9154,9 @@
       }
     },
     "vega-util": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.11.0.tgz",
-      "integrity": "sha512-14pdEnGn6MUPvQhoh3mwq/3hznO0ByefOdkamI2sRRz8PaPGXQOXt16Z/hItY5dREpNlk8eqFO56JGeMvh8qWg=="
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
+      "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
     },
     "vega-view": {
       "version": "5.9.2",
@@ -9327,37 +9343,53 @@
         "isexe": "^2.0.0"
       }
     },
-    "which-module": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
-    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
     },
     "wrap-ansi": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "requires": {
-        "ansi-styles": "^3.2.0",
-        "string-width": "^3.0.0",
-        "strip-ansi": "^5.0.0"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
-            "ansi-regex": "^4.1.0"
+            "ansi-regex": "^5.0.0"
           }
         }
       }
@@ -9391,35 +9423,33 @@
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+      "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
+    },
+    "yallist": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "yargs": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
-      "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.0.3.tgz",
+      "integrity": "sha512-6+nLw8xa9uK1BOEOykaiYAJVh6/CjxWXK/q9b5FpRgNslt8s22F2xMBqVIKgCRjNgGvGPBy8Vog7WN7yh4amtA==",
       "requires": {
-        "cliui": "^5.0.0",
-        "find-up": "^3.0.0",
-        "get-caller-file": "^2.0.1",
+        "cliui": "^7.0.0",
+        "escalade": "^3.0.2",
+        "get-caller-file": "^2.0.5",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^3.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^13.1.1"
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.1",
+        "yargs-parser": "^20.0.0"
       }
     },
     "yargs-parser": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-      "requires": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      }
+      "version": "20.2.4",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+      "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
     }
   }
 }
diff --git a/package.json b/package.json
index aee37a3..0dc08bc 100644
--- a/package.json
+++ b/package.json
@@ -18,30 +18,37 @@
     "visualization",
     "cohort"
   ],
-  "author": "birm",
+  "author": "birm, Nan Li",
   "license": "BSD-3-Clause",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "bootstrap": "^4.4.1",
-    "crossfilter2": "^1.5.2",
+    "@types/sortablejs": "^1.10.6",
+    "array-move": "^3.0.1",
+    "bootstrap": "^4.5.3",
+    "crossfilter2": "^1.5.4",
     "d3": "^5.16.0",
     "jquery": "^3.5.1",
     "mdbreact": "^4.26.0",
     "parcel-bundler": "^1.12.4",
-    "react": "^16.13.1",
+    "popper.js": "^1.16.1",
+    "react": "^16.14.0",
     "react-bootstrap": "^1.4.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.14.0",
     "react-grid-layout": "^0.16.6",
+    "react-sortable-hoc": "^1.11.0",
+    "react-sortablejs": "^6.0.0",
     "react-virtualized": "^9.22.3",
+    "sortablejs": "^1.13.0",
     "style": "0.0.3",
     "vega": "^5.18.0",
-    "vega-embed": "^4.2.5",
-    "vega-lite": "^3.4.0",
-    "vega-tooltip": "^0.17.2"
+    "vega-embed": "^6.15.0",
+    "vega-lite": "^4.17.0"
   },
   "devDependencies": {
     "sass": "^1.32.4"
diff --git a/source/component/BarChart.js b/source/component/BarChart.js
deleted file mode 100644
index 01bba63..0000000
--- a/source/component/BarChart.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import {View as vegaView, parse as vegaParse} from 'vega'
-import { compile as vlCompile } from 'vega-lite'
-
-// should only have to worry about rendering
-class BarChart extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  componentDidMount(){
-    let vlspec = {
-      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
-      "data": {"values": this.state.filteredData},
-      "mark": "bar",
-      "selection":{
-        "brush": {
-          "encodings": ['x','y'],
-          "type": "interval"
-        }
-      },
-      "encoding": {
-        "y": {
-          "field": this.props.x,
-          "type": "ordinal"
-        },
-        "x": {
-          "aggregate": "sum",
-          "field": this.props.y,
-          "type": "quantitative"
-        }
-      }
-    }
-    vlspec.height = this.props.h*100 || 100
-    vlspec.width = this.props.w*100 || 100
-    let spec = vlCompile(vlspec, {}).spec
-    let vl_view = new vegaView(vegaParse(spec))
-    vl_view.initialize(document.querySelector("#" + this.id))
-    vl_view.addDataListener('brush_store', (t,e)=> {
-      if (e.length >0 && e[0].fields.length > 0){
-        window.clearTimeout(this.lastEvent)
-        this.lastEvent = window.setTimeout(x=>{
-          console.log(e)
-          console.log("{FIELD}", e[0].fields[0].field)
-          console.log("{RANGE}", e[0].values[0])
-        },this.bufferTime)
-      }
-    })
-    vl_view.hover();
-    vl_view.run();
-  }
-  componentDidUpdate(){
-    let vlspec = {
-      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
-      "data": {"values": this.state.filteredData},
-      "mark": "bar",
-      "selection":{
-        "brush": {
-          "encodings": ['x','y'],
-          "type": "interval"
-        }
-      },
-      "encoding": {
-        "y": {
-          "field": this.props.x,
-          "type": "ordinal"
-        },
-        "x": {
-          "aggregate": "sum",
-          "field": this.props.y,
-          "type": "quantitative"
-        }
-      }
-    }
-    vlspec.height = this.props.h*100 || 100
-    vlspec.width = this.props.w*100 || 100
-    let spec = vlCompile(vlspec, {}).spec
-    console.log(spec)
-    let vl_view = new vegaView(vegaParse(spec))
-    vl_view.initialize(document.querySelector("#" + this.id))
-    vl_view.addDataListener('brush_store', (t,e)=> {
-      if (e.length >0 && e[0].fields.length > 0){
-        window.clearTimeout(this.lastEvent)
-        this.lastEvent = window.setTimeout(x=>{
-          console.log(e)
-          console.log("{FIELD}", e[0].fields[0].field)
-          console.log("{RANGE}", e[0].values[0])
-        },this.bufferTime)
-      }
-    })
-    vl_view.hover()
-    vl_view.run();
-  }
-  render() {
-    if(this.state.ready){
-      return <div id={this.id}></div>
-    } else {
-      return <p> waiting...</p>
-    }
-
-  }
-}
-
-export default BarChart
diff --git a/source/component/DataTable.js b/source/component/DataTable.js
deleted file mode 100644
index 6fd25ea..0000000
--- a/source/component/DataTable.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import { MDBDataTable } from 'mdbreact';
-
-// should only have to worry about rendering
-class DataTable extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-    this.table_data = {}
-  }
-
-  render() {
-    if(this.state.ready){
-      this.table_data = {}
-      this.table_data.columns = []
-      var columns = this.props.columns || []
-      if (this.state.filteredData[0]){
-        columns = Object.keys(this.state.filteredData[0])
-      }
-      for (let i = 0; i<columns.length; i++){
-        this.table_data.columns.push({label: columns[i], field: columns[i]})
-      }
-      this.table_data.rows = this.state.filteredData
-      return(<MDBDataTable striped   bordered hover data={this.table_data}/>)
-    } else {
-      return <div id={this.id} key={this.id} style={this.style} className="vis-loading"><p>waiting...</p></div>
-    }
-
-  }
-}
-
-export default DataTable
diff --git a/source/component/DetailButton.js b/source/component/DetailButton.js
deleted file mode 100644
index 20c59f2..0000000
--- a/source/component/DetailButton.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-// should only have to worry about rendering
-class Placeholder extends  React.Component {
-  constructor(props, ctx) {
-    super(props, ctx);
-    this.id = props.id || '_' + Math.random().toString(36).substr(2, 9);
-  }
-  render() {
-    return <div id={this.id}></div>
-
-  }
-}
-
-export default DetailButton
diff --git a/source/component/Histogram.js b/source/component/Histogram.js
deleted file mode 100644
index ba7402d..0000000
--- a/source/component/Histogram.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import {View as vegaView, parse as vegaParse} from 'vega'
-import { compile as vlCompile } from 'vega-lite'
-
-// should only have to worry about rendering
-class Histogram extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  componentDidMount(){
-    let vlspec = {
-      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
-      "data": {"values": this.state.filteredData},
-      "mark": "bar",
-      "selection":{
-        "brush": {
-          "encodings": ['x'],
-          "type": "interval"
-        }
-      },
-      "encoding": {
-        "x": {
-          "bin": true,
-          "field": this.props.x,
-          "type": "quantitative"
-        },
-        "y": {
-          "aggregate": "count",
-          "type": "quantitative"
-        }
-      }
-    }
-    // set up pre-existing filter state
-    vlspec.height = this.props.h*100 || 100
-    vlspec.width = this.props.w*100 || 100
-    let vl_view = new vegaView(vegaParse(vlCompile(vlspec, {logger: console}).spec))
-    vl_view.initialize(document.querySelector("#" + this.id))
-    vl_view.renderer("svg")
-    vl_view.hover();
-    vl_view.addDataListener('brush_store', (t,e)=> {
-      if (e.length >0 && e[0].fields.length > 0){
-        window.clearTimeout(this.lastEvent)
-        this.lastEvent = window.setTimeout(x=>{
-
-        },this.bufferTime)
-      }
-    })
-    vl_view.run();
-  }
-
-  componentDidUpdate(){
-    let vlspec = {
-      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
-      "data": {"values": this.state.filteredData},
-      "mark": "bar",
-      "selection":{
-        "brush": {
-          "encodings": ['x'],
-          "type": "interval"
-        }
-      },
-      "encoding": {
-        "x": {
-          "bin": true,
-          "field": this.props.x,
-          "type": "quantitative"
-        },
-        "y": {
-          "aggregate": "count",
-          "type": "quantitative"
-        }
-      }
-    }
-    // IF filter state for this comopnent, set it to selection.brush.init
-    if (this.state.filter[this.props.x] && this.state.filter[this.props.x].less && this.state.filter[this.props.x].greater){
-      vlspec.selection.brush.init = {"x": [this.state.filter[this.props.x].greater,this.state.filter[this.props.x].less]}
-    }
-    vlspec.height = this.props.h*100 || 100
-    vlspec.width = this.props.w*100 || 100
-    let vl_view = new vegaView(vegaParse(vlCompile(vlspec, {logger: console}).spec))
-    vl_view.initialize(document.querySelector("#" + this.id))
-    vl_view.renderer("svg")
-    vl_view.hover()
-    vl_view.addDataListener('brush_store', (t,e)=> {
-      if (e.length >0 && e[0].fields.length > 0){
-        window.clearTimeout(this.lastEvent)
-        this.lastEvent = window.setTimeout(x=>{
-
-          let new_filter = {}
-          this.filterIn(new_filter)
-        },this.bufferTime)
-      }
-    })
-    vl_view.run();
-  }
-  render() {
-    if(this.state.ready){
-      return <div id={this.id}></div>
-    } else {
-      return <p> waiting...</p>
-    }
-
-  }
-}
-
-export default Histogram
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css
index b5804b3..3fc9607 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css
@@ -5,5 +5,4 @@
     display: flex;
     height: 100%;
     /* border-radius: 5px; */
-    background: white;
 }
\ No newline at end of file
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
index cad1caa..b05c14a 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
@@ -1,8 +1,6 @@
 import React, { Component } from "react";
 import VisGridItemContent from "./VisGridItemContent/VisGridItemContent";
 import VisGridItemHeader from "./VisGridItemHeader/VisGridItemHeader";
-import VisGridItemControl from "./VisGridItemControl/VisGridItemControl";
-import PropTypes from "prop-types";
 
 // css class
 import "./VisGridItem.css";
@@ -11,6 +9,7 @@ export default class VisGridItem extends Component {
   constructor(props) {
     super(props);
     this.state = { hover: false };
+
     //this.state.name = props.i;
     this.onMouseEnterHandle = this.onMouseEnterHandle.bind(this);
     this.onMouseLeaveHeadle = this.onMouseLeaveHeadle.bind(this);
@@ -24,15 +23,24 @@ export default class VisGridItem extends Component {
     this.setState({ hover: false });
   }
 
+
   render() {
     return (
       <div
-        className="vis-grid-item"
+        className="vis-grid-item bg-light"
         onMouseEnter={this.onMouseEnterHandle}
         onMouseLeave={this.onMouseLeaveHeadle}
       >
-        <VisGridItemHeader id={this.props.operation.id} title={this.props.operation.title} description={this.props.operation.description} hover={this.state.hover} filters={this.props.filters} filterRemove={this.props.filterRemove}/>
-        <VisGridItemControl id={this.props.operation.id} title={this.props.operation.title} description={this.props.operation.description} hover={this.state.hover} filters={this.props.filters} filterRemove={this.props.filterRemove}/>
+        <VisGridItemHeader
+          id={this.props.operation.id}
+          title={this.props.operation.title}
+          description={this.props.operation.description}
+          toggleFullScreen={this.props.toggleFullScreen}
+          fullScreened={this.props.operation.fullScreened}
+          hover={this.state.hover}
+          filters={this.props.filters}
+          filterRemove={this.props.filterRemove} />
+        
         <VisGridItemContent
           {...this.props.operation}
           data={this.props.data}
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.css b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.css
index 1995405..5f8b0a4 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.css
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.css
@@ -1,5 +1,5 @@
 .vis-grid-item-content {
-  background: #eef6ff;
+  /* background: #eef6ff; */
   height: 100%;
   width: 100%;
   /* border-radius: 0 0 4px 4px; */
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
index a8a5806..7d2e948 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
@@ -28,14 +28,7 @@ const ScatterChart = React.lazy(() =>
 const VisDataTable = React.lazy(() =>
   import("../../../../VisualTools/VisDataTable/VisDataTable")
 );
-const VegaLitePlot = React.lazy(() =>
-  import("../../../../VegaLitePlot")
-);
-
 
-//import BarChart from '../../../../VisualTools/Chart/BarChart';
-//import PieChart from '../../../../VisualTools/Chart/PieChart';
-//import Table from '../../../../VisualTools/Table/Table';
 
 const _style = {
   display: "flex",
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.css b/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.css
index acf59a3..52ddad8 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.css
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.css
@@ -1,7 +1,15 @@
 .vis-grid-item-control {
   position: absolute;
-  border-radius: 4px;
+  /* border-radius: 4px; */
   right:0;
   top:0;
   /* border-radius: 0 0 4px 4px; */
 }
+
+.vis-grid-item-control > .btn {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: .8rem;
+  padding: 0;
+  border-radius: 0;
+}
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js
index 886fac7..028bd36 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js
@@ -1,9 +1,8 @@
 import React, { Component, Suspense } from "react";
 import Button from 'react-bootstrap/Button';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfoCircle, faTimes } from '@fortawesome/fontawesome-free-solid'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCompressArrowsAlt, faExpandArrowsAlt } from '@fortawesome/free-solid-svg-icons'
 // import PropTypes from "prop-types";
 
 
@@ -17,16 +16,21 @@ export default class VisGridItemControl extends Component {
   render() {
     let btnFilterRemove;
     if(this.props.filters.length > 0&&this.props.filters.find(f=>f.id==this.props.id)) 
-      btnFilterRemove = <Button size="sm" variant="info" onClick={()=>this.props.filterRemove(this.props.id)}><FontAwesomeIcon icon='undo-alt' size='sm' /></Button> 
+      btnFilterRemove = <Button  onClick={()=>this.props.filterRemove(this.props.id)}><FontAwesomeIcon icon='undo-alt'/></Button> 
     //if(this.props.hover) btnGroup = <ButtonGroup>{btnFilterRemove}<Button variant="secondary">X</Button></ButtonGroup>
     if(!this.props.hover) return null;
     return (
       <div className="vis-grid-item-control">
-        <ButtonGroup >
+       
           {btnFilterRemove}
-          <Button size='sm'><FontAwesomeIcon icon='info-circle' size='sm' /></Button>
-          <Button size='sm'><FontAwesomeIcon icon='times' size='sm'/></Button>
-        </ButtonGroup>
+          
+          <Button ><FontAwesomeIcon icon='info-circle'/></Button>
+          <Button
+            onClick={()=>this.props.toggleFullScreen(this.props.id, !this.props.fullScreened)}>
+              <FontAwesomeIcon
+                icon={this.props.fullScreened?faCompressArrowsAlt:faExpandArrowsAlt}
+                />
+          </Button>
       </div>
     );
   }
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css b/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css
index 1d7d402..063e5fd 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css
@@ -1,23 +1,21 @@
 .vis-grid-item-header {
   display: flex;
   align-items: center;
-  font-size: 14px;
-  position: "relative";
-  height: "25px";
-  background: #0984e3;
-  color: #fff;
-  /* border-radius: 4px 4px 0 0; */
-  /* border-bottom: #0984e3 solid 1px; */
+  font-size: .8rem;
+  position: relative;
 }
-/* .vis-grid-item-header:hover {
-  background: #0984e3;
-} */
+
 .name-header {
+  align-items: center;
+  vertical-align: middle;
+  padding:0 .5rem;
+  height: 1.5rem;
   flex-grow: 1;
+  display: flex;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-align: center !important;
+  text-align: left !important;
   font-weight: bold;
 }
 
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
index 74ae529..4dd1809 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
@@ -1,23 +1,34 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-
+import VisGridItemControl from "../VisGridItemControl/VisGridItemControl";
 // css class
 import "./VisGridItemHeader.css";
 const style = {
 
 };
 export default class VisGridItemHeader extends Component {
-  // static propTypes = {
-  //     prop: PropTypes
-  // }
+  constructor(props) {
+    super(props);
+    
+  }
 
   render() {
-
+    
       return (
-      <div className="vis-grid-item-header" title={this.props.description}>
+      <div className="vis-grid-item-header bg-primary text-light" title={this.props.description}>
         <div className="name-header draggable" >
-          <span className="chartTitle" >{this.props.title}</span>
+          <div className="chartTitle" >{this.props.title}</div>
         </div>
+        
+        <VisGridItemControl
+          id={this.props.id}
+          title={this.props.title}
+          description={this.props.description}
+          fullScreened={this.props.fullScreened}
+          toggleFullScreen={this.props.toggleFullScreen}
+          hover={this.props.hover}
+          filters={this.props.filters}
+          filterRemove={this.props.filterRemove}/>
       </div>
     );
   }
diff --git a/source/component/Layout/VisGridView/VisGridView.css b/source/component/Layout/VisGridView/VisGridView.css
index 30e9a2d..6e3110d 100644
--- a/source/component/Layout/VisGridView/VisGridView.css
+++ b/source/component/Layout/VisGridView/VisGridView.css
@@ -3,9 +3,8 @@
     flex-direction: row;
     flex-wrap: wrap;
     width: 100%;
-    box-sizing: border-box;
+    
 }
-.react-grid-item {
-    box-sizing: border-box;
-    border: 1px solid #0984e3;
-}
\ No newline at end of file
+/* .react-grid-item {
+    
+} */
\ No newline at end of file
diff --git a/source/component/Layout/VisGridView/VisGridView.js b/source/component/Layout/VisGridView/VisGridView.js
index ae0b91f..48f7b01 100644
--- a/source/component/Layout/VisGridView/VisGridView.js
+++ b/source/component/Layout/VisGridView/VisGridView.js
@@ -12,6 +12,7 @@ import _CONFIG_ from "../../../../config/vis-config.json";
 
 // enumeration for 
 import VisTypeEnum from "../../VisualTools/VisTypeEnum.json";
+import { config } from "@fortawesome/fontawesome-svg-core";
 
 // import 
 const _config = {
@@ -22,6 +23,8 @@ class VisGridView extends Component {
   constructor(props) {
     super(props);
     this.self = React.createRef();
+    this.navHeight = 56;
+    this.filterHeight = 65;
     this.state = {
       draggableHandle: ".draggable",
       width: 0, // -> cols
@@ -33,16 +36,26 @@ class VisGridView extends Component {
         visConfig: [..._CONFIG_.VISUALIZATION_VIEW_CONFIGURATION]
       },
       error: null,
-      isLoad: false
+      isLoad: false,
     };
+
+    //
   }
   /**
    * Calculate & Update state of new dimensions
    */
   updateViewSize() {
     const rect = this.self.current.getBoundingClientRect();
+    console.log(rect, window.innerWidth, window.innerHeight)
     const cols = parseInt((rect.width - this.state.config.margins[0] ) / (this.state.config.grid[0]+this.state.config.margins[0]));
+    
     if(cols===this.state.cols) return;
+    
+    // if(this.state.config.visConfig.find(config=>config.fullScreened)){
+    //   console.log('FUll')
+    // }else{
+    //   console.log('No FUll')
+    // }
     const gridLayoutWidth =
       cols * this.state.config.grid[0] +
       (cols + 1) * this.state.config.margins[0];
@@ -53,24 +66,46 @@ class VisGridView extends Component {
     updatedState.config.layout = [...updatedLayout.layout];
     // calculate width and height
     this.setState(updatedState);
+
+    this.fullScreenHandler = this.fullScreenHandler.bind(this);
+
   }
-  componentDidMount() {
-    // TODO loading config
 
+  // onRemoveItem(id) {
+  //   console.log("removing", id);
+  //   //this.state.config.layout
+  //   //this.setState({ items: _.reject(this.state.items, { i: i }) });
+  // }
+  fullScreenHandler(id, fullScreened) {
+    const newVisConfig = [...this.state.config.visConfig].map(config=>{
+      config.fullScreened = config.id==id?fullScreened: false;
+      return config;
+    })
+    const updatedState = { ...this.state };
+    updatedState.config.visConfig = newVisConfig;
+    this.setState(updatedState);
+  }
 
+  componentDidMount() {
+    // TODO loading config
     //
+    console.log('componentDidMount')
     this.updateViewSize();
     // TODO debouce
     window.addEventListener("resize", this.updateViewSize.bind(this));
   }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateViewSize.bind(this));
+
+  componentDidUpdate() {
+
   }
+
+
   render() {
+    console.log(this.state)
     if (this.state.config.layout.length > 0) {
       let __vis = this.state.config.layout.map((item, index) => (
         
-        <div key={item.i}>
+        <div key={item.i} className="border border-primary">
           <VisGridItem 
             {...item}
             operation={this.state.config.visConfig[index]}
@@ -79,6 +114,7 @@ class VisGridView extends Component {
             filters={this.props.filters}
             filterAdded = {this.props.filterAdded}
             filterRemove = {this.props.filterRemove}
+            toggleFullScreen={this.fullScreenHandler}
           />
         </div>
       ));
diff --git a/source/component/Placeholder.js b/source/component/Placeholder.js
deleted file mode 100644
index dcea8cd..0000000
--- a/source/component/Placeholder.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-
-// should only have to worry about rendering
-class Placeholder extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  render() {
-    return <div id={this.id}></div>
-
-  }
-}
-
-export default Placeholder
diff --git a/source/component/PureVegaLitePlot.js b/source/component/PureVegaLitePlot.js
deleted file mode 100644
index 1b54e86..0000000
--- a/source/component/PureVegaLitePlot.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import vegaEmbed from 'vega-embed'
-
-// should only have to worry about rendering
-class PureVegaLitePlot extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  componentDidMount(){
-    let spec = JSON.parse(this.props.spec)
-    spec.data = {"values": this.state.filteredData}
-    vegaEmbed('#'+this.id, spec);
-  }
-  componentDidUpdate(){
-    let spec = JSON.parse(this.props.spec)
-    spec.data = {"values": this.state.filteredData}
-    vegaEmbed('#'+this.id, spec);
-  }
-  render() {
-    if(this.state.ready){
-      return <div id={this.id}></div>
-    } else {
-      return <p> waiting...</p>
-    }
-
-  }
-}
-
-export default PureVegaLitePlot
diff --git a/source/component/ResetButton.js b/source/component/ResetButton.js
deleted file mode 100644
index a7ed7b9..0000000
--- a/source/component/ResetButton.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-
-// should only have to worry about rendering
-class ResetButton extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  render() {
-    if(this.state.ready){
-      return <div id={this.id}><button className="clear-btn" title="Exploration" onClick={()=>{this.filterReset()}}><span className="fa fa-snowplow"></span> Reset Filters</button></div>
-    } else {
-      return <div id={this.id}><p> waiting...</p></div>
-    }
-
-  }
-}
-
-export default ResetButton
diff --git a/source/component/SampleVisualization.js b/source/component/SampleVisualization.js
deleted file mode 100644
index 3e44305..0000000
--- a/source/component/SampleVisualization.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-
-// should only have to worry about rendering
-class SampleVisualization extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  render() {
-    if(this.state.ready){
-      return <div id={this.id}><p> Records: {this.state.filteredData.length} of {this.state.baseData.length} </p></div>
-    } else {
-      return <div id={this.id}><p> waiting...</p></div>
-    }
-
-  }
-}
-
-export default SampleVisualization
diff --git a/source/component/ScatterPlot.js b/source/component/ScatterPlot.js
deleted file mode 100644
index 559865c..0000000
--- a/source/component/ScatterPlot.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import {View as vegaView, parse as vegaParse} from 'vega'
-import { compile as vlCompile } from 'vega-lite'
-
-// should only have to worry about rendering
-class ScatterPlot extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-  }
-  componentDidMount(){
-    let vlspec = {
-      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
-      "data": {"values": this.state.filteredData},
-      "mark": "bar",
-      "selection": {
-        "brush": {
-          "encodings": ["x","y"],
-          "type": "interval"
-        }
-      },
-      "mark": "point",
-      "encoding": {
-        "x": {"field": this.props.x, "type": "quantitative"},
-        "y": {"field": this.props.y, "type": "quantitative"}
-        }
-    }
-    // IF filter state for this comopnent, set it to selection.brush.init
-    if (this.state.filter[this.props.x] && this.state.filter[this.props.x].less && this.state.filter[this.props.x].greater){
-      if (this.state.filter[this.props.y] && this.state.filter[this.props.y].less && this.state.filter[this.props.y].greater){
-        vlspec.selection.brush.init = {"x": [this.state.filter[this.props.x].greater,this.state.filter[this.props.x].less], "y":[this.state.filter[this.props.y].greater,this.state.filter[this.props.y].less]}
-      }
-    }
-    if (this.props.z){
-      vlspec.encoding.color = {"field": this.props.z, "type": "nominal"}
-      vlspec.encoding.shape = {"field": this.props.z, "type": "nominal"}
-    }
-    vlspec.height = this.props.h*100 || 100
-    vlspec.width = this.props.w*100 || 100
-    let vl_view = new vegaView(vegaParse(vlCompile(vlspec, {logger: console}).spec))
-    vl_view.initialize(document.querySelector("#" + this.id))
-    vl_view.addDataListener('brush_store', (t,e)=> {
-      if (e.length >0 && e[0].fields.length > 1){
-        window.clearTimeout(this.lastEvent)
-        this.lastEvent = window.setTimeout(x=>{
-        },500)
-      }
-    })
-    vl_view.hover()
-    vl_view.run();
-  }
-  componentDidUpdate(){
-    let vlspec = {
-      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
-      "data": {"values": this.state.filteredData},
-      "selection": {
-        "brush": {
-          "encodings": ["x","y"],
-          "type": "interval"
-        }
-      },
-      "mark": "bar",
-      "mark": "point",
-      "encoding": {
-        "x": {"field": this.props.x, "type": "quantitative"},
-        "y": {"field": this.props.y, "type": "quantitative"}
-        }
-    }
-    // IF filter state for this comopnent, set it to selection.brush.init
-    if (this.state.filter[this.props.x] && this.state.filter[this.props.x].less && this.state.filter[this.props.x].greater){
-      if (this.state.filter[this.props.y] && this.state.filter[this.props.y].less && this.state.filter[this.props.y].greater){
-        vlspec.selection.brush.init = {"x": [this.state.filter[this.props.x].greater,this.state.filter[this.props.x].less], "y":[this.state.filter[this.props.y].greater,this.state.filter[this.props.y].less]}
-      }
-    }
-    if (this.props.z){
-      vlspec.encoding.color = {"field": this.props.z, "type": "nominal"}
-      vlspec.encoding.shape = {"field": this.props.z, "type": "nominal"}
-    }
-    vlspec.height = this.props.h*100 || 100
-    vlspec.width = this.props.w*100 || 100
-    let vl_view = new vegaView(vegaParse(vlCompile(vlspec, {logger: console}).spec))
-    vl_view.initialize(document.querySelector("#" + this.id))
-    vl_view.addDataListener('brush_store', (t,e)=> {
-      if (e.length >0 && e[0].fields.length > 1){
-        window.clearTimeout(this.lastEvent)
-        this.lastEvent = window.setTimeout(x=>{
-        },500)
-      }
-    })
-    vl_view.hover()
-    vl_view.run();
-  }
-  render() {
-    if(this.state.ready){
-      return <div id={this.id}></div>
-    } else {
-      return <p> waiting...</p>
-    }
-
-  }
-}
-
-export default ScatterPlot
diff --git a/source/component/SearchBar.js b/source/component/SearchBar.js
deleted file mode 100644
index 3e989e4..0000000
--- a/source/component/SearchBar.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import { MDBDataTable } from 'mdbreact';
-
-// should only have to worry about rendering
-class SearchBar extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-    this.table_data = {}
-    this.width = this.props.w * 100 || 100
-    this.height = this.props.h * 100 || 100
-    this.style = {width: this.width, height: this.height}
-    this.field = this.props.field || "__ALL"
-    this.field_text = "Search"
-    if (this.props.field){
-      this.field_text = this.props.field
-    }
-    this.handleSearch = this.handleSearch.bind(this)
-  }
-
-  handleSearch(e){
-    if (e.target && e.target.value){
-      var new_val = e.target.value
-      this.setState(x=>{x.value = new_val})
-      let new_filter = {}
-      new_filter[this.field] = {"regex":new_val}
-      this.filterIn(new_filter)
-    } else {
-      this.setState(x=>{x.value = ""})
-      let new_filter = {}
-      new_filter[this.field] = {"clear":""}
-      this.filterIn(new_filter)
-    }
-  }
-
-  render() {
-    if(this.state.ready){
-      return(<div id={this.id} key={this.id} style={this.style}>
-        <span>{this.field_text}:</span> <input type="text" value={this.state.value} id={this.id} onChange={this.handleSearch}></input>
-        </div>)
-    } else {
-      return <div id={this.id} key={this.id} className="vis-loading"><p> waiting...</p></div>
-    }
-
-  }
-}
-
-export default SearchBar
diff --git a/source/component/VegaLitePlot.js b/source/component/VegaLitePlot.js
deleted file mode 100644
index a139683..0000000
--- a/source/component/VegaLitePlot.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from "react";
-import BaseVisualization from "./BaseVisualization.js";
-import {
-  View as vegaView,
-  parse as vegaParse,
-  changeset as ChangeSet
-} from "vega";
-import { compile as vlCompile } from "vega-lite";
-
-// should only have to worry about rendering
-class VegaLitePlot extends BaseVisualization {
-  constructor(props, ctx) {
-    super(props, ctx);
-    this.style = { width: '100%', height: '100%' };
-    this.self = React.createRef();
-  }
-
-  componentWillMount(){
-
-  }
-
-  componentDidUpdate() {
-    if (this.state.ready) {
-      if (this.vl_view) {
-        var d;
-        if (this.props.allData) {
-          d = this.state.baseData;
-        } else {
-          d = this.state.filteredData;
-        }
-        let changeset = ChangeSet()
-          .remove(() => true)
-          .insert(d);
-        this.vl_view.change("source_0", changeset).run();
-      } else {
-        let spec = JSON.parse(this.props.spec);
-        if (this.props.allData) {
-          spec.data = { name: "source_0", values: this.state.baseData };
-        } else {
-          spec.data = { name: "source_0", values: this.state.filteredData };
-        }
-
-        // grab and set component's size
-        const rect = this.self.current.getBoundingClientRect();
-        spec.padding = 10;
-        spec.width = rect.width - spec.padding * 2;
-        spec.height = rect.height - spec.padding * 2;
-        spec.autosize = { type: "fit"};
-        // try to guess quant filter setup
-        if (
-          spec.selection &&
-          spec.selection.brush &&
-          spec.selection.brush.encodings &&
-          spec.selection.brush.encodings.length
-        ) {
-          var fields = [];
-          let candidate_state = {};
-          var can_render_filter = true;
-          for (var i = 0; i < spec.selection.brush.encodings.length; i++) {
-            let new_field =
-              spec.encoding[spec.selection.brush.encodings[i]].field;
-            if (
-              this.state.globalFilter[new_field] &&
-              this.state.globalFilter[new_field].less &&
-              this.state.globalFilter[new_field].greater
-            ) {
-              candidate_state[spec.selection.brush.encodings[i]] = [
-                this.state.globalFilter[new_field].greater,
-                this.state.globalFilter[new_field].less
-              ];
-            } else {
-              can_render_filter = false;
-            }
-          }
-          // set filter state
-          if (can_render_filter) {
-            spec.selection.brush.init = candidate_state;
-          }
-        }
-        
-
-        
-        this.vl_view = new vegaView(vegaParse(vlCompile(spec).spec));
-        this.vl_view.initialize(document.querySelector("#" + this.id));
-        this.vl_view.hover();
-        if (spec.selection && spec.selection.brush) {
-          this.vl_view.addDataListener("brush_store", (t, e) => {
-            if (e.length > 0 && e[0].fields.length > 0) {
-              window.clearTimeout(this.lastEvent);
-              this.lastEvent = window.setTimeout(x => {
-                var next_filter = {};
-                for (var j = 0; j < e[0].fields.length; j++) {
-                  let g_val = Math.min(...e[0].values[j]);
-                  let l_val = Math.max(...e[0].values[j]);
-                  next_filter[e[0].fields[j].field] = {
-                    greater: g_val,
-                    less: l_val
-                  };
-                }
-                this.filterIn(next_filter);
-              }, this.bufferTime);
-            }
-          });
-        }
-        this.vl_view.run();
-      }
-    }
-  }
-  render() {
-    if (this.state.ready) {
-      return (
-        <div
-          id={this.id}
-          ref={this.self}
-
-          style={this.style}
-        ></div>
-      );
-    } else {
-      return (
-        <div
-          id={this.id}
-          ref={this.self}
-          style={this.style}
-          className="vis-loading"
-        >
-          <p>waiting...</p>
-        </div>
-      );
-    }
-  }
-}
-
-export default VegaLitePlot;
diff --git a/source/component/VisSelect.js b/source/component/VisSelect.js
deleted file mode 100644
index 076d1dd..0000000
--- a/source/component/VisSelect.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import VisTypes from './VisTypes.js'
-
-// if we want a user to select their visualization
-
-class VisSelect extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.height = props.h || props.height || 1
-    this.width = props.w || props.width || 1
-    this.state = {selected: null};
-    this.selectVis = this.selectVis.bind(this);
-  }
-  
-  selectVis(selection){
-    if (VisTypes.hasOwnProperty(selection)){
-      this.setState(x=>{x.selection=selection});
-      this.vis = VisTypes[this.state.selection]
-    } else {
-      alert ("that vis does not seem to exist.")
-      console.error(selection + "not found in VisTypes.js")
-    }
-  }
-
-  render() {
-    if (this.state.selection){
-      const SelectedVis = this.vis
-      return <SelectedVis h="{this.height}" w="{this.width}"/>
-    } else {
-      // todo make interactive
-      return <p>{JSON.stringify(VisTypes.keys())}</p>;
-    }
-
-  }
-}
-
-export default VisSelect
diff --git a/source/component/VisTypes.js b/source/component/VisTypes.js
deleted file mode 100644
index c5c712d..0000000
--- a/source/component/VisTypes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// so we can use our visualizations with one import
-import SampleVisualization from './SampleVisualization.js'
-import Histogram from './Histogram.js'
-import BarChart from './BarChart.js'
-import ScatterPlot from './ScatterPlot.js'
-import VegaLitePlot from './VegaLitePlot.js'
-import PureVegaLitePlot from './PureVegaLitePlot.js'
-import DataTable from './DataTable.js'
-import SearchBar from './SearchBar.js'
-import ImageGrid from './ImageGrid.js'
-import Placeholder from './Placeholder.js'
-
-var VisTypes = {}
-VisTypes.Sample = SampleVisualization
-VisTypes.Histogram = Histogram
-VisTypes.BarChart = BarChart
-VisTypes.ScatterPlot = ScatterPlot
-VisTypes.VegaLitePlot = VegaLitePlot
-VisTypes.PureVegaLitePlot = PureVegaLitePlot
-VisTypes.DataTable = DataTable
-VisTypes.SearchBar = SearchBar
-VisTypes.ImageGrid = ImageGrid
-VisTypes.Placeholder = Placeholder
-
-export default VisTypes
diff --git a/source/component/VisualTools/Chart/BarChart.js b/source/component/VisualTools/Chart/BarChart.js
index cd56de2..1f58bc3 100644
--- a/source/component/VisualTools/Chart/BarChart.js
+++ b/source/component/VisualTools/Chart/BarChart.js
@@ -49,7 +49,7 @@ export default class BarChart extends Component {
     }
     shouldComponentUpdate ( nextProps, nextState ) {
         // TODO LIST
-        console.log('bar shouldComponentUpdate')
+        // console.log('bar shouldComponentUpdate')
         //console.log(nextProps.filters, this.props.filters)
         // const flag = isEquivalent(nextProps.filters, this.props.filters);
         // console.log(flag)
@@ -101,7 +101,7 @@ export default class BarChart extends Component {
     }
 
     componentDidUpdate() {
-        console.log('bar update',this.props)
+        // console.log('bar update',this.props)
         let data = [];
         if(this.props.filters.length > 0){
             data = this.transform(this.props.filterData, this.props.fields.x)
@@ -111,8 +111,6 @@ export default class BarChart extends Component {
         this.filterbars= this.drawBar(this.viewer,data,'ft');
     }
     componentDidMount() {
-
-        console.log('bar',this.props)
         const rect = this.self.current.getBoundingClientRect();
         this.innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
         this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
diff --git a/source/component/VisualTools/Chart/HorizontalBarChart.js b/source/component/VisualTools/Chart/HorizontalBarChart.js
index e875749..93dbb86 100644
--- a/source/component/VisualTools/Chart/HorizontalBarChart.js
+++ b/source/component/VisualTools/Chart/HorizontalBarChart.js
@@ -48,8 +48,8 @@ export default class HorizontalBarChart extends Component {
         return xScale;
     }
     shouldComponentUpdate ( nextProps, nextState ) {
-        // TODO LIST
-        console.log('bar shouldComponentUpdate')
+        // // TODO LIST
+        // console.log('bar shouldComponentUpdate')
         //console.log(nextProps.filters, this.props.filters)
         // const flag = isEquivalent(nextProps.filters, this.props.filters);
         // console.log(flag)
@@ -98,7 +98,7 @@ export default class HorizontalBarChart extends Component {
     }
 
     componentDidUpdate() {
-        console.log('bar update',this.props)
+        // console.log('bar update',this.props)
         let data = [];
         if(this.props.filters.length > 0){
             data = this.transform(this.props.filterData, this.props.fields.y)
@@ -110,7 +110,6 @@ export default class HorizontalBarChart extends Component {
     }
     componentDidMount() {
 
-        console.log('bar',this.props)
         const rect = this.self.current.getBoundingClientRect();
         const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
         this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
diff --git a/source/component/VisualTools/Chart/PieChart.js b/source/component/VisualTools/Chart/PieChart.js
index 701631c..10e678a 100644
--- a/source/component/VisualTools/Chart/PieChart.js
+++ b/source/component/VisualTools/Chart/PieChart.js
@@ -26,7 +26,7 @@ export default class PieChart extends Component {
   }
 
   componentDidUpdate() {
-    console.log('pie did update')
+    // console.log('pie did update')
     const filters = this.props.filters.filter(f=>f.id==this.props.id)
     if(filters.length > 0){ // has filters
       this.pies
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.css b/source/component/VisualTools/VisDataTable/VisDataTable.css
index cd160f1..c205021 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.css
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.css
@@ -1,20 +1,103 @@
 /* VisDataTable customized style */
+
+.evenRow {
+  background-color: #ffffff;
+  border-bottom: #d1d1d1 1px dotted;
+}
+.oddRow {
+  background-color: #f9f9f9;
+  border-bottom: #d1d1d1 1px dotted;
+}
+
 .ReactVirtualized__Table {
-    font-size: .7rem;
+  font-size: 0.8rem;
+  display: inline-block;
+}
+
+.ReactVirtualized__Table__headerColumn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: var(--light);
+  font-size: 0.8rem;
+  text-transform: none;
 }
 
-.headerRow {
+.ReactVirtualized__Table__headerRow {
     border-bottom: 1px solid #d1d1d1;
-    background-color: #ffffff;
-    font-size: .85rem;
-    text-transform: none;
+}
+.ReactVirtualized__Table__rowColumn {
+  flex-direction: row;
+  display: flex;
+  justify-content: center;
+  color: var(--dark);
+  cursor: default;
 }
 
-.evenRow {
-    background-color: #ffffff;
-    border-bottom: #d1d1d1 1px dotted;
+.ReactVirtualized__Table__headerTruncatedText {
+  flex: auto;
 }
-.oddRow {
-    background-color: #f9f9f9;
-    border-bottom: #d1d1d1 1px dotted;
-}
\ No newline at end of file
+
+.DragHandle {
+  flex: 0 0 16px;
+  z-index: 2;
+  cursor: col-resize;
+  /* color: #0085ff; */
+  color: var(--dark);
+}
+.DragHandle:hover {
+  background-color: #eeeeee;
+}
+
+.DragHandleActive,
+.DragHandleActive:hover {
+  color: var(--dark);
+  z-index: 3;
+}
+
+.DragHandleIcon {
+  flex: 0 0 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+/* custom tips  */
+.bs-tooltip-top .arrow::before {
+  top: -1;
+  border-width: .5rem .5rem 0;
+  border-top-color: var(--light);
+}
+.bs-tooltip-bottom .arrow::before {
+  bottom: -1;
+  border-width: 0 .5rem .5rem;
+  border-bottom-color: var(--light);
+}
+.bs-tooltip-right .arrow::before {
+  right: -1;
+  border-width: .5rem .5rem 0 .5rem;
+  border-right-color: var(--light);
+}
+.bs-tooltip-left .arrow::before {
+  left: -1;
+  border-width: .5rem 0 .5rem 0.5rem;
+  border-left-color: var(--light);
+}
+
+/* .tooltip.show {
+  opacity: 1;
+  
+} */
+
+.tooltip .tooltip-inner {
+  color:var(--dark);
+  font-size: .8rem;
+  font-weight: bolder;
+  background-color: var(--light);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* .setting {
+
+} */
+
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.js b/source/component/VisualTools/VisDataTable/VisDataTable.js
index fa876bc..44fb094 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.js
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.js
@@ -1,21 +1,153 @@
 import React, { Component } from 'react'
 import {AutoSizer, Column, Table} from 'react-virtualized';
+import Draggable from "react-draggable";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEllipsisV, faGripLinesVertical, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+import VisDataTableControl from './VisDataTableControl/VisDataTableControl';
+import arrayMove from 'array-move';
 import './VisDataTable.css';
 export default class VisDataTable extends Component {
+  constructor(props) {
+    super(props);
+    const fWidth = 1/this.props.fields.length;
+    const fields = this.props.fields.map(f=>{return {...f,width:fWidth,isShow:true}})
+
+    this.state = {
+      fields: fields,
+      width:null,
+      isCtrlShow:false
+    }
+    this.autoSizer = React.createRef();
+    this.headerRenderer = this.headerRenderer.bind(this)
+    this.cellRenderer = this.cellRenderer.bind(this)
+    this.resizeRow = this.resizeRow.bind(this)
+    this.onResize = this.onResize.bind(this)
+    this.onSortEnd = this.onSortEnd.bind(this)
+    this.onCheckChangedHandler = this.onCheckChangedHandler.bind(this)
+    this.onAllCheckHandler = this.onAllCheckHandler.bind(this)
+  }
   _rowClassName({index}) {
     if (index < 0) {
       return 'headerRow';
     } else {
       return index % 2 === 0 ? 'evenRow' : 'oddRow';
     }
-  }  
-  
+  }
+  cellRenderer(d, f){
+    return (<React.Fragment key={f.dataKey}>
+      <OverlayTrigger
+         placement="bottom"
+         delay={{ show: 500, hide: 500 }}
+         overlay={<Tooltip>{d.cellData}</Tooltip>}
+       >
+        <div className="ReactVirtualized__Table__headerTruncatedText">
+          {f.link?<a href={f.link.url+d.rowData[f.link.field]}>{d.cellData}</a>:d.cellData}
+        </div>
+       </OverlayTrigger>
+       
+   </React.Fragment>)
+  }
+
+  headerRenderer({
+    columnData,
+    dataKey,
+    disableSort,
+    label,
+    sortBy,
+    sortDirection
+  }) {
+    const filteredFields = this.state.fields.filter(f=>f.isShow);
+   
+    return (
+      <React.Fragment key={dataKey}>
+         <OverlayTrigger
+            placement="top-start"
+            delay={{ show: 500, hide: 500 }}
+            overlay={<Tooltip>{label}</Tooltip>}
+          >
+            <div className="ReactVirtualized__Table__headerTruncatedText">
+              {label}
+            </div>
+          </OverlayTrigger>
+        <Draggable
+          axis="x"
+          defaultClassName="DragHandle"
+          defaultClassNameDragging="DragHandleActive"
+          onDrag={(event, { deltaX }) =>{
+            this.resizeRow({
+              dataKey,
+              deltaX
+            })}
+          }
+          position={{ x: 0 }}
+          zIndex={999}
+        ><span className="DragHandleIcon">⋮</span>
+        </Draggable>
+          
+      </React.Fragment>
+    );
+  }
+
+
+  resizeRow({ dataKey, deltaX }){
+    const prevFields = this.state.fields;
+    const idx = prevFields.findIndex(f=>f.dataKey==dataKey);
+    
+    const percentDelta = deltaX / this.state.width;
+    prevFields[idx].width = prevFields[idx].width + percentDelta;
+    
+    if(idx<prevFields.length-1){
+      prevFields[idx+1].width =prevFields[idx+1].width - percentDelta;
+    }
+    
+    this.setState({field:[...prevFields]})
+  }
+  componentDidMount() {
+    console.log(this.autoSizer)
+  }
+
+  onResize({height, width}){
+    this.setState({width:width})
+  }
+  onSortEnd({oldIndex, newIndex}){
+    this.setState(({fields}) => ({
+      fields: arrayMove(fields, oldIndex, newIndex),
+    }));
+  }
+  onCheckChangedHandler(e){
+    
+    const value = e.target.value; 
+    const checked = e.target.checked;
+    this.setState(({fields}) => ({
+      fields: fields.map(f=>{
+        f.isShow = f.dataKey == value?checked:f.isShow;
+        return {...f}
+      }),
+    }));
+    // <VisDataTableControl list={fields} onSortEnd={this.onSortEnd} />
+  }
+  onAllCheckHandler() {
+    console.log('onAllCheckHandler')
+    this.setState(({fields})=>({
+      fields: fields.map(f=>{
+        f.isShow = true;
+        return {...f}
+      }),
+    }));
+  }
   render() {
-        const {data, fields, filterData, filters} = this.props;
+        const {data, filterData, filters} = this.props;
+        const fields = this.state.fields;
         const final_data = filters.length>0?filterData:data;
 
-        return <div style={{ width: "100%", height: "100%" }}>
-          <AutoSizer>
+        return <div  style={{ width: "100%", height: "100%" }}>
+          <VisDataTableControl list={fields} onSortEnd={this.onSortEnd} onCheckChanged={this.onCheckChangedHandler} onAllCheck={this.onAllCheckHandler}/>
+          <AutoSizer 
+            ref={this.autoSizer}
+            onResize={this.onResize}
+          >
             {({width, height}) => (
               <Table
                 width={width}
@@ -25,20 +157,14 @@ export default class VisDataTable extends Component {
                 rowClassName={this._rowClassName}
                 rowCount={final_data.length}
                 rowGetter={({index}) => final_data[index]}>
-                {fields.map((f, id)=><Column
-                  key={id} dataKey={f.dataKey}
+                {fields.filter(f=>f.isShow).map((f, id)=><Column
+                  key={id}
+                  dataKey={f.dataKey}
                   label={f.label}
                   width={width*f.width}
-                  cellRenderer = {(d)=>{
-                    
-                    if(f.link) {
-                      const URL = `${f.link.url+d.rowData[f.link.field]}`
-                      return <a href={URL}>{d.cellData}</a>;
-                    } else {
-                      return d.cellData;
-                    }
-                    
-                  }}
+                  headerRenderer={this.headerRenderer}
+                  cellRenderer={(d)=>{return this.cellRenderer(d,f)}}
+                  
                 />)}
               </Table>
             )}
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css
new file mode 100644
index 0000000..7344daf
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css
@@ -0,0 +1,20 @@
+.popover {
+    width: 8rem;
+}
+
+.popover-body {
+    padding: 0;
+}
+.popover-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 .3rem;
+    /* margin: .2rem; */
+    /* background-color: var(--light); */
+    font-size: .8rem;
+    font-weight: bolder;
+    /* text-transform: none;
+    border: solid 1px #c2c2c2;
+    color: var(--dark); */
+}
\ No newline at end of file
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
new file mode 100644
index 0000000..2557604
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
@@ -0,0 +1,64 @@
+import React, { Component, useState } from 'react'
+import PropTypes from 'prop-types'
+import {
+    sortableContainer
+} from 'react-sortable-hoc';
+import Popover from 'react-bootstrap/Popover'
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
+import { VisSortableItem } from "./VisSortableItem/VisSortableItem"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCog, faCheckSquare, faArrowsAltV } from '@fortawesome/free-solid-svg-icons'
+import Button from 'react-bootstrap/Button';
+
+import './VisDataTableControl.css';
+const SortableContainer = sortableContainer(({ children }) => {
+    return <div>{children}</div>;
+});
+
+export class VisDataTableControl extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            show: false
+        }
+        this.onClickHandler = this.onClickHandler.bind(this);
+        this.renderPopOver = this.renderPopOver.bind(this);
+    }
+    onClickHandler() {
+        this.setState({ show: !this.state.show })
+    }
+
+    renderPopOver(props) {
+        return (<Popover {...props}>
+            <Popover.Title as="div" >
+            <div className="text-primary" style={{padding:"0 .5rem"}} ><FontAwesomeIcon icon={faArrowsAltV}/></div>    
+            <div className="text-primary" >Fields</div>
+            <Button variant="light text-primary" size="sm" onClick={this.props.onAllCheck} style={{fontSize:'.85rem'}} className="py-0 px-1 border-gray">
+                    <FontAwesomeIcon icon={faCheckSquare} />
+            </Button>
+            
+            </Popover.Title>
+            <Popover.Content>
+                <SortableContainer onSortEnd={({oldIndex, newIndex})=>{
+                    document.body.style.cursor = 'default';
+                    this.props.onSortEnd({oldIndex, newIndex})
+                    }} onSortStart={() => (document.body.style.cursor = 'grabbing')} useDragHandle>
+                    {this.props.list.map((item, index) => (
+                        <VisSortableItem key={`item-${item.dataKey}`} {...item} index={index} onCheckChanged={this.props.onCheckChanged} />
+                    ))}
+                </SortableContainer>
+            </Popover.Content>
+        </Popover>);
+    }
+    render() {
+        const style = { position: 'absolute', right: 0, color:'var(--gray)' }
+        return (
+            <OverlayTrigger trigger="click" placement="bottom-end" overlay={this.renderPopOver}>
+                <Button variant="light" style={style} className="py-0 px-1 border-gray" onClick={this.onClickHandler} active={this.state.show}>
+                    <FontAwesomeIcon icon={faCog} />
+                </Button>
+            </OverlayTrigger>
+        )
+    }
+}
+export default VisDataTableControl;
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css
new file mode 100644
index 0000000..78a61c5
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css
@@ -0,0 +1,39 @@
+.vis-sortable-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 .3rem;
+    margin: .2rem;
+    background-color: var(--light);
+    font-size: 0.8rem;
+    text-transform: none;
+    border: solid 1px #c2c2c2;
+    z-index: 1100;
+    color: var(--gray-dark);
+}
+.vis-sortable-item .drag-handle {
+    cursor: grab;
+}
+.vis-sortable-item:focus .drag-handle,
+.vis-sortable-item:active .drag-handle {
+    cursor: grabbing;
+}
+.vis-sortable-item .input-box {
+    display: flex;
+    align-items: center;
+}
+.vis-sortable-item .truncated-text {
+    cursor: default;
+    display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 0 .5rem;
+    font-weight: bolder;
+    
+}
+
+/* .vis-sortable-item input[type="checkbox"] {
+
+} */
\ No newline at end of file
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js
new file mode 100644
index 0000000..8cb53ff
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGripLines } from '@fortawesome/free-solid-svg-icons'
+import {
+    sortableElement,
+    sortableHandle,
+  } from 'react-sortable-hoc';
+import './VisSortableItem.css';
+
+const DragHandle = sortableHandle(() => <div className="drag-handle"><FontAwesomeIcon icon={faGripLines} /></div>);
+
+export const VisSortableItem = sortableElement((props) => (
+  <div className="vis-sortable-item ">
+    <DragHandle />
+    <div className="truncated-text" title={props.label} >{props.label}</div>
+
+    <div className="input-box"><input type="checkbox" checked={props.isShow} onChange={props.onCheckChanged} value={props.dataKey} /></div>
+    
+  </div>
+));
+
diff --git a/source/index.js b/source/index.js
index cd2a2b2..340e4d2 100644
--- a/source/index.js
+++ b/source/index.js
@@ -1,9 +1,4 @@
 import React from "react";
-import DataManager from "./DataManager.js";
-import RestDataSource from "./xfRestDataSource.js";
-import VisTypes from "./component/VisTypes.js";
-import vegaSpecs from "./vegaSpecs.js";
-import ResetButton from "./component/ResetButton.js";
 import HomeButton from "./component/HomeButton.js";
 import { render } from "react-dom";
 import Spinner from 'react-bootstrap/Spinner'
@@ -162,7 +157,6 @@ class App extends React.Component {
   componentDidMount() {
     if (_CONFIG_.DATA_FORMAT === 'csv') {
       d3.csv(_CONFIG_.DATA_RESOURCE_URL,d=>covertRaw(d)).then(data=>{
-        console.log('csv')
         this.setState({
           isLoaded: true,
           data: data
@@ -173,7 +167,6 @@ class App extends React.Component {
       fetch(_CONFIG_.DATA_RESOURCE_URL, {
         mode: 'cors'
       }).then(res => res.json()).then(data => {
-        console.log('json')
         // TODO need a replace method to replace null, undefined etc.
         data.forEach(d => {// clear up null value
           if (d.disease_type == null) d.disease_type = 'NA'
@@ -232,24 +225,12 @@ class App extends React.Component {
               TCIA Clinical Data Explorer
           </span>
           <HomeButton/>
-            <div style={{ width: '450px' }}>
-              <ProgressBar
-                min={0}
-                max={data.length}
-                now={progressAttrs.now}
-                label={progressAttrs.label} />
-            </div>
-            {/* <button
-            id="gogo"
-            className="clear-btn"
-            title="Exploration"
-            onClick={() => this.removeFiltersHandler('ALL')}
-          >
-            <span className="fa fa-long-arrow-alt-left">{data.length} </span> Back to Search
-            Portal
-          </button>
-          <ResetButton id="rb1" />
-          <VisTypes.Sample id="count1" /> */}
+          <ProgressBar style={{ width: '30rem' }} className="border border-light bg-light"
+            min={0}
+            variant="success"
+            max={data.length}
+            now={progressAttrs.now}
+            label={progressAttrs.label} />
           </nav>
           <FilterOperationPanel filters={filters} filterRemove={this.removeFiltersHandler.bind(this)} />
           <VisGridView
diff --git a/source/style/main.scss b/source/style/main.scss
index c2cb223..fa70084 100644
--- a/source/style/main.scss
+++ b/source/style/main.scss
@@ -76,16 +76,10 @@ h1{
   user-select: none;
 }
 .progress {
-  height: 1.5rem;
-  background-color:#C0C0C0;
-  border: solid 2px #000080;
-  border-radius:.25rem;
+  height: 1rem;
 }
 .progress-bar {
-  color:#F5FFFA;
   font-weight: bold;
-  overflow: initial;
-  background-color: #4682B4;
 }
 .btn, .btn:focus{
   box-shadow: none !important;

From cad4dd131e8cd23ba9fc59951265f8464e14301a Mon Sep 17 00:00:00 2001
From: Jasox NaN <linanldj@gmail.com>
Date: Fri, 15 Jan 2021 14:12:29 -0500
Subject: [PATCH 08/23] 1. sylish the <HomeButton/> component. 2. optimized
 partial components. 3. add sortable headers on <VisDataTable>

---
 .../Content/ContentPanel.js                   |   4 +-
 .../FieldSelectionPanel.js                    |   4 +-
 .../FilterOperation/FilterOperation.js        |   4 +-
 .../FilterOperationPanel.js                   |   4 +-
 source/component/HomeButton.js                |   7 +-
 .../VisGridView/VisGridItem/VisGridItem.js    |   4 +-
 .../VisGridItemContent/VisGridItemContent.js  |   4 +-
 .../VisGridItemControl/VisGridItemControl.js  |   4 +-
 .../VisGridItemHeader/VisGridItemHeader.js    |   4 +-
 .../Layout/VisGridView/VisGridView.js         |  17 +-
 .../component/VisualTools/Chart/BarChart.js   |  12 +-
 .../VisualTools/Chart/HorizontalBarChart.js   |  12 +-
 source/component/VisualTools/Chart/KMCurve.js |  17 +-
 .../component/VisualTools/Chart/PieChart.js   |   4 +-
 .../VisualTools/Chart/ScatterChart.js         |   5 +-
 .../VisualTools/VisDataTable/VisDataTable.css |   2 +
 .../VisualTools/VisDataTable/VisDataTable.js  | 202 +++++++++---------
 .../VisDataTableControl.js                    |  11 +-
 source/index.js                               |  29 ++-
 19 files changed, 155 insertions(+), 195 deletions(-)

diff --git a/source/component/FieldSelectionPanel/Content/ContentPanel.js b/source/component/FieldSelectionPanel/Content/ContentPanel.js
index 5281e70..ca4eb0e 100644
--- a/source/component/FieldSelectionPanel/Content/ContentPanel.js
+++ b/source/component/FieldSelectionPanel/Content/ContentPanel.js
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import Item from "./Item";
 import Footer from "./Footer";
 
-class ContentPanel extends Component {
+class ContentPanel extends PureComponent {
   constructor(props) {
     super(props);
   }
diff --git a/source/component/FieldSelectionPanel/FieldSelectionPanel.js b/source/component/FieldSelectionPanel/FieldSelectionPanel.js
index 7d283d2..90ea7f8 100644
--- a/source/component/FieldSelectionPanel/FieldSelectionPanel.js
+++ b/source/component/FieldSelectionPanel/FieldSelectionPanel.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 
 import Header from "./Header/Header";
 import SearchPanel from "./SearchPanel";
@@ -8,7 +8,7 @@ import ContentPanel from "./Content/ContentPanel";
 /* css */
 // props -> title name
 
-class FieldeSlectionPanel extends Component {
+class FieldeSlectionPanel extends PureComponent {
   constructor(props) {
     super(props);
     
diff --git a/source/component/FilterOperationPanel/FilterOperation/FilterOperation.js b/source/component/FilterOperationPanel/FilterOperation/FilterOperation.js
index af6da95..ecf2e58 100644
--- a/source/component/FilterOperationPanel/FilterOperation/FilterOperation.js
+++ b/source/component/FilterOperationPanel/FilterOperation/FilterOperation.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import Badge from 'react-bootstrap/Badge'
 import Button from 'react-bootstrap/Button'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/fontawesome-free-solid'
 import './FilterOperation.css';
-export default class FilterOperation extends Component {
+export default class FilterOperation extends PureComponent {
     formatValues(values){
         if(Array.isArray(values)){
 
diff --git a/source/component/FilterOperationPanel/FilterOperationPanel.js b/source/component/FilterOperationPanel/FilterOperationPanel.js
index 80ee090..47bbac4 100644
--- a/source/component/FilterOperationPanel/FilterOperationPanel.js
+++ b/source/component/FilterOperationPanel/FilterOperationPanel.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import FilterOperation from './FilterOperation/FilterOperation.js'
 import Button from 'react-bootstrap/Button'
 import './FilterOperationPanel.css'
 
-export default class FilterOperationPanel extends Component {
+export default class FilterOperationPanel extends PureComponent {
 
     
     render() {
diff --git a/source/component/HomeButton.js b/source/component/HomeButton.js
index 90fc15e..39e1637 100644
--- a/source/component/HomeButton.js
+++ b/source/component/HomeButton.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import BaseVisualization from './BaseVisualization.js'
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+import Button from 'react-bootstrap/Button'
 class HomeButton extends BaseVisualization {
   constructor(props, ctx) {
     super(props, ctx);
@@ -12,8 +14,7 @@ class HomeButton extends BaseVisualization {
     window.location.href = homeUrl;
   }
   render() {
-    return <button id={this.id} onClick={()=>{this.goHome()}}>HOME</button>
-
+    return <Button size="lg" id={this.id} onClick={()=>{this.goHome()}}><FontAwesomeIcon icon={faHome}/></Button>
   }
 }
 
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
index b05c14a..14f57f0 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
@@ -1,11 +1,11 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import VisGridItemContent from "./VisGridItemContent/VisGridItemContent";
 import VisGridItemHeader from "./VisGridItemHeader/VisGridItemHeader";
 
 // css class
 import "./VisGridItem.css";
 
-export default class VisGridItem extends Component {
+export default class VisGridItem extends PureComponent {
   constructor(props) {
     super(props);
     this.state = { hover: false };
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
index 7d2e948..19e6517 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
@@ -1,4 +1,4 @@
-import React, { Component, Suspense } from "react";
+import React, { PureComponent, Suspense } from "react";
 // import PropTypes from "prop-types";
 
 // css class
@@ -42,7 +42,7 @@ const _style1 = {
   visibility: "visible"
 };
 
-export default class VisGridItemContent extends Component {
+export default class VisGridItemContent extends PureComponent {
   constructor(props) {
     super(props);
   }
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js
index 028bd36..1bad5bb 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemControl/VisGridItemControl.js
@@ -1,4 +1,4 @@
-import React, { Component, Suspense } from "react";
+import React, { PureComponent, Suspense } from "react";
 import Button from 'react-bootstrap/Button';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -9,7 +9,7 @@ import { faCompressArrowsAlt, faExpandArrowsAlt } from '@fortawesome/free-solid-
 // css class
 import "./VisGridItemControl.css";
 
-export default class VisGridItemControl extends Component {
+export default class VisGridItemControl extends PureComponent {
   constructor(props) {
     super(props);
   }
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
index 4dd1809..f2a26b1 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import VisGridItemControl from "../VisGridItemControl/VisGridItemControl";
 // css class
@@ -6,7 +6,7 @@ import "./VisGridItemHeader.css";
 const style = {
 
 };
-export default class VisGridItemHeader extends Component {
+export default class VisGridItemHeader extends PureComponent {
   constructor(props) {
     super(props);
     
diff --git a/source/component/Layout/VisGridView/VisGridView.js b/source/component/Layout/VisGridView/VisGridView.js
index 48f7b01..af10930 100644
--- a/source/component/Layout/VisGridView/VisGridView.js
+++ b/source/component/Layout/VisGridView/VisGridView.js
@@ -1,6 +1,4 @@
-import React, {Component} from "react";
-import { Responsive, WidthProvider, GridItem } from "react-grid-layout";
-
+import React, {PureComponent} from "react";
 import GridLayout from "react-grid-layout";
 import VisGridItem from "./VisGridItem/VisGridItem";
 import { getLayoutConfig } from "../../../common/utils";
@@ -11,15 +9,8 @@ import "./VisGridView.css";
 import _CONFIG_ from "../../../../config/vis-config.json";
 
 // enumeration for 
-import VisTypeEnum from "../../VisualTools/VisTypeEnum.json";
-import { config } from "@fortawesome/fontawesome-svg-core";
-
-// import 
-const _config = {
-  layout: []
-};
 
-class VisGridView extends Component {
+class VisGridView extends PureComponent {
   constructor(props) {
     super(props);
     this.self = React.createRef();
@@ -87,9 +78,6 @@ class VisGridView extends Component {
   }
 
   componentDidMount() {
-    // TODO loading config
-    //
-    console.log('componentDidMount')
     this.updateViewSize();
     // TODO debouce
     window.addEventListener("resize", this.updateViewSize.bind(this));
@@ -101,7 +89,6 @@ class VisGridView extends Component {
 
 
   render() {
-    console.log(this.state)
     if (this.state.config.layout.length > 0) {
       let __vis = this.state.config.layout.map((item, index) => (
         
diff --git a/source/component/VisualTools/Chart/BarChart.js b/source/component/VisualTools/Chart/BarChart.js
index 1f58bc3..60d065b 100644
--- a/source/component/VisualTools/Chart/BarChart.js
+++ b/source/component/VisualTools/Chart/BarChart.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import {isEquivalent} from '../../../common/utils.js'
 import * as d3 from "d3";
 
-export default class BarChart extends Component {
+export default class BarChart extends PureComponent {
     constructor(props) {
         super(props);
         this.self = React.createRef();
@@ -47,14 +47,6 @@ export default class BarChart extends Component {
         .range([height, 0]);
         return yScale;
     }
-    shouldComponentUpdate ( nextProps, nextState ) {
-        // TODO LIST
-        // console.log('bar shouldComponentUpdate')
-        //console.log(nextProps.filters, this.props.filters)
-        // const flag = isEquivalent(nextProps.filters, this.props.filters);
-        // console.log(flag)
-        return true;
-    }
 
     drawBar(selection, data, className='og') {
         const update_bars = selection.selectAll(`rect.${className}`).data(data,d=> d[this.state.fields.x])
diff --git a/source/component/VisualTools/Chart/HorizontalBarChart.js b/source/component/VisualTools/Chart/HorizontalBarChart.js
index 93dbb86..5453cc3 100644
--- a/source/component/VisualTools/Chart/HorizontalBarChart.js
+++ b/source/component/VisualTools/Chart/HorizontalBarChart.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import {isEquivalent} from '../../../common/utils.js'
 import * as d3 from "d3";
 
-export default class HorizontalBarChart extends Component {
+export default class HorizontalBarChart extends PureComponent {
     constructor(props) {
         super(props);
         this.self = React.createRef();
@@ -47,14 +47,6 @@ export default class HorizontalBarChart extends Component {
         .range([0, width]);
         return xScale;
     }
-    shouldComponentUpdate ( nextProps, nextState ) {
-        // // TODO LIST
-        // console.log('bar shouldComponentUpdate')
-        //console.log(nextProps.filters, this.props.filters)
-        // const flag = isEquivalent(nextProps.filters, this.props.filters);
-        // console.log(flag)
-        return true;
-    }
 
     drawBar(selection, data, className='og') {
         const update_bars = selection.selectAll(`rect.${className}`).data(data,d=> d[this.state.fields.y])
diff --git a/source/component/VisualTools/Chart/KMCurve.js b/source/component/VisualTools/Chart/KMCurve.js
index de7dfc2..b2b3263 100644
--- a/source/component/VisualTools/Chart/KMCurve.js
+++ b/source/component/VisualTools/Chart/KMCurve.js
@@ -1,16 +1,11 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import {isEquivalent} from '../../../common/utils.js'
 import * as d3 from "d3";
 
-function getRandomIntInclusive(min, max) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive 
-}
 function isUndefined(d){
     return d==undefined||d==null||(typeof d === 'string' && d.toLowerCase()==`na`)
 }
-export default class KMCurve extends Component {
+export default class KMCurve extends PureComponent {
     constructor(props) {
         super(props);
         this.self = React.createRef();
@@ -75,14 +70,8 @@ export default class KMCurve extends Component {
         
         return rs;
         
-    }    
-    shouldComponentUpdate ( nextProps, nextState ) {
-        // TODO LIST
-        //console.log(nextProps.filters, this.props.filters)
-        // const flag = isEquivalent(nextProps.filters, this.props.filters);
-        // console.log(flag)
-        return true;
     }
+    
     drawLine(viewer, points, color){
         const line = d3.line()
         .curve(d3.curveStepAfter)
diff --git a/source/component/VisualTools/Chart/PieChart.js b/source/component/VisualTools/Chart/PieChart.js
index 10e678a..0af37a5 100644
--- a/source/component/VisualTools/Chart/PieChart.js
+++ b/source/component/VisualTools/Chart/PieChart.js
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import * as d3 from "d3";
 
-export default class PieChart extends Component {
+export default class PieChart extends PureComponent {
   constructor(props) {
     super(props);
     this.self = React.createRef();
diff --git a/source/component/VisualTools/Chart/ScatterChart.js b/source/component/VisualTools/Chart/ScatterChart.js
index 33743ee..66b50c9 100644
--- a/source/component/VisualTools/Chart/ScatterChart.js
+++ b/source/component/VisualTools/Chart/ScatterChart.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import {numFixed} from '../../../common/utils.js'; 
 import * as d3 from "d3";
 import "./style.css";
-export default class ScatterChart extends Component {
+export default class ScatterChart extends PureComponent {
     constructor(props) {
         super(props);
         this.self = React.createRef();
@@ -39,7 +39,6 @@ export default class ScatterChart extends Component {
     }
 
     componentDidUpdate(){
-        console.log('componentDidUpdate')
         if(this.props.filters.length > 0){
             this.circles.attr('class', d=> this.props.filterData.includes(d)?'brushed':'non_brushed')
         }else{
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.css b/source/component/VisualTools/VisDataTable/VisDataTable.css
index c205021..e944993 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.css
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.css
@@ -21,11 +21,13 @@
   background-color: var(--light);
   font-size: 0.8rem;
   text-transform: none;
+  outline: none;
 }
 
 .ReactVirtualized__Table__headerRow {
     border-bottom: 1px solid #d1d1d1;
 }
+
 .ReactVirtualized__Table__rowColumn {
   flex-direction: row;
   display: flex;
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.js b/source/component/VisualTools/VisDataTable/VisDataTable.js
index 44fb094..66163be 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.js
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.js
@@ -1,23 +1,21 @@
-import React, { Component } from 'react'
-import {AutoSizer, Column, Table} from 'react-virtualized';
+import React, { Component, PureComponent } from 'react'
+import { AutoSizer, Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
 import Draggable from "react-draggable";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisV, faGripLinesVertical, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import Tooltip from 'react-bootstrap/Tooltip';
+import { faSortDown, faSortUp, faSort } from '@fortawesome/free-solid-svg-icons';
 import VisDataTableControl from './VisDataTableControl/VisDataTableControl';
 import arrayMove from 'array-move';
 import './VisDataTable.css';
-export default class VisDataTable extends Component {
-  constructor(props) {
-    super(props);
-    const fWidth = 1/this.props.fields.length;
-    const fields = this.props.fields.map(f=>{return {...f,width:fWidth,isShow:true}})
-
+export default class VisDataTable extends PureComponent {
+  constructor(props, context) {
+    super(props, context);
+    const fWidth = 1 / this.props.fields.length;
+    const fields = this.props.fields.map(f => { return { ...f, width: fWidth, isShow: true } })
     this.state = {
       fields: fields,
-      width:null,
-      isCtrlShow:false
+      width: null,
+      sortBy :null,
+      sortDirection: null
     }
     this.autoSizer = React.createRef();
     this.headerRenderer = this.headerRenderer.bind(this)
@@ -27,27 +25,26 @@ export default class VisDataTable extends Component {
     this.onSortEnd = this.onSortEnd.bind(this)
     this.onCheckChangedHandler = this.onCheckChangedHandler.bind(this)
     this.onAllCheckHandler = this.onAllCheckHandler.bind(this)
+    this.sortHandler = this.sortHandler.bind(this);
+    this.getSortData = this.getSortData.bind(this);
+  }
+  sortHandler({ sortBy, sortDirection }) {
+    this.setState({ sortBy, sortDirection });
   }
-  _rowClassName({index}) {
+  _rowClassName({ index }) {
     if (index < 0) {
       return 'headerRow';
     } else {
       return index % 2 === 0 ? 'evenRow' : 'oddRow';
     }
   }
-  cellRenderer(d, f){
+  cellRenderer(d, f) {
     return (<React.Fragment key={f.dataKey}>
-      <OverlayTrigger
-         placement="bottom"
-         delay={{ show: 500, hide: 500 }}
-         overlay={<Tooltip>{d.cellData}</Tooltip>}
-       >
-        <div className="ReactVirtualized__Table__headerTruncatedText">
-          {f.link?<a href={f.link.url+d.rowData[f.link.field]}>{d.cellData}</a>:d.cellData}
-        </div>
-       </OverlayTrigger>
-       
-   </React.Fragment>)
+
+      <div className="ReactVirtualized__Table__headerTruncatedText" title={d.cellData}>
+        {f.link ? <a href={f.link.url + d.rowData[f.link.field]}>{d.cellData}</a> : d.cellData}
+      </div>
+    </React.Fragment>)
   }
 
   headerRenderer({
@@ -58,117 +55,116 @@ export default class VisDataTable extends Component {
     sortBy,
     sortDirection
   }) {
-    const filteredFields = this.state.fields.filter(f=>f.isShow);
-   
+    const filteredFields = this.state.fields.filter(f => f.isShow);
+
     return (
       <React.Fragment key={dataKey}>
-         <OverlayTrigger
-            placement="top-start"
-            delay={{ show: 500, hide: 500 }}
-            overlay={<Tooltip>{label}</Tooltip>}
-          >
-            <div className="ReactVirtualized__Table__headerTruncatedText">
-              {label}
-            </div>
-          </OverlayTrigger>
+        <div className="ReactVirtualized__Table__headerTruncatedText" title={label}>{label}</div>
+        {}
+        <div>{sortBy==dataKey?(<FontAwesomeIcon icon={sortDirection==SortDirection.DESC?faSortDown:faSortUp} />):<FontAwesomeIcon icon={faSort} />}</div>
         <Draggable
           axis="x"
           defaultClassName="DragHandle"
           defaultClassNameDragging="DragHandleActive"
-          onDrag={(event, { deltaX }) =>{
-            this.resizeRow({
-              dataKey,
-              deltaX
-            })}
-          }
+          onDrag={(event, { deltaX }) => { this.resizeRow({ dataKey, deltaX }) }}
           position={{ x: 0 }}
           zIndex={999}
         ><span className="DragHandleIcon">⋮</span>
         </Draggable>
-          
+
       </React.Fragment>
     );
   }
 
-
-  resizeRow({ dataKey, deltaX }){
+  resizeRow({ dataKey, deltaX }) {
     const prevFields = this.state.fields;
-    const idx = prevFields.findIndex(f=>f.dataKey==dataKey);
-    
+    const idx = prevFields.findIndex(f => f.dataKey == dataKey);
+
     const percentDelta = deltaX / this.state.width;
     prevFields[idx].width = prevFields[idx].width + percentDelta;
-    
-    if(idx<prevFields.length-1){
-      prevFields[idx+1].width =prevFields[idx+1].width - percentDelta;
+
+    if (idx < prevFields.length - 1) {
+      prevFields[idx + 1].width = prevFields[idx + 1].width - percentDelta;
     }
-    
-    this.setState({field:[...prevFields]})
-  }
-  componentDidMount() {
-    console.log(this.autoSizer)
+
+    this.setState({ field: [...prevFields] })
   }
 
-  onResize({height, width}){
-    this.setState({width:width})
+  onResize({ height, width }) {
+    this.setState({ width: width })
   }
-  onSortEnd({oldIndex, newIndex}){
-    this.setState(({fields}) => ({
+  onSortEnd({ oldIndex, newIndex }) {
+    this.setState(({ fields }) => ({
       fields: arrayMove(fields, oldIndex, newIndex),
     }));
   }
-  onCheckChangedHandler(e){
-    
-    const value = e.target.value; 
+  onCheckChangedHandler(e) {
+
+    const value = e.target.value;
     const checked = e.target.checked;
-    this.setState(({fields}) => ({
-      fields: fields.map(f=>{
-        f.isShow = f.dataKey == value?checked:f.isShow;
-        return {...f}
+    this.setState(({ fields }) => ({
+      fields: fields.map(f => {
+        f.isShow = f.dataKey == value ? checked : f.isShow;
+        return { ...f }
       }),
     }));
-    // <VisDataTableControl list={fields} onSortEnd={this.onSortEnd} />
   }
   onAllCheckHandler() {
-    console.log('onAllCheckHandler')
-    this.setState(({fields})=>({
-      fields: fields.map(f=>{
+    this.setState(({ fields }) => ({
+      fields: fields.map(f => {
         f.isShow = true;
-        return {...f}
+        return { ...f }
       }),
     }));
   }
+
+  getSortData(){
+    const { data, filterData, filters } = this.props;
+    const { sortBy, sortDirection   } = this.state;
+    const __data = filters.length > 0 ? filterData : data;
+    return sortBy&&sortDirection?__data.sort((a,b)=>{
+      const first = sortDirection==SortDirection.ASC?a:b;
+      const second = sortDirection==SortDirection.ASC?b:a;
+      return first[sortBy]>second[sortBy]?1:-1
+    }):__data;
+  }
+
   render() {
-        const {data, filterData, filters} = this.props;
-        const fields = this.state.fields;
-        const final_data = filters.length>0?filterData:data;
+    const { fields, sortBy, sortDirection } = this.state;
+    const final_data = this.getSortData();
 
-        return <div  style={{ width: "100%", height: "100%" }}>
-          <VisDataTableControl list={fields} onSortEnd={this.onSortEnd} onCheckChanged={this.onCheckChangedHandler} onAllCheck={this.onAllCheckHandler}/>
-          <AutoSizer 
-            ref={this.autoSizer}
-            onResize={this.onResize}
+    return <div style={{ width: "100%", height: "100%" }}>
+      <VisDataTableControl list={fields} onSortEnd={this.onSortEnd} onCheckChanged={this.onCheckChangedHandler} onAllCheck={this.onAllCheckHandler} />
+      <AutoSizer
+        ref={this.autoSizer}
+        onResize={this.onResize}
+      >
+        {({ width, height }) => (
+          <Table
+            width={width}
+            height={height}
+            headerHeight={25}
+            rowHeight={20}
+            rowClassName={this._rowClassName}
+            rowCount={final_data.length}
+            rowGetter={({ index }) => final_data[index]}
+            sort={this.sortHandler}
+            sortBy={sortBy}
+            sortDirection={sortDirection}
           >
-            {({width, height}) => (
-              <Table
-                width={width}
-                height={height}
-                headerHeight={25}
-                rowHeight={20}
-                rowClassName={this._rowClassName}
-                rowCount={final_data.length}
-                rowGetter={({index}) => final_data[index]}>
-                {fields.filter(f=>f.isShow).map((f, id)=><Column
-                  key={id}
-                  dataKey={f.dataKey}
-                  label={f.label}
-                  width={width*f.width}
-                  headerRenderer={this.headerRenderer}
-                  cellRenderer={(d)=>{return this.cellRenderer(d,f)}}
-                  
-                />)}
-              </Table>
-            )}
-          </AutoSizer>
-          </div>
-    }
+            {fields.filter(f => f.isShow).map((f, id) => <Column
+              key={id}
+              cellDataGetter={({ rowData }) => rowData[f.dataKey]}
+              dataKey={f.dataKey}
+              label={f.label}
+              width={width * f.width}
+              headerRenderer={this.headerRenderer}
+              cellRenderer={(d) => { return this.cellRenderer(d, f) }}
+
+            />)}
+          </Table>
+        )}
+      </AutoSizer>
+    </div>
+  }
 }
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
index 2557604..4a5ce8f 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
@@ -11,23 +11,28 @@ import { faCog, faCheckSquare, faArrowsAltV } from '@fortawesome/free-solid-svg-
 import Button from 'react-bootstrap/Button';
 
 import './VisDataTableControl.css';
+import { PureComponent } from 'react';
 const SortableContainer = sortableContainer(({ children }) => {
     return <div>{children}</div>;
 });
 
-export class VisDataTableControl extends Component {
+export class VisDataTableControl extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
             show: false
         }
         this.onClickHandler = this.onClickHandler.bind(this);
+        this.onMouseOutHandler = this.onMouseOutHandler.bind(this);
         this.renderPopOver = this.renderPopOver.bind(this);
     }
     onClickHandler() {
         this.setState({ show: !this.state.show })
     }
-
+    onMouseOutHandler(){
+        console.log('out')
+        this.setState({ show: !this.state.show })
+    }
     renderPopOver(props) {
         return (<Popover {...props}>
             <Popover.Title as="div" >
@@ -54,7 +59,7 @@ export class VisDataTableControl extends Component {
         const style = { position: 'absolute', right: 0, color:'var(--gray)' }
         return (
             <OverlayTrigger trigger="click" placement="bottom-end" overlay={this.renderPopOver}>
-                <Button variant="light" style={style} className="py-0 px-1 border-gray" onClick={this.onClickHandler} active={this.state.show}>
+                <Button variant="light" style={style} className="py-0 px-1 border-gray" onMouseOut={this.onMouseOutHandler} onClick={this.onClickHandler} active={this.state.show}>
                     <FontAwesomeIcon icon={faCog} />
                 </Button>
             </OverlayTrigger>
diff --git a/source/index.js b/source/index.js
index 340e4d2..791c540 100644
--- a/source/index.js
+++ b/source/index.js
@@ -123,7 +123,7 @@ class App extends React.Component {
     // do filter
     const dataset_afterFilter = filterData(this.state.data, new_filters);
 
-    this.setState({ filterData: dataset_afterFilter, filters: new_filters })
+    this.setState({ filterData: [...dataset_afterFilter], filters: [...new_filters] })
 
   }
 
@@ -137,21 +137,18 @@ class App extends React.Component {
       return;
     }
     const old_filters = [...this.state.filters];
-    console.log('old', old_filters)
     let new_filters = [];
     if (isIndex) {
       new_filters = old_filters.filter((f, idx) => idx != id)
     } else {
       new_filters = old_filters.filter(of => of.id !== id)
     }
-
-    console.log('new', new_filters)
     if (new_filters.length <= 0) {
       this.setState({ filterData: [], filters: [] });
       return;
     }
     const dataset_afterFilter = filterData(this.state.data, new_filters);
-    this.setState({ filterData: dataset_afterFilter, filters: new_filters })
+    this.setState({ filterData: [...dataset_afterFilter], filters: [...new_filters] })
   }
 
   componentDidMount() {
@@ -220,17 +217,17 @@ class App extends React.Component {
     } else {
       return (
         <div>
-          <nav className="navbar blue-bar">
-            <span className="navbar-brand mb-0 h1 whitetext" >
-              TCIA Clinical Data Explorer
-          </span>
-          <HomeButton/>
-          <ProgressBar style={{ width: '30rem' }} className="border border-light bg-light"
-            min={0}
-            variant="success"
-            max={data.length}
-            now={progressAttrs.now}
-            label={progressAttrs.label} />
+          <nav className="navbar blue-bar pl-0">
+            <div>
+            <HomeButton/>
+            <span className="navbar-brand px-2 mb-0 h1 whitetext" >TCIA Clinical Data Explorer</span>
+            </div>
+            <ProgressBar style={{ width: '30rem' }} className="border border-light bg-light"
+              min={0}
+              variant="success"
+              max={data.length}
+              now={progressAttrs.now}
+              label={progressAttrs.label} />
           </nav>
           <FilterOperationPanel filters={filters} filterRemove={this.removeFiltersHandler.bind(this)} />
           <VisGridView

From 33efbf7893ad460161c155f6bf68b9ad11b60edf Mon Sep 17 00:00:00 2001
From: Jasox NaN <linanldj@gmail.com>
Date: Mon, 25 Jan 2021 14:54:07 -0500
Subject: [PATCH 09/23] added files and fixed the bug on full screen mode.

---
 package.json                                  |   1 +
 source/component/Layout/MyFirstGrid.js        |  62 -------
 .../VisFullScreenView/VisFullScreenView.css   |  11 ++
 .../VisFullScreenView/VisFullScreenView.js    |  36 ++++
 .../VisGridView/VisGridItem/VisGridItem.css   |   2 -
 .../VisGridView/VisGridItem/VisGridItem.js    |   3 +-
 .../Layout/VisGridView/VisGridView.js         |  16 +-
 .../component/VisualTools/Chart/BarChart.js   |  93 ++++------
 .../VisualTools/Chart/HorizontalBarChart.js   |  49 ++---
 source/component/VisualTools/Chart/KMCurve.js | 168 +++++++++---------
 .../component/VisualTools/Chart/PieChart.js   | 143 ++++++++-------
 .../VisualTools/Chart/ScatterChart.js         |  90 +++++-----
 .../VisualTools/VisDataTable/VisDataTable.js  |   1 +
 .../VisDataTableControl.js                    |  11 +-
 source/index.js                               |  73 ++++++--
 15 files changed, 395 insertions(+), 364 deletions(-)
 delete mode 100644 source/component/Layout/MyFirstGrid.js
 create mode 100644 source/component/Layout/VisFullScreenView/VisFullScreenView.css
 create mode 100644 source/component/Layout/VisFullScreenView/VisFullScreenView.js

diff --git a/package.json b/package.json
index 0dc08bc..bdb8e98 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "crossfilter2": "^1.5.4",
     "d3": "^5.16.0",
     "jquery": "^3.5.1",
+    "lodash": "^4.17.20",
     "mdbreact": "^4.26.0",
     "parcel-bundler": "^1.12.4",
     "popper.js": "^1.16.1",
diff --git a/source/component/Layout/MyFirstGrid.js b/source/component/Layout/MyFirstGrid.js
deleted file mode 100644
index 49aa25a..0000000
--- a/source/component/Layout/MyFirstGrid.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-//import { Responsive as ResponsiveGridLayout } from "react-grid-layout";
-import { Responsive, WidthProvider, GridItem } from "react-grid-layout";
-
-// import GridLayout from 'react-grid-layout';
-
-class ChartGridView extends React.Component {
-  
-  render() {
-    // {lg: layout1, md: layout2, ...}
-    var layouts = { lg: this.getLayoutsFromSomewhere() };
-    return (
-      <ResponsiveGridLayout
-        draggableHandle=".draggable-handle"
-        className="layout"
-        isResizable={false}
-        layouts={layouts}
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-      >
-        <div className="view" key="a">
-          <div className="draggable-handle">xxxx A</div>
-          <div className="view-content">VIEW test 1</div>
-        </div>
-        <div className="view" key="b">
-          <div className="draggable-handle">xxxx B</div>
-          <div className="view-content">VIEW test 2</div>
-        </div>
-        <div className="view" key="c">
-          <div className="draggable-handle">xxxx C</div>
-          <div className="view-content">VIEW test 3</div>
-        </div>
-        <div className="view" key="d">
-          <div className="draggable-handle">xxxx D</div>
-          <div className="view-content">VIEW test 4</div>
-        </div>
-        <div className="view" key="e">
-          <div className="draggable-handle">xxxx E</div>
-          <div className="view-content">VIEW test 5</div>
-        </div>
-        <GridItem />
-      </ResponsiveGridLayout>
-    );
-
-    // layout is an array of objects, see the demo for more complete usage
-    // var layout = [
-    //   {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
-    //   {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
-    //   {i: 'c', x: 4, y: 0, w: 1, h: 2}
-    // ];
-
-    // return (
-    //   <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
-    //     <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
-    //     <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
-    //     <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
-    //   </GridLayout>
-    // )
-  }
-}
-
-export default ChartGridView;
diff --git a/source/component/Layout/VisFullScreenView/VisFullScreenView.css b/source/component/Layout/VisFullScreenView/VisFullScreenView.css
new file mode 100644
index 0000000..4caa8b5
--- /dev/null
+++ b/source/component/Layout/VisFullScreenView/VisFullScreenView.css
@@ -0,0 +1,11 @@
+.full-screen {
+    /* background-color: darkorchid; */
+    /* min-height: 60rem; */
+    padding: 1rem 1rem 0 1rem;
+    
+}
+.full-screen .item {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/source/component/Layout/VisFullScreenView/VisFullScreenView.js b/source/component/Layout/VisFullScreenView/VisFullScreenView.js
new file mode 100644
index 0000000..824cb5d
--- /dev/null
+++ b/source/component/Layout/VisFullScreenView/VisFullScreenView.js
@@ -0,0 +1,36 @@
+import React, { PureComponent } from 'react'
+import VisGridItem from "../VisGridView/VisGridItem/VisGridItem.js"
+import VisGridItemHeader from "../VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js";
+import VisGridItemContent from "../VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js";
+import "./VisFullScreenView.css";
+
+class VisFullScreenView extends PureComponent {
+    constructor(props) {
+        super(props)
+    
+        this.state = {
+             
+        }
+        this.navHeight = 84;
+        this.filterHeight = 65;
+
+    }
+    
+    render() {
+        const viewHeight = window.innerHeight - this.navHeight - (this.props.filters.length?65:0);
+        console.log(window.innerHeight, viewHeight)
+        console.log(this.props)
+        return (
+           
+            <div className="full-screen"  style={{height:viewHeight}}>
+                <div className="item react-grid-item border border-primary react-draggable cssTransforms">
+                <VisGridItem  {...this.props} />
+                </div>
+                
+            </div>
+        )
+    }
+}
+
+
+export default VisFullScreenView;
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css
index 3fc9607..69a4192 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.css
@@ -1,8 +1,6 @@
 .vis-grid-item {
-    /* border: 1px solid #0984e3; */
     flex-direction: column;
     position: relative;
     display: flex;
     height: 100%;
-    /* border-radius: 5px; */
 }
\ No newline at end of file
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
index 14f57f0..0857c66 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
@@ -25,9 +25,10 @@ export default class VisGridItem extends PureComponent {
 
 
   render() {
+    
     return (
       <div
-        className="vis-grid-item bg-light"
+        className={`vis-grid-item bg-light`}
         onMouseEnter={this.onMouseEnterHandle}
         onMouseLeave={this.onMouseLeaveHeadle}
       >
diff --git a/source/component/Layout/VisGridView/VisGridView.js b/source/component/Layout/VisGridView/VisGridView.js
index af10930..592e6e6 100644
--- a/source/component/Layout/VisGridView/VisGridView.js
+++ b/source/component/Layout/VisGridView/VisGridView.js
@@ -37,7 +37,7 @@ class VisGridView extends PureComponent {
    */
   updateViewSize() {
     const rect = this.self.current.getBoundingClientRect();
-    console.log(rect, window.innerWidth, window.innerHeight)
+    // console.log(rect, window.innerWidth, window.innerHeight)
     const cols = parseInt((rect.width - this.state.config.margins[0] ) / (this.state.config.grid[0]+this.state.config.margins[0]));
     
     if(cols===this.state.cols) return;
@@ -59,7 +59,7 @@ class VisGridView extends PureComponent {
     this.setState(updatedState);
 
     this.fullScreenHandler = this.fullScreenHandler.bind(this);
-
+    this.updateViewSize = this.updateViewSize.bind(this)
   }
 
   // onRemoveItem(id) {
@@ -75,18 +75,27 @@ class VisGridView extends PureComponent {
     const updatedState = { ...this.state };
     updatedState.config.visConfig = newVisConfig;
     this.setState(updatedState);
+    this.props.fullVisScreenHandler(id, fullScreened);
   }
 
   componentDidMount() {
     this.updateViewSize();
+
     // TODO debouce
-    window.addEventListener("resize", this.updateViewSize.bind(this));
+    window.addEventListener("resize", this.updateViewSize);
   }
 
   componentDidUpdate() {
 
   }
 
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateViewSize);
+  }
+  
+  layoutChangeHandler(layout){
+    console.log('layout', layout)
+  }
 
   render() {
     if (this.state.config.layout.length > 0) {
@@ -116,6 +125,7 @@ class VisGridView extends PureComponent {
             margin={this.state.config.margins}
             layout= {this.state.config.layout}
             draggableHandle={this.state.draggableHandle}
+            onLayoutChange={this.layoutChangeHandler}
           >
             {__vis}
           </GridLayout>
diff --git a/source/component/VisualTools/Chart/BarChart.js b/source/component/VisualTools/Chart/BarChart.js
index 60d065b..f6795c4 100644
--- a/source/component/VisualTools/Chart/BarChart.js
+++ b/source/component/VisualTools/Chart/BarChart.js
@@ -103,69 +103,44 @@ export default class BarChart extends PureComponent {
         this.filterbars= this.drawBar(this.viewer,data,'ft');
     }
     componentDidMount() {
-        const rect = this.self.current.getBoundingClientRect();
-        this.innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
-        this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
-        // create svg 
-        const svg = d3.select(this.self.current)
-        .append("svg")
-            .attr("width", rect.width)
-            .attr("height", rect.height)
-        // create viewer
-        this.viewer = svg.append("g")
-            .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
-        //
-        this.xScale = this.createXScale(this.state.fields.x, this.innerWidth);
-        this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
+        setTimeout(()=>{
+            const rect = this.self.current.getBoundingClientRect();
+            this.innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+            this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+            // create svg 
+            const svg = d3.select(this.self.current)
+            .append("svg")
+                .attr("width", rect.width)
+                .attr("height", rect.height)
+            // create viewer
+            this.viewer = svg.append("g")
+                .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+            //
+            this.xScale = this.createXScale(this.state.fields.x, this.innerWidth);
+            this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
 
-        this.xAxis = d3.axisBottom(this.xScale)
-        //.tickSize(this.innerWidth)
-        this.viewer.append("g")
-        .attr("class", "x axis")
-        .attr("transform", `translate(0,${this.innerHeight})`)
-        .call(this.xAxis)
-        .selectAll(".tick text")
-        .call(this.wrap, this.xScale.bandwidth());
-  
-        // add the y Axis
-        this.yAxis = d3.axisLeft(this.yScale)
-        .tickSize(-this.innerWidth)
-        this.viewer.append("g")
-            .call(this.yAxis);
+            this.xAxis = d3.axisBottom(this.xScale)
+            //.tickSize(this.innerWidth)
+            this.viewer.append("g")
+            .attr("class", "x axis")
+            .attr("transform", `translate(0,${this.innerHeight})`)
+            .call(this.xAxis)
+            .selectAll(".tick text")
+            .call(this.wrap, this.xScale.bandwidth());
+    
+            // add the y Axis
+            this.yAxis = d3.axisLeft(this.yScale)
+            .tickSize(-this.innerWidth)
+            this.viewer.append("g")
+                .call(this.yAxis);
 
+            this.bars = this.drawBar(this.viewer, this.state.data,'og')
+            this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
+            
+            this.componentDidUpdate()
 
-        this.bars = this.drawBar(this.viewer, this.state.data,'og')
-        this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
-        //this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
-        // this.bars = this.viewer.selectAll(".bar").data(this.state.data)
-        // .enter().append("rect")
-        // .attr("class", "bar")
-        // .attr('fill','steelblue')
-        // .attr("x", function(d) { return this.xScale(d[this.state.fields.x])}.bind(this))
-        // .attr("width", this.xScale.bandwidth())
-        // .attr("y", function(d) { return this.yScale(d[this.state.fields.y])}.bind(this))
-        // .attr("height", function(d) { return this.innerHeight - this.yScale(d[this.state.fields.y]); }.bind(this))
-        // .on('click', (data,i) =>{
-        //     this.bars.attr('opacity',0.2)
-        //     const selected = this.bars.filter(function(d){
-        //       return d === data
-        //     })
-        //     selected.attr('opacity',1)
-        //     const value = selected.data()[0].key
-        //     const filter = {
-        //         id:this.props.id,
-        //         field:this.props.fields.x,
-        //         operation:'eq',
-        //         values:value
-        //     }
-        //     this.props.filterAdded([filter])
-        // })
-        // this.bars.append('title').text(d=> `${d.key}:${d.value}`)
+        }, 500)
 
-
-
-
-        
     }
     wrap(text, width) {
         text.each(function() {
diff --git a/source/component/VisualTools/Chart/HorizontalBarChart.js b/source/component/VisualTools/Chart/HorizontalBarChart.js
index 5453cc3..7ee1c8d 100644
--- a/source/component/VisualTools/Chart/HorizontalBarChart.js
+++ b/source/component/VisualTools/Chart/HorizontalBarChart.js
@@ -100,30 +100,35 @@ export default class HorizontalBarChart extends PureComponent {
         this.filterbars= this.drawBar(this.viewer,data,'ft');
         this.createTextLabel();
     }
+
     componentDidMount() {
+        setTimeout(()=>{
+            const rect = this.self.current.getBoundingClientRect();
+            const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+            this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+            // create svg 
+            const svg = d3.select(this.self.current)
+            .append("svg")
+                .attr("width", rect.width)
+                .attr("height", rect.height)
+            // create viewer
+            this.viewer = svg.append("g")
+                .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+            //
+            this.xScale = this.createXScale(this.state.fields.x, innerWidth);
+            this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
+    
+            this.viewer.append("g")
+            .attr("transform", `translate(0,${this.innerHeight})`)
+            .call(d3.axisBottom(this.xScale).tickSize(-this.innerHeight))
+    
+            this.bars = this.drawBar(this.viewer, this.state.data,'og')
+            this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
+            this.createTextLabel();
+            
+            this.componentDidUpdate()
+        }, 500); 
 
-        const rect = this.self.current.getBoundingClientRect();
-        const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
-        this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
-        // create svg 
-        const svg = d3.select(this.self.current)
-        .append("svg")
-            .attr("width", rect.width)
-            .attr("height", rect.height)
-        // create viewer
-        this.viewer = svg.append("g")
-            .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
-        //
-        this.xScale = this.createXScale(this.state.fields.x, innerWidth);
-        this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
-
-        this.viewer.append("g")
-        .attr("transform", `translate(0,${this.innerHeight})`)
-        .call(d3.axisBottom(this.xScale).tickSize(-this.innerHeight))
-
-        this.bars = this.drawBar(this.viewer, this.state.data,'og')
-        this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
-        this.createTextLabel();
 
 
   
diff --git a/source/component/VisualTools/Chart/KMCurve.js b/source/component/VisualTools/Chart/KMCurve.js
index b2b3263..d3b00ea 100644
--- a/source/component/VisualTools/Chart/KMCurve.js
+++ b/source/component/VisualTools/Chart/KMCurve.js
@@ -118,91 +118,95 @@ export default class KMCurve extends PureComponent {
     componentDidUpdate() {
 
     }
+    
     componentDidMount() {
-        const rect = this.self.current.getBoundingClientRect();
-        const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
-        const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
-        // create svg 
-        const svg = d3.select(this.self.current)
-        .append("svg")
-            .attr("width", rect.width)
-            .attr("height", rect.height)
-        // create viewer
-        const viewer = svg.append("g")
-            .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
-        //
-        this.xScale = d3.scaleLinear()
-        .domain([0, this.maxTime])
-        .range([0, innerWidth])
-        
-        this.yScale = d3.scaleLinear()
-        .domain([0, 1])
-        .range([innerHeight, 0])
-
-        this.color = d3.scaleOrdinal()
-        .domain(this.state.data.map(d => d.key))
-        .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
-        
-        
-
-
-        const xaxisGroup = viewer.append("g")
-        .attr("transform", "translate(0," + innerHeight + ")")
-        .call(d3.axisBottom(this.xScale).ticks(4)); //.tickSize(-innerWidth));
-        xaxisGroup.append('text')
-        .attr('y', 30)
-        .attr('x', innerWidth/2)
-        .attr('fill','black')
-        .attr('font-size',13)
-        .text(`Time ${this.props.fields.time.unit?`(${this.props.fields.time.unit})`:''}`)
-        
-        // add the y Axis
-        const yaxisGroup = viewer.append("g")
-            .call(d3.axisLeft(this.yScale).ticks(4)); // .tickSize(-innerWidth)
-            yaxisGroup.append('text')
-            .attr('y', -30)
-            .attr('x', -innerHeight/3)
+        setTimeout(()=>{
+            const rect = this.self.current.getBoundingClientRect();
+            const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+            const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+            // create svg 
+            const svg = d3.select(this.self.current)
+            .append("svg")
+                .attr("width", rect.width)
+                .attr("height", rect.height)
+            // create viewer
+            const viewer = svg.append("g")
+                .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+            //
+            this.xScale = d3.scaleLinear()
+            .domain([0, this.maxTime])
+            .range([0, innerWidth])
+            
+            this.yScale = d3.scaleLinear()
+            .domain([0, 1])
+            .range([innerHeight, 0])
+    
+            this.color = d3.scaleOrdinal()
+            .domain(this.state.data.map(d => d.key))
+            .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
+            
+            
+    
+    
+            const xaxisGroup = viewer.append("g")
+            .attr("transform", "translate(0," + innerHeight + ")")
+            .call(d3.axisBottom(this.xScale).ticks(4)); //.tickSize(-innerWidth));
+            xaxisGroup.append('text')
+            .attr('y', 30)
+            .attr('x', innerWidth/2)
             .attr('fill','black')
             .attr('font-size',13)
-            .attr("transform", "rotate(-90)")
-            .text(`Survival Probability`)
-
-        this.state.data.forEach(d=>this.drawKMCurve(viewer,d))
-
-
-        const height = 0;
-        const width = 15;
-        var nodeWidth = (d) => d.getBBox().width;
-        const legend = svg.append('g')
-          .attr('class', 'legend')
-          .attr('transform', `translate(${this.state.margin.left+innerWidth/2},0)`);
-
-        const lg = legend.selectAll('g')
-          .data(this.state.data)
-          .enter()
-        .append('g')
-          .attr('transform', (d,i) => `translate(${i * 100},${height + 15})`);
-
-        lg.append('rect')
-          .style('fill', d => this.color(d.key))
-          .attr('x', 0)
-          .attr('y', 0)
-          .attr('width', 10)
-          .attr('height', 10);
-
-        lg.append('text')
-          .style('font-family', 'Georgia')
-          .style('font-size', '13px')
-          .attr('x', 17.5)
-          .attr('y', 10)
-          .text(d => d.key);
-
-        let offset = 0;
-        lg.attr('transform', function(d, i) {
-            let x = offset;
-            offset += nodeWidth(this) + 10;
-            return `translate(${x},${height + 10})`;
-        });        
+            .text(`Time ${this.props.fields.time.unit?`(${this.props.fields.time.unit})`:''}`)
+            
+            // add the y Axis
+            const yaxisGroup = viewer.append("g")
+                .call(d3.axisLeft(this.yScale).ticks(4)); // .tickSize(-innerWidth)
+                yaxisGroup.append('text')
+                .attr('y', -30)
+                .attr('x', -innerHeight/3)
+                .attr('fill','black')
+                .attr('font-size',13)
+                .attr("transform", "rotate(-90)")
+                .text(`Survival Probability`)
+    
+            this.state.data.forEach(d=>this.drawKMCurve(viewer,d))
+    
+    
+            const height = 0;
+            const width = 15;
+            var nodeWidth = (d) => d.getBBox().width;
+            const legend = svg.append('g')
+              .attr('class', 'legend')
+              .attr('transform', `translate(${this.state.margin.left+innerWidth/2},0)`);
+    
+            const lg = legend.selectAll('g')
+              .data(this.state.data)
+              .enter()
+            .append('g')
+              .attr('transform', (d,i) => `translate(${i * 100},${height + 15})`);
+    
+            lg.append('rect')
+              .style('fill', d => this.color(d.key))
+              .attr('x', 0)
+              .attr('y', 0)
+              .attr('width', 10)
+              .attr('height', 10);
+    
+            lg.append('text')
+              .style('font-family', 'Georgia')
+              .style('font-size', '13px')
+              .attr('x', 17.5)
+              .attr('y', 10)
+              .text(d => d.key);
+    
+            let offset = 0;
+            lg.attr('transform', function(d, i) {
+                let x = offset;
+                offset += nodeWidth(this) + 10;
+                return `translate(${x},${height + 10})`;
+            }); 
+        },500);
+       
     }
     
     render() {
diff --git a/source/component/VisualTools/Chart/PieChart.js b/source/component/VisualTools/Chart/PieChart.js
index 0af37a5..218d260 100644
--- a/source/component/VisualTools/Chart/PieChart.js
+++ b/source/component/VisualTools/Chart/PieChart.js
@@ -7,112 +7,117 @@ export default class PieChart extends PureComponent {
     this.self = React.createRef();
     this.tooltip = React.createRef();
     this.state = {
-      margin: {top: 5, right: 5, bottom: 5, left: 5},
+      margin: { top: 5, right: 5, bottom: 5, left: 5 },
       loading: true,
       error: null
     };
 
     const data = d3.nest()
-    .key(function(d) { return d[props.fields.x]; })
+      .key(function (d) { return d[props.fields.x]; })
 
-    .rollup(function(v) { return v.length; })
-    .entries(props.data)
-    data.forEach(d=>{
+      .rollup(function (v) { return v.length; })
+      .entries(props.data)
+    data.forEach(d => {
       d.selected = false;
     })
     this.state.data = data;
-    this.sum = d3.sum(this.state.data,d=>d.value)
-     
+    this.sum = d3.sum(this.state.data, d => d.value)
+
   }
 
   componentDidUpdate() {
     // console.log('pie did update')
-    const filters = this.props.filters.filter(f=>f.id==this.props.id)
-    if(filters.length > 0){ // has filters
+    const filters = this.props.filters.filter(f => f.id == this.props.id)
+    if (filters.length > 0) { // has filters
       this.pies
-      .attr("fill",d=> d.data.selected?this.color(d.data.key):'#C0C0C0')
-      .attr('fill-opacity',d=> d.data.selected?1:.5)
-      .attr('stroke','#CCCCCC')
-      .attr('stroke-width',d=> d.data.selected?3:0)
-    }else{
-      this.state.data.forEach(d=>d.selected = false)
+        .attr("fill", d => d.data.selected ? this.color(d.data.key) : '#C0C0C0')
+        .attr('fill-opacity', d => d.data.selected ? 1 : .5)
+        .attr('stroke', '#CCCCCC')
+        .attr('stroke-width', d => d.data.selected ? 3 : 0)
+    } else {
+      this.state.data.forEach(d => d.selected = false)
       this.pies.attr("fill", d => this.color(d.data.key))
-      .attr('fill-opacity',1)
-      .attr('stroke','none')
+        .attr('fill-opacity', 1)
+        .attr('stroke', 'none')
     }
   }
 
   componentDidMount() {
-    
-    const rect = this.self.current.getBoundingClientRect();
-    const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
-    const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
-    const radius = Math.min(innerWidth, innerHeight)/2
-    const pie = d3.pie().sortValues((a,b)=>b-a).value(d => d.value)
-    
-    const arcs = pie(this.state.data);
-    
-    const arc = d3.arc().innerRadius(0).outerRadius(radius)
-    
-    const arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
-
-    this.color = d3.scaleOrdinal()
-    .domain(this.state.data.map(d => d.key))
-    .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
-    
-    const svg = d3.select(this.self.current)
-      .append("svg")
+    setTimeout(() => {
+
+
+      const rect = this.self.current.getBoundingClientRect();
+      const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+      const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+      const radius = Math.min(innerWidth, innerHeight) / 2
+      const pie = d3.pie().sortValues((a, b) => b - a).value(d => d.value)
+
+      const arcs = pie(this.state.data);
+
+      const arc = d3.arc().innerRadius(0).outerRadius(radius)
+
+      const arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
+
+      this.color = d3.scaleOrdinal()
+        .domain(this.state.data.map(d => d.key))
+        .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
+
+      const svg = d3.select(this.self.current)
+        .append("svg")
         .attr("width", rect.width)
         .attr("height", rect.height)
-    
-    const viewer = svg.append("g")
+
+      const viewer = svg.append("g")
         //.attr("stroke", "white")
-        .attr("transform", `translate(${(innerWidth / 2 + this.state.margin.left)},${innerHeight/ 2 + this.state.margin.top})`)
-    
-    this.pies = viewer.selectAll("path")
-      .data(arcs)
-      .join("path")
-      .attr("class","slide")
-      // .attr("id",(d,i)=>i)
+        .attr("transform", `translate(${(innerWidth / 2 + this.state.margin.left)},${innerHeight / 2 + this.state.margin.top})`)
+
+      this.pies = viewer.selectAll("path")
+        .data(arcs)
+        .join("path")
+        .attr("class", "slide")
+        // .attr("id",(d,i)=>i)
         .attr("fill", d => this.color(d.data.key))
         .attr("d", arc)
-        .on('click', (d, i) =>{
+        .on('click', (d, i) => {
           // viewer.selectAll(".slide").attr('opacity',0.2)
           // const selected = this.pies.filter(function(d){
           //   return d === data
           // })
           console.log('click')
           d.data.selected = !d.data.selected;
-          const values = this.state.data.reduce((values,d)=>{
-            if(d.selected) values.push(d.key)
+          const values = this.state.data.reduce((values, d) => {
+            if (d.selected) values.push(d.key)
             return values;
-          },[])
+          }, [])
 
 
-          if(values.length > 0){ // has filters
+          if (values.length > 0) { // has filters
             this.pies
-            .attr("fill",d=> d.data.selected?this.color(d.data.key):'#C0C0C0')
-            .attr('fill-opacity',d=> d.data.selected?1:.5)
-            .attr('stroke','#CCCCCC')
-            .attr('stroke-width',d=> d.data.selected?3:0)
+              .attr("fill", d => d.data.selected ? this.color(d.data.key) : '#C0C0C0')
+              .attr('fill-opacity', d => d.data.selected ? 1 : .5)
+              .attr('stroke', '#CCCCCC')
+              .attr('stroke-width', d => d.data.selected ? 3 : 0)
             const filter = {
-              id:this.props.id,
-              title:this.props.title,
-              field:this.props.fields.x,
-              operation:'in',
-              values:values
+              id: this.props.id,
+              title: this.props.title,
+              field: this.props.fields.x,
+              operation: 'in',
+              values: values
             }
             this.props.filterAdded([filter])
-          }else{
+          } else {
             this.pies.attr("fill", d => this.color(d.data.key))
-            .attr('fill-opacity',1)
-            .attr('stroke','none')
+              .attr('fill-opacity', 1)
+              .attr('stroke', 'none')
 
             this.props.filterRemove(this.props.id)
           }
 
-      })
-      this.pies.append('title').text(d=> `${d.data.key}:${d.data.value}:${d3.format(".0%")(d.data.value/this.sum)}`)
+        })
+      this.pies.append('title').text(d => `${d.data.key}:${d.data.value}:${d3.format(".0%")(d.data.value / this.sum)}`)
+
+      //this.componentDidUpdate();
+    }, 500)
     //   .on("mousemove", function(d){
     //     console.log(this)
     //     d3.select(this.tooltip.current)
@@ -126,7 +131,7 @@ export default class PieChart extends PureComponent {
     //       .html( (d.data[this.state.fields.x]) + "<br>" +(d.value));
     // }.bind(this))
     // .on("mouseout", function(d){ d3.select(this.tooltip.current).style("display", "none");}.bind(this));
-      
+
     // svg.append("g")
     //     .attr("font-family", "sans-serif")
     //     .attr("font-size", 12)
@@ -146,15 +151,15 @@ export default class PieChart extends PureComponent {
     //         .text(d => d.data[this.state.fields.y].toLocaleString()));
 
   }
-  
+
   render() {
 
     return (
       <div style={{ width: "100%", height: "100%" }}>
         <div
-        id={this.props.id}
-        ref={this.self}
-        style={{ width: "100%", height: "100%" }}
+          id={this.props.id}
+          ref={this.self}
+          style={{ width: "100%", height: "100%" }}
         ></div>
         <div ref={this.tooltip} className="tooltip" ></div>
       </div>
diff --git a/source/component/VisualTools/Chart/ScatterChart.js b/source/component/VisualTools/Chart/ScatterChart.js
index 66b50c9..7f0e4cc 100644
--- a/source/component/VisualTools/Chart/ScatterChart.js
+++ b/source/component/VisualTools/Chart/ScatterChart.js
@@ -39,6 +39,7 @@ export default class ScatterChart extends PureComponent {
     }
 
     componentDidUpdate(){
+
         if(this.props.filters.length > 0){
             this.circles.attr('class', d=> this.props.filterData.includes(d)?'brushed':'non_brushed')
         }else{
@@ -47,49 +48,54 @@ export default class ScatterChart extends PureComponent {
     }
 
     componentDidMount() {
-        const rect = this.self.current.getBoundingClientRect();
-        const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
-        const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
-        // create svg 
-        const svg = d3.select(this.self.current)
-        .append("svg")
-            .attr("width", rect.width)
-            .attr("height", rect.height)
-        // create viewer
-        const viewer = svg.append("g")
-            .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
-        //
-        this.xScale = this.createScaleLiner(this.props.fields.x, [0, innerWidth]);
-        this.yScale = this.createScaleLiner(this.props.fields.y, [innerHeight, 0]);
-
-        this.radiusScale = this.createScaleLiner(this.props.fields.z, [3, 10]);
-
-        viewer.append("g")
-        .attr("transform", "translate(0," + innerHeight + ")")
-        .call(d3.axisBottom(this.xScale).tickSize(-innerHeight));
-        
-        // add the y Axis
-        viewer.append("g")
-            .call(d3.axisLeft(this.yScale).tickSize(-innerWidth));
-
-
-
-        this.circles = viewer.selectAll("circle").data(this.state.data)
-        .enter().append("circle")
-        .attr("r", d => this.radiusScale(d[this.props.fields.z]))
-        .attr("cx", d => this.xScale(d[this.props.fields.x]))
-        .attr("cy", d => this.yScale(d[this.props.fields.y]))
-        .attr("class", "brushed");
-
-
-
-        this.brush = d3.brush().extent([[0,0],[innerWidth, innerHeight]])
-            //.on("brush", this.brushed.bind(this))
-            .on("end", this.end.bind(this)); 
-
-        this.brush_area = viewer.append("g")
+        setTimeout(() => {
+            const rect = this.self.current.getBoundingClientRect();
+            const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+            const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+            // create svg 
+            const svg = d3.select(this.self.current)
+            .append("svg")
+                .attr("width", rect.width)
+                .attr("height", rect.height)
+            // create viewer
+            const viewer = svg.append("g")
+                .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+            //
+            this.xScale = this.createScaleLiner(this.props.fields.x, [0, innerWidth]);
+            this.yScale = this.createScaleLiner(this.props.fields.y, [innerHeight, 0]);
+    
+            this.radiusScale = this.createScaleLiner(this.props.fields.z, [3, 10]);
+    
+            viewer.append("g")
+            .attr("transform", "translate(0," + innerHeight + ")")
+            .call(d3.axisBottom(this.xScale).tickSize(-innerHeight));
+            
+            // add the y Axis
+            viewer.append("g")
+                .call(d3.axisLeft(this.yScale).tickSize(-innerWidth));
+    
+    
+    
+            this.circles = viewer.selectAll("circle").data(this.state.data)
+            .enter().append("circle")
+            .attr("r", d => this.radiusScale(d[this.props.fields.z]))
+            .attr("cx", d => this.xScale(d[this.props.fields.x]))
+            .attr("cy", d => this.yScale(d[this.props.fields.y]))
+            .attr("class", "brushed");
+    
+    
+    
+            this.brush = d3.brush().extent([[0,0],[innerWidth, innerHeight]])
+                //.on("brush", this.brushed.bind(this))
+                .on("end", this.end.bind(this)); 
+    
+            this.brush_area = viewer.append("g")
+            
+            .call(this.brush);
+            
+            this.componentDidUpdate()        
+        }, 500);
         
-        .call(this.brush);
         
     }
     brushed(){
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.js b/source/component/VisualTools/VisDataTable/VisDataTable.js
index 66163be..9d963fc 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.js
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.js
@@ -17,6 +17,7 @@ export default class VisDataTable extends PureComponent {
       sortBy :null,
       sortDirection: null
     }
+
     this.autoSizer = React.createRef();
     this.headerRenderer = this.headerRenderer.bind(this)
     this.cellRenderer = this.cellRenderer.bind(this)
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
index 4a5ce8f..5e55060 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
@@ -1,4 +1,4 @@
-import React, { Component, useState } from 'react'
+import React, { PureComponent, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
     sortableContainer
@@ -11,7 +11,6 @@ import { faCog, faCheckSquare, faArrowsAltV } from '@fortawesome/free-solid-svg-
 import Button from 'react-bootstrap/Button';
 
 import './VisDataTableControl.css';
-import { PureComponent } from 'react';
 const SortableContainer = sortableContainer(({ children }) => {
     return <div>{children}</div>;
 });
@@ -23,16 +22,12 @@ export class VisDataTableControl extends PureComponent {
             show: false
         }
         this.onClickHandler = this.onClickHandler.bind(this);
-        this.onMouseOutHandler = this.onMouseOutHandler.bind(this);
         this.renderPopOver = this.renderPopOver.bind(this);
     }
     onClickHandler() {
         this.setState({ show: !this.state.show })
     }
-    onMouseOutHandler(){
-        console.log('out')
-        this.setState({ show: !this.state.show })
-    }
+
     renderPopOver(props) {
         return (<Popover {...props}>
             <Popover.Title as="div" >
@@ -59,7 +54,7 @@ export class VisDataTableControl extends PureComponent {
         const style = { position: 'absolute', right: 0, color:'var(--gray)' }
         return (
             <OverlayTrigger trigger="click" placement="bottom-end" overlay={this.renderPopOver}>
-                <Button variant="light" style={style} className="py-0 px-1 border-gray" onMouseOut={this.onMouseOutHandler} onClick={this.onClickHandler} active={this.state.show}>
+                <Button variant="light" style={style} className="py-0 px-1 border-gray" onClick={this.onClickHandler} active={this.state.show}>
                     <FontAwesomeIcon icon={faCog} />
                 </Button>
             </OverlayTrigger>
diff --git a/source/index.js b/source/index.js
index 791c540..db26acc 100644
--- a/source/index.js
+++ b/source/index.js
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { PureComponent } from "react";
 import HomeButton from "./component/HomeButton.js";
 import { render } from "react-dom";
 import Spinner from 'react-bootstrap/Spinner'
 import VisGridView from "./component/Layout/VisGridView/VisGridView.js";
+import VisFullScreenView from "./component/Layout/VisFullScreenView/VisFullScreenView.js"
 import ProgressBar from 'react-bootstrap/ProgressBar'
 import FilterOperationPanel from './component/FilterOperationPanel/FilterOperationPanel.js'
+import { debounce } from "lodash";
 import * as d3 from "d3";
 import {
   Responsive,
@@ -31,15 +33,15 @@ import _CONFIG_ from "../config/vis-config.json";
 function isNumeric(str) {
   if (typeof str != "string") return false // we only process strings!
   return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
-         !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
+    !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
 }
-function covertRaw(elt){
-  for(let key in elt){
+function covertRaw(elt) {
+  for (let key in elt) {
     const raw = elt[key];
-    if(isNumeric(raw)){
+    if (isNumeric(raw)) {
       elt[key] = +raw;
-    } else if(raw == 'true'||raw == 'false' ){
-      elt[key] = raw=='true' ? true : false;
+    } else if (raw == 'true' || raw == 'false') {
+      elt[key] = raw == 'true' ? true : false;
     }
   }
   return elt;
@@ -87,19 +89,36 @@ function filterData(data, filters) {
   })
 }
 
-class App extends React.Component {
+class App extends React.PureComponent {
   constructor(props) {
     super(props);
+    console.log('config', _CONFIG_)
     this.state = {
       error: null,
       isLoaded: false,
       data: [],
       filterData: [],
       filterOperators: "AND", // "OR"
-      filters: []
+      filters: [],
+      isFullScreen: false,
+      fullScreenVis: null,
+
+
     };
+    this.view = React.createRef();
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.debounceResizeHandler = debounce(this.resizeHandler, 500, { "maxWait": 1000 })
+    this.fullScreenHandler = this.fullScreenHandler.bind(this)
 
   }
+  fullScreenHandler(id, fullScreened){
+    console.log(id, fullScreened)
+    this.setState({
+      isFullScreen: fullScreened,
+      fullScreenVis: id
+    })
+    //console.log(this.state)
+  }
   // {
   //    id:
   //    field:xxx,
@@ -153,7 +172,7 @@ class App extends React.Component {
 
   componentDidMount() {
     if (_CONFIG_.DATA_FORMAT === 'csv') {
-      d3.csv(_CONFIG_.DATA_RESOURCE_URL,d=>covertRaw(d)).then(data=>{
+      d3.csv(_CONFIG_.DATA_RESOURCE_URL, d => covertRaw(d)).then(data => {
         this.setState({
           isLoaded: true,
           data: data
@@ -192,6 +211,25 @@ class App extends React.Component {
         )
     }
 
+
+    if (this.state.isFullScreen) {
+      // debounce();
+      this.resizeHandler();
+    }
+
+
+    // TODO debouce
+    window.addEventListener("resize", this.debounceResizeHandler);
+
+  }
+  resizeHandler() {
+    
+    console.log(`resized to: ${this.state.isFullScreen}`, window.innerWidth, 'x', window.innerHeight)
+  }
+
+  componentWillUnmount() {
+    console.log('index componentWillUnmount')
+    window.removeEventListener("resize", this.debounceResizeHandler);
   }
 
   render() {
@@ -216,11 +254,11 @@ class App extends React.Component {
       </div>;
     } else {
       return (
-        <div>
+        <div ref={this.view}>
           <nav className="navbar blue-bar pl-0">
             <div>
-            <HomeButton/>
-            <span className="navbar-brand px-2 mb-0 h1 whitetext" >TCIA Clinical Data Explorer</span>
+              <HomeButton />
+              <span className="navbar-brand px-2 mb-0 h1 whitetext" >TCIA Clinical Data Explorer</span>
             </div>
             <ProgressBar style={{ width: '30rem' }} className="border border-light bg-light"
               min={0}
@@ -230,13 +268,20 @@ class App extends React.Component {
               label={progressAttrs.label} />
           </nav>
           <FilterOperationPanel filters={filters} filterRemove={this.removeFiltersHandler.bind(this)} />
+          {this.state.isFullScreen?<VisFullScreenView operation={_CONFIG_.VISUALIZATION_VIEW_CONFIGURATION.find(opt=>opt.id==this.state.fullScreenVis)}             data={data}
+            filterData={filterData}
+            filters={filters}
+            filterAdded={this.addFiltersHandler.bind(this)}
+            filterRemove={this.removeFiltersHandler.bind(this)}
+            toggleFullScreen={this.fullScreenHandler}/>:
           <VisGridView
             data={data}
             filterData={filterData}
             filters={filters}
             filterAdded={this.addFiltersHandler.bind(this)}
             filterRemove={this.removeFiltersHandler.bind(this)}
-          />
+            fullVisScreenHandler={this.fullScreenHandler}
+          />}
         </div>
       );
     }

From 3a112ba1cffc04f67dac778ccbf33e123c17ed21 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Thu, 4 Feb 2021 16:53:50 -0500
Subject: [PATCH 10/23] patch and update deps

---
 package-lock.json | 373 +++++++++++++++++-----------------------------
 package.json      |  10 +-
 2 files changed, 139 insertions(+), 244 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index feea6b1..b6b4023 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -821,17 +821,17 @@
       }
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.32",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
-      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "version": "1.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
+      "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.32"
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
       },
       "dependencies": {
         "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.32",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
-          "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+          "version": "0.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+          "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
         }
       }
     },
@@ -866,17 +866,17 @@
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
-      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.32"
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
       },
       "dependencies": {
         "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.32",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
-          "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+          "version": "0.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+          "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
         }
       }
     },
@@ -1531,9 +1531,9 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "bootstrap": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
-      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
     },
     "bootstrap-css-only": {
       "version": "4.4.1",
@@ -1835,9 +1835,9 @@
       }
     },
     "chokidar": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.0.tgz",
-      "integrity": "sha512-JgQM9JS92ZbFR4P90EvmzNpSGhpPBGBSj10PILeDyYFwp4h2/D9OM03wsJ4zW1fEp4ka2DGrnUeD7FuvQ2aZ2Q==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
       "dev": true,
       "requires": {
         "anymatch": "~3.1.1",
@@ -4506,6 +4506,11 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "internmap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.0.tgz",
+      "integrity": "sha512-SdoDWwNOTE2n4JWUsLn4KXZGuZPjPF9yyOGc8bnfWnBQh7BD/l80rzSznKc/r4Y0aQ7z3RTk9X+tV4tHBpu+dA=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -7274,9 +7279,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.32.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.4.tgz",
-      "integrity": "sha512-N0BT0PI/t3+gD8jKa83zJJUb7ssfQnRRfqN+GIErokW6U4guBpfYl8qYB+OFLEho+QvnV5ZH1R9qhUC/Z2Ch9w==",
+      "version": "1.32.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.6.tgz",
+      "integrity": "sha512-1bcDHDcSqeFtMr0JXI3xc/CXX6c4p0wHHivJdru8W7waM7a1WjKMm4m/Z5sY7CbVw4Whi2Chpcw6DFfSWwGLzQ==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -8441,9 +8446,9 @@
       "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
     },
     "vega": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/vega/-/vega-5.18.0.tgz",
-      "integrity": "sha512-ysqouhboWNXSuQNN7W5IGOXsnEJNFVX5duCi0tTwRsFLc61FshpqVh4+4VoXg5pH0ZCxwpqbOwd2ULZWjJTx6g==",
+      "version": "5.19.1",
+      "resolved": "https://registry.npmjs.org/vega/-/vega-5.19.1.tgz",
+      "integrity": "sha512-UE6/c9q9kzuz4HULFuU9HscBASoZa+zcXqGKdbQP545Nwmhd078QpcH+wZsq9lYfiTxmFtzLK/a0OH0zhkghvA==",
       "requires": {
         "vega-crossfilter": "~4.0.5",
         "vega-dataflow": "~5.7.3",
@@ -8452,17 +8457,17 @@
         "vega-expression": "~4.0.1",
         "vega-force": "~4.0.7",
         "vega-format": "~1.0.4",
-        "vega-functions": "~5.11.0",
+        "vega-functions": "~5.12.0",
         "vega-geo": "~4.3.8",
         "vega-hierarchy": "~4.0.9",
         "vega-label": "~1.0.0",
         "vega-loader": "~4.4.0",
-        "vega-parser": "~6.1.2",
+        "vega-parser": "~6.1.3",
         "vega-projection": "~1.4.5",
         "vega-regression": "~1.0.9",
         "vega-runtime": "~6.1.3",
         "vega-scale": "~7.1.1",
-        "vega-scenegraph": "~4.9.2",
+        "vega-scenegraph": "~4.9.3",
         "vega-statistics": "~1.7.9",
         "vega-time": "~2.0.4",
         "vega-transforms": "~4.9.3",
@@ -8474,11 +8479,6 @@
         "vega-wordcloud": "~4.1.3"
       },
       "dependencies": {
-        "vega-event-selector": {
-          "version": "2.0.6",
-          "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-2.0.6.tgz",
-          "integrity": "sha512-UwCu50Sqd8kNZ1X/XgiAY+QAyQUmGFAwyDu7y0T5fs6/TPQnDo/Bo346NgSgINBEhEKOAMY1Nd/rPOk4UEm/ew=="
-        },
         "vega-expression": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-4.0.1.tgz",
@@ -8486,11 +8486,6 @@
           "requires": {
             "vega-util": "^1.16.0"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -8510,14 +8505,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         }
       }
     },
@@ -8529,26 +8522,19 @@
         "vega-format": "^1.0.4",
         "vega-loader": "^4.3.2",
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vega-embed": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.15.0.tgz",
-      "integrity": "sha512-/+Xlf0D4ErI21R20ElkP0ZP+qFHJoLsnbBGidJSYmnUGn5mPcnPmRKigaKEaXeKl9a5PCxxxIdjyfiFf99n3OA==",
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.15.1.tgz",
+      "integrity": "sha512-2ZCc4lVwK8O0cVisdizuYaZQZoc3ZUnB+qlTFEu2ch6mP+RO7mghqa0JQmwHs1tXUZyL20GAoWtK47oKC9DxUw==",
       "requires": {
         "fast-json-patch": "^3.0.0-1",
         "json-stringify-pretty-compact": "^2.0.0",
         "semver": "^7.3.4",
         "vega-schema-url-parser": "^2.1.0",
         "vega-themes": "^2.9.1",
-        "vega-tooltip": "^0.24.2"
+        "vega-tooltip": "^0.25.0"
       },
       "dependencies": {
         "semver": {
@@ -8558,14 +8544,6 @@
           "requires": {
             "lru-cache": "^6.0.0"
           }
-        },
-        "vega-tooltip": {
-          "version": "0.24.2",
-          "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.24.2.tgz",
-          "integrity": "sha512-b7IeYQl/piNVsMmTliOgTnwSOhBs67KqoZ9UzP1I3XpH7TKbSuc3YHA7b1CSxkRR0hHKdradby4UI8c9rdH74w==",
-          "requires": {
-            "vega-util": "^1.15.2"
-          }
         }
       }
     },
@@ -8582,9 +8560,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-interpolate": {
           "version": "2.0.1",
@@ -8593,11 +8574,6 @@
           "requires": {
             "d3-color": "1 - 2"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -8633,11 +8609,6 @@
             "d3-quadtree": "1 - 2",
             "d3-timer": "1 - 2"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -8654,9 +8625,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-format": {
           "version": "2.0.0",
@@ -8670,18 +8644,13 @@
           "requires": {
             "d3-time": "1 - 2"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
     "vega-functions": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/vega-functions/-/vega-functions-5.11.0.tgz",
-      "integrity": "sha512-/p0QIDiA3RaUZ7drxHuClpDQCrIScSHJlY0oo0+GFYGfp+lvb29Ox1T4a+wtqeCp6NRaTWry+EwDxojnshTZIQ==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/vega-functions/-/vega-functions-5.12.0.tgz",
+      "integrity": "sha512-3hljmGs+gR7TbO/yYuvAP9P5laKISf1GKk4yRHLNdM61fWgKm8pI3f6LY2Hvq9cHQFTiJ3/5/Bx2p1SX5R4quQ==",
       "requires": {
         "d3-array": "^2.7.1",
         "d3-color": "^2.0.0",
@@ -8689,17 +8658,20 @@
         "vega-dataflow": "^5.7.3",
         "vega-expression": "^4.0.1",
         "vega-scale": "^7.1.1",
-        "vega-scenegraph": "^4.9.2",
-        "vega-selections": "^5.2.0",
+        "vega-scenegraph": "^4.9.3",
+        "vega-selections": "^5.3.0",
         "vega-statistics": "^1.7.9",
         "vega-time": "^2.0.4",
         "vega-util": "^1.16.0"
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-color": {
           "version": "2.0.0",
@@ -8721,11 +8693,6 @@
           "requires": {
             "vega-util": "^1.16.0"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -8745,9 +8712,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-color": {
           "version": "2.0.0",
@@ -8761,11 +8731,6 @@
           "requires": {
             "d3-array": ">=2.5"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -8783,11 +8748,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
           "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -8800,13 +8760,6 @@
         "vega-dataflow": "^5.7.3",
         "vega-scenegraph": "^4.9.2",
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vega-lite": {
@@ -8866,36 +8819,19 @@
           "version": "2.6.1",
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
           "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
     "vega-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/vega-parser/-/vega-parser-6.1.2.tgz",
-      "integrity": "sha512-aGyZrNzPrBruEb/WhemKDuDjQsIkMDGIgnSJci0b+9ZVxjyAzMl7UfGbiYorPiJlnIercjUJbMoFD6fCIf4gqQ==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/vega-parser/-/vega-parser-6.1.3.tgz",
+      "integrity": "sha512-8oiVhhW26GQ4GZBvolId8FVFvhn3s1KGgPlD7Z+4P2wkV+xe5Nqu0TEJ20F/cn3b88fd0Vj48X3BH3dlSeKNFg==",
       "requires": {
         "vega-dataflow": "^5.7.3",
         "vega-event-selector": "^2.0.6",
-        "vega-functions": "^5.10.0",
+        "vega-functions": "^5.12.0",
         "vega-scale": "^7.1.1",
-        "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-event-selector": {
-          "version": "2.0.6",
-          "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-2.0.6.tgz",
-          "integrity": "sha512-UwCu50Sqd8kNZ1X/XgiAY+QAyQUmGFAwyDu7y0T5fs6/TPQnDo/Bo346NgSgINBEhEKOAMY1Nd/rPOk4UEm/ew=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
+        "vega-util": "^1.16.0"
       }
     },
     "vega-projection": {
@@ -8908,9 +8844,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-geo": {
           "version": "2.0.1",
@@ -8934,14 +8873,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         }
       }
     },
@@ -8952,13 +8889,6 @@
       "requires": {
         "vega-dataflow": "^5.7.3",
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vega-scale": {
@@ -8974,9 +8904,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-interpolate": {
           "version": "2.0.1",
@@ -8997,18 +8930,13 @@
             "d3-time": "1 - 2",
             "d3-time-format": "2 - 3"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
     "vega-scenegraph": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/vega-scenegraph/-/vega-scenegraph-4.9.2.tgz",
-      "integrity": "sha512-epm1CxcB8AucXQlSDeFnmzy0FCj+HV2k9R6ch2lfLRln5lPLEfgJWgFcFhVf5jyheY0FSeHH52Q5zQn1vYI1Ow==",
+      "version": "4.9.3",
+      "resolved": "https://registry.npmjs.org/vega-scenegraph/-/vega-scenegraph-4.9.3.tgz",
+      "integrity": "sha512-lBvqLbXqrqRCTGJmSgzZC/tLR/o+TXfakbdhDzNdpgTavTaQ65S/67Gpj5hPpi77DvsfZUIY9lCEeO37aJhy0Q==",
       "requires": {
         "d3-path": "^2.0.0",
         "d3-shape": "^2.0.0",
@@ -9030,11 +8958,6 @@
           "requires": {
             "d3-path": "1 - 2"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -9044,9 +8967,9 @@
       "integrity": "sha512-JHT1PfOyVzOohj89uNunLPirs05Nf59isPT5gnwIkJph96rRgTIBJE7l7yLqndd7fLjr3P8JXHGAryRp74sCaQ=="
     },
     "vega-selections": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/vega-selections/-/vega-selections-5.2.0.tgz",
-      "integrity": "sha512-Xf3nTTJHRGw4tQMbt+0sBI/7WkEIzPG9E4HXkZk5Y9Q2HsGRVLmrAEXHSfpENrBLWTBZk/uvmP9rKDG7cbcTrg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vega-selections/-/vega-selections-5.3.0.tgz",
+      "integrity": "sha512-vC4NPsuN+IffruFXfH0L3i2A51RgG4PqpLv85TvrEAIYnSkyKDE4bf+wVraR3aPdnLLkc3+tYuMi6le5FmThIA==",
       "requires": {
         "vega-expression": "^4.0.1",
         "vega-util": "^1.16.0"
@@ -9059,11 +8982,6 @@
           "requires": {
             "vega-util": "^1.16.0"
           }
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -9076,9 +8994,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         }
       }
     },
@@ -9098,22 +9019,28 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-time": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz",
           "integrity": "sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
+    "vega-tooltip": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.25.0.tgz",
+      "integrity": "sha512-S48d/eP6WfieLmUvFEjd+raHWKKeK/RfTlwLa3zGcBULDHJY2NU2vRfjC1x33G6Y7eKeAfqGpM6ER5Qt1nf8tA==",
+      "requires": {
+        "vega-util": "^1.15.2"
+      }
+    },
     "vega-transforms": {
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/vega-transforms/-/vega-transforms-4.9.3.tgz",
@@ -9127,14 +9054,12 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         }
       }
     },
@@ -9144,13 +9069,6 @@
       "integrity": "sha512-YU/S9rDk4d+t4+4eTa9fzuw87PMNteeVtpcL51kUO8H7HvGaoW7ll8RHKLkR0NYBEGPRoFDKUxnoyMvhgjsdYw==",
       "requires": {
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vega-util": {
@@ -9174,19 +9092,17 @@
       },
       "dependencies": {
         "d3-array": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
-          "integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.11.0.tgz",
+          "integrity": "sha512-26clcwmHQEdsLv34oNKq5Ia9tQ26Y/4HqS3dQzF42QBUqymZJ+9PORcN1G52bt37NsL2ABoX4lvyYZc+A9Y0zw==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
         },
         "d3-timer": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
           "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
-        },
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
         }
       }
     },
@@ -9198,13 +9114,6 @@
         "vega-dataflow": "^5.7.3",
         "vega-scenegraph": "^4.9.2",
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vega-voronoi": {
@@ -9215,13 +9124,6 @@
         "d3-delaunay": "^5.3.0",
         "vega-dataflow": "^5.7.3",
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vega-wordcloud": {
@@ -9234,13 +9136,6 @@
         "vega-scale": "^7.1.1",
         "vega-statistics": "^1.7.9",
         "vega-util": "^1.15.2"
-      },
-      "dependencies": {
-        "vega-util": {
-          "version": "1.16.0",
-          "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.16.0.tgz",
-          "integrity": "sha512-6mmz6mI+oU4zDMeKjgvE2Fjz0Oh6zo6WGATcvCfxH2gXBzhBHmy5d25uW5Zjnkc6QBXSWPLV9Xa6SiqMsrsKog=="
-        }
       }
     },
     "vendors": {
diff --git a/package.json b/package.json
index bdb8e98..c9e2bce 100644
--- a/package.json
+++ b/package.json
@@ -23,14 +23,14 @@
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@types/sortablejs": "^1.10.6",
     "array-move": "^3.0.1",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^4.6.0",
     "crossfilter2": "^1.5.4",
     "d3": "^5.16.0",
     "jquery": "^3.5.1",
@@ -47,11 +47,11 @@
     "react-virtualized": "^9.22.3",
     "sortablejs": "^1.13.0",
     "style": "0.0.3",
-    "vega": "^5.18.0",
+    "vega": "^5.19.1",
     "vega-embed": "^6.15.0",
     "vega-lite": "^4.17.0"
   },
   "devDependencies": {
-    "sass": "^1.32.4"
+    "sass": "^1.32.6"
   }
 }

From fb46f535088298531c8b457439b7176b4ea03d36 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Fri, 26 Feb 2021 15:15:03 -0500
Subject: [PATCH 11/23] Use url for configurable templates

---
 Dockerfile                                    |   1 +
 .../VisGridView/VisGridItem/VisGridItem.js    |   5 +-
 .../VisGridItemContent/VisGridItemContent.js  |   3 -
 .../Layout/VisGridView/VisGridView.js         |  19 +--
 source/index.js                               | 118 ++++++++++--------
 5 files changed, 83 insertions(+), 63 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 3caecf7..6210b2e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,6 +12,7 @@ RUN mkdir -p /var/www/html/
 RUN mv /source/dist/* /var/www/html
 RUN mv /source/treemap /var/www/html
 RUN mv /source/data /var/www/html
+RUN mv /source/config /var/www/html
 WORKDIR /var/www/html/
 
 CMD http-server -p 80
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
index 0857c66..4c64c9a 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItem.js
@@ -25,7 +25,7 @@ export default class VisGridItem extends PureComponent {
 
 
   render() {
-    
+
     return (
       <div
         className={`vis-grid-item bg-light`}
@@ -41,7 +41,7 @@ export default class VisGridItem extends PureComponent {
           hover={this.state.hover}
           filters={this.props.filters}
           filterRemove={this.props.filterRemove} />
-        
+
         <VisGridItemContent
           {...this.props.operation}
           data={this.props.data}
@@ -49,6 +49,7 @@ export default class VisGridItem extends PureComponent {
           filters={this.props.filters}
           filterAdded={this.props.filterAdded}
           filterRemove={this.props.filterRemove}
+          config={this.config}
         />
       </div>
     );
diff --git a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
index 19e6517..e62cb27 100644
--- a/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
+++ b/source/component/Layout/VisGridView/VisGridItem/VisGridItemContent/VisGridItemContent.js
@@ -4,9 +4,6 @@ import React, { PureComponent, Suspense } from "react";
 // css class
 import "./VisGridItemContent.css";
 
-// config for view grid and vis compoments
-import _CONFIG_ from "../../../../../../config/vis-config.json";
-
 import VisTypeComponents from "../../../../VisualTools/VisTypeComponents.js";
 
 const PieChart = React.lazy(() =>
diff --git a/source/component/Layout/VisGridView/VisGridView.js b/source/component/Layout/VisGridView/VisGridView.js
index 592e6e6..3b17fb2 100644
--- a/source/component/Layout/VisGridView/VisGridView.js
+++ b/source/component/Layout/VisGridView/VisGridView.js
@@ -8,7 +8,7 @@ import "./VisGridView.css";
 // config for view grid and vis compoments
 import _CONFIG_ from "../../../../config/vis-config.json";
 
-// enumeration for 
+// enumeration for
 
 class VisGridView extends PureComponent {
   constructor(props) {
@@ -22,9 +22,9 @@ class VisGridView extends PureComponent {
       cols: 0,
       config: {
         layout: [], // calculate layout based on view's width and vis charts.
-        grid: [..._CONFIG_.UNIT_OF_GRID_VIEW], // a size of grid [width, height] in pixel
-        margins: [..._CONFIG_.MARGIN_OF_GRID_VIEW],
-        visConfig: [..._CONFIG_.VISUALIZATION_VIEW_CONFIGURATION]
+        grid: [...this.props.config.UNIT_OF_GRID_VIEW], // a size of grid [width, height] in pixel
+        margins: [...this.props.config.MARGIN_OF_GRID_VIEW],
+        visConfig: [...this.props.config.VISUALIZATION_VIEW_CONFIGURATION]
       },
       error: null,
       isLoad: false,
@@ -39,9 +39,9 @@ class VisGridView extends PureComponent {
     const rect = this.self.current.getBoundingClientRect();
     // console.log(rect, window.innerWidth, window.innerHeight)
     const cols = parseInt((rect.width - this.state.config.margins[0] ) / (this.state.config.grid[0]+this.state.config.margins[0]));
-    
+
     if(cols===this.state.cols) return;
-    
+
     // if(this.state.config.visConfig.find(config=>config.fullScreened)){
     //   console.log('FUll')
     // }else{
@@ -92,7 +92,7 @@ class VisGridView extends PureComponent {
   componentWillUnmount() {
     window.removeEventListener("resize", this.updateViewSize);
   }
-  
+
   layoutChangeHandler(layout){
     console.log('layout', layout)
   }
@@ -100,9 +100,9 @@ class VisGridView extends PureComponent {
   render() {
     if (this.state.config.layout.length > 0) {
       let __vis = this.state.config.layout.map((item, index) => (
-        
+
         <div key={item.i} className="border border-primary">
-          <VisGridItem 
+          <VisGridItem
             {...item}
             operation={this.state.config.visConfig[index]}
             data={this.props.data}
@@ -111,6 +111,7 @@ class VisGridView extends PureComponent {
             filterAdded = {this.props.filterAdded}
             filterRemove = {this.props.filterRemove}
             toggleFullScreen={this.fullScreenHandler}
+            config={this.props.config}
           />
         </div>
       ));
diff --git a/source/index.js b/source/index.js
index db26acc..38ade10 100644
--- a/source/index.js
+++ b/source/index.js
@@ -26,8 +26,18 @@ import "../node_modules/react-resizable/css/styles.css";
 
 import "./style/main.scss";
 import 'react-virtualized/styles.css';
+
 // config for view grid and vis compoments
-import _CONFIG_ from "../config/vis-config.json";
+// import _CONFIG_ from "../config/vis-config.json";
+
+// get confing on request
+function getConfig(){
+  const query = new URLSearchParams(window.location.search);
+  let config_url = query.get("template") || "../config/vis-config.json"
+  return fetch(config_url, {cors:true}).then(x=>x.json())
+}
+
+
 
 // var __DM = null;
 function isNumeric(str) {
@@ -92,7 +102,6 @@ function filterData(data, filters) {
 class App extends React.PureComponent {
   constructor(props) {
     super(props);
-    console.log('config', _CONFIG_)
     this.state = {
       error: null,
       isLoaded: false,
@@ -102,6 +111,7 @@ class App extends React.PureComponent {
       filters: [],
       isFullScreen: false,
       fullScreenVis: null,
+      config: null
 
 
     };
@@ -171,59 +181,68 @@ class App extends React.PureComponent {
   }
 
   componentDidMount() {
-    if (_CONFIG_.DATA_FORMAT === 'csv') {
-      d3.csv(_CONFIG_.DATA_RESOURCE_URL, d => covertRaw(d)).then(data => {
-        this.setState({
-          isLoaded: true,
-          data: data
-        });
-      })
-
-    } else if (_CONFIG_.DATA_FORMAT === 'json') {
-      fetch(_CONFIG_.DATA_RESOURCE_URL, {
-        mode: 'cors'
-      }).then(res => res.json()).then(data => {
-        // TODO need a replace method to replace null, undefined etc.
-        data.forEach(d => {// clear up null value
-          if (d.disease_type == null) d.disease_type = 'NA'
-          if (d.sexlabel == null) d.sexlabel = 'NA'
-          if (d.age == null) d.age = 'NA'
-          if (d.stagelabel == null) d.stagelabel = 'NA'
-        })
-        return data;
-      })
-        .then((data) => {
-          this.setState({
-            isLoaded: true,
-            data: data
-          });
-        },
-          // Note: it's important to handle errors here
-          // instead of a catch() block so that we don't swallow
-          // exceptions from actual bugs in components.
-          (error) => {
-            console.log('error', error)
-            this.setState({
-              isLoaded: true,
-              error
-            });
+    getConfig().then(_CONFIG_=>{
+          if (_CONFIG_.DATA_FORMAT === 'csv') {
+            d3.csv(_CONFIG_.DATA_RESOURCE_URL, d => covertRaw(d)).then(data => {
+              this.setState({
+                isLoaded: true,
+                data: data,
+                config: _CONFIG_
+              });
+            })
+
+          } else if (_CONFIG_.DATA_FORMAT === 'json') {
+            fetch(_CONFIG_.DATA_RESOURCE_URL, {
+              mode: 'cors'
+            }).then(res => res.json()).then(data => {
+              // TODO need a replace method to replace null, undefined etc.
+              data.forEach(d => {// clear up null value
+                if (d.disease_type == null) d.disease_type = 'NA'
+                if (d.sexlabel == null) d.sexlabel = 'NA'
+                if (d.age == null) d.age = 'NA'
+                if (d.stagelabel == null) d.stagelabel = 'NA'
+              })
+              return data;
+            })
+              .then((data) => {
+                this.setState({
+                  isLoaded: true,
+                  data: data
+                });
+              },
+                // Note: it's important to handle errors here
+                // instead of a catch() block so that we don't swallow
+                // exceptions from actual bugs in components.
+                (error) => {
+                  console.log('error', error)
+                  this.setState({
+                    isLoaded: true,
+                    error: error
+                  });
+                }
+              )
           }
-        )
-    }
 
 
-    if (this.state.isFullScreen) {
-      // debounce();
-      this.resizeHandler();
-    }
+          if (this.state.isFullScreen) {
+            // debounce();
+            this.resizeHandler();
+          }
 
 
-    // TODO debouce
-    window.addEventListener("resize", this.debounceResizeHandler);
+          // TODO debouce
+          window.addEventListener("resize", this.debounceResizeHandler);
+    }).catch(error=> {
+      console.error(error)
+      this.setState({
+        isLoaded: true,
+        error: error
+      });
+    })
 
   }
   resizeHandler() {
-    
+
     console.log(`resized to: ${this.state.isFullScreen}`, window.innerWidth, 'x', window.innerHeight)
   }
 
@@ -233,7 +252,7 @@ class App extends React.PureComponent {
   }
 
   render() {
-    const { error, isLoaded, data, filterData, filters } = this.state;
+    const { error, isLoaded, data, filterData, filters, config } = this.state;
     const progressAttrs = {
       now: data.length,
       label: `${data.length}/${data.length}`
@@ -268,7 +287,7 @@ class App extends React.PureComponent {
               label={progressAttrs.label} />
           </nav>
           <FilterOperationPanel filters={filters} filterRemove={this.removeFiltersHandler.bind(this)} />
-          {this.state.isFullScreen?<VisFullScreenView operation={_CONFIG_.VISUALIZATION_VIEW_CONFIGURATION.find(opt=>opt.id==this.state.fullScreenVis)}             data={data}
+          {this.state.isFullScreen?<VisFullScreenView operation={config.VISUALIZATION_VIEW_CONFIGURATION.find(opt=>opt.id==this.state.fullScreenVis)}             data={data}
             filterData={filterData}
             filters={filters}
             filterAdded={this.addFiltersHandler.bind(this)}
@@ -281,6 +300,7 @@ class App extends React.PureComponent {
             filterAdded={this.addFiltersHandler.bind(this)}
             filterRemove={this.removeFiltersHandler.bind(this)}
             fullVisScreenHandler={this.fullScreenHandler}
+            config={config}
           />}
         </div>
       );

From 4ed2c867e133e44903c5e73afc7a1aae35253f67 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Sat, 27 Feb 2021 19:01:15 -0500
Subject: [PATCH 12/23] buildah build automatically

---
 .github/workflows/buildah.yml | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .github/workflows/buildah.yml

diff --git a/.github/workflows/buildah.yml b/.github/workflows/buildah.yml
new file mode 100644
index 0000000..964602b
--- /dev/null
+++ b/.github/workflows/buildah.yml
@@ -0,0 +1,2 @@
+- name: Buildah Build
+  uses: redhat-actions/buildah-build@v2.2

From be5d436d84de17720da4012de7a9a82c8b1c233a Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Sat, 27 Feb 2021 19:05:02 -0500
Subject: [PATCH 13/23] correct buildah

---
 .github/workflows/buildah.yml | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/buildah.yml b/.github/workflows/buildah.yml
index 964602b..a5259d5 100644
--- a/.github/workflows/buildah.yml
+++ b/.github/workflows/buildah.yml
@@ -1,2 +1,18 @@
-- name: Buildah Build
-  uses: redhat-actions/buildah-build@v2.2
+name: Buildah via Dockerfile
+on: [push]
+
+jobs:
+  build:
+    name: Build image
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Buildah Action
+      uses: redhat-actions/buildah-build@v2.2
+      with:
+        image: eaglescope-edge
+        tags: v1 ${{ github.sha }}
+        dockerfiles: |
+          ./Dockerfile

From 38c9391b47ea51bec5c681fd463b326aa40d197f Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 10:52:11 -0500
Subject: [PATCH 14/23] npm install

---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index 3caecf7..1952de9 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,6 +2,7 @@ from node:8-alpine
 
 RUN npm install -g http-server
 RUN npm install -g parcel-bundler
+RUN npm install
 EXPOSE 80
 RUN mkdir -p /source/
 COPY ./ /source/

From c5dabc96bf39baf9c0b10c69028f54ab60d09c6c Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 10:54:51 -0500
Subject: [PATCH 15/23] correct where install done

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 1952de9..1a4b60e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,12 +2,12 @@ from node:8-alpine
 
 RUN npm install -g http-server
 RUN npm install -g parcel-bundler
-RUN npm install
 EXPOSE 80
 RUN mkdir -p /source/
 COPY ./ /source/
 WORKDIR /source/
 RUN rm -rf ./.git/
+RUN npm install
 RUN npm run-script build
 RUN mkdir -p /var/www/html/
 RUN mv /source/dist/* /var/www/html

From 221fe229ad5cbd43d63387c12e7bf81192bc002b Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 11:10:46 -0500
Subject: [PATCH 16/23] set unsafe perm true

---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index 1a4b60e..87e6362 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,6 +7,7 @@ RUN mkdir -p /source/
 COPY ./ /source/
 WORKDIR /source/
 RUN rm -rf ./.git/
+RUN npm config set unsafe-perm true
 RUN npm install
 RUN npm run-script build
 RUN mkdir -p /var/www/html/

From e446ed320ab71e2e5f5917f47a6f4884bcacc1fb Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 11:14:57 -0500
Subject: [PATCH 17/23] user change

---
 Dockerfile | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 87e6362..a7a7802 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,12 @@ RUN mkdir -p /source/
 COPY ./ /source/
 WORKDIR /source/
 RUN rm -rf ./.git/
-RUN npm config set unsafe-perm true
+
+RUN chgrp -R 0 /source
+RUN chmod -R g+rwX /source
+
+USER 1001
+
 RUN npm install
 RUN npm run-script build
 RUN mkdir -p /var/www/html/

From c8737f75d412baa4491aeb2a685ef513cd069c87 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 11:20:20 -0500
Subject: [PATCH 18/23] try an update

---
 Dockerfile        |  10 +-
 package-lock.json | 590 ++++++----------------------------------------
 2 files changed, 71 insertions(+), 529 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index a7a7802..1ffd90f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,11 +8,6 @@ COPY ./ /source/
 WORKDIR /source/
 RUN rm -rf ./.git/
 
-RUN chgrp -R 0 /source
-RUN chmod -R g+rwX /source
-
-USER 1001
-
 RUN npm install
 RUN npm run-script build
 RUN mkdir -p /var/www/html/
@@ -21,4 +16,9 @@ RUN mv /source/treemap /var/www/html
 RUN mv /source/data /var/www/html
 WORKDIR /var/www/html/
 
+RUN chgrp -R 0 /var/www/html/
+RUN chmod -R g+rwX /var/www/html/
+
+USER 1001
+
 CMD http-server -p 80
diff --git a/package-lock.json b/package-lock.json
index b6b4023..dde425c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1042,9 +1042,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
-      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.8.6.tgz",
+      "integrity": "sha512-1oXH2bAFXz9SttE1v/0Jp+2ZVePsPEAPGIuPKrmljWZcS3FPBEn2Q4WcANozZC0YiCjTWOF55k0g6rbSZS39ew=="
     },
     "@ranfdev/deepobj": {
       "version": "1.0.2",
@@ -1885,9 +1885,9 @@
           }
         },
         "fsevents": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
-          "integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
           "dev": true,
           "optional": true
         },
@@ -3600,482 +3600,19 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.9.tgz",
-      "integrity": "sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==",
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "optional": true,
       "requires": {
-        "nan": "^2.12.1",
-        "node-pre-gyp": "^0.12.0"
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
       },
       "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "4.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "bundled": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "^3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "optional": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "optional": true
-        },
-        "minipass": {
-          "version": "2.3.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
-        },
-        "minizlib": {
-          "version": "1.2.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.3.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "debug": "^4.1.0",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.12.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.1",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.2.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.0.6",
-          "bundled": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.4.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.8",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.7.0",
-          "bundled": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.8",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "chownr": "^1.1.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.3.4",
-            "minizlib": "^1.1.1",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.2"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "string-width": "^1.0.2 || 2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "yallist": {
-          "version": "3.0.3",
-          "bundled": true,
+        "bindings": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+          "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
           "optional": true
         }
       }
@@ -5027,14 +4564,14 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash-es": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
-      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "lodash.clone": {
       "version": "4.5.0",
@@ -5340,9 +4877,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "nan": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
-      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
       "optional": true
     },
     "nanomatch": {
@@ -6540,9 +6077,9 @@
       }
     },
     "react-bootstrap": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.3.tgz",
-      "integrity": "sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.0.tgz",
+      "integrity": "sha512-t1o4kP3coj2HIaBepJxGAc7HZ1fWGria/s0Yr9JUmNkCilyrnXtK209qn28vuZ4muhnA0uR0GMMXAMrLsLyiIw==",
       "requires": {
         "@babel/runtime": "^7.4.2",
         "@restart/context": "^2.1.4",
@@ -6558,24 +6095,24 @@
         "invariant": "^2.2.4",
         "prop-types": "^15.7.2",
         "prop-types-extra": "^1.1.0",
-        "react-overlays": "^4.1.0",
+        "react-overlays": "^4.1.1",
         "react-transition-group": "^4.4.1",
         "uncontrollable": "^7.0.0",
         "warning": "^4.0.3"
       },
       "dependencies": {
         "@types/react-transition-group": {
-          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
-          "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+          "version": "4.4.1",
+          "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
+          "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
           "requires": {
             "@types/react": "*"
           }
         },
         "csstype": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
         },
         "dom-helpers": {
           "version": "5.2.0",
@@ -6587,9 +6124,9 @@
           },
           "dependencies": {
             "@babel/runtime": {
-              "version": "7.12.5",
-              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-              "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+              "version": "7.13.8",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.8.tgz",
+              "integrity": "sha512-CwQljpw6qSayc0fRG1soxHAKs1CnQMOChm4mlQP6My0kf9upVGizj/KhlTTgyUnETmHpcUXjaluNAkteRFuafg==",
               "requires": {
                 "regenerator-runtime": "^0.13.4"
               }
@@ -6716,17 +6253,17 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.12.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-          "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+          "version": "7.13.8",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.8.tgz",
+          "integrity": "sha512-CwQljpw6qSayc0fRG1soxHAKs1CnQMOChm4mlQP6My0kf9upVGizj/KhlTTgyUnETmHpcUXjaluNAkteRFuafg==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
         },
         "csstype": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-          "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+          "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
         },
         "dom-helpers": {
           "version": "5.2.0",
@@ -7279,9 +6816,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.32.6",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.6.tgz",
-      "integrity": "sha512-1bcDHDcSqeFtMr0JXI3xc/CXX6c4p0wHHivJdru8W7waM7a1WjKMm4m/Z5sY7CbVw4Whi2Chpcw6DFfSWwGLzQ==",
+      "version": "1.32.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
+      "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -8205,12 +7742,12 @@
       "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
     },
     "uncontrollable": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
-      "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
       "requires": {
         "@babel/runtime": "^7.6.3",
-        "@types/react": "^16.9.11",
+        "@types/react": ">=16.9.11",
         "invariant": "^2.2.4",
         "react-lifecycles-compat": "^3.0.4"
       }
@@ -8525,18 +8062,23 @@
       }
     },
     "vega-embed": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.15.1.tgz",
-      "integrity": "sha512-2ZCc4lVwK8O0cVisdizuYaZQZoc3ZUnB+qlTFEu2ch6mP+RO7mghqa0JQmwHs1tXUZyL20GAoWtK47oKC9DxUw==",
+      "version": "6.15.2",
+      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.15.2.tgz",
+      "integrity": "sha512-/Qk+YdDP8hELbvtGzxnKbNzk1oi33k3qrdwE/bpSQdHoM2UoQoR7lePq6/uEgGQtIMEm34XcMte9/rWkmnUPWA==",
       "requires": {
         "fast-json-patch": "^3.0.0-1",
-        "json-stringify-pretty-compact": "^2.0.0",
+        "json-stringify-pretty-compact": "^3.0.0",
         "semver": "^7.3.4",
         "vega-schema-url-parser": "^2.1.0",
         "vega-themes": "^2.9.1",
         "vega-tooltip": "^0.25.0"
       },
       "dependencies": {
+        "json-stringify-pretty-compact": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz",
+          "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
+        },
         "semver": {
           "version": "7.3.4",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
@@ -9004,9 +8546,9 @@
       }
     },
     "vega-themes": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/vega-themes/-/vega-themes-2.9.1.tgz",
-      "integrity": "sha512-N6GU8u1EpfqxswXpBKLYouD3gYGfvrKWTC07JSrnlvGUzKzXMPDm4fN8FP8+cBpTwBL6JDZBd86A1Haea/nTfQ=="
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/vega-themes/-/vega-themes-2.10.0.tgz",
+      "integrity": "sha512-prePRUKFUFGWniuZsJOfkdb+27Gwrrm82yAlVuU+912kcknsx1DVmMSg2yF79f4jdtqnAFIGycZgxoj13SEIuQ=="
     },
     "vega-time": {
       "version": "2.0.4",
@@ -9034,11 +8576,11 @@
       }
     },
     "vega-tooltip": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.25.0.tgz",
-      "integrity": "sha512-S48d/eP6WfieLmUvFEjd+raHWKKeK/RfTlwLa3zGcBULDHJY2NU2vRfjC1x33G6Y7eKeAfqGpM6ER5Qt1nf8tA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.25.1.tgz",
+      "integrity": "sha512-ugGwGi2/p3OpB8N15xieuzP8DyV5DreqMWcmJ9zpWT8GlkyKtef4dGRXnvHeHQ+iJFmWrq4oZJ+kLTrdiECjAg==",
       "requires": {
-        "vega-util": "^1.15.2"
+        "vega-util": "^1.16.0"
       }
     },
     "vega-transforms": {

From 20f9f2dc2424bea2869e7eee044554ca6e4578cf Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 11:22:30 -0500
Subject: [PATCH 19/23] try unsafe perm earlier

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 1ffd90f..2396084 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,5 @@
 from node:8-alpine
-
+RUN npm config set unsafe-perm true
 RUN npm install -g http-server
 RUN npm install -g parcel-bundler
 EXPOSE 80

From d71be0b0eb45470ce295b7a65f9775d5b1f6d8ef Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Mon, 1 Mar 2021 11:33:28 -0500
Subject: [PATCH 20/23] copy config files on dev

---
 package-lock.json | 37 +++++++++++++++++++++++++++++++++++++
 package.json      |  9 +++++++++
 2 files changed, 46 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b6b4023..9a3b1cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5782,6 +5782,16 @@
         }
       }
     },
+    "parcel-plugin-static-files-copy": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/parcel-plugin-static-files-copy/-/parcel-plugin-static-files-copy-2.5.1.tgz",
+      "integrity": "sha512-iDi04brJU10xZYSXlOCjBfILaaoWaA7k9E78t6QpQmLOly7RykNMb9UE3bQy1ZEQx3tJINteF4HcIHrDpIK15w==",
+      "dev": true,
+      "requires": {
+        "minimatch": "3.0.4",
+        "path": "0.12.7"
+      }
+    },
     "parse-asn1": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
@@ -5819,6 +5829,33 @@
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
+      "dev": true,
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        },
+        "util": {
+          "version": "0.10.4",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
     "path-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
diff --git a/package.json b/package.json
index c9e2bce..ed35d7b 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,15 @@
     "vega-lite": "^4.17.0"
   },
   "devDependencies": {
+    "parcel-plugin-static-files-copy": "^2.5.1",
     "sass": "^1.32.6"
+  },
+  "staticFiles": {
+    "staticPath": [
+      {
+        "staticPath": "config",
+        "staticOutDir": "config/"
+      }
+    ]
   }
 }

From 668e4bcae9d4c79b835aed2e8d1acc9dbd53594f Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Wed, 3 Mar 2021 12:13:23 -0500
Subject: [PATCH 21/23] try cp instead of mv

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 743fa2a..86d295b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,7 +14,7 @@ RUN mkdir -p /var/www/html/
 RUN mv /source/dist/* /var/www/html
 RUN mv /source/treemap /var/www/html
 RUN mv /source/data /var/www/html
-RUN mv /source/config /var/www/html
+RUN cp -r /source/config /var/www/html
 WORKDIR /var/www/html/
 
 RUN chgrp -R 0 /var/www/html/

From 54f20b9556209f2719887d39a6bb310db90e04d8 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Wed, 3 Mar 2021 12:23:50 -0500
Subject: [PATCH 22/23] need port > 1024 nonroot

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 86d295b..3494356 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,4 +22,4 @@ RUN chmod -R g+rwX /var/www/html/
 
 USER 1001
 
-CMD http-server -p 80
+CMD http-server -p 1180

From d756ddbe4aab6ecf5e171d6c2144c8ea30b167f9 Mon Sep 17 00:00:00 2001
From: Ryan Birmingham <birm@rbirm.us>
Date: Wed, 3 Mar 2021 12:24:15 -0500
Subject: [PATCH 23/23] match with EXPOSE cmd

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 3494356..829ade2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,7 +2,7 @@ from node:8-alpine
 RUN npm config set unsafe-perm true
 RUN npm install -g http-server
 RUN npm install -g parcel-bundler
-EXPOSE 80
+EXPOSE 1180
 RUN mkdir -p /source/
 COPY ./ /source/
 WORKDIR /source/