[
{
"path": ".gitignore",
"content": "node_modules\ndist-*\ndist\n.idea\n.DS_Store\n.env\nnpm-debug.log\nstorybook-static/\nlerna-debug.log\n"
},
{
"path": "CHANGELOG.md",
"content": "# Change log\n\n## [7.3.4] - 2021-11-10\n### Fixed\n- Build error #124 \n\n## [7.3.3] - 2020-12-22\n### Added\n- Upgrade deps \n\n## [7.3.2] - 2020-09-14\n### Added\n- Upgrade deps \n\n## [7.3.1] - 2020-08-03\n### Added\n- Added locationTotalsExtent \n\n## [7.3.0] - 2020-08-02\n### Added\n- Added flowMagnitudeExtent \n- Added animationTailLength \n\n## [7.2.4] - 2020-08-01\n### Fixed\n- Upgrade deps \n\n## [7.2.2] - 2020-05-07\n### Fixed\n- Upgraded all deps to latest to prevent vulnerabilities warnings \n\n## [7.2.1] - 2020-03-17\n### Fixed\n- Upgraded all deps to latest to prevent vulnerabilities warnings \n\n## [7.2.0] - 2020-03-07\n### Fixed\n- Added missing DOUBLE type for the instanceSourcePositions and instanceTargetPositions\n attributes in FlowLineLayer: this led to incorrect projection when zooming in beyond level 12\n- Upgraded deck.gl to 8.0.17 \n- Upgraded all deps to latest \n\n## [7.1.0] - 2020-02-17\n### Fixed\n- Flow lines didn't render correctly with non-zero bearing/pitch\n### Added\n- Support for Layer props (pickable, opacity etc)\n- Using getSubLayerPros for updateTriggers\n\n## [7.0.0] - 2020-01-27\n### Upgraded\n- Upgrading all dependencies to latest\n- Making shaders work with deck.gl v8\n### Fixed\n- selectedLocationIds didn't accept `undefined`\n\n## [6.1.1] - 2019-11-19\n### Added\n- Added maxLocationCircleSize\n- Added getAnimatedFlowLineStaggering\n### Fixed\n- ClusterIndex.makeLocationWeightGetter didn't correctly calculate outgoing totals\n\n## [6.1.0] - 2019-11-05\n### Added\n- Yarn for building\n- Upgraded deck.gl\n- Improved highlighted location area coloring; drawing location areas outline above arrows\n- Added staggering to animated flow lines\n- Added highlightedLocationAreaId for pre-hovering\n- Added maxFlowThickness\n- Added minPickableFlowThickness \n\n\n## [6.0.0] - 2019-08-20\n### Added\n- Automated clustering\n- Upgraded to deck.gl@7\n- Color schemes support\n- Improved rendering\n\n\n\n## [5.2.0] - 2019-03-11\n### Added\n- Flow color overriding via `getFlowColor`\n\n### Fixed\n- Disabling depth test to prevent z-fighting causing rendering issues with non-zero pitch/bearing\n- Specified selected color wasn't used for location areas\n"
},
{
"path": "LICENSE",
"content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n ------ BOILERPLATE NOTICE TO ADD AS A HEADER TO SOURCE CODE FILES -------\n\n Copyright [yyyy] [name of copyright owner]\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n ------ END OF THE BOILERPLATE NOTICE ---------------------\n\n ========================================================================\n FLOWMAP.GL COMPONENTS:\n\n The flowmap.gl project bundles or references the following components with\n separate copyright notices and license terms in example(s) and/or as dev-\n and/or peer-dependencies. Your use of the these components is subject to\n the terms and conditions of the following licenses.\n\n ========================================================================\n MIT licenses\n ========================================================================\n The following components are provided under the MIT License:\n\n reselect - http://www.npmjs.com/package/reselect\n @storybook/react - http://www.npmjs.com/package/@storybook/react\n @types/d3-array - http://www.npmjs.com/package/@types/d3-array\n @types/d3-collection - http://www.npmjs.com/package/@types/d3-collection\n @types/d3-color - http://www.npmjs.com/package/@types/d3-color\n @types/d3-interpolate - http://www.npmjs.com/package/@types/d3-interpolate\n @types/d3-scale - http://www.npmjs.com/package/@types/d3-scale\n @types/geojson - http://www.npmjs.com/package/@types/geojson\n @types/gl-matrix - http://www.npmjs.com/package/@types/gl-matrix\n @types/hammerjs - http://www.npmjs.com/package/@types/hammerjs\n @types/node - http://www.npmjs.com/package/@types/node\n @types/react - http://www.npmjs.com/package/@types/react\n @types/storybook__react - http://www.npmjs.com/package/@types/storybook__react\n @types/webpack - http://www.npmjs.com/package/@types/webpack\n awesome-typescript-loader - http://www.npmjs.com/package/awesome-typescript-loader\n babel-core - http://www.npmjs.com/package/babel-core\n deck.gl - http://www.npmjs.com/package/deck.gl\n file-loader - http://www.npmjs.com/package/file-loader\n husky - http://www.npmjs.com/package/husky\n lint-staged - http://www.npmjs.com/package/lint-staged\n luma.gl - http://www.npmjs.com/package/luma.gl\n npm-run-all - http://www.npmjs.com/package/npm-run-all\n prettier - http://www.npmjs.com/package/prettier\n react - http://www.npmjs.com/package/react\n react-dom - http://www.npmjs.com/package/react-dom\n react-map-gl - http://www.npmjs.com/package/react-map-gl\n tslint-config-prettier - http://www.npmjs.com/package/tslint-config-prettier\n tslint-loader - http://www.npmjs.com/package/tslint-loader\n tslint-plugin-prettier - http://www.npmjs.com/package/tslint-plugin-prettier\n webpack - http://www.npmjs.com/package/webpack\n react - http://www.npmjs.com/package/react\n react-dom - http://www.npmjs.com/package/react-dom\n deck.gl - http://www.npmjs.com/package/deck.gl\n luma.gl - http://www.npmjs.com/package/luma.gl\n\n ========================================================================\n BSD 3-Clause licenses\n ========================================================================\n The following components are provided under the BSD 3-Clause license:\n\n d3-array - http://www.npmjs.com/package/d3-array\n d3-collection - http://www.npmjs.com/package/d3-collection\n d3-color - http://www.npmjs.com/package/d3-color\n d3-interpolate - http://www.npmjs.com/package/d3-interpolate\n d3-scale - http://www.npmjs.com/package/d3-scale\n @mapbox/geo-viewport - http://www.npmjs.com/package/@mapbox/geo-viewport\n\n ========================================================================\n Apache 2.0 licenses\n ========================================================================\n The following components are provided under the Apache 2.0 license:\n\n tslint - http://www.npmjs.com/package/tslint\n tslint-react - http://www.npmjs.com/package/tslint-react\n typescript - http://www.npmjs.com/package/typescript\n\n"
},
{
"path": "NOTICE",
"content": "flowmap.gl\nCopyright 2018 Teralytics\n\nThis product includes software developed at\nThe Apache Software Foundation (http://www.apache.org/).\n\nPortions of this software were developed at Teralytics (http://www.teralytics.net)\n"
},
{
"path": "README.md",
"content": "# flowmap.gl\n\n## IMPORTANT: This repository is in maintenance-only mode. \n\n## > [The next version of the library is being developed here](https://github.com/FlowmapBlue/flowmap.gl) <\n\n\n[Flow map](https://en.wikipedia.org/wiki/Flow_map) drawing layer for [deck.gl](http://uber.github.io/deck.gl). Can be used for visualizing movement of people (e.g. migration) or objects between geographic locations. The layer is rendered in WebGL and can handle large numbers of flows with a good rendering performance.\n\nTry [flowmap.blue](https://flowmap.blue/) for an easy way of publishing a flow map backed by a Google Sheets spreadsheet (no programming skills required).\n\nCheck out the [live examples Storybook](https://teralytics.github.io/flowmap.gl/index.html) or the minimal example apps: [with React](https://github.com/ilyabo/flowmap.gl-example), [without React](https://github.com/ilyabo/flowmap.gl-purejs-example/).\n\n\n\n## Features\n\nGiven an array of locations and an array of flows between these locations the layer will do the following:\n\n- Represent the flows as lines of varying thickness depending on the flow magnitudes\n- The flow lines are sorted so that the larger flows are drawn above\n- GeoJSON geometries of the location areas are rendered as polygons\n- Total incoming and outgoing flows for the locations are calculated and represented as circles of varying sizes.\n\n### Location totals\nBoth the incoming and outgoing totals for the locations are represented.\nA darker outline means that there are more incoming flows, a lighter outline means that there are more outgoing flows.\n\nFor instance, below we compare between the evening and the morning commuting behaviors of a large city:\n\n\n\n### Difference mode\nThe layer can be used to show the [difference between two moments in time](https://teralytics.github.io/flowmap.gl/index.html?path=/story/basic--difference-mode).\n\n\n\n## Usage\nFirst install the required dependencies:\n\n```\nnpm install @flowmap.gl/core deck.gl react-map-gl\n```\n\nThen, you can either use as a deck.gl layer or flowmap.gl as a React component:\n\n### Usage as a deck.gl layer\n\nWith this approach you can use flowmap.gl together with other deck.gl layers.\n\n```jsx harmony\nimport { StaticMap } from 'react-map-gl';\nimport { DeckGL } from 'deck.gl';\nimport FlowMapLayer from '@flowmap.gl/core'; \nimport * as ReactDOM from 'react-dom';\n\nReactDOM.render(\n flow.count || 0,\n getFlowOriginId: (flow) => flow.origin,\n getFlowDestId: (flow) => flow.dest,\n getLocationId: (loc) => loc.id,\n getLocationCentroid: (location) => [location.lon, location.lat],\n })\n ]}\n >\n \n ,\n document.body\n)\n```\n\n### Usage as a React component\n\nInstall this additional dependency:\n```\nnpm install @flowmap.gl/react\n```\n\n```jsx harmony\n\nimport FlowMap, { getViewStateForLocations } from '@flowmap.gl/react'\n\nconst MapVis = ({ width, height }) =>\n
\n Use it to fix the scales of a changing dataset (e.g. over time)\n
\n \n \n );\n }),\n )\n .add(\n 'maxFlowThickness animated',\n pipe(\n withStats,\n withFetchJson('locations', './data/locations.json'),\n withFetchJson('flows', './data/flows-2016.json'),\n )(({ locations, flows }: any) => {\n const [thickness, setThickness] = React.useState(15);\n return (\n <>\n \n \n \n \n \n \n setThickness(+evt.currentTarget.value)}\n />\n \n \n );\n }),\n )\n .add(\n 'minPickableFlowThickness',\n pipe(\n withStats,\n withFetchJson('locations', './data/locations.json'),\n withFetchJson('flows', './data/flows-2016.json'),\n )(({ locations, flows }: any) => {\n return (\n <>\n \n \n \n \n \n );\n }),\n )\n .add(\n 'minPickableFlowThickness animated',\n pipe(\n withStats,\n withFetchJson('locations', './data/locations.json'),\n withFetchJson('flows', './data/flows-2016.json'),\n )(({ locations, flows }: any) => {\n return (\n <>\n \n \n \n \n \n );\n }),\n );\n\nstoriesOf('Cluster on zoom', module)\n .add(\n 'basic',\n pipe(\n withStats,\n withFetchJson('locations', './data/locations.json'),\n withFetchJson('flows', './data/flows-2016.json'),\n )(({ locations, flows }: any) => (\n loc.properties.abbr}\n getLocationCentroid={(loc: Location) => loc.properties.centroid}\n getFlowOriginId={(flow: Flow) => flow.origin}\n getFlowDestId={(flow: Flow) => flow.dest}\n getFlowMagnitude={(flow: Flow) => +flow.count}\n />\n )),\n )\n .add(\n 'NL commuters',\n pipe(\n withStats,\n withSheetsFetch('1Oe3zM219uSfJ3sjdRT90SAK2kU3xIvzdcCW6cwTsAuc'),\n )(({ locations, flows }: any) => (\n loc.id}\n getLocationCentroid={(loc: Location): [number, number] => [+loc.lon, +loc.lat]}\n getFlowOriginId={(flow: Flow) => flow.origin}\n getFlowDestId={(flow: Flow) => flow.dest}\n getFlowMagnitude={(flow: Flow) => +flow.count}\n />\n )),\n );\n\nstoriesOf('Other datasets', module)\n .add(\n 'London bicycle hire',\n pipe(\n withStats,\n withSheetsFetch('1Z6dVVFFrdooHIs8xnJ_O7eM5bhS5KscCi7G_k0jUNDI'),\n )(({ locations, flows }: any) => (\n loc.id}\n getLocationCentroid={(location: Location): [number, number] => [+location.lon, +location.lat]}\n getFlowOriginId={(flow: Flow) => flow.origin}\n getFlowDestId={(flow: Flow) => flow.dest}\n getFlowMagnitude={(flow: Flow) => +flow.count}\n />\n )),\n )\n .add(\n 'NYC citibike',\n pipe(\n withStats,\n withSheetsFetch('1Aum0anWxPx6bHyfcFXWCCTE8u0xtfenIls_kPAJEDIA'),\n )(({ locations, flows }: any) => (\n loc.id}\n getLocationCentroid={(location: Location): [number, number] => [+location.lon, +location.lat]}\n getFlowOriginId={(flow: Flow) => flow.origin}\n getFlowDestId={(flow: Flow) => flow.dest}\n getFlowMagnitude={(flow: Flow) => +flow.count}\n />\n )),\n )\n .add(\n 'Chicago taxis',\n pipe(\n withStats,\n withSheetsFetch('1fhX98NFv5gAkkjB2YFCm50-fplFpmWVAZby3dmm9cgQ'),\n )(({ locations, flows }: any) => (\n loc.id}\n getLocationCentroid={(location: Location): [number, number] => [+location.lon, +location.lat]}\n getFlowOriginId={(flow: Flow) => flow.origin}\n getFlowDestId={(flow: Flow) => flow.dest}\n getFlowMagnitude={(flow: Flow) => +flow.count}\n />\n )),\n )\n .add(\n 'NL commuters',\n pipe(\n withStats,\n withSheetsFetch('1Oe3zM219uSfJ3sjdRT90SAK2kU3xIvzdcCW6cwTsAuc'),\n )(({ locations, flows }: any) => (\n loc.id}\n getLocationCentroid={(location: Location): [number, number] => [+location.lon, +location.lat]}\n getFlowOriginId={(flow: Flow) => flow.origin}\n getFlowDestId={(flow: Flow) => flow.dest}\n getFlowMagnitude={(flow: Flow) => +flow.count}\n />\n )),\n );\n"
},
{
"path": "examples/src/utils/pipe.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nconst pipe = (...args: Function[]): Function => (d: any) => args.reduce((m, f) => f(m), d);\n\nexport default pipe;\n"
},
{
"path": "examples/src/utils/withFetch.tsx",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { csvParse } from 'd3-dsv';\nimport React from 'react';\n\nexport const Message = ({ children }: { children: string }) =>
{children}
;\n\nconst withFetch = (mode: 'csv' | 'json', propName: string, url: string) => (Comp: React.ComponentType) => (\n props: any,\n) => {\n class Fetcher extends React.Component {\n state = {\n error: null,\n data: null,\n };\n componentDidMount() {\n fetch(url)\n .then(response => {\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n switch (mode) {\n case 'json':\n return response.json();\n case 'csv':\n return response.text();\n }\n })\n .catch(reason => {\n console.error(reason);\n this.setState({ error: true });\n })\n .then(data => this.setState({ data: mode === 'csv' ? csvParse(data) : data }));\n }\n render() {\n const { data, error } = this.state;\n if (error) {\n return Oops… Data fetching failed.;\n }\n if (!data) {\n return Fetching data…;\n }\n return ;\n }\n }\n return ;\n};\n\nexport const withFetchCsv = (propName: string, url: string) => withFetch('csv', propName, url);\nexport const withFetchJson = (propName: string, url: string) => withFetch('json', propName, url);\n"
},
{
"path": "examples/src/utils/withSheetsFetch.tsx",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Flow, Location } from '@flowmap.gl/core';\nimport * as React from 'react';\nimport pipe from './pipe';\nimport { withFetchCsv } from './withFetch';\n\nconst withSheetsFetch = (sheetKey: string) => (Comp: React.ComponentType) => (props: any) => {\n const Fetcher = pipe(\n withFetchCsv('locations', `https://docs.google.com/spreadsheets/d/${sheetKey}/gviz/tq?tqx=out:csv&sheet=locations`),\n withFetchCsv('flows', `https://docs.google.com/spreadsheets/d/${sheetKey}/gviz/tq?tqx=out:csv&sheet=flows`),\n )(({ locations, flows }: { locations: Location[]; flows: Flow[] }) => {\n return ;\n });\n return ;\n};\n\nexport default withSheetsFetch;\n"
},
{
"path": "examples/src/utils/withStats.tsx",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport * as React from 'react';\nimport Stats from 'stats.js';\n\nexport default function withStats
(Comp: React.ComponentType
) {\n return (props: P) => {\n class WithStats extends React.Component {\n private stats: Stats = new Stats();\n private statsContainer = React.createRef();\n private animateRef: number = 0;\n\n componentDidMount() {\n if (this.statsContainer.current) {\n this.stats.showPanel(0);\n this.statsContainer.current.appendChild(this.stats.dom);\n }\n const calcFPS = () => {\n this.stats.begin();\n this.stats.end();\n this.animateRef = window.requestAnimationFrame(calcFPS);\n };\n this.animateRef = window.requestAnimationFrame(calcFPS);\n }\n\n componentWillUnmount() {\n window.cancelAnimationFrame(this.animateRef);\n }\n\n render() {\n return (\n <>\n \n \n \n );\n }\n }\n\n return ;\n };\n}\n"
},
{
"path": "examples/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"esModuleInterop\": true,\n \"outDir\": \"dist\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"sourceMap\": true,\n \"strict\": true,\n \"skipLibCheck\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"jsx\": \"react\",\n \"lib\": [\n \"es2015\",\n \"dom\"\n ]\n },\n \"include\": [\n \"src/**/*\",\n \"examples/**/*\",\n \"../typings/*\"\n ]\n}\n"
},
{
"path": "lerna.json",
"content": "{\n \"packages\": [\n \"examples\",\n \"packages/*\"\n ],\n \"version\": \"7.3.4\",\n \"npmClient\": \"yarn\",\n \"useWorkspaces\": true\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"flowmap.gl\",\n \"description\": \"Flow map drawing layer for deck.gl\",\n \"author\": \"Teralytics AG\",\n \"license\": \"Apache-2.0\",\n \"private\": true,\n \"keywords\": [\n \"flows\",\n \"flow map\",\n \"webgl\",\n \"visualization\",\n \"overlay\",\n \"layer\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/teralytics/flowmap.gl.git\"\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist-esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"files\": [\n \"src\",\n \"dist\",\n \"dist-esm\"\n ],\n \"scripts\": {\n \"start\": \"cd examples && yarn start\",\n \"dev\": \"yarn core-dev & yarn react-dev & yarn cluster-dev & yarn start\",\n \"core-dev\": \"cd packages/core && yarn dev\",\n \"react-dev\": \"cd packages/react && yarn dev\",\n \"cluster-dev\": \"cd packages/cluster && yarn dev\",\n \"build\": \"cd packages/core && yarn build && cd ../../packages/react && yarn build && cd ../../packages/cluster && yarn build\",\n \"storybook:build\": \"cd examples && yarn storybook:build\",\n \"storybook:deploy\": \"cd examples && yarn storybook:deploy\",\n \"bump\": \"lerna version --no-push --force-publish\",\n \"publish-prerelease\": \"lerna publish --dist-tag next from-package\",\n \"lint\": \"tslint --fix '{examples,packages/*}/{src,test,stories}/**/*.{ts,tsx}'\",\n \"typecheck\": \"lerna run --stream typecheck\"\n },\n \"devDependencies\": {\n \"gh-pages\": \"^3.1.0\",\n \"husky\": \"^4.3.0\",\n \"lerna\": \"^3.20.2\",\n \"lint-staged\": \"^10.5.2\",\n \"prettier\": \"^2.2.0\",\n \"tslint\": \"^6.1.2\",\n \"tslint-config-prettier\": \"^1.18.0\",\n \"tslint-plugin-prettier\": \"^2.3.0\",\n \"tslint-react\": \"^5.0.0\",\n \"typescript\": \"^4.1.2\"\n },\n \"lint-staged\": {\n \"{examples,packages/*}/{src,test}/**/*.{ts,tsx}\": [\n \"tslint --fix\"\n ]\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"workspaces\": [\n \"packages/*\",\n \"examples\"\n ]\n}\n"
},
{
"path": "packages/cluster/package.json",
"content": "{\n \"name\": \"@flowmap.gl/cluster\",\n \"version\": \"7.3.4\",\n \"description\": \"Location/flow clustering for @flowmap.gl/core\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist-esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"files\": [\n \"src\",\n \"dist\",\n \"dist-esm\"\n ],\n \"scripts\": {\n \"dev\": \"tsc --watch & tsc --watch --project tsconfig.build.esm.json\",\n \"build:es5\": \"rm -rf dist && tsc --project tsconfig.build.json\",\n \"build:esm\": \"rm -rf dist-esm && tsc --project tsconfig.build.esm.json\",\n \"build\": \"yarn build:es5 && yarn build:esm\",\n \"typecheck\": \"tsc --noEmit\",\n \"prepare\": \"yarn build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/teralytics/flowmap.gl.git\"\n },\n \"author\": \"Teralytics AG\",\n \"license\": \"Apache-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/teralytics/flowmap.gl/issues\"\n },\n \"homepage\": \"https://github.com/teralytics/flowmap.gl#readme\",\n \"dependencies\": {\n \"@types/d3-array\": \"^2.0.0\",\n \"d3-array\": \"^2.7.1\",\n \"kdbush\": \"^3.0.0\"\n },\n \"devDependencies\": {\n \"@flowmap.gl/core\": \"^7.3.4\",\n \"@types/geojson\": \"^7946.0.7\",\n \"react\": \"^16.13.1\",\n \"typescript\": \"^4.0.2\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"gitHead\": \"685236ef24d44ee2c6f0c2aed79dd9c52a4e73fe\"\n}\n"
},
{
"path": "packages/cluster/src/ClusterIndex.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Flow, FlowAccessors, Location, LocationAccessors } from '@flowmap.gl/core';\nimport { ascending, bisectLeft, extent } from 'd3-array';\nimport { AggregateFlow, Cluster, ClusterLevels, ClusterNode, FlowCountsMapReduce, isCluster } from './types';\n\nexport type FlowItem = Flow | AggregateFlow;\nexport type LocationWeightGetter = (id: string) => number;\n\n/**\n * A data structure representing the cluster levels for efficient flow aggregation.\n */\nexport interface ClusterIndex {\n availableZoomLevels: number[];\n getClusterById: (clusterId: string) => Cluster | undefined;\n /**\n * List the nodes on the given zoom level.\n */\n getClusterNodesFor: (zoom: number | undefined) => ClusterNode[] | undefined;\n /**\n * Get the min zoom level on which the location is not clustered.\n */\n getMinZoomForLocation: (locationId: string) => number;\n /**\n * List the IDs of all locations in the cluster (leaves of the subtree starting in the cluster).\n */\n expandCluster: (cluster: Cluster, targetZoom?: number) => string[];\n /**\n * Find the cluster the given location is residing in on the specified zoom level.\n */\n findClusterFor: (locationId: string, zoom: number) => string | undefined;\n /**\n * Aggregate flows for the specified zoom level.\n */\n aggregateFlows: (\n flows: Flow[],\n zoom: number,\n { getFlowOriginId, getFlowDestId, getFlowMagnitude }: FlowAccessors,\n options?: {\n flowCountsMapReduce?: FlowCountsMapReduce;\n },\n ) => FlowItem[];\n}\n\n/**\n * Build ClusterIndex from the given cluster hierarchy\n */\nexport function buildIndex(clusterLevels: ClusterLevels): ClusterIndex {\n const nodesByZoom = new Map();\n const clustersById = new Map();\n const minZoomByLocationId = new Map();\n for (const { zoom, nodes } of clusterLevels) {\n nodesByZoom.set(zoom, nodes);\n for (const node of nodes) {\n if (isCluster(node)) {\n clustersById.set(node.id, node);\n } else {\n const { id } = node;\n const mz = minZoomByLocationId.get(id);\n if (mz == null || mz > zoom) {\n minZoomByLocationId.set(id, zoom);\n }\n }\n }\n }\n\n const [minZoom, maxZoom] = extent(clusterLevels, cl => cl.zoom);\n if (minZoom == null || maxZoom == null) {\n throw new Error('Could not determine minZoom or maxZoom');\n }\n\n const leavesToClustersByZoom = new Map>();\n\n for (const cluster of clustersById.values()) {\n const { zoom } = cluster;\n let leavesToClusters = leavesToClustersByZoom.get(zoom);\n if (!leavesToClusters) {\n leavesToClusters = new Map();\n leavesToClustersByZoom.set(zoom, leavesToClusters);\n }\n visitClusterLeaves(cluster, leafId => {\n leavesToClusters!.set(leafId, cluster);\n });\n }\n\n function visitClusterLeaves(cluster: Cluster, visit: (id: string) => void) {\n for (const childId of cluster.children) {\n const child = clustersById.get(childId);\n if (child) {\n visitClusterLeaves(child, visit);\n } else {\n visit(childId);\n }\n }\n }\n\n const expandCluster = (cluster: Cluster, targetZoom: number = maxZoom) => {\n const ids: string[] = [];\n const visit = (c: Cluster, expandedIds: string[]) => {\n if (targetZoom > c.zoom) {\n for (const childId of c.children) {\n const child = clustersById.get(childId);\n if (child) {\n visit(child, expandedIds);\n } else {\n expandedIds.push(childId);\n }\n }\n } else {\n expandedIds.push(c.id);\n }\n };\n visit(cluster, ids);\n return ids;\n };\n\n function findClusterFor(locationId: string, zoom: number) {\n const leavesToClusters = leavesToClustersByZoom.get(zoom);\n if (!leavesToClusters) {\n return undefined;\n }\n const cluster = leavesToClusters.get(locationId);\n return cluster ? cluster.id : undefined;\n }\n\n const availableZoomLevels = clusterLevels.map(cl => +cl.zoom).sort((a, b) => ascending(a, b));\n\n return {\n availableZoomLevels,\n\n getClusterNodesFor: zoom => {\n if (zoom === undefined) {\n return undefined;\n }\n return nodesByZoom.get(zoom);\n },\n\n getClusterById: clusterId => clustersById.get(clusterId),\n\n getMinZoomForLocation: locationId => minZoomByLocationId.get(locationId) || minZoom,\n\n expandCluster,\n\n findClusterFor,\n\n aggregateFlows: (flows, zoom, { getFlowOriginId, getFlowDestId, getFlowMagnitude }, options = {}) => {\n if (zoom > maxZoom) {\n return flows;\n }\n const result: Flow[] = [];\n const aggFlowsByKey = new Map();\n const makeKey = (origin: string, dest: string) => `${origin}:${dest}`;\n const {\n flowCountsMapReduce = {\n map: getFlowMagnitude,\n reduce: (acc: any, count: number) => (acc || 0) + count,\n },\n } = options;\n for (const flow of flows) {\n const origin = getFlowOriginId(flow);\n const dest = getFlowDestId(flow);\n const originCluster = findClusterFor(origin, zoom) || origin;\n const destCluster = findClusterFor(dest, zoom) || dest;\n const key = makeKey(originCluster, destCluster);\n if (originCluster === origin && destCluster === dest) {\n result.push(flow);\n } else {\n let aggregateFlow = aggFlowsByKey.get(key);\n if (!aggregateFlow) {\n aggregateFlow = {\n origin: originCluster,\n dest: destCluster,\n count: flowCountsMapReduce.map(flow),\n aggregate: true,\n };\n result.push(aggregateFlow);\n aggFlowsByKey.set(key, aggregateFlow);\n } else {\n aggregateFlow.count = flowCountsMapReduce.reduce(aggregateFlow.count, flowCountsMapReduce.map(flow));\n }\n }\n }\n return result;\n },\n };\n}\n\nexport function makeLocationWeightGetter(\n flows: Flow[],\n { getFlowOriginId, getFlowDestId, getFlowMagnitude }: FlowAccessors,\n): LocationWeightGetter {\n const locationTotals = {\n incoming: new Map(),\n outgoing: new Map(),\n };\n for (const flow of flows) {\n const origin = getFlowOriginId(flow);\n const dest = getFlowDestId(flow);\n const count = getFlowMagnitude(flow);\n locationTotals.incoming.set(dest, (locationTotals.incoming.get(dest) || 0) + count);\n locationTotals.outgoing.set(origin, (locationTotals.outgoing.get(origin) || 0) + count);\n }\n return (id: string) =>\n Math.max(Math.abs(locationTotals.incoming.get(id) || 0), Math.abs(locationTotals.outgoing.get(id) || 0));\n}\n\n/**\n * @param availableZoomLevels Must be sorted in ascending order\n * @param targetZoom\n */\nexport function findAppropriateZoomLevel(availableZoomLevels: number[], targetZoom: number) {\n if (!availableZoomLevels.length) {\n throw new Error('No available zoom levels');\n }\n return availableZoomLevels[\n Math.min(bisectLeft(availableZoomLevels, Math.floor(targetZoom)), availableZoomLevels.length - 1)\n ];\n}\n"
},
{
"path": "packages/cluster/src/cluster.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n/**\n * The code in this file is a based on https://github.com/mapbox/supercluster\n */\n\n// ISC License\n//\n// Copyright (c) 2016, Mapbox\n//\n// Permission to use, copy, modify, and/or distribute this software for any purpose\n// with or without fee is hereby granted, provided that the above copyright notice\n// and this permission notice appear in all copies.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND\n// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS\n// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER\n// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF\n// THIS SOFTWARE.\n\nimport { Location, LocationAccessors } from '@flowmap.gl/core';\nimport { rollup } from 'd3-array';\nimport KDBush from 'kdbush';\nimport { LocationWeightGetter } from './ClusterIndex';\nimport { Cluster, ClusterLevel, ClusterNode } from './types';\n\nexport interface Options {\n minZoom: number; // min zoom to generate clusters on\n maxZoom: number; // max zoom level to cluster the points on\n radius: number; // cluster radius in pixels\n extent: number; // tile extent (radius is calculated relative to it)\n nodeSize: number; // size of the KD-tree leaf node, affects performance\n makeClusterName: (id: number, numPoints: number) => string | undefined;\n makeClusterId: (id: number) => string;\n}\n\nconst defaultOptions: Options = {\n minZoom: 0,\n maxZoom: 16,\n radius: 40,\n extent: 512,\n nodeSize: 64,\n makeClusterName: (id: number, numPoints: number) => undefined,\n makeClusterId: (id: number) => `{[${id}]}`,\n};\n\ninterface BasePoint {\n x: number; // projected point coordinates\n y: number;\n weight: number;\n zoom: number; // the last zoom the point was processed at\n parentId: number; // parent cluster id\n}\n\ninterface LeafPoint extends BasePoint {\n index: number; // index of the source feature in the original input array,\n}\n\ninterface ClusterPoint extends BasePoint {\n id: number;\n numPoints: number;\n}\n\ntype Point = LeafPoint | ClusterPoint;\n\nexport function isLeafPoint(p: Point): p is LeafPoint {\n const { index } = p as LeafPoint;\n return index != null;\n}\n\nexport function isClusterPoint(p: Point): p is ClusterPoint {\n const { id } = p as ClusterPoint;\n return id != null;\n}\n\ntype ZoomLevelKDBush = any;\n\nexport function clusterLocations(\n locations: Location[],\n locationAccessors: LocationAccessors,\n getLocationWeight: LocationWeightGetter,\n options?: Partial,\n): ClusterLevel[] {\n const { getLocationCentroid, getLocationId } = locationAccessors;\n const opts = {\n ...defaultOptions,\n ...options,\n };\n const { minZoom, maxZoom, nodeSize, makeClusterName, makeClusterId } = opts;\n\n const trees = new Array(maxZoom + 1);\n\n // generate a cluster object for each point and index input points into a KD-tree\n let clusters = new Array();\n for (let i = 0; i < locations.length; i++) {\n const [x, y] = getLocationCentroid(locations[i]);\n clusters.push({\n x: lngX(x), // projected point coordinates\n y: latY(y),\n weight: getLocationWeight(getLocationId(locations[i])),\n zoom: Infinity, // the last zoom the point was processed at\n index: i, // index of the source feature in the original input array,\n parentId: -1, // parent cluster id\n });\n }\n trees[maxZoom + 1] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);\n\n // cluster points on max zoom, then cluster the results on previous zoom, etc.;\n // results in a cluster hierarchy across zoom levels\n for (let z = maxZoom; z >= minZoom; z--) {\n // create a new set of clusters for the zoom and index them with a KD-tree\n clusters = cluster(clusters, z, trees[z + 1], opts);\n trees[z] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);\n }\n\n if (trees.length === 0) {\n return [];\n }\n const numbersOfClusters = trees.map(d => d.points.length);\n const maxAvailZoom = numbersOfClusters.indexOf(numbersOfClusters[numbersOfClusters.length - 1]);\n const minAvailZoom = Math.min(maxAvailZoom, numbersOfClusters.lastIndexOf(numbersOfClusters[0]));\n\n const clusterLevels = new Array();\n for (let zoom = minAvailZoom; zoom <= maxAvailZoom; zoom++) {\n let childrenByParent: Map | undefined;\n const tree = trees[zoom];\n if (zoom < maxAvailZoom) {\n childrenByParent = rollup(\n trees[zoom + 1].points,\n (points: any[]) => points.map((p: any) => (p.id ? makeClusterId(p.id) : getLocationId(locations[p.index]))),\n (point: any) => point.parentId,\n );\n }\n\n const nodes: ClusterNode[] = [];\n for (const point of tree.points) {\n const { x, y, numPoints } = point;\n if (isLeafPoint(point)) {\n const location = locations[point.index];\n nodes.push({\n id: getLocationId(location),\n zoom,\n centroid: getLocationCentroid(location),\n });\n } else if (isClusterPoint(point)) {\n const { id } = point;\n const children = childrenByParent && childrenByParent.get(id);\n if (!children) {\n throw new Error(`Cluster ${id} doesn't have children`);\n }\n nodes.push({\n id: makeClusterId(id),\n name: makeClusterName(id, numPoints),\n zoom,\n centroid: [xLng(x), yLat(y)] as [number, number],\n children,\n } as Cluster);\n }\n }\n clusterLevels.push({\n zoom,\n nodes,\n });\n }\n return clusterLevels;\n}\n\nfunction createCluster(x: number, y: number, id: number, numPoints: number, weight: number): ClusterPoint {\n return {\n x, // weighted cluster center\n y,\n zoom: Infinity, // the last zoom the cluster was processed at\n id, // encodes index of the first child of the cluster and its zoom level\n parentId: -1, // parent cluster id\n numPoints,\n weight,\n };\n}\n\nfunction cluster(points: Point[], zoom: number, tree: ZoomLevelKDBush, options: Options) {\n const clusters: Point[] = [];\n const { radius, extent } = options;\n const r = radius / (extent * Math.pow(2, zoom));\n\n // loop through each point\n for (let i = 0; i < points.length; i++) {\n const p = points[i];\n // if we've already visited the point at this zoom level, skip it\n if (p.zoom <= zoom) {\n continue;\n }\n p.zoom = zoom;\n\n // find all nearby points\n const neighborIds = tree.within(p.x, p.y, r);\n\n let weight = p.weight || 1;\n let numPoints = isClusterPoint(p) ? p.numPoints : 1;\n let wx = p.x * weight;\n let wy = p.y * weight;\n\n // encode both zoom and point index on which the cluster originated\n const id = (i << 5) + (zoom + 1);\n\n for (const neighborId of neighborIds) {\n const b = tree.points[neighborId];\n // filter out neighbors that are already processed\n if (b.zoom <= zoom) {\n continue;\n }\n b.zoom = zoom; // save the zoom (so it doesn't get processed twice)\n\n const weight2 = b.weight || 1;\n const numPoints2 = b.numPoints || 1;\n wx += b.x * weight2; // accumulate coordinates for calculating weighted center\n wy += b.y * weight2;\n\n weight += weight2;\n numPoints += numPoints2;\n b.parentId = id;\n }\n\n if (numPoints === 1) {\n clusters.push(p);\n } else {\n p.parentId = id;\n clusters.push(createCluster(wx / weight, wy / weight, id, numPoints, weight));\n }\n }\n\n return clusters;\n}\n\n// spherical mercator to longitude/latitude\nfunction xLng(x: number) {\n return (x - 0.5) * 360;\n}\n\nfunction yLat(y: number) {\n const y2 = ((180 - y * 360) * Math.PI) / 180;\n return (360 * Math.atan(Math.exp(y2))) / Math.PI - 90;\n}\n\n// longitude/latitude to spherical mercator in [0..1] range\nfunction lngX(lng: number) {\n return lng / 360 + 0.5;\n}\n\nfunction latY(lat: number) {\n const sin = Math.sin((lat * Math.PI) / 180);\n const y = 0.5 - (0.25 * Math.log((1 + sin) / (1 - sin))) / Math.PI;\n return y < 0 ? 0 : y > 1 ? 1 : y;\n}\n\nfunction getX(p: Point) {\n return p.x;\n}\n\nfunction getY(p: Point) {\n return p.y;\n}\n"
},
{
"path": "packages/cluster/src/index.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nexport * from './ClusterIndex';\nexport * from './types';\nexport { clusterLocations } from './cluster';\n"
},
{
"path": "packages/cluster/src/types.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Flow } from '@flowmap.gl/core';\n\nexport interface ClusterNode {\n id: string;\n zoom: number;\n centroid: [number, number];\n}\n\nexport interface ClusterLevel {\n zoom: number;\n nodes: ClusterNode[];\n}\n\nexport type ClusterLevels = ClusterLevel[];\n\nexport interface Cluster extends ClusterNode {\n name?: string;\n children: string[];\n}\n\nexport function isCluster(c: ClusterNode): c is Cluster {\n const { children } = c as Cluster;\n return children && children.length > 0;\n}\n\nexport interface AggregateFlow {\n origin: string;\n dest: string;\n count: number;\n aggregate: true;\n}\n\nexport function isAggregateFlow(flow: Flow): flow is AggregateFlow {\n const { origin, dest, count, aggregate } = flow as AggregateFlow;\n return origin !== undefined && dest !== undefined && count !== undefined && (aggregate ? true : false);\n}\n\nexport interface FlowCountsMapReduce {\n map: (flow: Flow) => T;\n reduce: (accumulated: T, val: T) => T;\n}\n"
},
{
"path": "packages/cluster/tsconfig.build.esm.json",
"content": "{\n \"extends\": \"./tsconfig.build.json\",\n \"compilerOptions\": {\n \"target\": \"es2017\",\n \"module\": \"es2015\",\n \"outDir\": \"dist-esm\",\n \"moduleResolution\": \"node\"\n }\n}\n"
},
{
"path": "packages/cluster/tsconfig.build.json",
"content": "{\n \"extends\": \"./tsconfig.json\",\n \"include\": [\n \"src/**/*\",\n \"../../typings/*\"\n ]\n}\n"
},
{
"path": "packages/cluster/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"esModuleInterop\": true,\n \"outDir\": \"dist\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"sourceMap\": true,\n \"strict\": true,\n \"skipLibCheck\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"downlevelIteration\": true,\n \"lib\": [\n \"es2015\",\n \"dom\"\n ]\n },\n \"include\": [\n \"src/**/*\",\n \"examples/**/*\",\n \"../../typings/*\",\n \"stories/**/*\"\n ]\n}\n"
},
{
"path": "packages/core/package.json",
"content": "{\n \"name\": \"@flowmap.gl/core\",\n \"version\": \"7.3.4\",\n \"description\": \"Flow map drawing layer for deck.gl\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist-esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"files\": [\n \"src\",\n \"dist\",\n \"dist-esm\"\n ],\n \"scripts\": {\n \"dev\": \"tsc --watch & tsc --watch --project tsconfig.build.esm.json\",\n \"build:es5\": \"rm -rf dist && tsc --project tsconfig.build.json\",\n \"build:esm\": \"rm -rf dist-esm && tsc --project tsconfig.build.esm.json\",\n \"build\": \"yarn build:es5 && yarn build:esm\",\n \"typecheck\": \"tsc --noEmit\",\n \"prepare\": \"yarn build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/teralytics/flowmap.gl.git\"\n },\n \"keywords\": [\n \"flows\",\n \"flow\",\n \"map\",\n \"webgl\",\n \"visualization\",\n \"overlay\",\n \"layer\"\n ],\n \"author\": \"Teralytics AG\",\n \"license\": \"Apache-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/teralytics/flowmap.gl/issues\"\n },\n \"homepage\": \"https://github.com/teralytics/flowmap.gl#readme\",\n \"dependencies\": {\n \"d3-array\": \"^2.7.1\",\n \"d3-collection\": \"^1.0.7\",\n \"d3-color\": \"^2.0.0\",\n \"d3-interpolate\": \"^2.0.1\",\n \"d3-scale\": \"^3.2.2\",\n \"reselect\": \"^4.0.0\"\n },\n \"devDependencies\": {\n \"@deck.gl/core\": \"^8.2.8\",\n \"@deck.gl/layers\": \"^8.2.8\",\n \"@luma.gl/constants\": \"^8.2.0\",\n \"@luma.gl/core\": \"^8.2.0\",\n \"@types/d3-array\": \"^2.0.0\",\n \"@types/d3-collection\": \"^1.0.8\",\n \"@types/d3-color\": \"^1.2.2\",\n \"@types/d3-interpolate\": \"^1.3.1\",\n \"@types/d3-scale\": \"^2.2.0\",\n \"@types/geojson\": \"^7946.0.7\",\n \"@types/node\": \"^14.10.1\",\n \"lint-staged\": \"^10.3.0\",\n \"typescript\": \"^4.0.2\"\n },\n \"peerDependencies\": {\n \"@deck.gl/core\": \">= 8.0.0\",\n \"@deck.gl/layers\": \">= 8.0.0\",\n \"@luma.gl/constants\": \">= 8.0.0\",\n \"@luma.gl/core\": \">= 8.0.0\"\n },\n \"gitHead\": \"685236ef24d44ee2c6f0c2aed79dd9c52a4e73fe\",\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n"
},
{
"path": "packages/core/src/AnimatedFlowLinesLayer/AnimatedFlowLinesLayer.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n/*\n * This file was modified by Teralytics. The original file is licenced under:\n *\n * Copyright (c) 2015-2017 Uber Technologies, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nimport { Layer, picking, project32 } from '@deck.gl/core';\nimport GL from '@luma.gl/constants';\nimport { Geometry, Model } from '@luma.gl/core';\nimport { RGBA } from '../colors';\nimport { AccessorObjectInfo, Flow } from '../types';\nimport FragmentShader from './AnimatedFlowLinesLayerFragment.glsl';\nimport VertexShader from './AnimatedFlowLinesLayerVertex.glsl';\nimport { LayerProps } from '../LayerProps';\n\nexport interface Props extends LayerProps {\n id: string;\n opacity?: number;\n pickable?: boolean;\n updateTriggers?: { [key: string]: {} };\n data: Flow[];\n drawOutline: boolean;\n outlineColor?: RGBA;\n outlineThickness?: number;\n currentTime?: number;\n thicknessUnit?: number;\n animationTailLength?: number;\n getSourcePosition?: (d: Flow) => [number, number];\n getTargetPosition?: (d: Flow) => [number, number];\n getStaggering?: (d: Flow, info: AccessorObjectInfo) => number;\n getPickable?: (d: Flow, { index }: { index: number }) => number; // >= 1.0 -> true\n getColor?: (d: Flow) => RGBA;\n getThickness?: (d: Flow) => number;\n getEndpointOffsets?: (d: Flow) => [number, number];\n}\n\nconst DEFAULT_COLOR: RGBA = [0, 132, 193, 255];\n\nexport default class AnimatedFlowLinesLayer extends Layer {\n static defaultProps = {\n currentTime: 0,\n animationTailLength: 0.7,\n getSourcePosition: { type: 'accessor', value: (d: Flow) => d.sourcePosition },\n getTargetPosition: { type: 'accessor', value: (d: Flow) => d.targetPosition },\n getPickable: { type: 'accessor', value: (d: Flow) => 1.0 },\n getStaggering: { type: 'accessor', value: (d: Flow, { index }: { index: number }) => Math.random() },\n getColor: { type: 'accessor', value: DEFAULT_COLOR },\n getThickness: { type: 'accessor', value: 1 },\n thicknessUnit: 15 * 2,\n parameters: {\n depthTest: false,\n },\n };\n\n constructor(props: Props) {\n super(props);\n }\n\n getShaders() {\n return super.getShaders({\n vs: VertexShader,\n fs: FragmentShader,\n modules: [project32, picking],\n shaderCache: this.context.shaderCache,\n });\n }\n\n initializeState() {\n const attributeManager = this.getAttributeManager();\n\n /* eslint-disable max-len */\n attributeManager.addInstanced({\n instanceSourcePositions: {\n size: 3,\n transition: true,\n accessor: 'getSourcePosition',\n },\n instanceTargetPositions: {\n size: 3,\n transition: true,\n accessor: 'getTargetPosition',\n },\n instanceColors: {\n size: 4,\n type: GL.UNSIGNED_BYTE,\n transition: true,\n accessor: 'getColor',\n defaultValue: [0, 0, 0, 255],\n },\n instanceWidths: {\n size: 1,\n transition: true,\n accessor: 'getThickness',\n defaultValue: 1,\n },\n instanceStaggering: {\n accessor: 'getStaggering',\n size: 1,\n transition: false,\n },\n instancePickable: {\n accessor: 'getPickable',\n size: 1,\n transition: false,\n },\n });\n /* eslint-enable max-len */\n }\n\n updateState({ props, oldProps, changeFlags }: any) {\n super.updateState({ props, oldProps, changeFlags });\n\n if (changeFlags.extensionsChanged) {\n const { gl } = this.context;\n if (this.state.model) {\n this.state.model.delete();\n }\n this.setState({ model: this._getModel(gl) });\n this.getAttributeManager().invalidateAll();\n }\n }\n\n draw({ uniforms }: any) {\n const { currentTime, thicknessUnit, animationTailLength } = this.props;\n this.state.model\n .setUniforms({\n ...uniforms,\n thicknessUnit: thicknessUnit! * 4,\n animationTailLength,\n currentTime,\n })\n .draw();\n }\n\n _getModel(gl: WebGLRenderingContext) {\n /*\n * (0, -1)-------------_(1, -1)\n * | _,-\" |\n * o _,-\" o\n * | _,-\" |\n * (0, 1)\"-------------(1, 1)\n */\n const positions = [0, -1, 0, 0, 1, 0, 1, -1, 0, 1, 1, 0];\n\n return new Model(\n gl,\n Object.assign({}, this.getShaders(), {\n id: this.props.id,\n geometry: new Geometry({\n drawMode: GL.TRIANGLE_STRIP,\n attributes: {\n positions: new Float32Array(positions),\n },\n }),\n isInstanced: true,\n }),\n );\n }\n}\n"
},
{
"path": "packages/core/src/AnimatedFlowLinesLayer/AnimatedFlowLinesLayerFragment.glsl.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n/*\n * This file was modified by Teralytics. The original file is licenced under:\n *\n * Copyright (c) 2015-2017 Uber Technologies, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport default `\\\n#define SHADER_NAME animated-flow-lines-layer-fragment-shader\n\nprecision highp float;\n\nuniform float animationTailLength;\n\nvarying vec4 vColor;\nvarying float sourceToTarget;\nvarying vec2 uv;\n \nvoid main(void) {\n geometry.uv = uv;\n\n gl_FragColor = vec4(vColor.xyz, vColor.w * smoothstep(1.0 - animationTailLength, 1.0, fract(sourceToTarget)));\n\n DECKGL_FILTER_COLOR(gl_FragColor, geometry);\n}\n`;\n"
},
{
"path": "packages/core/src/AnimatedFlowLinesLayer/AnimatedFlowLinesLayerVertex.glsl.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n/*\n * This file was modified by Teralytics. The original file is licenced under:\n *\n * Copyright (c) 2015-2017 Uber Technologies, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport default `\\\n#define SHADER_NAME animated-flow-lines-layer-vertex-shader\n#define SPEED 0.015\n#define NUM_PARTS 5.0\n\nattribute vec3 positions;\nattribute vec3 instanceSourcePositions;\nattribute vec3 instanceTargetPositions;\nattribute vec3 instanceSourcePositions64Low;\nattribute vec3 instanceTargetPositions64Low;\nattribute vec4 instanceColors;\nattribute vec3 instancePickingColors;\nattribute float instanceWidths;\nattribute float instancePickable;\nattribute float instanceStaggering;\n\nuniform float opacity;\nuniform float currentTime;\nuniform float thicknessUnit;\n \nvarying vec4 vColor;\nvarying float sourceToTarget;\nvarying vec2 uv;\n\n// offset vector by strokeWidth pixels\n// offset_direction is -1 (left) or 1 (right)\nvec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction, float width) {\n // normalized direction of the line\n vec2 dir_screenspace = normalize(line_clipspace * project_uViewportSize);\n // rotate by 90 degrees\n dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);\n\n return dir_screenspace * offset_direction * width / 2.0;\n}\n\nvoid main(void) {\n geometry.worldPosition = instanceSourcePositions;\n geometry.worldPositionAlt = instanceTargetPositions;\n\n // Position\n vec4 source_commonspace;\n vec4 target_commonspace;\n vec4 source = project_position_to_clipspace(instanceSourcePositions, instanceSourcePositions64Low, vec3(0.), source_commonspace);\n vec4 target = project_position_to_clipspace(instanceTargetPositions, instanceTargetPositions64Low, vec3(0.), target_commonspace);\n\n float widthPixels = instanceWidths * thicknessUnit;\n \n \n // linear interpolation of source & target to pick right coord\n float segmentIndex = positions.x;\n vec4 p = mix(source, target, segmentIndex);\n geometry.position = mix(source_commonspace, target_commonspace, segmentIndex);\n uv = positions.xy;\n geometry.uv = uv;\n if (instancePickable > 0.5) {\n geometry.pickingColor = instancePickingColors;\n }\n \n // extrude\n vec3 offset = vec3(\n getExtrusionOffset(target.xy - source.xy, positions.y, widthPixels),\n 0.0);\n DECKGL_FILTER_SIZE(offset, geometry);\n gl_Position = p + vec4(project_pixel_size_to_clipspace(offset.xy), 0.0, 0.0);\n DECKGL_FILTER_GL_POSITION(gl_Position, geometry);\n\n // Color\n vColor = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;\n DECKGL_FILTER_COLOR(vColor, geometry);\n\n sourceToTarget = positions.x * length(source - target) * NUM_PARTS - currentTime * SPEED + instanceStaggering; \n}\n`;\n"
},
{
"path": "packages/core/src/AnimatedFlowLinesLayer/index.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport AnimatedFlowLinesLayer from './AnimatedFlowLinesLayer';\n\nexport default AnimatedFlowLinesLayer;\n"
},
{
"path": "packages/core/src/FlowCirclesLayer/FlowCirclesLayer.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Layer, picking, project32 } from '@deck.gl/core';\nimport GL from '@luma.gl/constants';\nimport { Geometry, Model } from '@luma.gl/core';\nimport { RGBA } from '../colors';\nimport FragmentShader from './FlowCirclesLayerFragment.glsl';\nimport VertexShader from './FlowCirclesLayerVertex.glsl';\nimport { LayerProps } from '../LayerProps';\n\nexport type FlowCirclesDatum = any;\n\nexport interface Props extends LayerProps {\n id: string;\n opacity?: number;\n pickable?: boolean;\n updateTriggers?: { [key: string]: {} };\n getColor?: (d: FlowCirclesDatum) => RGBA;\n getPosition?: (d: FlowCirclesDatum) => [number, number];\n getRadius?: (d: FlowCirclesDatum) => number;\n data: FlowCirclesDatum[];\n}\n\nconst DEFAULT_COLOR = [0, 0, 0, 255];\n\nclass FlowCirclesLayer extends Layer {\n static layerName: string = 'FlowCirclesLayer';\n\n static defaultProps = {\n getColor: { type: 'accessor', value: DEFAULT_COLOR },\n getPosition: { type: 'accessor', value: (d: FlowCirclesDatum) => d.position },\n getRadius: { type: 'accessor', value: 1 },\n parameters: {\n depthTest: false,\n },\n };\n props!: Props;\n\n constructor(props: Props) {\n super(props);\n }\n\n getShaders() {\n return super.getShaders({\n vs: VertexShader,\n fs: FragmentShader,\n modules: [project32, picking],\n });\n }\n\n initializeState() {\n this.getAttributeManager().addInstanced({\n instancePositions: {\n size: 3,\n type: GL.DOUBLE,\n fp64: this.use64bitPositions(),\n transition: true,\n accessor: 'getPosition',\n },\n instanceRadius: {\n size: 1,\n transition: true,\n accessor: 'getRadius',\n defaultValue: 1,\n },\n instanceColors: {\n size: 4,\n transition: true,\n type: GL.UNSIGNED_BYTE,\n accessor: 'getColor',\n defaultValue: DEFAULT_COLOR,\n },\n });\n }\n\n updateState({ props, oldProps, changeFlags }: any) {\n super.updateState({ props, oldProps, changeFlags });\n if (changeFlags.extensionsChanged) {\n const { gl } = this.context;\n if (this.state.model) {\n this.state.model.delete();\n }\n this.setState({ model: this._getModel(gl) });\n this.getAttributeManager().invalidateAll();\n }\n }\n\n draw({ uniforms }: any) {\n this.state.model.setUniforms(uniforms).draw();\n }\n\n _getModel(gl: WebGLRenderingContext) {\n // a square that minimally cover the unit circle\n const positions = [-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0];\n\n return new Model(\n gl,\n Object.assign(this.getShaders(), {\n id: this.props.id,\n geometry: new Geometry({\n drawMode: GL.TRIANGLE_FAN,\n vertexCount: 4,\n attributes: {\n positions: { size: 3, value: new Float32Array(positions) },\n },\n }),\n isInstanced: true,\n }),\n );\n }\n}\n\nexport default FlowCirclesLayer;\n"
},
{
"path": "packages/core/src/FlowCirclesLayer/FlowCirclesLayerFragment.glsl.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\nexport default `\\\n#define SHADER_NAME flow-circles-layer-fragment-shader\n#define SOFT_OUTLINE 0.1\nprecision highp float;\n\nvarying vec4 vColor;\nvarying vec2 unitPosition;\nvarying float outerRadiusPixels;\n\nvoid main(void) {\n geometry.uv = unitPosition;\n float distToCenter = length(unitPosition);\n if (distToCenter > 1.0) {\n discard;\n }\n gl_FragColor = vColor;\n gl_FragColor.a *= smoothstep(0.0, SOFT_OUTLINE, 1.0 - distToCenter);\n DECKGL_FILTER_COLOR(gl_FragColor, geometry);\n}\n`;\n"
},
{
"path": "packages/core/src/FlowCirclesLayer/FlowCirclesLayerVertex.glsl.ts",
"content": "// Copyright (c) 2015 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nexport default `\\\n#define SHADER_NAME flow-circles-layer-vertex-shader\n#define radiusScale 100\n\nattribute vec3 positions;\n\nattribute vec3 instancePositions;\nattribute vec3 instancePositions64Low;\nattribute float instanceRadius;\nattribute vec4 instanceColors;\nattribute vec3 instancePickingColors;\n\nuniform float opacity;\nvarying vec4 vColor;\nvarying vec2 unitPosition;\nvarying float outerRadiusPixels;\n\nvoid main(void) {\n geometry.worldPosition = instancePositions;\n\n outerRadiusPixels = instanceRadius; \n\n // position on the containing square in [-1, 1] space\n unitPosition = positions.xy;\n geometry.uv = unitPosition;\n geometry.pickingColor = instancePickingColors;\n \n // Find the center of the point and add the current vertex\n vec3 offset = positions * project_pixel_size(outerRadiusPixels);\n DECKGL_FILTER_SIZE(offset, geometry);\n gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);\n DECKGL_FILTER_GL_POSITION(gl_Position, geometry);\n \n // Apply opacity to instance color, or return instance picking color\n vColor = vec4(instanceColors.rgb / 255., instanceColors.a / 255. * opacity);\n DECKGL_FILTER_COLOR(vColor, geometry);\n}\n`;\n"
},
{
"path": "packages/core/src/FlowCirclesLayer/index.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport FlowCirclesLayer from './FlowCirclesLayer';\n\nexport default FlowCirclesLayer;\n"
},
{
"path": "packages/core/src/FlowLinesLayer/FlowLinesLayer.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Layer, picking, project32 } from '@deck.gl/core';\nimport GL from '@luma.gl/constants';\nimport { Geometry, Model } from '@luma.gl/core';\nimport { RGBA } from '../colors';\nimport { Flow } from '../types';\nimport FragmentShader from './FlowLinesLayerFragment.glsl';\nimport VertexShader from './FlowLinesLayerVertex.glsl';\nimport { LayerProps } from '../LayerProps';\n\nexport interface Props extends LayerProps {\n id: string;\n opacity?: number;\n pickable?: boolean;\n updateTriggers?: { [key: string]: {} };\n data: Flow[];\n drawOutline: boolean;\n outlineColor?: RGBA;\n outlineThickness?: number;\n thicknessUnit?: number;\n getSourcePosition?: (d: Flow) => [number, number];\n getTargetPosition?: (d: Flow) => [number, number];\n getColor?: (d: Flow) => RGBA;\n getThickness?: (d: Flow) => number;\n getPickable?: (d: Flow, { index }: { index: number }) => number; // >= 1.0 -> true\n getEndpointOffsets?: (d: Flow) => [number, number];\n}\n\nconst DEFAULT_COLOR: RGBA = [0, 132, 193, 255];\nconst INNER_SIDE_OUTLINE_THICKNESS = 1;\n\nclass FlowLinesLayer extends Layer {\n static layerName: string = 'FlowLinesLayer';\n static defaultProps = {\n getSourcePosition: { type: 'accessor', value: (d: Flow) => d.sourcePosition },\n getTargetPosition: { type: 'accessor', value: (d: Flow) => d.targetPosition },\n getColor: { type: 'accessor', value: DEFAULT_COLOR },\n getThickness: { type: 'accessor', value: (d: Flow) => d.thickness }, // 0..0.5\n getPickable: { type: 'accessor', value: (d: Flow) => 1.0 },\n drawOutline: true,\n thicknessUnit: 10,\n outlineThickness: 1,\n outlineColor: [255, 255, 255, 255],\n parameters: {\n depthTest: false,\n },\n };\n props!: Props;\n\n constructor(props: Props) {\n super(props);\n }\n\n getShaders() {\n return super.getShaders({\n vs: VertexShader,\n fs: FragmentShader,\n modules: [project32, picking],\n shaderCache: this.context.shaderCache,\n });\n }\n\n initializeState() {\n const { attributeManager } = this.state;\n\n attributeManager.addInstanced({\n instanceSourcePositions: {\n accessor: 'getSourcePosition',\n size: 3,\n transition: false,\n type: GL.DOUBLE,\n },\n instanceTargetPositions: {\n accessor: 'getTargetPosition',\n size: 3,\n transition: false,\n type: GL.DOUBLE,\n },\n instanceThickness: {\n accessor: 'getThickness',\n size: 1,\n transition: false,\n },\n instanceEndpointOffsets: {\n accessor: 'getEndpointOffsets',\n size: 2,\n transition: false,\n },\n instanceColors: {\n accessor: 'getColor',\n size: 4,\n type: GL.UNSIGNED_BYTE,\n transition: false,\n },\n instancePickable: {\n accessor: 'getPickable',\n size: 1,\n transition: false,\n },\n });\n }\n\n updateState({ props, oldProps, changeFlags }: any) {\n super.updateState({ props, oldProps, changeFlags });\n\n if (changeFlags.extensionsChanged) {\n const { gl } = this.context;\n if (this.state.model) {\n this.state.model.delete();\n }\n this.setState({ model: this._getModel(gl) });\n this.getAttributeManager().invalidateAll();\n }\n }\n\n draw({ uniforms }: any) {\n const { gl } = this.context;\n const { outlineColor, thicknessUnit } = this.props;\n gl.lineWidth(1);\n this.state.model\n .setUniforms({\n ...uniforms,\n outlineColor: outlineColor!.map((x: number) => x / 255),\n thicknessUnit: thicknessUnit! * 2.0,\n gap: 0.5,\n })\n .draw();\n }\n\n _getModel(gl: WebGLRenderingContext) {\n let positions: number[] = [];\n let pixelOffsets: number[] = [];\n\n const { drawOutline, outlineThickness } = this.props;\n if (drawOutline) {\n // source_target_mix, perpendicular_offset_in_thickness_units, direction_of_travel_offset_in_thickness_units\n // prettier-ignore\n positions = positions.concat([\n // Outline\n 0, 0, 0,\n 0, 1, 0,\n 1, 0, 0,\n\n 0, 1, 0,\n 1, 0, -3,\n 1, 1, -3,\n\n 1, 0, 0,\n 1, 2, -3,\n 1, 0, -3,\n ],\n );\n\n const tout = outlineThickness!;\n const tin = INNER_SIDE_OUTLINE_THICKNESS; // the outline shouldn't cover the opposite arrow\n // perpendicular_offset_in_pixels, direction_of_travel_offset_in_pixels, fill_outline_color_mix\n // prettier-ignore\n pixelOffsets = pixelOffsets.concat([\n // Outline\n -tin, -tout, 1,\n tout, -tout, 1,\n -tin, tout, 1,\n\n tout, -tout, 1,\n -tin, 0, 1,\n tout, 0, 1,\n\n -tin, 3 * tout, 1,\n 2 * tout, -tout, 1,\n -tin, -tout, 1,\n ]);\n }\n\n // prettier-ignore\n positions = positions.concat([\n // Fill\n 0, 0, 0,\n 0, 1, 0,\n 1, 0, 0,\n\n 0, 1, 0,\n 1, 0, -3,\n 1, 1, -3,\n\n 1, 0, 0,\n 1, 2, -3,\n 1, 0, -3,\n ]);\n\n // prettier-ignore\n pixelOffsets = pixelOffsets.concat([\n // Fill\n 0, 0, 0,\n 0, 0, 0,\n 0, 0, 0,\n\n 0, 0, 0,\n 0, 0, 0,\n 0, 0, 0,\n\n 0, 0, 0,\n 0, 0, 0,\n 0, 0, 0,\n ]);\n\n return new Model(gl, {\n id: this.props.id,\n ...this.getShaders(),\n geometry: new Geometry({\n drawType: GL.TRIANGLES,\n attributes: {\n positions: new Float32Array(positions),\n normals: new Float32Array(pixelOffsets),\n },\n }),\n isInstanced: true,\n shaderCache: this.context.shaderCache,\n });\n }\n}\n\nexport default FlowLinesLayer;\n"
},
{
"path": "packages/core/src/FlowLinesLayer/FlowLinesLayerFragment.glsl.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*\n * This file was modified by Teralytics. Originally licenced under:\n *\n * Copyright (c) 2015 Uber Technologies, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport default `\\\n#define SHADER_NAME flow-line-layer-fragment-shader\n\nprecision highp float;\n\nvarying vec4 vColor;\nvarying vec2 uv;\n\nvoid main(void) {\n if (vColor.a == 0.0) {\n discard;\n }\n\n geometry.uv = uv;\n gl_FragColor = vColor;\n DECKGL_FILTER_COLOR(gl_FragColor, geometry);\n}\n`;\n"
},
{
"path": "packages/core/src/FlowLinesLayer/FlowLinesLayerVertex.glsl.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*\n * This file was modified by Teralytics. Originally licenced under:\n *\n * Copyright (c) 2016 Uber Technologies, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nexport default `\\\n#define SHADER_NAME flow-line-layer-vertex-shader\n\nattribute vec3 positions;\nattribute vec3 normals;\nattribute vec4 instanceColors;\nattribute float instanceThickness; // 0..0.5\nattribute vec3 instanceSourcePositions;\nattribute vec3 instanceTargetPositions;\nattribute vec3 instanceSourcePositions64Low;\nattribute vec3 instanceTargetPositions64Low;\nattribute vec3 instancePickingColors;\nattribute vec2 instanceEndpointOffsets;\nattribute float instancePickable;\n\nuniform vec4 outlineColor;\nuniform float thicknessUnit;\nuniform float gap;\nuniform float opacity;\n\nvarying vec4 vColor;\nvarying vec2 uv;\n\nvoid main(void) {\n geometry.worldPosition = instanceSourcePositions;\n geometry.worldPositionAlt = instanceTargetPositions;\n \n // Position\n vec4 source_commonspace; \n vec4 target_commonspace;\n vec4 source = project_position_to_clipspace(instanceSourcePositions, instanceSourcePositions64Low, vec3(0.), source_commonspace);\n vec4 target = project_position_to_clipspace(instanceTargetPositions, instanceTargetPositions64Low, vec3(0.), target_commonspace);\n\n // linear interpolation of source & target to pick right coord\n float sourceOrTarget = positions.x;\n geometry.position = mix(source_commonspace, target_commonspace, sourceOrTarget);\n uv = positions.xy;\n geometry.uv = uv;\n if (instancePickable > 0.5) {\n geometry.pickingColor = instancePickingColors;\n }\n \n // set the clamp limits in pixel size \n float lengthCommon = length(target_commonspace - source_commonspace); \n vec2 offsetDistances = project_pixel_size(positions.yz) * thicknessUnit;\n \n vec2 limitedOffsetDistances = clamp( \n project_pixel_size(positions.yz) * thicknessUnit,\n -lengthCommon*.8, lengthCommon*.8\n );\n float startOffsetCommon = project_pixel_size(instanceEndpointOffsets[0]);\n float endOffsetCommon = project_pixel_size(instanceEndpointOffsets[1]);\n float endpointOffset = mix(\n clamp(startOffsetCommon, 0.0, lengthCommon*.2),\n -clamp(endOffsetCommon, 0.0, lengthCommon*.2),\n positions.x\n );\n\n vec2 flowlineDir = normalize(target_commonspace.xy - source_commonspace.xy);\n vec2 perpendicularDir = vec2(-flowlineDir.y, flowlineDir.x);\n vec2 normalsCommon = project_pixel_size(normals.xy);\n float gapCommon = project_pixel_size(gap);\n vec3 offsetCommon = vec3(\n flowlineDir * (instanceThickness * limitedOffsetDistances[1] + normalsCommon.y + endpointOffset * 1.05) -\n perpendicularDir * (instanceThickness * limitedOffsetDistances[0] + gapCommon + normalsCommon.x),\n 0.0\n );\n \n DECKGL_FILTER_SIZE(offsetCommon, geometry);\n vec4 position_commonspace = mix(source_commonspace, target_commonspace, sourceOrTarget);\n vec4 offset_commonspace = vec4(offsetCommon, 0.0);\n gl_Position = project_common_position_to_clipspace(position_commonspace + offset_commonspace);\n \n DECKGL_FILTER_GL_POSITION(gl_Position, geometry);\n \n vec4 fillColor = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;\n if (instancePickable <= 0.5) {\n vColor = mix(fillColor, vec4(outlineColor.xyz, instanceThickness), normals.z);\n } else {\n vColor = mix(fillColor, vec4(outlineColor.xyz, outlineColor.w * fillColor.w), normals.z);\n }\n DECKGL_FILTER_COLOR(vColor, geometry);\n}\n`;\n"
},
{
"path": "packages/core/src/FlowLinesLayer/index.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport FlowLinesLayer from './FlowLinesLayer';\n\nexport default FlowLinesLayer;\n"
},
{
"path": "packages/core/src/FlowMapLayer.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { CompositeLayer } from '@deck.gl/core';\nimport { GeoJsonLayer } from '@deck.gl/layers';\nimport AnimatedFlowLinesLayer from './AnimatedFlowLinesLayer/AnimatedFlowLinesLayer';\nimport { Colors, DiffColors } from './colors';\nimport FlowCirclesLayer from './FlowCirclesLayer/FlowCirclesLayer';\nimport FlowLinesLayer from './FlowLinesLayer/FlowLinesLayer';\nimport Selectors from './Selectors';\nimport { LayerProps } from './LayerProps';\nimport {\n DeckGLLayer,\n Flow,\n FlowAccessor,\n FlowLayerPickingInfo,\n isFeatureCollection,\n Location,\n LocationAccessor,\n LocationCircle,\n LocationCircleAccessor,\n LocationCircleType,\n Locations,\n PickingHandler,\n PickingType,\n} from './types';\n\nexport interface BasicProps extends LayerProps {\n locations: Locations;\n flows: Flow[];\n diffMode?: boolean;\n animate?: boolean;\n animationCurrentTime?: number;\n animationTailLength?: number;\n colors?: Colors | DiffColors;\n getLocationId?: LocationAccessor;\n getLocationCentroid?: LocationAccessor<[number, number]>;\n getLocationTotalIn?: LocationAccessor;\n getLocationTotalOut?: LocationAccessor;\n getLocationTotalWithin?: LocationAccessor;\n getFlowOriginId?: FlowAccessor;\n getFlowDestId?: FlowAccessor;\n getFlowMagnitude?: FlowAccessor;\n getAnimatedFlowLineStaggering?: FlowAccessor;\n getFlowColor?: FlowAccessor;\n maxFlowThickness?: number;\n flowMagnitudeExtent?: [number, number];\n locationTotalsExtent?: [number, number];\n maxLocationCircleSize?: number;\n minPickableFlowThickness?: number;\n showTotals?: boolean;\n showLocationAreas?: boolean;\n showOnlyTopFlows?: number;\n selectedLocationIds?: string[];\n highlightedLocationId?: string;\n highlightedLocationAreaId?: string;\n highlightedFlow?: Flow;\n outlineThickness?: number;\n updateTriggers?: {\n getFlowLinesSourcePosition?: any;\n getFlowLinesTargetPosition?: any;\n getFlowLinesThickness?: any;\n getFlowLinesEndpointOffsets?: any;\n getFlowLinesColor?: any;\n getCirclesRadius?: any;\n getCirclesColor?: any;\n getLocationAreasFillColor?: any;\n getLocationAreasLineColor?: any;\n };\n}\n\nexport interface Props extends BasicProps {\n id: string;\n onClick?: PickingHandler;\n onHover?: PickingHandler;\n}\n\nenum LayerKind {\n LOCATIONS = 'LOCATIONS',\n LOCATION_AREAS = 'LOCATION_AREAS',\n LOCATION_AREAS_OUTLINES = 'LOCATION_AREAS_OUTLINES',\n LOCATION_AREAS_SELECTED_AND_HIGHLIGHTED = 'LOCATION_AREAS_SELECTED_AND_HIGHLIGHTED',\n FLOWS = 'FLOWS',\n LOCATIONS_HIGHLIGHTED = 'LOCATIONS_HIGHLIGHTED',\n FLOWS_HIGHLIGHTED = 'FLOWS_HIGHLIGHTED',\n}\n\nconst LAYER_ID_SEPARATOR = ':::';\n\nfunction getLayerId(baseLayerId: string, layerKind: LayerKind) {\n return `${baseLayerId}${LAYER_ID_SEPARATOR}${layerKind.valueOf()}`;\n}\n\nfunction getLayerKind(id: string): LayerKind {\n const kind = id.substr(id.lastIndexOf(LAYER_ID_SEPARATOR) + LAYER_ID_SEPARATOR.length);\n return LayerKind[kind as keyof typeof LayerKind];\n}\n\nfunction getPickType({ id }: DeckGLLayer): PickingType | undefined {\n switch (getLayerKind(id)) {\n case LayerKind.FLOWS:\n case LayerKind.FLOWS_HIGHLIGHTED:\n return PickingType.FLOW;\n case LayerKind.LOCATIONS:\n case LayerKind.LOCATIONS_HIGHLIGHTED:\n return PickingType.LOCATION;\n case LayerKind.LOCATION_AREAS:\n return PickingType.LOCATION_AREA;\n default:\n return undefined;\n }\n}\n\nexport default class FlowMapLayer extends CompositeLayer {\n static layerName: string = 'FlowMapLayer';\n static defaultProps = {\n getLocationId: { type: 'accessor', value: (l: Location) => l.id || l.properties.id },\n getLocationCentroid: { type: 'accessor', value: (l: Location) => l.properties.centroid },\n getFlowOriginId: { type: 'accessor', value: (f: Flow) => f.origin },\n getFlowDestId: { type: 'accessor', value: (f: Flow) => f.dest },\n getFlowMagnitude: { type: 'accessor', value: (f: Flow) => f.count },\n showTotals: true,\n maxLocationCircleSize: 15,\n outlineThickness: 1,\n showLocationAreas: true,\n animationTailLength: 0.7,\n };\n props!: Props;\n\n constructor(props: Props) {\n super(props);\n }\n\n initializeState() {\n const {\n getLocationTotalIn,\n getLocationTotalOut,\n getLocationTotalWithin,\n getLocationId,\n getLocationCentroid,\n getFlowOriginId,\n getFlowDestId,\n getFlowMagnitude,\n getFlowColor,\n } = this.props;\n const selectors = new Selectors({\n getLocationId: getLocationId!,\n getLocationCentroid: getLocationCentroid!,\n getLocationTotalIn,\n getLocationTotalOut,\n getLocationTotalWithin,\n getFlowOriginId: getFlowOriginId!,\n getFlowDestId: getFlowDestId!,\n getFlowMagnitude: getFlowMagnitude!,\n getFlowColor,\n });\n\n this.setState({ selectors });\n }\n\n updateState(params: any) {\n super.updateState(params);\n\n const { props, changeFlags } = params;\n if (changeFlags.propsChanged) {\n const {\n getLocationTotalIn,\n getLocationTotalOut,\n getLocationTotalWithin,\n getLocationId,\n getLocationCentroid,\n getFlowOriginId,\n getFlowDestId,\n getFlowMagnitude,\n getFlowColor,\n } = props;\n this.state.selectors.setInputAccessors({\n getLocationId,\n getLocationCentroid,\n getLocationTotalIn,\n getLocationTotalOut,\n getLocationTotalWithin,\n getFlowOriginId,\n getFlowDestId,\n getFlowMagnitude,\n getFlowColor,\n });\n }\n }\n\n getPickingInfo(params: any): FlowLayerPickingInfo {\n const type = getPickType(params.sourceLayer);\n if (!type) {\n return params.info;\n }\n\n const info = {\n ...params.info,\n type,\n };\n\n const { selectors } = this.state;\n if (type === PickingType.FLOW) {\n const getLocationById = selectors.getLocationByIdGetter(this.props);\n const { getFlowOriginId, getFlowDestId } = selectors.getInputAccessors();\n const flow = info.object as Flow;\n return {\n ...info,\n ...(flow && {\n origin: getLocationById(getFlowOriginId(flow)),\n dest: getLocationById(getFlowDestId(flow)),\n }),\n };\n }\n\n if (type === PickingType.LOCATION || type === PickingType.LOCATION_AREA) {\n const location: Location = type === PickingType.LOCATION ? info.object && info.object.location : info.object;\n const getLocationTotalIn = selectors.getLocationTotalInGetter(this.props);\n const getLocationTotalOut = selectors.getLocationTotalOutGetter(this.props);\n const getLocationTotalWithin = selectors.getLocationTotalWithinGetter(this.props);\n const getLocationCircleRadius = selectors.getLocationCircleRadiusGetter(this.props);\n\n return {\n ...info,\n ...(location && {\n object: location,\n totalIn: getLocationTotalIn(location),\n totalOut: getLocationTotalOut(location),\n totalWithin: getLocationTotalWithin(location),\n circleRadius: getLocationCircleRadius({ location, type: LocationCircleType.OUTER }),\n }),\n };\n }\n\n return info;\n }\n\n renderLayers() {\n const { showLocationAreas, locations, highlightedLocationId } = this.props;\n\n const { selectors } = this.state;\n\n const topFlows = selectors.getTopFlows(this.props);\n const highlightedFlows = selectors.getHighlightedFlows(this.props);\n const isLocationHighlighted = highlightedLocationId != null;\n const locationCircles = selectors.getLocationCircles(this.props);\n\n const layers: DeckGLLayer[] = [];\n\n if (showLocationAreas && isFeatureCollection(locations)) {\n layers.push(this.getLocationAreasLayer(getLayerId(this.props.id, LayerKind.LOCATION_AREAS), false));\n }\n layers.push(\n this.getFlowLinesLayer(getLayerId(this.props.id, LayerKind.FLOWS), topFlows, false, isLocationHighlighted),\n );\n\n if (showLocationAreas && isFeatureCollection(locations)) {\n layers.push(\n this.getHighlightedLocationAreasLayer(\n getLayerId(this.props.id, LayerKind.LOCATION_AREAS_SELECTED_AND_HIGHLIGHTED),\n ),\n );\n }\n\n if (highlightedFlows) {\n layers.push(\n this.getFlowLinesLayer(getLayerId(this.props.id, LayerKind.FLOWS_HIGHLIGHTED), highlightedFlows, true, false),\n );\n }\n layers.push(this.getLocationCirclesLayer(getLayerId(this.props.id, LayerKind.LOCATIONS), locationCircles, false));\n if (isLocationHighlighted) {\n const highlightedLocationCircles = selectors.getHighlightedLocationCircles(this.props);\n layers.push(\n this.getLocationCirclesLayer(\n getLayerId(this.props.id, LayerKind.LOCATIONS_HIGHLIGHTED),\n highlightedLocationCircles,\n true,\n ),\n );\n }\n if (showLocationAreas && isFeatureCollection(locations)) {\n layers.push(this.getLocationAreasLayer(getLayerId(this.props.id, LayerKind.LOCATION_AREAS_OUTLINES), true));\n }\n return layers;\n }\n\n private getLocationAreasLayer(id: string, outline: boolean): DeckGLLayer {\n const { locations, selectedLocationIds, highlightedLocationId, highlightedFlow, updateTriggers } = this.props;\n const { selectors } = this.state;\n const colors = selectors.getColors(this.props);\n\n return new GeoJsonLayer(\n this.getSubLayerProps({\n id,\n getFillColor: selectors.getLocationAreaFillColorGetter(this.props),\n getLineColor: colors.locationAreas.outline,\n lineJointRounded: true,\n data: locations,\n stroked: outline,\n filled: !outline,\n ...(outline && { pickable: false }),\n lineWidthMinPixels: 1,\n pointRadiusMinPixels: 1,\n updateTriggers: {\n getFillColor: {\n colors,\n ...(outline && { selectedLocationIds, highlightedLocationId, highlightedFlow }),\n ...updateTriggers?.getLocationAreasFillColor,\n },\n getLineColor: {\n colors,\n ...updateTriggers?.getLocationAreasLineColor,\n },\n },\n }),\n );\n }\n\n private getHighlightedLocationAreasLayer(id: string): DeckGLLayer {\n const { selectors } = this.state;\n const { highlightedLocationId, highlightedLocationAreaId, updateTriggers } = this.props;\n const colors = selectors.getColors(this.props);\n const getLocationById = selectors.getLocationByIdGetter(this.props);\n\n return new GeoJsonLayer(\n this.getSubLayerProps({\n id,\n getFillColor: () => colors.locationAreas.highlighted,\n getLineColor: colors.locationAreas.outline,\n lineJointRounded: true,\n data: highlightedLocationId\n ? getLocationById(highlightedLocationId)\n : highlightedLocationAreaId\n ? getLocationById(highlightedLocationAreaId)\n : undefined,\n stroked: false,\n filled: true,\n pickable: false,\n lineWidthMinPixels: 5,\n updateTriggers: {\n getFillColor: {\n colors,\n ...updateTriggers?.getLocationAreasFillColor,\n },\n getLineColor: {\n colors,\n ...updateTriggers?.getLocationAreasLineColor,\n },\n },\n }),\n );\n }\n\n private getFlowLinesLayer(\n id: string,\n flows: Flow[],\n highlighted: boolean,\n dimmed: boolean,\n ): FlowLinesLayer | AnimatedFlowLinesLayer {\n const {\n getFlowOriginId,\n getFlowDestId,\n getFlowMagnitude,\n getLocationCentroid,\n getAnimatedFlowLineStaggering,\n showTotals,\n maxLocationCircleSize,\n outlineThickness,\n minPickableFlowThickness,\n maxFlowThickness,\n flowMagnitudeExtent,\n locationTotalsExtent,\n updateTriggers,\n } = this.props;\n const { selectors } = this.state;\n\n const endpointOffsets: [number, number] = [(maxLocationCircleSize || 0) + 1, (maxLocationCircleSize || 0) + 1];\n const getLocationRadius = selectors.getLocationCircleRadiusGetter(this.props);\n const getLocationById = selectors.getLocationByIdGetter(this.props);\n const flowThicknessScale = selectors.getFlowThicknessScale(this.props);\n const getSourcePosition: FlowAccessor<[number, number]> = (flow, info) =>\n getLocationCentroid!(getLocationById(getFlowOriginId!(flow, info)));\n const getTargetPosition: FlowAccessor<[number, number]> = (flow, info) =>\n getLocationCentroid!(getLocationById(getFlowDestId!(flow, info)));\n const getThickness: FlowAccessor = (flow, info) => flowThicknessScale(getFlowMagnitude!(flow, info));\n const getEndpointOffsets: FlowAccessor<[number, number]> = (flow, info) => {\n if (!showTotals) {\n return endpointOffsets;\n }\n\n return [\n getLocationRadius({\n location: getLocationById(getFlowOriginId!(flow, info)),\n type: LocationCircleType.OUTLINE,\n }),\n getLocationRadius({\n location: getLocationById(getFlowDestId!(flow, info)),\n type: LocationCircleType.OUTLINE,\n }),\n ];\n };\n const flowColorScale = selectors.getFlowColorScale(this.props);\n const colors = selectors.getColors(this.props);\n const getColor = selectors.getFlowLinesColorGetter(colors, flowColorScale, highlighted, dimmed);\n const { animate } = this.props;\n\n const thicknessUnit = maxFlowThickness != null ? maxFlowThickness : FlowLinesLayer.defaultProps.thicknessUnit;\n const baseProps = {\n id,\n getSourcePosition,\n getTargetPosition,\n getThickness,\n getEndpointOffsets,\n getColor,\n data: flows,\n ...(highlighted && { pickable: false }),\n drawOutline: !dimmed,\n updateTriggers: {\n getSourcePosition: updateTriggers?.getFlowLinesSourcePosition,\n getTargetPosition: updateTriggers?.getFlowLinesTargetPosition,\n getThickness: {\n flowMagnitudeExtent,\n maxFlowThickness,\n ...updateTriggers?.getFlowLinesThickness,\n },\n getColor: {\n colors,\n dimmed,\n ...updateTriggers?.getFlowLinesColor,\n },\n getEndpointOffsets: {\n showTotals,\n locationTotalsExtent,\n ...updateTriggers?.getFlowLinesEndpointOffsets,\n },\n },\n thicknessUnit,\n outlineColor: colors.outlineColor,\n ...(outlineThickness && { outlineThickness }),\n ...(minPickableFlowThickness != null && {\n getPickable: (f: Flow) => (thicknessUnit * getThickness(f) >= minPickableFlowThickness ? 1.0 : 0.0),\n }),\n parameters: {\n ...this.props.parameters,\n depthTest: false,\n },\n };\n if (animate) {\n return new AnimatedFlowLinesLayer(\n this.getSubLayerProps({\n ...baseProps,\n currentTime: this.props.animationCurrentTime,\n ...(this.props.animationTailLength != null && {\n animationTailLength: this.props.animationTailLength,\n }),\n ...(getAnimatedFlowLineStaggering && {\n getStaggering: getAnimatedFlowLineStaggering,\n }),\n }),\n );\n } else {\n return new FlowLinesLayer(this.getSubLayerProps(baseProps));\n }\n }\n\n private getLocationCirclesLayer(id: string, circles: LocationCircle[], highlighted: boolean): FlowCirclesLayer {\n const {\n highlightedLocationId,\n selectedLocationIds,\n getLocationCentroid,\n flows,\n showTotals,\n updateTriggers,\n maxLocationCircleSize,\n locationTotalsExtent,\n } = this.props;\n const { selectors } = this.state;\n\n const getRadius = showTotals ? selectors.getLocationCircleRadiusGetter(this.props) : () => maxLocationCircleSize;\n const colors = selectors.getColors(this.props);\n const getColor = selectors.getLocationCircleColorGetter(this.props);\n const getPosition: LocationCircleAccessor<[number, number]> = locCircle => getLocationCentroid!(locCircle.location);\n\n return new FlowCirclesLayer(\n this.getSubLayerProps({\n id,\n getColor,\n getPosition,\n getRadius,\n data: circles,\n updateTriggers: {\n getRadius: {\n showTotals,\n selectedLocationIds,\n maxLocationCircleSize,\n locationTotalsExtent,\n flows,\n ...updateTriggers?.getCirclesRadius,\n },\n getColor: {\n colors,\n highlightedLocationId,\n selectedLocationIds,\n flows,\n ...updateTriggers?.getCirclesColor,\n },\n },\n parameters: {\n ...this.props.parameters,\n depthTest: false,\n },\n }),\n );\n }\n}\n"
},
{
"path": "packages/core/src/LayerProps.ts",
"content": "// This is for deck.gl Layer\nexport interface LayerProps {\n id?: string;\n data?: any;\n autoHighlight?: boolean;\n opacity?: number;\n pickable?: boolean;\n visible?: boolean;\n coordinateOrigin?: any;\n coordinateSystem?: any;\n extensions?: any;\n getPolygonOffset?: any;\n highlightColor?: any;\n highlightedObjectIndex?: any;\n lightSettings?: any;\n modelMatrix?: any;\n parameters?: any;\n positionFormat?: any;\n colorFormat?: any;\n transitions?: any;\n wrapLongitude?: any;\n dataComparator?: any;\n dataTransform?: any;\n numInstances?: any;\n updateTriggers?: any;\n _dataDiff?: any;\n onDragStart?: any;\n onDrag?: any;\n onDragEnd?: any;\n onClick?: any;\n onHover?: any;\n onDataLoad?: any;\n}\n"
},
{
"path": "packages/core/src/Selectors.ts",
"content": "// tslint:disable:member-ordering\n\nimport { ascending, extent, max } from 'd3-array';\nimport { nest } from 'd3-collection';\nimport { scaleLinear, scalePow } from 'd3-scale';\nimport { createSelector } from 'reselect';\nimport {\n colorAsRgba,\n ColorScale,\n ColorsRGBA,\n createFlowColorScale,\n DiffColorsRGBA,\n getColorsRGBA,\n getDiffColorsRGBA,\n getDimmedCircleColor,\n getDimmedCircleOutlineColor,\n getDimmedColor,\n isDiffColorsRGBA,\n RGBA,\n} from './colors';\nimport FlowMapLayer, { Props } from './FlowMapLayer';\nimport {\n Flow,\n FlowAccessors,\n isFeatureCollection,\n Location,\n LocationAccessors,\n LocationCircle,\n LocationCircleType,\n NumberScale,\n} from './types';\n\nexport type InputAccessors = LocationAccessors & FlowAccessors;\n\nexport type PropsSelector = (props: Props) => T;\n\nexport interface LocationTotals {\n incoming: {\n [key: string]: number;\n };\n outgoing: {\n [key: string]: number;\n };\n within: {\n [key: string]: number;\n };\n}\n\nconst CIRCLE_OUTLINE_THICKNESS = 1;\nexport type LocationByIdGetter = (id: string) => Location | undefined;\n\nconst getDiffMode = (props: Props) => props.diffMode;\nconst getColorsProp = (props: Props) => props.colors;\nconst getAnimate = (props: Props) => props.animate;\nconst getLocationFeatures = (props: Props) =>\n isFeatureCollection(props.locations) ? props.locations.features : props.locations;\nconst getFlows = (props: Props) => props.flows;\nconst getHighlightedFlow = (props: Props) => props.highlightedFlow;\nconst getHighlightedLocationId = (props: Props) => props.highlightedLocationId;\nconst getSelectedLocationIds = (props: Props) => props.selectedLocationIds;\nconst getShowOnlyTopFlows = (props: Props) => props.showOnlyTopFlows;\nconst getMaxLocationCircleSize = (props: Props) =>\n props.maxLocationCircleSize != null ? props.maxLocationCircleSize : FlowMapLayer.defaultProps.maxLocationCircleSize;\n\nclass Selectors {\n constructor(private inputAccessors: InputAccessors) {}\n\n getColors: PropsSelector = createSelector(\n [getColorsProp, getDiffMode],\n (colors, diffMode) => {\n if (diffMode) {\n return getDiffColorsRGBA(colors);\n }\n return getColorsRGBA(colors);\n },\n );\n\n getLocationByIdGetter: PropsSelector = createSelector([getLocationFeatures], locations => {\n const locationsById = nest()\n .key(this.inputAccessors.getLocationId)\n .rollup(([d]) => d)\n .object(locations);\n return (id: string) => {\n const location = locationsById[id];\n if (!location) {\n console.warn(`No location found for id '${id}'`);\n }\n return location;\n };\n });\n\n private getFilteredFlows: PropsSelector = createSelector(\n [getFlows, getSelectedLocationIds],\n (flows, selectedLocationIds) => {\n const { getFlowOriginId, getFlowDestId } = this.inputAccessors;\n\n if (selectedLocationIds) {\n return flows.filter(\n flow =>\n selectedLocationIds.indexOf(getFlowOriginId(flow)) >= 0 ||\n selectedLocationIds.indexOf(getFlowDestId(flow)) >= 0,\n );\n }\n\n return flows;\n },\n );\n\n private getNonSelfFlows: PropsSelector = createSelector([this.getFilteredFlows], flows => {\n const { getFlowOriginId, getFlowDestId } = this.inputAccessors;\n return flows.filter(flow => getFlowOriginId(flow) !== getFlowDestId(flow));\n });\n\n getSortedNonSelfFlows: PropsSelector = createSelector([this.getNonSelfFlows], flows => {\n const comparator = (f1: Flow, f2: Flow) =>\n Math.abs(this.inputAccessors.getFlowMagnitude(f1)) - Math.abs(this.inputAccessors.getFlowMagnitude(f2));\n return flows.slice().sort(comparator);\n });\n\n getTopFlows: PropsSelector = createSelector(\n [this.getSortedNonSelfFlows, getShowOnlyTopFlows],\n (flows, showOnlyTopFlows) => {\n if (showOnlyTopFlows != null && showOnlyTopFlows > 0 && flows.length > showOnlyTopFlows) {\n return flows.slice(flows.length - showOnlyTopFlows, flows.length);\n }\n return flows;\n },\n );\n\n getHighlightedFlows: PropsSelector = createSelector(\n [this.getSortedNonSelfFlows, getHighlightedFlow, getHighlightedLocationId],\n (flows, highlightedFlow, highlightedLocationId) => {\n const { getFlowOriginId, getFlowDestId } = this.inputAccessors;\n\n if (highlightedFlow) {\n return [highlightedFlow];\n }\n\n if (highlightedLocationId) {\n return flows.filter(\n flow => getFlowOriginId(flow) === highlightedLocationId || getFlowDestId(flow) === highlightedLocationId,\n );\n }\n\n return undefined;\n },\n );\n\n private getFlowMagnitudeExtent: PropsSelector<[number, number] | [undefined, undefined]> = createSelector(\n [this.getNonSelfFlows, props => props.flowMagnitudeExtent],\n (flows, flowMagnitudeExtent) => {\n if (flowMagnitudeExtent != null) return flowMagnitudeExtent;\n return extent(flows, f => this.inputAccessors.getFlowMagnitude(f));\n },\n );\n\n getFlowThicknessScale: PropsSelector<(magnitude: number) => number | undefined> = createSelector(\n [this.getFlowMagnitudeExtent],\n ([minMagnitude, maxMagnitude]) => {\n const scale = scaleLinear()\n .range([0.05, 0.5])\n .domain([0, Math.max(Math.abs(minMagnitude || 0), Math.abs(maxMagnitude || 0))]);\n\n return (magnitude: number) => scale(Math.abs(magnitude));\n },\n );\n\n getFlowColorScale: PropsSelector = createSelector(\n [this.getColors, this.getFlowMagnitudeExtent, getAnimate],\n (colors, [minMagnitude, maxMagnitude], animate) => {\n if (isDiffColorsRGBA(colors)) {\n const posScale = createFlowColorScale([0, maxMagnitude || 0], colors.positive.flows.scheme, animate);\n const negScale = createFlowColorScale([0, minMagnitude || 0], colors.negative.flows.scheme, animate);\n\n return (magnitude: number) => (magnitude >= 0 ? posScale(magnitude) : negScale(magnitude));\n }\n\n const scale = createFlowColorScale([0, maxMagnitude || 0], colors.flows.scheme, animate);\n return (magnitude: number) => scale(magnitude);\n },\n );\n\n getFlowLinesColorGetter(\n colors: ColorsRGBA | DiffColorsRGBA,\n flowColorScale: ColorScale,\n highlighted: boolean,\n dimmed: boolean,\n ) {\n const { getFlowMagnitude, getFlowColor } = this.inputAccessors;\n return (flow: Flow) => {\n if (getFlowColor) {\n const color = getFlowColor(flow);\n if (color) {\n return colorAsRgba(color);\n }\n }\n if (highlighted) {\n if (isDiffColorsRGBA(colors)) {\n const positiveColor = colors.positive.flows.highlighted;\n const negativeColor = colors.negative.flows.highlighted;\n const magnitude = getFlowMagnitude(flow);\n return magnitude >= 0 ? positiveColor : negativeColor;\n } else {\n return colors.flows.highlighted;\n }\n } else {\n const magnitude = getFlowMagnitude(flow);\n const color = flowColorScale(magnitude);\n if (dimmed) {\n return getDimmedColor(color, colors.dimmedOpacity);\n }\n return color;\n }\n };\n }\n\n private getLocationTotals: PropsSelector = createSelector(\n [getLocationFeatures, this.getFilteredFlows],\n (locations, flows) => {\n const { getFlowOriginId, getFlowDestId, getFlowMagnitude } = this.inputAccessors;\n return flows.reduce(\n (acc, curr) => {\n const originId = getFlowOriginId(curr);\n const destId = getFlowDestId(curr);\n const magnitude = getFlowMagnitude(curr);\n if (originId === destId) {\n acc.within[originId] = (acc.within[originId] || 0) + magnitude;\n } else {\n acc.outgoing[originId] = (acc.outgoing[originId] || 0) + magnitude;\n acc.incoming[destId] = (acc.incoming[destId] || 0) + magnitude;\n }\n return acc;\n },\n { incoming: {}, outgoing: {}, within: {} },\n );\n },\n );\n\n getHighlightedLocationCircles: PropsSelector = createSelector(\n [this.getLocationByIdGetter, getHighlightedLocationId],\n (getLocationById, highlightedLocationId) => {\n if (highlightedLocationId) {\n const location = getLocationById(highlightedLocationId);\n if (!location) {\n return undefined;\n }\n return [\n { location, type: LocationCircleType.OUTLINE },\n { location, type: LocationCircleType.OUTER },\n { location, type: LocationCircleType.INNER },\n ];\n }\n return undefined;\n },\n );\n\n getLocationTotalInGetter = (props: Props) => {\n const { getLocationTotalIn, getLocationId } = this.inputAccessors;\n if (getLocationTotalIn) {\n return getLocationTotalIn;\n }\n\n const { incoming } = this.getLocationTotals(props);\n return (location: Location) => incoming[getLocationId(location)] || 0;\n };\n\n getLocationTotalOutGetter = (props: Props) => {\n const { getLocationTotalOut, getLocationId } = this.inputAccessors;\n if (getLocationTotalOut) {\n return getLocationTotalOut;\n }\n\n const { outgoing } = this.getLocationTotals(props);\n return (location: Location) => outgoing[getLocationId(location)] || 0;\n };\n\n getLocationTotalWithinGetter = (props: Props) => {\n const { getLocationTotalWithin, getLocationId } = this.inputAccessors;\n if (getLocationTotalWithin) {\n return getLocationTotalWithin;\n }\n\n const { within } = this.getLocationTotals(props);\n return (location: Location) => within[getLocationId(location)] || 0;\n };\n\n private getLocationMaxAbsTotalGetter: PropsSelector<(location: Location) => number> = createSelector(\n [\n getLocationFeatures,\n this.getLocationTotalInGetter,\n this.getLocationTotalOutGetter,\n this.getLocationTotalWithinGetter,\n ],\n (locations, getLocationTotalIn, getLocationTotalOut, getLocationTotalWithin) => {\n return (location: Location) =>\n Math.max(\n Math.abs(getLocationTotalIn(location) + getLocationTotalWithin(location)),\n Math.abs(getLocationTotalOut(location) + getLocationTotalWithin(location)),\n );\n },\n );\n\n private getMaxLocationMaxAbsTotal: PropsSelector = createSelector(\n [getLocationFeatures, this.getLocationMaxAbsTotalGetter, props => props.locationTotalsExtent],\n (locations, getLocationMaxAbsTotal, locationTotalsExtent) => {\n if (locationTotalsExtent != null) {\n return max(locationTotalsExtent, Math.abs) || 0;\n }\n return max(locations, getLocationMaxAbsTotal) || 0;\n },\n );\n\n getLocationCircles: PropsSelector = createSelector(\n [getLocationFeatures, this.getLocationMaxAbsTotalGetter],\n (locations, getLocationMaxAbsTotalGetter) => {\n const circles = [];\n const sorted = locations\n .slice()\n .sort((a, b) => ascending(getLocationMaxAbsTotalGetter(a), getLocationMaxAbsTotalGetter(b)));\n\n for (const location of sorted) {\n circles.push({\n location,\n type: LocationCircleType.OUTLINE,\n });\n circles.push({\n location,\n type: LocationCircleType.OUTER,\n });\n circles.push({\n location,\n type: LocationCircleType.INNER,\n });\n }\n return circles;\n },\n );\n\n private getSizeScale: PropsSelector<(v: number) => number> = createSelector(\n [getMaxLocationCircleSize, this.getMaxLocationMaxAbsTotal],\n (maxLocationCircleSize, maxTotal) => {\n const scale = scalePow()\n .exponent(1 / 2)\n .domain([0, maxTotal])\n .range([0, maxTotal > 0 ? maxLocationCircleSize : 1]);\n\n return (v: number) => scale(Math.abs(v)) || 0;\n },\n );\n\n getLocationCircleRadiusGetter: PropsSelector<(locCircle: LocationCircle) => number> = createSelector(\n [\n this.getSizeScale,\n this.getLocationTotalInGetter,\n this.getLocationTotalOutGetter,\n this.getLocationTotalWithinGetter,\n ],\n (sizeScale, getLocationTotalIn, getLocationTotalOut, getLocationTotalWithin) => {\n return ({ location, type }: LocationCircle) => {\n const getSide = type === LocationCircleType.INNER ? Math.min : Math.max;\n const totalIn = getLocationTotalIn(location);\n const totalOut = getLocationTotalOut(location);\n const totalWithin = getLocationTotalWithin(location);\n const r = sizeScale(getSide(Math.abs(totalIn + totalWithin), Math.abs(totalOut + totalWithin)));\n if (type === LocationCircleType.OUTLINE) {\n return r + CIRCLE_OUTLINE_THICKNESS;\n }\n return r;\n };\n },\n );\n\n getLocationCircleColorGetter: PropsSelector<(locCircle: LocationCircle) => RGBA> = createSelector(\n [\n this.getColors,\n getHighlightedLocationId,\n this.getLocationTotalInGetter,\n this.getLocationTotalOutGetter,\n this.getLocationTotalWithinGetter,\n ],\n (colors, highlightedLocationId, getLocationTotalIn, getLocationTotalOut, getLocationTotalWithin) => {\n const { getLocationId } = this.inputAccessors;\n\n return ({ location, type }: LocationCircle) => {\n const isHighlighted = highlightedLocationId && highlightedLocationId === getLocationId(location);\n const isDimmed = highlightedLocationId && highlightedLocationId !== getLocationId(location);\n\n const totalWithin = getLocationTotalWithin(location);\n const totalIn = getLocationTotalIn(location) + totalWithin;\n const totalOut = getLocationTotalOut(location) + totalWithin;\n const isIncoming = type === LocationCircleType.OUTER && Math.abs(totalIn) > Math.abs(totalOut);\n\n const isPositive = (isIncoming === true && totalIn >= 0) || totalOut >= 0;\n const circleColors = (isDiffColorsRGBA(colors) ? (isPositive ? colors.positive : colors.negative) : colors)\n .locationCircles;\n if (isHighlighted && type === LocationCircleType.OUTLINE) {\n return circleColors.highlighted;\n }\n\n if (isDimmed) {\n if (type === LocationCircleType.OUTLINE) {\n return getDimmedCircleOutlineColor(colors.outlineColor, colors.dimmedOpacity);\n }\n return getDimmedCircleColor(circleColors.inner, colors.dimmedOpacity);\n }\n\n if (type === LocationCircleType.OUTLINE) {\n return isIncoming ? circleColors.incoming : circleColors.inner;\n }\n\n if (type === LocationCircleType.INNER) {\n return circleColors.inner;\n }\n\n if (isIncoming === true) {\n return circleColors.incoming;\n }\n\n return circleColors.outgoing;\n };\n },\n );\n\n private isLocationConnectedGetter: PropsSelector<(id: string) => boolean> = createSelector(\n [this.getFilteredFlows, getHighlightedLocationId, getHighlightedFlow, getSelectedLocationIds],\n (flows, highlightedLocationId, highlightedFlow, selectedLocationIds) => {\n const { getFlowOriginId, getFlowDestId } = this.inputAccessors;\n\n if (highlightedLocationId) {\n const isRelated = (flow: Flow) => {\n const originId = getFlowOriginId(flow);\n const destId = getFlowDestId(flow);\n return (\n originId === highlightedLocationId ||\n (selectedLocationIds && selectedLocationIds.indexOf(originId) >= 0) ||\n destId === highlightedLocationId ||\n (selectedLocationIds && selectedLocationIds.indexOf(destId) >= 0)\n );\n };\n\n const locations = new Set();\n for (const flow of flows) {\n if (isRelated(flow)) {\n locations.add(getFlowOriginId(flow));\n locations.add(getFlowDestId(flow));\n }\n }\n\n return (id: string) => locations.has(id);\n }\n\n return () => false;\n },\n );\n\n getLocationAreaFillColorGetter: PropsSelector<(location: Location) => RGBA> = createSelector(\n [this.getColors, getSelectedLocationIds, this.isLocationConnectedGetter],\n (colors, selectedLocationIds, isLocationConnected) => {\n return (location: Location) => {\n const locationId = this.inputAccessors.getLocationId(location);\n if (selectedLocationIds && selectedLocationIds.indexOf(locationId) >= 0) {\n return colors.locationAreas.selected;\n }\n\n if (isLocationConnected(locationId)) {\n return colors.locationAreas.connected;\n }\n\n return colors.locationAreas.normal;\n };\n },\n );\n\n setInputAccessors(inputAccessors: InputAccessors) {\n this.inputAccessors = inputAccessors;\n }\n\n getInputAccessors() {\n return this.inputAccessors;\n }\n}\n\nexport default Selectors;\n"
},
{
"path": "packages/core/src/colors.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { color as d3color, hcl } from 'd3-color';\nimport { interpolateHcl } from 'd3-interpolate';\nimport { interpolateRgbBasis } from 'd3-interpolate';\n// @ts-ignore\nimport { scaleSequentialPow } from 'd3-scale';\n\nconst DEFAULT_FLOW_MIN_COLOR = 'rgba(240,240,240,0.5)';\nconst DEFAULT_FLOW_COLOR_SCHEME = [DEFAULT_FLOW_MIN_COLOR, '#137CBD'];\nconst DEFAULT_FLOW_COLOR_SCHEME_POSITIVE = [DEFAULT_FLOW_MIN_COLOR, '#f6654e'];\nconst DEFAULT_FLOW_COLOR_SCHEME_NEGATIVE = [DEFAULT_FLOW_MIN_COLOR, '#00a9cc'];\nconst DEFAULT_OUTLINE_COLOR = '#fff';\nconst DEFAULT_LOCATION_AREA_COLOR = 'rgba(220,220,220,0.5)';\nconst DEFAULT_DIMMED_OPACITY = 0.4;\nconst CIRCLE_DIMMED_OPACITY_MULTIPLIER = 0.5;\nconst FALLBACK_COLOR_RGBA: RGBA = [255, 255, 255, 255];\n\nexport type ColorScale = (value: number) => RGBA;\nexport type RGBA = [number, number, number, number];\n\nexport interface FlowColors {\n scheme?: string[];\n highlighted?: string;\n}\n\nexport interface LocationCircleColors {\n inner?: string;\n outgoing?: string;\n incoming?: string;\n highlighted?: string;\n}\n\nexport interface LocationAreaColors {\n outline?: string;\n normal?: string;\n selected?: string;\n highlighted?: string;\n connected?: string;\n}\n\nexport interface BaseColors {\n darkMode?: boolean;\n locationAreas?: LocationAreaColors;\n dimmedOpacity?: number;\n outlineColor?: string;\n}\n\nexport interface Colors extends BaseColors {\n flows?: FlowColors;\n locationCircles?: LocationCircleColors;\n}\n\nexport interface FlowAndCircleColors {\n flows?: FlowColors;\n locationCircles?: LocationCircleColors;\n}\n\nexport interface DiffColors extends BaseColors {\n positive?: FlowAndCircleColors;\n negative?: FlowAndCircleColors;\n}\n\n// The xxxColorsRGBA objects are mirroring the input colors' objects,\n// but converted to RGBA and with all the omitted ones set to defaults\n// or derived.\nexport interface FlowColorsRGBA {\n scheme: string[];\n highlighted: RGBA;\n}\n\nexport interface LocationCircleColorsRGBA {\n inner: RGBA;\n outgoing: RGBA;\n incoming: RGBA;\n highlighted: RGBA;\n}\n\nexport interface LocationAreaColorsRGBA {\n outline: RGBA;\n normal: RGBA;\n selected: RGBA;\n highlighted: RGBA;\n connected: RGBA;\n}\n\nexport interface BaseColorsRGBA {\n darkMode: boolean;\n locationAreas: LocationAreaColorsRGBA;\n dimmedOpacity: number;\n outlineColor: RGBA;\n}\n\nexport interface ColorsRGBA extends BaseColorsRGBA {\n flows: FlowColorsRGBA;\n locationCircles: LocationCircleColorsRGBA;\n}\n\nexport interface FlowAndCircleColorsRGBA {\n flows: FlowColorsRGBA;\n locationCircles: LocationCircleColorsRGBA;\n}\n\nexport interface DiffColorsRGBA extends BaseColorsRGBA {\n positive: FlowAndCircleColorsRGBA;\n negative: FlowAndCircleColorsRGBA;\n}\n\nexport function isDiffColors(colors: DiffColors | Colors): colors is DiffColors {\n return (colors as DiffColors).positive !== undefined;\n}\n\nexport function isDiffColorsRGBA(colors: DiffColorsRGBA | ColorsRGBA): colors is DiffColorsRGBA {\n return (colors as DiffColorsRGBA).positive !== undefined;\n}\n\nfunction getBaseColorsRGBA(colors: Colors | DiffColors | undefined): BaseColorsRGBA {\n const darkMode = colors && colors.darkMode ? true : false;\n return {\n darkMode,\n locationAreas: getLocationAreaColorsRGBA(colors && colors.locationAreas, darkMode),\n outlineColor: colorAsRgba((colors && colors.outlineColor) || DEFAULT_OUTLINE_COLOR),\n dimmedOpacity: colors && colors.dimmedOpacity != null ? colors.dimmedOpacity : DEFAULT_DIMMED_OPACITY,\n };\n}\n\nexport function getColorsRGBA(colors: Colors | undefined): ColorsRGBA {\n const baseColorsRGBA = getBaseColorsRGBA(colors);\n return {\n ...baseColorsRGBA,\n ...getFlowAndCircleColors(colors, DEFAULT_FLOW_COLOR_SCHEME, baseColorsRGBA.darkMode),\n };\n}\n\nexport function getDiffColorsRGBA(colors: DiffColors | undefined): DiffColorsRGBA {\n const baseColorsRGBA = getBaseColorsRGBA(colors);\n return {\n ...baseColorsRGBA,\n positive: getFlowAndCircleColors(\n colors && colors.positive,\n DEFAULT_FLOW_COLOR_SCHEME_POSITIVE,\n baseColorsRGBA.darkMode,\n ),\n negative: getFlowAndCircleColors(\n colors && colors.negative,\n DEFAULT_FLOW_COLOR_SCHEME_NEGATIVE,\n baseColorsRGBA.darkMode,\n ),\n };\n}\n\nfunction getLocationAreaColorsRGBA(colors: LocationAreaColors | undefined, darkMode: boolean): LocationAreaColorsRGBA {\n const normalColor = (colors && colors.normal) || DEFAULT_LOCATION_AREA_COLOR;\n const normalColorHcl = hcl(normalColor);\n const locationAreasNormal = colorAsRgba(normalColor);\n return {\n normal: locationAreasNormal,\n connected: colorAsRgbaOr(colors && colors.connected, locationAreasNormal),\n highlighted: colorAsRgbaOr(\n colors && colors.highlighted,\n opacifyHex(normalColorHcl[darkMode ? 'brighter' : 'darker'](1).toString(), 0.5),\n ),\n selected: colorAsRgbaOr(\n colors && colors.selected,\n opacifyHex(normalColorHcl[darkMode ? 'brighter' : 'darker'](2).toString(), 0.8),\n ),\n outline: colorAsRgbaOr(\n colors && colors.outline,\n colorAsRgba(normalColorHcl[darkMode ? 'brighter' : 'darker'](4).toString()),\n ),\n };\n}\n\nfunction getFlowAndCircleColors(\n inputColors: FlowAndCircleColors | undefined,\n defaultFlowColorScheme: string[],\n darkMode: boolean,\n): FlowAndCircleColorsRGBA {\n const flowColorScheme = (inputColors && inputColors.flows && inputColors.flows.scheme) || defaultFlowColorScheme;\n const maxFlowColorHcl = hcl(flowColorScheme[flowColorScheme.length - 1]);\n const flowColorHighlighted = colorAsRgbaOr(\n inputColors && inputColors.flows && inputColors.flows.highlighted,\n colorAsRgba(maxFlowColorHcl[darkMode ? 'brighter' : 'darker'](0.7).toString()),\n );\n\n return {\n flows: {\n scheme: flowColorScheme,\n highlighted: flowColorHighlighted,\n },\n locationCircles: {\n inner: colorAsRgbaOr(\n inputColors && inputColors.locationCircles && inputColors.locationCircles.inner,\n maxFlowColorHcl.toString(),\n ),\n outgoing: colorAsRgbaOr(\n inputColors && inputColors.locationCircles && inputColors.locationCircles.outgoing,\n darkMode ? '#000' : '#fff',\n ),\n incoming: colorAsRgbaOr(\n inputColors && inputColors.locationCircles && inputColors.locationCircles.incoming,\n maxFlowColorHcl[darkMode ? 'brighter' : 'darker'](1.25).toString(),\n ),\n highlighted: colorAsRgbaOr(\n inputColors && inputColors.locationCircles && inputColors.locationCircles.highlighted,\n flowColorHighlighted,\n ),\n },\n };\n}\n\nexport function colorAsRgba(color: string): RGBA {\n const col = d3color(color);\n if (!col) {\n console.warn('Invalid color: ', color);\n return FALLBACK_COLOR_RGBA;\n }\n const rgbColor = col.rgb();\n return [Math.floor(rgbColor.r), Math.floor(rgbColor.g), Math.floor(rgbColor.b), opacityFloatToInteger(col.opacity)];\n}\n\nfunction colorAsRgbaOr(color: string | undefined, defaultColor: RGBA | string): RGBA {\n if (color) {\n return colorAsRgba(color);\n }\n if (typeof defaultColor === 'string') {\n return colorAsRgba(defaultColor);\n }\n return defaultColor;\n}\n\nexport function rgbaAsString(color: RGBA): string {\n return `rgba(${color.join(',')})`;\n}\n\nexport function opacifyHex(hexCode: string, opacity: number): string {\n const c = d3color(hexCode);\n if (!c) {\n console.warn('Invalid color: ', hexCode);\n return `rgba(255, 255, 255, ${opacity})`;\n }\n const col = c.rgb();\n return `rgba(${col.r}, ${col.g}, ${col.b}, ${opacity})`;\n}\n\nexport function opacityFloatToInteger(opacity: number): number {\n return Math.round(opacity * 255);\n}\n\nexport function getDimmedCircleOutlineColor(outlineColor: RGBA, opacity: number): RGBA {\n const [r, g, b, a] = outlineColor;\n return [r, g, b, a * opacity * CIRCLE_DIMMED_OPACITY_MULTIPLIER] as RGBA;\n}\n\nexport function getDimmedCircleColor(color: RGBA, opacity: number): RGBA {\n return getDimmedColor(color, opacity * CIRCLE_DIMMED_OPACITY_MULTIPLIER);\n}\n\nexport function getDimmedColor(color: RGBA, opacity?: number): RGBA {\n const col = hcl(rgbaAsString(color));\n if (!col) {\n console.warn('Invalid color: ', color);\n return FALLBACK_COLOR_RGBA;\n }\n col.c *= 0.1; // desaturate color\n const rgbColor = col.rgb();\n return [\n Math.floor(rgbColor.r),\n Math.floor(rgbColor.g),\n Math.floor(rgbColor.b),\n opacityFloatToInteger(opacity !== undefined ? opacity : DEFAULT_DIMMED_OPACITY),\n ];\n}\n\nexport function createFlowColorScale(\n domain: [number, number],\n scheme: string[],\n animate: boolean | undefined,\n): ColorScale {\n const scale = scaleSequentialPow(interpolateRgbBasis(scheme))\n // @ts-ignore\n .exponent(animate ? 1 / 2 : 1 / 3)\n .domain(domain);\n return (value: number) => colorAsRgba(scale(value));\n}\n"
},
{
"path": "packages/core/src/index.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport FlowMapLayer from './FlowMapLayer';\n\nexport * from './FlowMapLayer';\nexport * from './types';\n\n// required by LocationTotalsLegend\nexport {\n Colors,\n DiffColors,\n ColorsRGBA,\n getColorsRGBA,\n getDiffColorsRGBA,\n DiffColorsRGBA,\n isDiffColorsRGBA,\n rgbaAsString,\n RGBA,\n} from './colors';\n\nexport default FlowMapLayer;\n"
},
{
"path": "packages/core/src/types.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Feature, FeatureCollection, GeometryObject } from 'geojson';\n\nexport type Flow = any;\n\nexport type LocationProperties = any;\n\nexport type Location = Feature | any;\n\nexport type Locations = FeatureCollection | Location[];\n\nexport function isFeatureCollection(\n locations: Locations,\n): locations is FeatureCollection {\n return (locations as FeatureCollection).type === 'FeatureCollection';\n}\n\nexport interface ViewState {\n latitude: number;\n longitude: number;\n zoom: number;\n bearing?: number;\n pitch?: number;\n altitude?: number;\n}\nexport const enum LocationCircleType {\n INNER = 'inner',\n OUTER = 'outer',\n OUTLINE = 'outline',\n}\n\nexport interface LocationCircle {\n location: Location;\n type: LocationCircleType;\n}\n\nexport interface FlowAccessors {\n getFlowOriginId: FlowAccessor;\n getFlowDestId: FlowAccessor;\n getFlowMagnitude: FlowAccessor;\n getFlowColor?: FlowAccessor;\n getAnimatedFlowLineStaggering?: FlowAccessor;\n}\n\nexport interface LocationAccessors {\n getLocationId: LocationAccessor;\n getLocationCentroid: LocationAccessor<[number, number]>;\n getLocationTotalIn?: LocationAccessor;\n getLocationTotalOut?: LocationAccessor;\n getLocationTotalWithin?: LocationAccessor;\n}\n\nexport type Data = Flow | Location | LocationCircle;\n\nexport enum PickingType {\n LOCATION = 'location',\n FLOW = 'flow',\n LOCATION_AREA = 'location-area',\n}\n\nexport type DeckGLLayer = any;\n\nexport interface PickingInfo {\n layer: DeckGLLayer;\n index: number;\n object: T;\n x: number;\n y: number;\n lngLat: [number, number];\n}\n\nexport type PickingHandler = (info: T, event: { srcEvent: MouseEvent }) => void;\n\nexport interface LocationPickingInfo extends PickingInfo {\n type: PickingType.LOCATION;\n object: Location;\n totalIn: number;\n totalOut: number;\n totalWithin: number;\n circleRadius: number;\n}\n\nexport interface LocationAreaPickingInfo extends PickingInfo {\n type: PickingType.LOCATION_AREA;\n object: Location;\n}\n\nexport interface FlowPickingInfo extends PickingInfo {\n type: PickingType.FLOW;\n object: Flow;\n origin: Location;\n dest: Location;\n}\n\nexport type FlowLayerPickingInfo = LocationPickingInfo | LocationAreaPickingInfo | FlowPickingInfo;\n\n// https://deck.gl/#/documentation/developer-guide/using-layers?section=accessors\nexport interface AccessorObjectInfo {\n index: number;\n data: any;\n target: any[];\n}\nexport type FlowAccessor = (flow: Flow, objectInfo?: AccessorObjectInfo) => T;\nexport type LocationAccessor = (location: Location) => T;\nexport type LocationCircleAccessor = (locCircle: LocationCircle) => T;\n\nexport type NumberScale = (value: number) => number;\n"
},
{
"path": "packages/core/tsconfig.build.esm.json",
"content": "{\n \"extends\": \"./tsconfig.build.json\",\n \"compilerOptions\": {\n \"target\": \"es2017\",\n \"module\": \"es2015\",\n \"outDir\": \"dist-esm\",\n \"moduleResolution\": \"node\"\n }\n}\n"
},
{
"path": "packages/core/tsconfig.build.json",
"content": "{\n \"extends\": \"./tsconfig.json\",\n \"include\": [\n \"src/**/*\",\n \"../../typings/*\"\n ]\n}\n"
},
{
"path": "packages/core/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"esModuleInterop\": true,\n \"outDir\": \"dist\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"lib\": [\n \"es2015\",\n \"dom\"\n ]\n },\n \"include\": [\n \"src/**/*\",\n \"examples/**/*\",\n \"../../typings/*\",\n \"stories/**/*\"\n ]\n}\n"
},
{
"path": "packages/react/package.json",
"content": "{\n \"name\": \"@flowmap.gl/react\",\n \"version\": \"7.3.4\",\n \"description\": \"React components for @flowmap.gl/core\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist-esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"files\": [\n \"src\",\n \"dist\",\n \"dist-esm\"\n ],\n \"scripts\": {\n \"dev\": \"tsc --watch & tsc --watch --project tsconfig.build.esm.json\",\n \"build:es5\": \"rm -rf dist && tsc --project tsconfig.build.json\",\n \"build:esm\": \"rm -rf dist-esm && tsc --project tsconfig.build.esm.json\",\n \"build\": \"yarn build:es5 && yarn build:esm\",\n \"typecheck\": \"tsc --noEmit\",\n \"prepare\": \"yarn build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/teralytics/flowmap.gl.git\"\n },\n \"author\": \"Teralytics AG\",\n \"license\": \"Apache-2.0\",\n \"bugs\": {\n \"url\": \"https://github.com/teralytics/flowmap.gl/issues\"\n },\n \"homepage\": \"https://github.com/teralytics/flowmap.gl#readme\",\n \"dependencies\": {\n \"@flowmap.gl/core\": \"^7.3.4\",\n \"@mapbox/geo-viewport\": \"^0.4.0\",\n \"d3-color\": \"^2.0.0\",\n \"d3-geo\": \"^2.0.1\"\n },\n \"devDependencies\": {\n \"@deck.gl/react\": \"^8.2.8\",\n \"@types/d3-color\": \"^1.2.2\",\n \"@types/d3-geo\": \"^1.11.1\",\n \"@types/mapbox__geo-viewport\": \"^0.4.0\",\n \"@types/react\": \"^16.9.49\",\n \"react\": \"^16.7.0\",\n \"react-map-gl\": \"^5.2.8\",\n \"typescript\": \"^4.0.2\"\n },\n \"peerDependencies\": {\n \"@deck.gl/react\": \">= 8.0.0\",\n \"react\": \">= 16.0.0\",\n \"react-dom\": \">= 16.0.0\",\n \"react-map-gl\": \">= 5.0.0\"\n },\n \"gitHead\": \"685236ef24d44ee2c6f0c2aed79dd9c52a4e73fe\",\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n"
},
{
"path": "packages/react/src/FlowMap.tsx",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { DeckGL } from '@deck.gl/react';\nimport FlowMapLayer, { BasicProps, Flow, FlowLayerPickingInfo, PickingType } from '@flowmap.gl/core';\nimport { Property } from 'csstype';\nimport * as React from 'react';\nimport { StaticMap } from 'react-map-gl';\nimport { ViewState } from '@flowmap.gl/core';\n\nconst FLOW_MAP_LAYER_ID = 'flow-map-layer';\n\nexport const enum HighlightType {\n LOCATION_AREA = 'locationArea',\n LOCATION = 'location',\n FLOW = 'flow',\n}\n\nexport interface LocationHighlight {\n type: HighlightType.LOCATION | HighlightType.LOCATION_AREA;\n locationId: string;\n}\n\nexport interface FlowHighlight {\n type: HighlightType.FLOW;\n flow: Flow;\n}\n\nexport type Highlight = LocationHighlight | FlowHighlight;\n\nexport interface Props extends BasicProps {\n initialViewState: ViewState;\n mapboxAccessToken: string;\n mapStyle?: string;\n multiselect?: boolean;\n mixBlendMode?: Property.MixBlendMode;\n onSelected?: (locationIds: string[] | undefined) => void;\n onHighlighted?: (highlight: Highlight | undefined, info: FlowLayerPickingInfo | undefined) => void;\n onViewStateChange?: (viewState: ViewState) => void;\n}\n\nexport interface State {\n viewState?: ViewState;\n highlight?: Highlight;\n selectedLocationIds?: string[];\n time: number;\n}\n\nconst ESC_KEY = 'Escape';\n\nexport default class FlowMap extends React.Component {\n static defaultProps: Partial = {\n mixBlendMode: 'multiply',\n };\n\n static getDerivedStateFromProps(props: Props, state: State): Partial | null {\n if (props.selectedLocationIds !== state.selectedLocationIds) {\n return {\n selectedLocationIds: props.selectedLocationIds,\n };\n }\n return null;\n }\n readonly state: State = {\n viewState: this.props.initialViewState,\n time: 0,\n };\n\n private animationFrame: number = -1;\n\n componentDidMount() {\n document.addEventListener('keydown', this.handleKeyDown);\n const { animate } = this.props;\n if (animate) {\n this.animate();\n }\n const { onViewStateChange } = this.props;\n if (onViewStateChange) {\n const { viewState } = this.state;\n if (viewState) {\n onViewStateChange(viewState);\n }\n }\n }\n\n componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) {\n const { animate } = this.props;\n if (animate !== prevProps.animate) {\n if (animate) {\n this.animate();\n } else {\n this.stopAnimation();\n }\n }\n }\n\n componentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeyDown);\n this.stopAnimation();\n }\n\n render() {\n const { mapboxAccessToken, mapStyle, mixBlendMode } = this.props;\n const flowMapLayer = this.getFlowMapLayer();\n return (\n <>\n \n \n \n \n );\n }\n\n private stopAnimation() {\n if (this.animationFrame) {\n window.cancelAnimationFrame(this.animationFrame);\n }\n }\n\n private animate = () => {\n const loopLength = 1800; // unit corresponds to the timestamp in source data\n const animationSpeed = 30; // unit time per second\n const timestamp = Date.now() / 1000;\n const loopTime = loopLength / animationSpeed;\n\n this.setState({\n time: ((timestamp % loopTime) / loopTime) * loopLength,\n });\n this.animationFrame = window.requestAnimationFrame(this.animate);\n };\n\n private getFlowMapLayer() {\n const {\n initialViewState,\n mapboxAccessToken,\n mixBlendMode,\n multiselect,\n animationTailLength,\n onSelected,\n onHighlighted,\n ...flowMapLayerProps\n } = this.props;\n\n const { highlight, selectedLocationIds } = this.state;\n return new FlowMapLayer({\n id: FLOW_MAP_LAYER_ID,\n animationCurrentTime: this.state.time,\n ...flowMapLayerProps,\n selectedLocationIds,\n animationTailLength,\n highlightedLocationId: highlight && highlight.type === HighlightType.LOCATION ? highlight.locationId : undefined,\n highlightedLocationAreaId:\n highlight && highlight.type === HighlightType.LOCATION_AREA ? highlight.locationId : undefined,\n highlightedFlow: highlight && highlight.type === HighlightType.FLOW ? highlight.flow : undefined,\n onHover: this.handleFlowMapHover,\n onClick: this.handleFlowMapClick,\n });\n }\n\n private highlight(highlight: Highlight | undefined, info?: FlowLayerPickingInfo) {\n this.setState({ highlight });\n const { onHighlighted } = this.props;\n if (onHighlighted) {\n onHighlighted(highlight, info);\n }\n }\n\n private selectLocations(selectedLocationIds: string[] | undefined) {\n this.setState(state => ({\n ...state,\n selectedLocationIds,\n }));\n const { onSelected } = this.props;\n if (onSelected) {\n onSelected(selectedLocationIds);\n }\n }\n\n private handleFlowMapHover = (info: FlowLayerPickingInfo) => {\n const { type, object } = info;\n switch (type) {\n case PickingType.FLOW: {\n if (!object) {\n this.highlight(undefined);\n } else {\n this.highlight(\n {\n type: HighlightType.FLOW,\n flow: object,\n },\n info,\n );\n }\n break;\n }\n case PickingType.LOCATION_AREA:\n case PickingType.LOCATION: {\n const { getLocationId } = this.props;\n if (!object) {\n this.highlight(undefined);\n } else {\n this.highlight(\n {\n type: type === PickingType.LOCATION_AREA ? HighlightType.LOCATION_AREA : HighlightType.LOCATION,\n locationId: (getLocationId || FlowMapLayer.defaultProps.getLocationId.value)(object),\n },\n info,\n );\n }\n break;\n }\n }\n };\n\n private handleFlowMapClick = ({ type, object }: FlowLayerPickingInfo) => {\n switch (type) {\n case PickingType.LOCATION_AREA:\n case PickingType.LOCATION: {\n if (object) {\n const { getLocationId, multiselect } = this.props;\n const { selectedLocationIds } = this.state;\n const locationId = (getLocationId || FlowMapLayer.defaultProps.getLocationId.value)(object);\n const isSelected = selectedLocationIds && selectedLocationIds.indexOf(locationId) >= 0;\n let next: string[] | undefined;\n if (multiselect) {\n if (selectedLocationIds) {\n if (isSelected) {\n next = selectedLocationIds.filter(id => id !== locationId);\n } else {\n next = [...selectedLocationIds, locationId];\n }\n } else {\n next = [locationId];\n }\n } else {\n if (isSelected) {\n next = undefined;\n } else {\n next = [locationId];\n }\n }\n this.selectLocations(next);\n this.highlight(undefined);\n }\n break;\n }\n }\n };\n\n private handleViewStateChange = ({ viewState }: { viewState: ViewState }) => {\n this.setState({\n viewState,\n highlight: undefined,\n });\n const { onViewStateChange } = this.props;\n if (onViewStateChange) {\n onViewStateChange(viewState);\n }\n };\n\n private handleKeyDown = (evt: Event) => {\n if (evt instanceof KeyboardEvent && evt.key === ESC_KEY) {\n this.setState({\n selectedLocationIds: undefined,\n highlight: undefined,\n });\n }\n };\n}\n"
},
{
"path": "packages/react/src/index.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nexport { default as LocationTotalsLegend } from './legend/LocationTotalsLegend';\nexport { default as DiffColorsLegend } from './legend/DiffColorsLegend';\nexport { default as LegendBox } from './legend/LegendBox';\nexport * from './viewport';\nexport * from './FlowMap';\n\nimport FlowMap from './FlowMap';\nexport default FlowMap;\n"
},
{
"path": "packages/react/src/legend/DiffColorsLegend.tsx",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { DiffColors, getDiffColorsRGBA } from '@flowmap.gl/core';\nimport * as React from 'react';\nimport Disc from './Disc';\n\nexport interface Props {\n colors?: DiffColors;\n positiveText?: string;\n negativeText?: string;\n}\n\nconst styles = {\n outer: {\n display: 'flex',\n flexDirection: 'column' as 'column',\n },\n disc: {\n marginRight: 5,\n },\n item: {\n outer: {\n display: 'flex',\n flexDirection: 'row' as 'row',\n padding: '3px 0',\n alignItems: 'center' as 'center',\n },\n caption: {\n marginLeft: 2,\n },\n },\n};\n\nconst DiffColorsLegend = (props: Props) => {\n const size = 20;\n const colorsRGBA = getDiffColorsRGBA(props.colors);\n const pos = colorsRGBA.positive.locationCircles;\n const neg = colorsRGBA.negative.locationCircles;\n return (\n
\n
\n \n
{props.positiveText || 'positive difference'}
\n
\n\n
\n \n
{props.negativeText || 'negative difference'}
\n
\n
\n );\n};\n\nexport default DiffColorsLegend;\n"
},
{
"path": "packages/react/src/legend/Disc.tsx",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { RGBA, rgbaAsString } from '@flowmap.gl/core';\nimport * as React from 'react';\n\nexport interface DiscProps {\n size: number;\n inner: RGBA;\n outer: RGBA;\n outline: RGBA;\n}\n\nconst Disc: React.SFC = ({ size, inner, outer, outline }) => {\n return (\n \n );\n};\n\nexport default Disc;\n"
},
{
"path": "packages/react/src/legend/LegendBox.tsx",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport React from 'react';\n\nexport interface LegendBoxProps {\n style?: React.CSSProperties;\n top?: number;\n left?: number;\n right?: number;\n bottom?: number;\n children: React.ReactNode;\n}\n\nconst styles = {\n outer: {\n position: 'absolute' as 'absolute',\n background: '#fff',\n padding: 10,\n borderRadius: 4,\n border: '1px solid #ccc',\n },\n};\n\nconst LegendBox: React.SFC = ({ style, top, left, right, bottom, children }) => (\n \n {children}\n \n);\n\nexport default LegendBox;\n"
},
{
"path": "packages/react/src/legend/LocationTotalsLegend.tsx",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { Colors, DiffColors, getColorsRGBA, getDiffColorsRGBA, isDiffColorsRGBA } from '@flowmap.gl/core';\nimport * as React from 'react';\nimport Disc from './Disc';\n\nexport interface Props {\n diff?: boolean;\n colors?: Colors | DiffColors;\n aboutEqualText?: string;\n moreOutgoingText?: string;\n moreIncomingText?: string;\n}\n\nconst styles = {\n outer: {\n display: 'flex',\n flexDirection: 'column' as 'column',\n },\n item: {\n outer: {\n display: 'flex',\n flexDirection: 'row' as 'row',\n padding: '3px 0',\n alignItems: 'center' as 'center',\n },\n caption: {\n marginLeft: 2,\n },\n },\n};\n\nconst LocationTotalsLegend = ({ diff, colors, aboutEqualText, moreOutgoingText, moreIncomingText }: Props) => {\n const size = 20;\n const colorsRGBA = diff ? getDiffColorsRGBA(colors) : getColorsRGBA(colors);\n const pos = isDiffColorsRGBA(colorsRGBA) ? colorsRGBA.positive.locationCircles : colorsRGBA.locationCircles;\n const neg = isDiffColorsRGBA(colorsRGBA) ? colorsRGBA.negative.locationCircles : undefined;\n return (\n
\n
\n
\n \n {neg && }\n
{aboutEqualText || 'outgoing ≅ incoming'}
\n
\n\n
\n \n {neg && }\n
{moreOutgoingText || 'more outgoing'}
\n
\n\n
\n \n {neg && }\n
{moreIncomingText || 'more incoming'}
\n
\n
\n
\n );\n};\n\nexport default LocationTotalsLegend;\n"
},
{
"path": "packages/react/src/viewport.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\nimport { LocationProperties } from '@flowmap.gl/core';\nimport { BoundingBox, viewport } from '@mapbox/geo-viewport';\nimport { geoBounds } from 'd3-geo';\nimport { FeatureCollection, GeometryCollection, GeometryObject } from 'geojson';\nimport { ViewState } from '@flowmap.gl/core';\n\nexport function getViewStateForFeatures(\n featureCollection: FeatureCollection | GeometryCollection,\n size: [number, number],\n opts?: {\n pad?: number;\n tileSize?: number;\n minZoom?: number;\n maxZoom?: number;\n },\n): ViewState {\n const { pad = 0.05, tileSize = 512, minZoom = 0, maxZoom = 100 } = opts || {};\n const [[x1, y1], [x2, y2]] = geoBounds(featureCollection as any);\n const bounds: BoundingBox = [x1 - pad * (x2 - x1), y1 - pad * (y2 - y1), x2 + pad * (x2 - x1), y2 + pad * (y2 - y1)];\n const {\n center: [longitude, latitude],\n zoom,\n } = viewport(bounds, size, undefined, undefined, tileSize, true);\n\n return {\n longitude,\n latitude,\n zoom: Math.max(Math.min(maxZoom, zoom), minZoom),\n bearing: 0,\n pitch: 0,\n };\n}\n\nexport function getViewStateForLocations(\n locations: any[],\n getLocationCentroid: (location: any) => [number, number],\n size: [number, number],\n opts?: {\n pad?: number;\n tileSize?: number;\n minZoom?: number;\n maxZoom?: number;\n },\n): ViewState {\n return getViewStateForFeatures(\n {\n type: 'GeometryCollection',\n geometries: locations.map(location => ({\n type: 'Point',\n coordinates: getLocationCentroid(location),\n })),\n } as any,\n size,\n opts,\n );\n}\n"
},
{
"path": "packages/react/tsconfig.build.esm.json",
"content": "{\n \"extends\": \"./tsconfig.build.json\",\n \"compilerOptions\": {\n \"target\": \"es2017\",\n \"module\": \"es2015\",\n \"outDir\": \"dist-esm\",\n \"moduleResolution\": \"node\"\n }\n}\n"
},
{
"path": "packages/react/tsconfig.build.json",
"content": "{\n \"extends\": \"./tsconfig.json\",\n \"include\": [\n \"src/**/*\",\n \"../../typings/*\"\n ]\n}\n"
},
{
"path": "packages/react/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"esModuleInterop\": true,\n \"outDir\": \"dist\",\n \"declaration\": true,\n \"declarationMap\": true,\n \"sourceMap\": true,\n \"strict\": true,\n \"skipLibCheck\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"jsx\": \"react\",\n \"lib\": [\n \"es2015\",\n \"dom\"\n ]\n },\n \"include\": [\n \"src/**/*\",\n \"examples/**/*\",\n \"../../typings/*\",\n \"stories/**/*\"\n ]\n}\n"
},
{
"path": "tslint.json",
"content": "{\n \"defaultSeverity\": \"warning\",\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\",\n \"tslint-plugin-prettier\",\n \"tslint-config-prettier\"\n ],\n \"rules\": {\n \"prettier\": [\n true,\n {\n \"printWidth\": 120,\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"arrowParens\": \"avoid\"\n }\n ],\n \"interface-name\": [\n true,\n \"never-prefix\"\n ],\n \"no-console\": [true, \"log\"],\n \"object-literal-sort-keys\": false,\n \"member-access\": [\n true,\n \"no-public\"\n ],\n \"no-namespace\": [\n true,\n \"allow-declarations\"\n ],\n \"jsx-no-lambda\": false\n }\n}\n"
},
{
"path": "typings/deck.gl.d.ts",
"content": "declare module '@deck.gl/core';\ndeclare module '@deck.gl/layers';\ndeclare module '@deck.gl/react';\n"
},
{
"path": "typings/kdbush.d.ts",
"content": "/*\n * Copyright 2019 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\ndeclare module 'kdbush';\n"
},
{
"path": "typings/luma.gl.d.ts",
"content": "/*\n * Copyright 2018 Teralytics\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\ndeclare module '@luma.gl/core';\ndeclare module '@luma.gl/constants';\n"
},
{
"path": "typings/react-map-gl.d.ts",
"content": "declare module 'react-map-gl';\n"
}
]
![](\"./doc/swiss-cantons-relocations.jpg\")
\n\n## Features\n\nGiven an array of locations and an array of flows between these locations the layer will do the following:\n\n- Represent the flows as lines of varying thickness depending on the flow magnitudes\n- The flow lines are sorted so that the larger flows are drawn above\n- GeoJSON geometries of the location areas are rendered as polygons\n- Total incoming and outgoing flows for the locations are calculated and represented as circles of varying sizes.\n\n### Location totals\nBoth the incoming and outgoing totals for the locations are represented.\nA darker outline means that there are more incoming flows, a lighter outline means that there are more outgoing flows.\n\nFor instance, below we compare between the evening and the morning commuting behaviors of a large city:\n\n![](\"./doc/morning-evening-peaks.gif\")
\n\n### Difference mode\nThe layer can be used to show the [difference between two moments in time](https://teralytics.github.io/flowmap.gl/index.html?path=/story/basic--difference-mode).\n\n\n\n## Usage\nFirst install the required dependencies:\n\n```\nnpm install @flowmap.gl/core deck.gl react-map-gl\n```\n\nThen, you can either use as a deck.gl layer or flowmap.gl as a React component:\n\n### Usage as a deck.gl layer\n\nWith this approach you can use flowmap.gl together with other deck.gl layers.\n\n```jsx harmony\nimport { StaticMap } from 'react-map-gl';\nimport { DeckGL } from 'deck.gl';\nimport FlowMapLayer from '@flowmap.gl/core'; \nimport * as ReactDOM from 'react-dom';\n\nReactDOM.render(\n