From 423d2063309545825e03914d2e1431961f700820 Mon Sep 17 00:00:00 2001 From: Qingya Shu Date: Wed, 22 Jan 2020 09:54:43 -0600 Subject: [PATCH 1/2] feat(charts): add bin and line charts to explorer --- package-lock.json | 306 +++++++++--------- package.json | 4 +- .../ExplorerVisualization/index.jsx | 43 ++- src/GuppyDataExplorer/GuppyDataExplorer.jsx | 1 + src/GuppyDataExplorer/configTypeDef.js | 11 +- 5 files changed, 187 insertions(+), 178 deletions(-) diff --git a/package-lock.json b/package-lock.json index c34e29e057..33a68ef9d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,18 +25,18 @@ }, "dependencies": { "@types/node": { - "version": "10.17.9", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.9.tgz", - "integrity": "sha512-+6VygF9LbG7Gaqeog2G7u1+RUcmo0q1rI+2ZxdIg2fAUngk5Vz9fOCHXdloNUOHEPd1EuuOpL5O0CdgN9Fx5UQ==" + "version": "10.17.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.13.tgz", + "integrity": "sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg==" } } }, "@apollographql/apollo-tools": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/@apollographql/apollo-tools/-/apollo-tools-0.4.1.tgz", - "integrity": "sha512-9NaTBPX+YYCsio6AqnLHlLiqYBszgTBul2qzG2+YNZ/1RQ2owhO/7xB5XJyQz76NGOefORaZt5idwvTJXpg/Sg==", + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@apollographql/apollo-tools/-/apollo-tools-0.4.3.tgz", + "integrity": "sha512-CtC1bmohB1owdGMT2ZZKacI94LcPAZDN2WvCe+4ZXT5d7xO5PHOAb70EP/LcFbvnS8QI+pkYRSCGFQnUcv9efg==", "requires": { - "apollo-env": "^0.6.0" + "apollo-env": "^0.6.1" } }, "@apollographql/graphql-playground-html": { @@ -1770,12 +1770,11 @@ } }, "@gen3/guppy": { - "version": "0.3.13", - "resolved": "https://registry.npmjs.org/@gen3/guppy/-/guppy-0.3.13.tgz", - "integrity": "sha512-EcKB97+1Lmcl3dBOPyTULHho+4nnhx6GMBNPM/QiWvLiv/G8FaIZH4H2xNI2r2/Pef785ISae8ZO2lOl9lkyTw==", + "version": "git+https://github.com/uc-cdis/guppy.git#15c35b8d10fb53908498dbe6b5e6c99d415e82cd", + "from": "git+https://github.com/uc-cdis/guppy.git#feat/line-bin-charts", "requires": { "@elastic/elasticsearch": "^7.0.0-rc.1", - "@gen3/ui-component": "0.3.11", + "@gen3/ui-component": "git+https://github.com/uc-cdis/gen3-ui-component.git#086594d99afbffbe5deec69faa73e55a2e57eab0", "apollo-server": "^2.4.8", "apollo-server-express": "^2.4.8", "body-parser": "^1.18.3", @@ -1795,24 +1794,6 @@ "react": "^16.8.4" }, "dependencies": { - "@gen3/ui-component": { - "version": "0.3.11", - "resolved": "https://registry.npmjs.org/@gen3/ui-component/-/ui-component-0.3.11.tgz", - "integrity": "sha512-FAWcV5tQOEwfbol5froz4lJuNHn91hsq1C3FqkQt1/SKdRLwPHsBO8eBg3zIO1pE45lLdytWMaKjVNMJQKhG8Q==", - "requires": { - "babel-loader": "^8.0.5", - "postcss-loader": "^3.0.0", - "postcss-svgo": "^4.0.2", - "prop-types": "^15.7.2", - "rc-slider": "^8.6.6", - "rc-tooltip": "^3.7.3", - "react": "^16.8.4", - "react-dom": "^16.8.4", - "react-router-dom": "^4.3.1", - "recharts": "^1.5.0", - "stylelint": "^9.10.1" - } - }, "file-saver": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz", @@ -1826,11 +1807,13 @@ } }, "@gen3/ui-component": { - "version": "0.3.12", - "resolved": "https://registry.npmjs.org/@gen3/ui-component/-/ui-component-0.3.12.tgz", - "integrity": "sha512-ej0k4bXStGs6aBRF//7qgKue1eYbfFErYSibZ6eUnKI9u5voAJleaYLAks5koAqfgivnpBDYnNuTOiagxQYEBw==", + "version": "git+https://github.com/uc-cdis/gen3-ui-component.git#086594d99afbffbe5deec69faa73e55a2e57eab0", + "from": "git+https://github.com/uc-cdis/gen3-ui-component.git#feat/line-bin-charts", "requires": { "babel-loader": "^8.0.5", + "echarts": "^4.6.0", + "echarts-for-react": "^2.0.15-beta.1", + "lodash": "^4.17.15", "postcss-loader": "^3.0.0", "postcss-svgo": "^4.0.2", "prop-types": "^15.7.2", @@ -1841,6 +1824,30 @@ "react-router-dom": "^4.3.1", "recharts": "^1.5.0", "stylelint": "^9.10.1" + }, + "dependencies": { + "echarts": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz", + "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==", + "requires": { + "zrender": "4.2.0" + } + }, + "echarts-for-react": { + "version": "2.0.15-beta.1", + "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-2.0.15-beta.1.tgz", + "integrity": "sha512-wR8XaI3j/4JvTidZrrJVfP/RqSggLRlzKOwcruytyLSA6AyE51T7mK+EucfwZ0NkX8H6tPFCHCvgJH1LyXjiIg==", + "requires": { + "fast-deep-equal": "^2.0.1", + "size-sensor": "^0.2.0" + } + }, + "zrender": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz", + "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA==" + } } }, "@jest/console": { @@ -3840,9 +3847,9 @@ } }, "@types/connect": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.32.tgz", - "integrity": "sha512-4r8qa0quOvh7lGD0pre62CAb1oni1OO6ecJLGCezTmhQ8Fz50Arx9RUszryR8KlgK6avuSXvviL6yWyViQABOg==", + "version": "3.4.33", + "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz", + "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==", "requires": { "@types/node": "*" } @@ -3882,9 +3889,9 @@ } }, "@types/express-serve-static-core": { - "version": "4.17.0", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.0.tgz", - "integrity": "sha512-Xnub7w57uvcBqFdIGoRg1KhNOeEj0vB6ykUM7uFWyxvbdE89GFyqgmUcanAriMr4YOxNFZBAWkfcWIb4WBPt3g==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.2.tgz", + "integrity": "sha512-El9yMpctM6tORDAiBwZVLMcxoTMcqqRO9dVyYcn7ycLWbvR8klrDn8CAOwRfZujZtWD7yS/mshTdz43jMOejbg==", "requires": { "@types/node": "*", "@types/range-parser": "*" @@ -3960,9 +3967,9 @@ } }, "@types/keygrip": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.1.tgz", - "integrity": "sha1-/1QEYtL7TQqIRBzq8n0oewHD2Hg=" + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.2.tgz", + "integrity": "sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==" }, "@types/koa": { "version": "2.11.0", @@ -4005,6 +4012,14 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.17.tgz", "integrity": "sha512-Is+l3mcHvs47sKy+afn2O1rV4ldZFU7W8101cNlOd+MRbjM4Onida8jSZnJdTe/0Pcf25g9BNIUsuugmE6puHA==" }, + "@types/node-fetch": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.5.4.tgz", + "integrity": "sha512-Oz6id++2qAOFuOlE1j0ouk1dzl3mmI1+qINPNBhi9nt/gVOz0G+13Ao6qjhdF0Ys+eOkhu6JnFmt38bR3H0POQ==", + "requires": { + "@types/node": "*" + } + }, "@types/normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz", @@ -4558,35 +4573,36 @@ } }, "apollo-cache-control": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.8.8.tgz", - "integrity": "sha512-hpIJg3Tmb6quA111lrVO+d3qcyYRlJ8JqbeQdcgwLT3fb2VQzk21SrBZYl2oMM4ZqSOWCZWg4/Cn9ARYqdWjKA==", + "version": "0.8.11", + "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.8.11.tgz", + "integrity": "sha512-8yz4qbRBIFDWRHdT8uPh0HHh+VbQXxoFGJQRAG8hyMRvR+EuURXX1ltXYkn5J3YJ3MKEqgsvwGaq60dFZq63UQ==", "requires": { "apollo-server-env": "^2.4.3", - "graphql-extensions": "^0.10.7" + "graphql-extensions": "^0.10.10" } }, "apollo-datasource": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.6.3.tgz", - "integrity": "sha512-gRYyFVpJgHE2hhS+VxMeOerxXQ/QYxWG7T6QddfugJWYAG9DRCl65e2b7txcGq2NP3r+O1iCm4GNwhRBDJbd8A==", + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.6.4.tgz", + "integrity": "sha512-u4eu6Q94q6KuZacZfdo4vCevA81F4QWeTYEXUvoksQMJpiacPHHe0DJrofKVKvxngUp5kCi1RnPXSc6kBY+/oA==", "requires": { - "apollo-server-caching": "^0.5.0", + "apollo-server-caching": "^0.5.1", "apollo-server-env": "^2.4.3" } }, "apollo-engine-reporting": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-1.4.11.tgz", - "integrity": "sha512-7ZkbOGvPfWppN8+1KHzyHPrJTMOmrMUy38unao2c9TTToOAnEvx2MtUTo6mr3aw/g8UQYUf0x2Cq+K2YSlUTPw==", + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-1.4.14.tgz", + "integrity": "sha512-cCG9qDOPwbh87ZjQGHgmnP3oPqhqjIZcNmm/lNtWkWXGTlxV/jmUEqpVi+wsDbE5gR7d1OFk6GqSy2ZQh+S+Bw==", "requires": { "apollo-engine-reporting-protobuf": "^0.4.4", - "apollo-graphql": "^0.3.4", - "apollo-server-caching": "^0.5.0", + "apollo-graphql": "^0.3.7", + "apollo-server-caching": "^0.5.1", "apollo-server-env": "^2.4.3", - "apollo-server-types": "^0.2.8", + "apollo-server-errors": "^2.3.4", + "apollo-server-types": "^0.2.10", "async-retry": "^1.2.1", - "graphql-extensions": "^0.10.7" + "graphql-extensions": "^0.10.10" } }, "apollo-engine-reporting-protobuf": { @@ -4598,19 +4614,20 @@ } }, "apollo-env": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/apollo-env/-/apollo-env-0.6.0.tgz", - "integrity": "sha512-DttHOpLISRej8STjbXjQCXq3YeE2pATaC4UEd2YE7TjjYhQmp9yxohlkHfSR78BvPzczhyDs6WQQEzasHv0M0A==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/apollo-env/-/apollo-env-0.6.1.tgz", + "integrity": "sha512-B9BgpQGR1ndeDtb4Gtor0J4CITQ+OPACZrVW6lgStnljKEe9ZB76DZ1dAd3OCeizAswW6Lo9uvfK8jhVS5nBhQ==", "requires": { + "@types/node-fetch": "2.5.4", "core-js": "^3.0.1", "node-fetch": "^2.2.0", "sha.js": "^2.4.11" }, "dependencies": { "core-js": { - "version": "3.4.8", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.8.tgz", - "integrity": "sha512-b+BBmCZmVgho8KnBUOXpvlqEMguko+0P+kXCwD4vIprsXC6ht1qgPxtb1OK6XgSlrySF71wkwBQ0Hv695bk9gQ==" + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz", + "integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==" }, "node-fetch": { "version": "2.6.0", @@ -4620,11 +4637,11 @@ } }, "apollo-graphql": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/apollo-graphql/-/apollo-graphql-0.3.5.tgz", - "integrity": "sha512-X2N/LREJSAkI0RhMEJ6d0kGjdJSI4SFyf6soLvLLTQn0Bhi/52hMLf8k4kO5t0SCKuWc1+Pw/tdCniK4Gc1IdA==", + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/apollo-graphql/-/apollo-graphql-0.3.7.tgz", + "integrity": "sha512-ghW16xx9tRcyL38Pw6G5OidMnYn+CNUGZWmvqQgEO2nRy4T0ONPZZBOvGrIMtJQ70oEykNMKGm0zm6PdHdxd8Q==", "requires": { - "apollo-env": "^0.6.0", + "apollo-env": "^0.6.1", "lodash.sortby": "^4.7.0" } }, @@ -4640,45 +4657,45 @@ } }, "apollo-server": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/apollo-server/-/apollo-server-2.9.13.tgz", - "integrity": "sha512-Aedj/aHRMCDMUwtM+hXiliX1OkFNl1NyiQUADbwm6AMV3OrfT9TUbbSI1AN2qsx+rg6dIhpAiHLUf73uDy3V/g==", + "version": "2.9.16", + "resolved": "https://registry.npmjs.org/apollo-server/-/apollo-server-2.9.16.tgz", + "integrity": "sha512-dqB1shkjl9ne7DfSHXDH5sT70llr9zswLL+/g/4zt4/H+k+2pkD1BShQkNIK7PBYcVa8KvRAHXiHTXZ36GCspA==", "requires": { - "apollo-server-core": "^2.9.13", - "apollo-server-express": "^2.9.13", + "apollo-server-core": "^2.9.16", + "apollo-server-express": "^2.9.16", "express": "^4.0.0", "graphql-subscriptions": "^1.0.0", "graphql-tools": "^4.0.0" } }, "apollo-server-caching": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/apollo-server-caching/-/apollo-server-caching-0.5.0.tgz", - "integrity": "sha512-l7ieNCGxUaUAVAAp600HjbUJxVaxjJygtPV0tPTe1Q3HkPy6LEWoY6mNHV7T268g1hxtPTxcdRu7WLsJrg7ufw==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/apollo-server-caching/-/apollo-server-caching-0.5.1.tgz", + "integrity": "sha512-L7LHZ3k9Ao5OSf2WStvQhxdsNVplRQi7kCAPfqf9Z3GBEnQ2uaL0EgO0hSmtVHfXTbk5CTRziMT1Pe87bXrFIw==", "requires": { "lru-cache": "^5.0.0" } }, "apollo-server-core": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.9.13.tgz", - "integrity": "sha512-iXTGNCtouB0Xe37ySovuZO69NBYOByJlZfUc87gj0pdcz0WbdfUp7qUtNzy3onp63Zo60TFkHWhGNcBJYFluzw==", + "version": "2.9.16", + "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.9.16.tgz", + "integrity": "sha512-4ftdjSfs/3aEare9QNTVSF0yUvXETxiohuDLZ7gmMIQxNnZhUjVXiZL1rYKuIZ12uH7xLvh/DwkXRt6nLG/lZA==", "requires": { - "@apollographql/apollo-tools": "^0.4.0", + "@apollographql/apollo-tools": "^0.4.3", "@apollographql/graphql-playground-html": "1.6.24", "@types/graphql-upload": "^8.0.0", "@types/ws": "^6.0.0", - "apollo-cache-control": "^0.8.8", - "apollo-datasource": "^0.6.3", - "apollo-engine-reporting": "^1.4.11", - "apollo-server-caching": "^0.5.0", + "apollo-cache-control": "^0.8.11", + "apollo-datasource": "^0.6.4", + "apollo-engine-reporting": "^1.4.14", + "apollo-server-caching": "^0.5.1", "apollo-server-env": "^2.4.3", "apollo-server-errors": "^2.3.4", - "apollo-server-plugin-base": "^0.6.8", - "apollo-server-types": "^0.2.8", - "apollo-tracing": "^0.8.8", + "apollo-server-plugin-base": "^0.6.10", + "apollo-server-types": "^0.2.10", + "apollo-tracing": "^0.8.11", "fast-json-stable-stringify": "^2.0.0", - "graphql-extensions": "^0.10.7", + "graphql-extensions": "^0.10.10", "graphql-tag": "^2.9.2", "graphql-tools": "^4.0.0", "graphql-upload": "^8.0.2", @@ -4709,18 +4726,18 @@ "integrity": "sha512-Y0PKQvkrb2Kd18d1NPlHdSqmlr8TgqJ7JQcNIfhNDgdb45CnqZlxL1abuIRhr8tiw8OhVOcFxz2KyglBi8TKdA==" }, "apollo-server-express": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.9.13.tgz", - "integrity": "sha512-M306e07dpZ8YpZx4VBYa0FWlt+wopj4Bwn0Iy1iJ6VjaRyGx2HCUJvLpHZ+D0TIXtQ2nX3DTYeOouVaDDwJeqQ==", + "version": "2.9.16", + "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.9.16.tgz", + "integrity": "sha512-ZDc7GP+piUm67alJ0DIE9f36tHcCiNm3PHMLIVJlVE/rcGwzRjV5rardRqeslljQiO2J+1IwXKwJ0/kRrZ4JvQ==", "requires": { "@apollographql/graphql-playground-html": "1.6.24", "@types/accepts": "^1.3.5", "@types/body-parser": "1.17.1", "@types/cors": "^2.8.4", - "@types/express": "4.17.1", + "@types/express": "4.17.2", "accepts": "^1.3.5", - "apollo-server-core": "^2.9.13", - "apollo-server-types": "^0.2.8", + "apollo-server-core": "^2.9.16", + "apollo-server-types": "^0.2.10", "body-parser": "^1.18.3", "cors": "^2.8.4", "express": "^4.17.1", @@ -4729,56 +4746,44 @@ "parseurl": "^1.3.2", "subscriptions-transport-ws": "^0.9.16", "type-is": "^1.6.16" - }, - "dependencies": { - "@types/express": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.1.tgz", - "integrity": "sha512-VfH/XCP0QbQk5B5puLqTLEeFgR8lfCJHZJKkInZ9mkYd+u8byX0kztXEQxEk4wZXJs8HI+7km2ALXjn4YKcX9w==", - "requires": { - "@types/body-parser": "*", - "@types/express-serve-static-core": "*", - "@types/serve-static": "*" - } - } } }, "apollo-server-plugin-base": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/apollo-server-plugin-base/-/apollo-server-plugin-base-0.6.8.tgz", - "integrity": "sha512-0pKCjcg9gHBK8qlb280+N0jl99meixQtxXnMJFyIfD+45OpKQ+WolHIbO0oZgNEt7r/lNWwH8v3l5yYm1ghz1A==", + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/apollo-server-plugin-base/-/apollo-server-plugin-base-0.6.10.tgz", + "integrity": "sha512-/xT7UT/tbCDIoTQ4lcEQsJ0ACh7h7QG0BDmeSlDXjwDuENRI50bQ2QoluCMPitZXGe+FCQfLhvzFgzbsZGT0IA==", "requires": { - "apollo-server-types": "^0.2.8" + "apollo-server-types": "^0.2.10" } }, "apollo-server-types": { - "version": "0.2.8", - "resolved": "https://registry.npmjs.org/apollo-server-types/-/apollo-server-types-0.2.8.tgz", - "integrity": "sha512-5OclxkAqjhuO75tTNHpSO/+doJZ+VlRtTefnrPJdK/uwVew9U/VUCWkYdryZWwEyVe1nvQ/4E7RYR4tGb8l8wA==", + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/apollo-server-types/-/apollo-server-types-0.2.10.tgz", + "integrity": "sha512-ke9ViPEWfW+2XLe66CaKGVZdS7duSLbamSKSprmmeMBd8s6tmjf0FumUVxV7X4quxPZi0OPo8x0LoLU7GWsmaA==", "requires": { "apollo-engine-reporting-protobuf": "^0.4.4", - "apollo-server-caching": "^0.5.0", + "apollo-server-caching": "^0.5.1", "apollo-server-env": "^2.4.3" } }, "apollo-tracing": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/apollo-tracing/-/apollo-tracing-0.8.8.tgz", - "integrity": "sha512-aIwT2PsH7VZZPaNrIoSjzLKMlG644d2Uf+GYcoMd3X6UEyg1sXdWqkKfCeoS6ChJKH2khO7MXAvOZC03UnCumQ==", + "version": "0.8.11", + "resolved": "https://registry.npmjs.org/apollo-tracing/-/apollo-tracing-0.8.11.tgz", + "integrity": "sha512-Z0wDZ5QOBmpGoajB74ZKGTM7GzG6rqZRzAph4kxud6axcyNqUDKiKZ3Eere+NSLwvvt8M3qnPW4UJSUy/wwOXg==", "requires": { "apollo-server-env": "^2.4.3", - "graphql-extensions": "^0.10.7" + "graphql-extensions": "^0.10.10" } }, "apollo-utilities": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.2.tgz", - "integrity": "sha512-JWNHj8XChz7S4OZghV6yc9FNnzEXj285QYp/nLNh943iObycI5GTDO3NGR9Dth12LRrSFMeDOConPfPln+WGfg==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.3.tgz", + "integrity": "sha512-F14aX2R/fKNYMvhuP2t9GD9fggID7zp5I96MF5QeKYWDWTrkRdHRp4+SVfXUVN+cXOaB/IebfvRtzPf25CM0zw==", "requires": { "@wry/equality": "^0.1.2", "fast-json-stable-stringify": "^2.0.0", "ts-invariant": "^0.4.0", - "tslib": "^1.9.3" + "tslib": "^1.10.0" } }, "app-root-dir": { @@ -5012,9 +5017,9 @@ "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" }, "async-retry": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.2.3.tgz", - "integrity": "sha512-tfDb02Th6CE6pJUF2gjW5ZVjsgwlucVXOEQMvEX9JgSJMs9gAX+Nz3xRuJBKuUYjTSYORqvDBORdAQ3LU59g7Q==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.1.tgz", + "integrity": "sha512-aiieFW/7h3hY0Bq5d+ktDBejxuwR78vRu9hDUdR8rNhSaQ29VzPL4AoIRG7D/c7tdenwOcKvgPM6tIxB3cB6HA==", "requires": { "retry": "0.12.0" } @@ -6561,7 +6566,6 @@ "version": "2.10.1", "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", - "optional": true, "requires": { "hoek": "2.x.x" } @@ -11165,8 +11169,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "optional": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", @@ -11187,14 +11190,12 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11209,20 +11210,17 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "optional": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "optional": true + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", @@ -11339,8 +11337,7 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "optional": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -11352,7 +11349,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11367,7 +11363,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -11375,14 +11370,12 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "optional": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11401,7 +11394,6 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "optional": true, "requires": { "minimist": "0.0.8" } @@ -11482,8 +11474,7 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "optional": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", @@ -11495,7 +11486,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "optional": true, "requires": { "wrappy": "1" } @@ -11581,8 +11571,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", @@ -11618,7 +11607,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11638,7 +11626,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -11682,14 +11669,12 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "optional": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "optional": true + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -12104,13 +12089,13 @@ } }, "graphql-extensions": { - "version": "0.10.7", - "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.10.7.tgz", - "integrity": "sha512-YuP7VQxNePG4bWRQ5Vk+KRMbZ9r1IWCqCCogOMz/1ueeQ4gZe93eGRcb0vhpOdMFnCX6Vyvd4+sC+N6LR3YFOQ==", + "version": "0.10.10", + "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.10.10.tgz", + "integrity": "sha512-pNb1DmUk6vsGtCjCRecpKoXadKNMyKxyLyE9IX65N9aKSmLL+AF7dJOOc4MWhdaAXlzxaDDhe54GpaOfoH7AOw==", "requires": { - "@apollographql/apollo-tools": "^0.4.0", + "@apollographql/apollo-tools": "^0.4.3", "apollo-server-env": "^2.4.3", - "apollo-server-types": "^0.2.8" + "apollo-server-types": "^0.2.10" } }, "graphql-fields": { @@ -12623,8 +12608,7 @@ "hoek": { "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", - "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "optional": true + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=" }, "hoist-non-react-statics": { "version": "2.5.5", diff --git a/package.json b/package.json index e4f1ce3f4a..16474ce434 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ "@fortawesome/fontawesome-svg-core": "^1.2.2", "@fortawesome/free-solid-svg-icons": "^5.2.0", "@fortawesome/react-fontawesome": "^0.1.0", - "@gen3/guppy": "^0.3.13", - "@gen3/ui-component": "^0.3.12", + "@gen3/guppy": "git+https://github.com/uc-cdis/guppy.git#feat/line-bin-charts", + "@gen3/ui-component": "git+https://github.com/uc-cdis/gen3-ui-component.git#feat/line-bin-charts", "@storybook/addon-actions": "^5.0.0", "@storybook/react": "^5.0.0", "brace": "^0.10.0", diff --git a/src/GuppyDataExplorer/ExplorerVisualization/index.jsx b/src/GuppyDataExplorer/ExplorerVisualization/index.jsx index 86b5fb2c3d..f2917d6f43 100644 --- a/src/GuppyDataExplorer/ExplorerVisualization/index.jsx +++ b/src/GuppyDataExplorer/ExplorerVisualization/index.jsx @@ -26,7 +26,7 @@ class ExplorerVisualization extends React.Component { this.connectedFilter = React.createRef(); } - getData = (aggsData, chartConfig, filter) => { + getData = (chartData, chartConfig, filter) => { const summaries = []; let countItems = []; const stackedBarCharts = []; @@ -35,25 +35,36 @@ class ExplorerVisualization extends React.Component { value: this.props.totalCount, }); Object.keys(chartConfig).forEach((field) => { - if (!aggsData || !aggsData[field] || !aggsData[field].histogram) return; - const { histogram } = aggsData[field]; - switch (chartConfig[field].chartType) { + if (!chartData || !chartData[field] || !chartData[field].histogram) return; + const { histogram } = chartData[field]; + const { chartType, title } = chartConfig[field]; + switch (chartType) { case 'count': countItems.push({ - label: chartConfig[field].title, + label: title, value: filter[field] ? filter[field].selectedValues.length - : aggsData[field].histogram.length, + : histogram.length, }); break; case 'pie': case 'bar': - case 'stackedBar': { + case 'stackedBar': + case 'bar-vertical': + case 'line': { const dataItem = { - type: chartConfig[field].chartType, - title: chartConfig[field].title, - data: histogram.map(i => ({ name: i.key, value: i.count })), + type: chartType, + title, + data: histogram.map((i) => { + if (chartType === 'line' || chartType === 'bar-vertical') { + return { + name: `${i.key[0]}-${i.key[1]}`, + value: i.count, + }; + } + return { name: i.key, value: i.count }; + }), }; - if (chartConfig[field].chartType === 'stackedBar') { + if (chartType === 'stackedBar') { stackedBarCharts.push(dataItem); } else { summaries.push(dataItem); @@ -61,7 +72,7 @@ class ExplorerVisualization extends React.Component { break; } default: - throw new Error(`Invalid chartType ${chartConfig[field].chartType}`); + throw new Error(`Invalid chartType ${chartType}`); } }); // sort cout items according to appearence in chart config @@ -96,13 +107,14 @@ class ExplorerVisualization extends React.Component { }; render() { - const chartData = this.getData(this.props.aggsData, this.props.chartConfig, this.props.filter); + const chartData = this.getData(this.props.chartData, this.props.chartConfig, this.props.filter); const tableColumns = (this.props.tableConfig.fields && this.props.tableConfig.fields.length > 0) ? this.props.tableConfig.fields : this.props.allFields; const isComponentLocked = checkForAnySelectedUnaccessibleField(this.props.aggsData, this.props.accessibleFieldObject, this.props.guppyConfig.accessibleValidationField); const lockMessage = `The chart is hidden because you are exploring restricted access data and one or more of the values within the chart has a count below the access limit of ${this.props.tierAccessLimit} ${this.props.guppyConfig.nodeCountTitle.toLowerCase() || this.props.guppyConfig.dataType}.`; - const barChartColor = components.categorical2Colors ? components.categorical2Colors[0] : null; + const barChartColor = components.categorical2Colors + ? components.categorical2Colors[0] : undefined; // heatmap config const heatMapGuppyConfig = this.props.heatMapConfig ? @@ -155,6 +167,7 @@ class ExplorerVisualization extends React.Component { barChartColor={barChartColor} useCustomizedColorMap={!!components.categorical9Colors} customizedColorMap={components.categorical9Colors || []} + maximumDisplayItem={7} /> ) @@ -251,6 +264,7 @@ ExplorerVisualization.propTypes = { rawData: PropTypes.array, // inherited from GuppyWrapper allFields: PropTypes.array, // inherited from GuppyWrapper accessibleFieldObject: PropTypes.object, // inherited from GuppyWrapper + chartData: PropTypes.object, // inherited from GuppyWrapper history: PropTypes.object.isRequired, className: PropTypes.string, chartConfig: ChartConfigType, @@ -275,6 +289,7 @@ ExplorerVisualization.defaultProps = { rawData: [], allFields: [], accessibleFieldObject: {}, + chartData: {}, className: '', chartConfig: {}, tableConfig: {}, diff --git a/src/GuppyDataExplorer/GuppyDataExplorer.jsx b/src/GuppyDataExplorer/GuppyDataExplorer.jsx index 9fab8ba1fa..4ff909dfe3 100644 --- a/src/GuppyDataExplorer/GuppyDataExplorer.jsx +++ b/src/GuppyDataExplorer/GuppyDataExplorer.jsx @@ -38,6 +38,7 @@ class GuppyDataExplorer extends React.Component { onFilterChange={this.handleFilterChange} rawDataFields={this.props.tableConfig.fields} accessibleFieldCheckList={this.props.guppyConfig.accessibleFieldCheckList} + chartConfig={this.props.chartConfig} > { + // check each config item has 'title', 'chartType' keys + const invalid = Object.values(configs).find(c => (!c.title || !c.chartType)); + if (typeof invalid !== 'undefined') { + return new Error('Invalid chart type prop ', invalid); + } + return true; +}; +export const ChartConfigType = PropTypes.objectOf(myValidator); + From 2b310810bfcd46e5f2c4d05ce6aeaf7b1f2dbc3b Mon Sep 17 00:00:00 2001 From: Qingya Shu Date: Wed, 22 Jan 2020 16:11:47 -0600 Subject: [PATCH 2/2] fix(v): update branch version --- package-lock.json | 43 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 33a68ef9d1..2af60323a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1774,7 +1774,6 @@ "from": "git+https://github.com/uc-cdis/guppy.git#feat/line-bin-charts", "requires": { "@elastic/elasticsearch": "^7.0.0-rc.1", - "@gen3/ui-component": "git+https://github.com/uc-cdis/gen3-ui-component.git#086594d99afbffbe5deec69faa73e55a2e57eab0", "apollo-server": "^2.4.8", "apollo-server-express": "^2.4.8", "body-parser": "^1.18.3", @@ -1794,6 +1793,43 @@ "react": "^16.8.4" }, "dependencies": { + "@gen3/ui-component": { + "version": "git+https://github.com/uc-cdis/gen3-ui-component.git#086594d99afbffbe5deec69faa73e55a2e57eab0", + "from": "git+https://github.com/uc-cdis/gen3-ui-component.git#086594d99afbffbe5deec69faa73e55a2e57eab0", + "requires": { + "babel-loader": "^8.0.5", + "echarts": "^4.6.0", + "echarts-for-react": "^2.0.15-beta.1", + "lodash": "^4.17.15", + "postcss-loader": "^3.0.0", + "postcss-svgo": "^4.0.2", + "prop-types": "^15.7.2", + "rc-slider": "^8.6.6", + "rc-tooltip": "^3.7.3", + "react": "^16.8.4", + "react-dom": "^16.8.4", + "react-router-dom": "^4.3.1", + "recharts": "^1.5.0", + "stylelint": "^9.10.1" + } + }, + "echarts": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz", + "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==", + "requires": { + "zrender": "4.2.0" + } + }, + "echarts-for-react": { + "version": "2.0.15-beta.1", + "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-2.0.15-beta.1.tgz", + "integrity": "sha512-wR8XaI3j/4JvTidZrrJVfP/RqSggLRlzKOwcruytyLSA6AyE51T7mK+EucfwZ0NkX8H6tPFCHCvgJH1LyXjiIg==", + "requires": { + "fast-deep-equal": "^2.0.1", + "size-sensor": "^0.2.0" + } + }, "file-saver": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz", @@ -1803,6 +1839,11 @@ "version": "2.6.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==" + }, + "zrender": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz", + "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA==" } } },