├── .env ├── .github └── workflows │ └── github-pages.yml ├── .gitignore ├── README.md ├── licence ├── package-lock.json ├── package.json ├── public └── index.html └── src ├── App.js ├── Components ├── CityIO │ └── index.js ├── CollapsableCard.js ├── LayerHoveredTooltip │ └── index.js ├── LoadingProgressBar │ └── index.js ├── PaintBrush │ ├── CellMeta.js │ ├── PaintBrush.js │ └── index.js └── ResizableDrawer.js ├── index.js ├── redux └── reducers │ ├── cityIOdataSlice.js │ ├── index.js │ └── menuSlice.js ├── settings └── settings.js ├── theme ├── index.js └── typography.js ├── utils └── utils.js └── views ├── CityIOviewer ├── CityIOdeckGLmap │ ├── index.js │ └── legoio.png ├── CityIOlist.js ├── SearchTablesList.js ├── SelectedTable │ └── index.js ├── TableListLoading.js └── index.js └── CityScopeJS ├── DeckglMap ├── DeckglBase.js ├── deckglLayers │ ├── ABMLayer.js │ ├── ARCHIVE │ │ └── ANIMATION │ ├── AccessLayer.js │ ├── AggregatedTripsLayer.js │ ├── GeojsonLayer.js │ ├── GridLayer.js │ ├── MeshLayer.js │ ├── TextualLayer.js │ ├── TileMapLayer.js │ ├── TrafficLayer.js │ ├── base │ │ ├── Arc.js │ │ ├── Column.js │ │ ├── Contour.js │ │ ├── GeoJson.js │ │ ├── Grid.js │ │ ├── GridCell.js │ │ ├── H3Cluster.js │ │ ├── H3Hexagon.js │ │ ├── Heatmap.js │ │ ├── Hexagon.js │ │ ├── Icon.js │ │ ├── Line.js │ │ ├── Path.js │ │ ├── Scatterplot.js │ │ ├── Scenegraph.js │ │ ├── SimpleMesh.js │ │ └── TextLayer.js │ ├── geojsonLayer.md │ └── index.js └── index.js ├── MenuContainer ├── EditMenu │ └── index.js ├── LayersMenu │ └── index.js ├── ScenariosMenu │ ├── index.js │ └── scenarios.md ├── SpecialLayersControlsMenu │ ├── ABMLayerControls.js │ ├── HeatmapLayerControls.js │ └── index.js ├── TableInfo │ └── index.js ├── TypesMenu │ └── index.js ├── ViewSettingsMenu │ ├── AnimationSubmenu.js │ ├── ViewAnglesSubmenu.js │ └── index.js └── index.js ├── VisContainer ├── AreaCalc │ └── index.js ├── BarChart │ └── index.js ├── RadarChart │ └── index.js └── index.js └── index.js /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoicmVsbm94IiwiYSI6ImNqd2VwOTNtYjExaHkzeXBzYm1xc3E3dzQifQ.X8r8nj4-baZXSsFgctQMsg 2 | PUBLIC_URL=https://cityscope.media.mit.edu/CS_cityscopeJS 3 | SKIP_PREFLIGHT_CHECK=true 4 | -------------------------------------------------------------------------------- /.github/workflows/github-pages.yml: -------------------------------------------------------------------------------- 1 | name: CityScopeJS Deployment 2 | on: 3 | push: 4 | branches: 5 | - "master" 6 | pull_request: 7 | branches: 8 | - "master" 9 | jobs: 10 | deploy: 11 | runs-on: ubuntu-latest 12 | strategy: 13 | matrix: 14 | node-version: [18.x] 15 | steps: 16 | - uses: actions/checkout@v1 17 | - name: Use Node.js ${{ matrix.node-version }} 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: ${{ matrix.node-version }} 21 | - name: Install Packages 22 | run: npm install 23 | - name: Build page 24 | run: npm run build 25 | - name: Deploy to gh-pages 26 | uses: peaceiris/actions-gh-pages@v4 27 | with: 28 | github_token: ${{ secrets.GITHUB_TOKEN }} 29 | publish_dir: ./build 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | .prettierrc 26 | cityio_local.sh -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CityScopeJS 2 | 3 | CityScopeJS is a unified front-end system for the CityScope project. 4 | Documentation are here: https://cityscope.media.mit.edu/category/cityscopejs 5 | -------------------------------------------------------------------------------- /licence: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cityscopejs", 3 | "repository": "https://github.com/CityScope/CS_cityscopeJS", 4 | "homepage": "https://cityscope.media.mit.edu/CS_cityscopeJS", 5 | "dependencies": { 6 | "@emotion/react": "^11.10.4", 7 | "@emotion/styled": "^11.10.4", 8 | "@loaders.gl/obj": "^3.2.9", 9 | "@mui/icons-material": "^5.10.6", 10 | "@mui/lab": "^5.0.0-alpha.102", 11 | "@mui/material": "^5.10.8", 12 | "@mui/utils": "^5.10.6", 13 | "@reduxjs/toolkit": "^1.8.5", 14 | "axios": "^1.1.2", 15 | "buffer": "^6.0.3", 16 | "chart.js": "^3.9.1", 17 | "chartjs-plugin-datalabels": "^2.2.0", 18 | "deck.gl": "^8.8.12", 19 | "gh-pages": "^5.0.0", 20 | "numeric": "^1.2.6", 21 | "proj4": "^2.8.0", 22 | "query-string": "^7.1.1", 23 | "react": "^18.2.0", 24 | "react-chartjs-2": "^4.3.1", 25 | "react-dom": "^18.2.0", 26 | "react-map-gl": "7.0.19", 27 | "react-redux": "^8.0.4", 28 | "react-scripts": "5.0.1", 29 | "react-use-websocket": "^4.5.0", 30 | "redux": "^4.2.0", 31 | "typescript": "^4.8.4" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test", 37 | "eject": "react-scripts eject", 38 | "gh": "react-scripts build && gh-pages -d build" 39 | }, 40 | "browserslist": { 41 | "production": [ 42 | ">0.2%", 43 | "not dead", 44 | "not op_mini all" 45 | ], 46 | "development": [ 47 | "last 1 chrome version", 48 | "last 1 firefox version", 49 | "last 1 safari version" 50 | ] 51 | }, 52 | "eslintConfig": { 53 | "extends": [ 54 | "react-app", 55 | "react-app/jest" 56 | ], 57 | "rules": { 58 | "react/jsx-uses-react": "off", 59 | "react/react-in-jsx-scope": "off" 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 14 | 15 | CityScopeJS 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { CssBaseline } from "@mui/material/"; 3 | import { ThemeProvider } from "@mui/material/styles"; 4 | import { useDispatch } from "react-redux"; 5 | import { updateCityIOtableName } from "./redux/reducers/cityIOdataSlice"; 6 | import queryString from "query-string"; 7 | import theme from "./theme"; 8 | // views 9 | import CityScopeJS from "./views/CityScopeJS"; 10 | import CityIOviewer from "./views/CityIOviewer"; 11 | 12 | /** 13 | get this tab URL and parse as a simple router to show the correct view 14 | **/ 15 | 16 | const App = () => { 17 | const dispatch = useDispatch(); 18 | const [tableName, setTableName] = useState(); 19 | 20 | // change the document title to the table name 21 | useEffect(() => { 22 | document.title = tableName ? `CityScopeJS | ${tableName}` : "CityScopeJS"; 23 | }, [tableName]); 24 | 25 | const [viewSelectorState, setViewSelectorState] = useState(); 26 | 27 | const selectView = (view, tableName) => { 28 | const cityIOtableName = tableName && tableName.toLowerCase(); 29 | // check if tableName is a valid tableName 30 | if (cityIOtableName && cityIOtableName !== "") { 31 | setTableName(cityIOtableName); 32 | dispatch(updateCityIOtableName(cityIOtableName)); 33 | setViewSelectorState(view); 34 | } else { 35 | setViewSelectorState("cityio"); 36 | } 37 | }; 38 | 39 | // on init, get the address URL to search for a table 40 | useEffect(() => { 41 | const location = window.location; 42 | const parsed = queryString.parse(location.search); 43 | 44 | //a switch for the location.search and the parsed.tableName 45 | const keys = Object.keys(parsed); 46 | 47 | if (keys.includes("cityscope")) { 48 | selectView("cityscopejs", parsed.cityscope); 49 | } else { 50 | setViewSelectorState("cityio"); 51 | } 52 | // eslint-disable-next-line react-hooks/exhaustive-deps 53 | }, []); 54 | 55 | return ( 56 | 57 | 58 | <> 59 | {/* otherwise show the editor */} 60 | {viewSelectorState === "cityscopejs" && } 61 | 62 | {/* otherwise, show the cityIOviewer */} 63 | {viewSelectorState === "cityio" && } 64 | 65 | 66 | ); 67 | }; 68 | 69 | export default App; 70 | -------------------------------------------------------------------------------- /src/Components/CityIO/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-hooks/exhaustive-deps */ 2 | import { useEffect, useState } from "react"; 3 | import { cityIOSettings } from "../../settings/settings"; 4 | import { 5 | updateCityIOdata, 6 | toggleCityIOisDone, 7 | } from "../../redux/reducers/cityIOdataSlice"; 8 | import { useSelector, useDispatch } from "react-redux"; 9 | import useWebSocket, { ReadyState } from "react-use-websocket" 10 | import LoadingProgressBar from "../LoadingProgressBar"; 11 | 12 | const CityIO = (props) => { 13 | 14 | const verbose = true; // set to true to see console logs 15 | const dispatch = useDispatch(); 16 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 17 | const { tableName } = props; 18 | const possibleModules = cityIOSettings.cityIO.cityIOmodules.map(module => module.name) 19 | const [arrLoadingModules, setArrLoadingModules] = useState([]); 20 | 21 | // Creation of the websocket connection. TODO: change WS_URL to env or property 22 | // sendJsonMessage: function that sends a message through the websocket channel 23 | // lastJsonMessage: object that contains the last message received through the websocket 24 | // readyState: indicates whether the WS is ready or not 25 | const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket( 26 | cityIOSettings.cityIO.websocketURL, 27 | { 28 | share: true, 29 | shouldReconnect: () => true, 30 | }, 31 | ) 32 | 33 | // When the WS connection state (readyState) changes to OPEN, 34 | // the UI sends a LISTEN (SUBSCRIBE) message to CityIO with the tableName prop 35 | useEffect(() => { 36 | console.log("Connection state changed") 37 | if (readyState === ReadyState.OPEN) { 38 | sendJsonMessage({ 39 | type: "LISTEN", 40 | content: { 41 | gridId: tableName, 42 | }, 43 | }) 44 | setArrLoadingModules([ 45 | `Loading ${tableName} data.`, 46 | ]); 47 | } 48 | }, [readyState]) 49 | 50 | 51 | // When a new WebSocket message is received (lastJsonMessage) the UI checks 52 | // the type of the message and performs the suitable operation 53 | useEffect(() => { 54 | 55 | if(lastJsonMessage == null) return; 56 | console.log(`Got a new message: ${JSON.stringify(lastJsonMessage)}`) 57 | 58 | let messageType = lastJsonMessage.type; 59 | 60 | // If the message is of type GRID, the UI updates the GEOGRID and 61 | // GEOGRIDDATA, optionally, CityIO can send saved modules 62 | if (messageType === 'TABLE_SNAPSHOT'){ 63 | verbose && console.log( 64 | ` --- trying to update GEOGRID --- ${JSON.stringify(lastJsonMessage.content)}` 65 | ); 66 | setArrLoadingModules([]); 67 | 68 | let m = {...cityIOdata, "GEOGRID": lastJsonMessage.content.GEOGRID, "GEOGRIDDATA":lastJsonMessage.content.GEOGRIDDATA, tableName: tableName }; 69 | 70 | Object.keys(lastJsonMessage.content).forEach((key)=>{ 71 | if(possibleModules.includes(key) && key !== 'scenarios' && key !== 'indicators'){ 72 | m[key] = lastJsonMessage.content[key] 73 | } 74 | else if(key === 'LAYERS'){ 75 | m = {...m, "layers": lastJsonMessage.content[key] }; 76 | } 77 | else if(key === 'NUMERICINDICATORS'){ 78 | m = {...m, "indicators": lastJsonMessage.content[key] }; 79 | } 80 | } 81 | ); 82 | // When we receive a GRID message, we ask for the scenarios of the table we´re 83 | // connected, and for the core modules 84 | sendJsonMessage({ 85 | type: "REQUEST_CORE_MODULES_LIST", 86 | content: {}, 87 | }) 88 | sendJsonMessage({ 89 | type: "LIST_SCENARIOS", 90 | content: {}, 91 | }) 92 | dispatch(updateCityIOdata(m)); 93 | verbose && 94 | console.log( 95 | "%c --- done updating from cityIO ---", 96 | "color: rgb(0, 255, 0)" 97 | ); 98 | dispatch(toggleCityIOisDone(true)); 99 | } 100 | // If we receive a GEOGRIDDATA_UPDATE, the UI needs to refresh 101 | // the GEOGRIDDATA object 102 | else if (messageType === 'GEOGRIDDATA_UPDATE'){ 103 | verbose && console.log( 104 | ` --- trying to update GEOGRIDDATA --- ${JSON.stringify(lastJsonMessage.content)}` 105 | ); 106 | let m = {...cityIOdata, "GEOGRIDDATA":lastJsonMessage.content }; 107 | dispatch(updateCityIOdata(m)); 108 | verbose && 109 | console.log( 110 | "%c --- done updating from cityIO ---", 111 | "color: rgb(0, 255, 0)" 112 | ); 113 | dispatch(toggleCityIOisDone(true)); 114 | } 115 | 116 | // If we receive a INDICATOR (MODULE) message, the UI needs to load 117 | // the module data 118 | // WIP 119 | else if (messageType === 'MODULE'){ 120 | verbose && console.log( 121 | ` --- trying to update MODULE data --- ${JSON.stringify(lastJsonMessage.content)}` 122 | ); 123 | let m = {...cityIOdata} 124 | if('numeric' in lastJsonMessage.content.moduleData){ 125 | var newIndicatorsNames = []; 126 | var newIndicators = []; 127 | 128 | lastJsonMessage.content.moduleData.numeric 129 | .forEach((indicator) => { 130 | newIndicators.push(indicator); 131 | newIndicatorsNames.push(indicator.name) 132 | }); 133 | const currentIndicators = m['indicators'] 134 | if(currentIndicators){ 135 | currentIndicators.forEach((oldIndicator)=>{ 136 | if(!newIndicatorsNames.includes(oldIndicator.name)){ 137 | newIndicators.push(oldIndicator) 138 | } 139 | }) 140 | } 141 | 142 | m = {...m, "indicators": newIndicators}; 143 | } 144 | if('layers' in lastJsonMessage.content.moduleData){ 145 | 146 | var newLayersIds = []; 147 | var newLayers = []; 148 | 149 | lastJsonMessage.content.moduleData.layers 150 | .forEach((layer) => { 151 | newLayers.push(layer); 152 | newLayersIds.push(layer.id) 153 | }); 154 | const currentLayers = m['layers'] 155 | if(currentLayers){ 156 | currentLayers.forEach((oldLayer)=>{ 157 | if(!newLayersIds.includes(oldLayer.id)){ 158 | newLayers.push(oldLayer) 159 | } 160 | }) 161 | } 162 | 163 | m = {...m, "layers":newLayers }; 164 | } 165 | 166 | dispatch(updateCityIOdata(m)); 167 | verbose && 168 | console.log( 169 | "%c --- done updating from cityIO ---", 170 | "color: rgb(0, 255, 0)" 171 | ); 172 | dispatch(toggleCityIOisDone(true)); 173 | } 174 | 175 | // If we receive a CORE_MODULES_LIST message, the UI loads 176 | // the available modules data 177 | else if (messageType === 'CORE_MODULES_LIST'){ 178 | verbose && console.log( 179 | ` --- trying to update CORE_MODULES_LIST --- ${JSON.stringify(lastJsonMessage.content)}` 180 | ); 181 | let m = {...cityIOdata, 'core_modules':lastJsonMessage.content } 182 | dispatch(updateCityIOdata(m)); 183 | verbose && 184 | console.log( 185 | "%c --- done updating from cityIO ---", 186 | "color: rgb(0, 255, 0)" 187 | ); 188 | dispatch(toggleCityIOisDone(true)); 189 | } 190 | 191 | // If we receive a SCENARIOS message, the UI loads 192 | // the available scenarios 193 | else if (messageType === 'SCENARIOS'){ 194 | verbose && console.log( 195 | ` --- trying to update SCENARIOS --- ${JSON.stringify(lastJsonMessage.content)}` 196 | ); 197 | let m = {...cityIOdata, 'scenarios':lastJsonMessage.content } 198 | dispatch(updateCityIOdata(m)); 199 | verbose && 200 | console.log( 201 | "%c --- done updating from cityIO ---", 202 | "color: rgb(0, 255, 0)" 203 | ); 204 | dispatch(toggleCityIOisDone(true)); 205 | } 206 | 207 | }, [lastJsonMessage]) 208 | 209 | return ; 210 | 211 | }; 212 | 213 | export default CityIO; 214 | -------------------------------------------------------------------------------- /src/Components/CollapsableCard.js: -------------------------------------------------------------------------------- 1 | import { 2 | Card, 3 | CardContent, 4 | Collapse, 5 | Button, 6 | Paper, 7 | Typography, 8 | Divider, 9 | Tooltip, 10 | Grid, 11 | } from "@mui/material"; 12 | import { ArrowDropDown } from "@mui/icons-material"; 13 | import { useState } from "react"; 14 | import HelpCenterIcon from "@mui/icons-material/HelpCenter"; 15 | 16 | export default function CollapsableCard({ 17 | children, 18 | variant, 19 | title, 20 | subheader, 21 | collapse, 22 | toolTipInfo, 23 | }) { 24 | const [expand, setExpand] = useState(collapse); 25 | 26 | return ( 27 |
28 | 29 | 30 | 62 | 63 | 64 | 65 | 66 | {children} 67 | 68 | 69 | 70 |
71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/Components/LayerHoveredTooltip/index.js: -------------------------------------------------------------------------------- 1 | import { Typography, Box } from "@mui/material"; 2 | 3 | export const LayerHoveredTooltip = (props) => { 4 | if (!props.mousePos) return null; 5 | const mousePos = props.mousePos; 6 | const layerHoveredData = props.layerHoveredData; 7 | 8 | return ( 9 | 25 | 26 | {layerHoveredData && layerHoveredData} 27 | 28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /src/Components/LoadingProgressBar/index.js: -------------------------------------------------------------------------------- 1 | import { Typography, Box } from "@mui/material"; 2 | import LinearProgress from "@mui/material/LinearProgress"; 3 | 4 | const LoadingProgressBar = ({ loadingModules, barHeight }) => { 5 | const barHeightPx = barHeight ? barHeight : 2; 6 | return ( 7 | <> 8 | {loadingModules.map((module, index) => { 9 | const thisBarPosition = 10 + index * barHeightPx * 10; 10 | 11 | return ( 12 | 22 | 27 | {module}... 28 | 29 | 30 | 31 | ); 32 | })} 33 | 34 | ); 35 | }; 36 | 37 | export default LoadingProgressBar; 38 | -------------------------------------------------------------------------------- /src/Components/PaintBrush/CellMeta.js: -------------------------------------------------------------------------------- 1 | import { Typography, Box } from "@mui/material"; 2 | import { testHex, hexToRgb } from "../../utils/utils"; 3 | import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; 4 | 5 | /** 6 | * 7 | * Cell meta comp 8 | */ 9 | 10 | export const CellMeta = (props) => { 11 | if (!props.mousePos) return null; 12 | const mousePos = props.mousePos; 13 | const hoveredObj = props.hoveredObj; 14 | 15 | let col = hoveredObj.object.properties.color; 16 | if (testHex(col)) { 17 | col = hexToRgb(col); 18 | } 19 | const color = "rgb(" + col[0] + "," + col[1] + "," + col[2] + ")"; 20 | 21 | return ( 22 | 46 | {hoveredObj.object.properties.name} 47 | 48 | height: {hoveredObj.object.properties.height} 49 | 50 | 51 | ID: {hoveredObj.object.properties.id} 52 | 53 | {!hoveredObj.object.properties.interactive && ( 54 |
55 | 61 | Non-interactive 62 |
63 | )} 64 | 65 | ); 66 | }; 67 | -------------------------------------------------------------------------------- /src/Components/PaintBrush/PaintBrush.js: -------------------------------------------------------------------------------- 1 | import { testHex, hexToRgb } from "../../utils/utils"; 2 | import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; 3 | import { Typography, Box } from "@mui/material"; 4 | 5 | /** 6 | * cell selection 7 | * meta div 8 | * @param {*} props 9 | */ 10 | 11 | export const PaintBrush = (props) => { 12 | if (!props.mousePos || !props.hoveredCells) return null; 13 | const selectedType = props.selectedType; 14 | const isInteractiveCell = props.hoveredCells.object.properties.interactive; 15 | const mousePos = props.mousePos; 16 | const divSize = props.divSize; 17 | let col = selectedType.color; 18 | if (testHex(col)) { 19 | col = hexToRgb(col); 20 | } 21 | const color = "rgb(" + col[0] + "," + col[1] + "," + col[2] + ")"; 22 | const colorTrans = "rgba(" + col[0] + "," + col[1] + "," + col[2] + ",0.6)"; 23 | let mouseX = mousePos.clientX - divSize / 2; 24 | let mouseY = mousePos.clientY - divSize / 2; 25 | return ( 26 | <> 27 | 45 | 46 | 62 | 63 | {isInteractiveCell && {selectedType.thisTypeName}} 64 | 65 | {!isInteractiveCell && ( 66 | <> 67 | 68 | 69 | {selectedType.thisTypeName} 70 | 71 | 72 | Cell {props.hoveredCells.object.properties.id} is not interactive 73 | 74 | 75 | )} 76 | 77 | 78 | ); 79 | }; 80 | -------------------------------------------------------------------------------- /src/Components/PaintBrush/index.js: -------------------------------------------------------------------------------- 1 | import { PaintBrush } from "./PaintBrush"; 2 | import { CellMeta } from "./CellMeta"; 3 | 4 | export default function PaintBrushContainer({ 5 | editOn, 6 | mousePos, 7 | selectedType, 8 | pickingRadius, 9 | mouseDown, 10 | hoveredObj, 11 | }) { 12 | const BrushSelector = () => { 13 | if ( 14 | editOn && 15 | selectedType && 16 | Object.keys(selectedType).length && 17 | hoveredObj 18 | ) { 19 | return ( 20 | 27 | ); 28 | } else if (hoveredObj) { 29 | return ; 30 | } else { 31 | return null; 32 | } 33 | }; 34 | return ; 35 | } 36 | -------------------------------------------------------------------------------- /src/Components/ResizableDrawer.js: -------------------------------------------------------------------------------- 1 | import { useState, useCallback } from "react"; 2 | import { Drawer, Box } from "@mui/material"; 3 | import Paper from "@mui/material/Paper"; 4 | 5 | const dividerWidth = 20; 6 | const maxDrawerWidth = 7 | Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) - 8 | 10; 9 | const minDrawerWidth = 5; 10 | 11 | export default function ResizableDrawer({ children, direction, width }) { 12 | const [drawerWidth, setDrawerWidth] = useState( 13 | width || 14 | // 50% of the screen width 15 | Math.max( 16 | document.documentElement.clientWidth || 0, 17 | window.innerWidth || 0 18 | ) / 2 19 | ); 20 | 21 | const handleMouseDown = (e) => { 22 | document.addEventListener("mouseup", handleMouseUp, true); 23 | document.addEventListener("mousemove", handleMouseMove, true); 24 | e.preventDefault(); 25 | }; 26 | 27 | const handleMouseUp = (e) => { 28 | document.removeEventListener("mouseup", handleMouseUp, true); 29 | document.removeEventListener("mousemove", handleMouseMove, true); 30 | e.preventDefault(); 31 | }; 32 | 33 | const handleMouseMove = useCallback((e) => { 34 | let newWidth = null; 35 | 36 | if (direction === "right") { 37 | newWidth = 38 | document.body.offsetLeft + document.body.offsetWidth - e.clientX + 20; 39 | } else if (direction === "left" || direction === undefined) { 40 | newWidth = document.body.offsetLeft + e.clientX + 20; 41 | } else if (direction === "bottom") { 42 | newWidth = document.documentElement.scrollHeight - e.clientY; 43 | } 44 | if (newWidth > minDrawerWidth && newWidth < maxDrawerWidth) { 45 | setDrawerWidth(newWidth); 46 | } 47 | if (newWidth > document.documentElement.scrollHeight - dividerWidth) { 48 | setDrawerWidth(document.documentElement.scrollHeight - dividerWidth - 10); 49 | } 50 | // eslint-disable-next-line react-hooks/exhaustive-deps 51 | }, []); 52 | 53 | return ( 54 | <> 55 | handleMouseDown(e)} 57 | sx={{ 58 | padding: dividerWidth + "px 0 0", 59 | position: "fixed", 60 | width: () => { 61 | if ( 62 | direction === "right" || 63 | direction === "left" || 64 | direction === undefined 65 | ) { 66 | return `${dividerWidth}px`; 67 | } else if (direction === "bottom") { 68 | return "100vw"; 69 | } 70 | }, 71 | height: direction === "bottom" ? `${dividerWidth}px` : "100vh", 72 | left: direction === "left" ? drawerWidth + "px" : undefined, 73 | right: direction === "right" ? drawerWidth + "px" : undefined, 74 | bottom: direction === "bottom" ? drawerWidth + "px" : undefined, 75 | zIndex: direction === "bottom" ? 9999 : 100, 76 | cursor: "move", 77 | // color 78 | backgroundColor: "rgba(0,0,0,0.8)", 79 | }} 80 | /> 81 | 82 | {/* only show handles in left/right cases */} 83 | {(direction === "right" || 84 | direction === "left" || 85 | direction === undefined) && ( 86 | handleMouseDown(e)} 88 | // on mobile devices we need to use onTouchStart instead of onMouseDown 89 | onTouchStart={(e) => handleMouseDown(e)} 90 | onClick={(e) => 91 | drawerWidth < 30 92 | ? setDrawerWidth(maxDrawerWidth / 2) 93 | : setDrawerWidth(15) 94 | } 95 | sx={{ 96 | position: "fixed", 97 | top: "45%", 98 | width: dividerWidth + 5, 99 | height: "10vh", 100 | left: direction === "left" ? drawerWidth + "px" : undefined, 101 | right: direction === "right" ? drawerWidth + "px" : undefined, 102 | zIndex: 1000, 103 | borderRadius: "30px", 104 | cursor: "move", 105 | }} 106 | > 107 | 115 | ... 116 | 117 | 118 | )} 119 | 132 | {children} 133 | 134 | 135 | ); 136 | } 137 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App"; 2 | import { configureStore } from "@reduxjs/toolkit"; 3 | import { Provider } from "react-redux"; 4 | import rootReducer from "./redux/reducers"; 5 | import { StrictMode } from "react"; 6 | import { createRoot } from "react-dom/client"; 7 | const store = configureStore({ 8 | reducer: rootReducer, 9 | }); 10 | 11 | const rootElement = document.getElementById("root"); 12 | const root = createRoot(rootElement); 13 | 14 | root.render( 15 | 16 | <> 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /src/redux/reducers/cityIOdataSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | export const cityIOdataSlice = createSlice({ 4 | name: "cityIOdataState", 5 | initialState: {}, 6 | cityIOisDone: false, 7 | cityIOtableName: "", 8 | reducers: { 9 | updateCityIOdata: (state, action) => { 10 | state.cityIOdata = action.payload; 11 | }, 12 | toggleCityIOisDone: (state, action) => { 13 | state.cityIOisDone = action.payload; 14 | }, 15 | updateCityIOtableName: (state, action) => { 16 | state.cityIOtableName = action.payload; 17 | }, 18 | }, 19 | }); 20 | 21 | export const { 22 | updateCityIOdata, 23 | toggleCityIOisDone, 24 | updateCityIOtableName, 25 | } = cityIOdataSlice.actions; 26 | export default cityIOdataSlice.reducer; 27 | -------------------------------------------------------------------------------- /src/redux/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | import cityIOdataSliceReducer from "./cityIOdataSlice"; 3 | import menuSliceReducer from "./menuSlice"; 4 | 5 | export default combineReducers({ 6 | cityIOdataState: cityIOdataSliceReducer, 7 | menuState: menuSliceReducer, 8 | }); 9 | -------------------------------------------------------------------------------- /src/redux/reducers/menuSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | export const menuSlice = createSlice({ 4 | name: "menuState", 5 | initialState: { 6 | editMenuState: {}, 7 | typesMenuState: {}, 8 | layersMenuState: {}, 9 | viewSettingsMenuState: {}, 10 | animationMenuState: { 11 | toggleAnimationState: false, 12 | animationSpeedSliderValue: 10, 13 | }, 14 | }, 15 | reducers: { 16 | updateLayersMenuState: (state, action) => { 17 | state.layersMenuState = action.payload; 18 | }, 19 | 20 | updateTypesMenuState: (state, action) => { 21 | state.typesMenuState = action.payload; 22 | }, 23 | 24 | updateEditMenuState: (state, action) => { 25 | state.editMenuState = action.payload; 26 | }, 27 | 28 | updateViewSettingsMenuState: (state, action) => { 29 | state.viewSettingsMenuState = action.payload; 30 | }, 31 | 32 | updateAnimationMenuState: (state, action) => { 33 | state.animationMenuState = action.payload; 34 | }, 35 | }, 36 | }); 37 | 38 | export const { 39 | updateLayersMenuState, 40 | updateTypesMenuState, 41 | updateEditMenuState, 42 | updateViewSettingsMenuState, 43 | updateAnimationMenuState, 44 | } = menuSlice.actions; 45 | export default menuSlice.reducer; 46 | -------------------------------------------------------------------------------- /src/settings/settings.js: -------------------------------------------------------------------------------- 1 | // import { cityIOModeBool } from "../utils/utils"; 2 | import queryString from "query-string"; 3 | 4 | const getServerLocation = () => { 5 | const location = window.location; 6 | const parsed = queryString.parse(location.search); 7 | 8 | const serverLocation = 9 | "cityio_local" in parsed 10 | ? "http://localhost:8080/api/" 11 | : "https://cityio.media.mit.edu/cityio/api/"; 12 | console.log("cityIO server location: ", serverLocation); 13 | return serverLocation; 14 | }; 15 | 16 | const getWebsocketServerLocation = () => { 17 | const location = window.location; 18 | const parsed = queryString.parse(location.search); 19 | 20 | const serverLocation = 21 | "cityio_local" in parsed 22 | ? "ws://localhost:8080/interface" 23 | : "wss://cityio.media.mit.edu/cityio/interface"; 24 | console.log("cityIO websocket server location: ", serverLocation); 25 | return serverLocation; 26 | }; 27 | 28 | // get the location of the app (local or remote) 29 | const getCSJSLocation = () => { 30 | const location = window.location; 31 | const parsed = queryString.parse(location.search); 32 | const cityscopejs_local_url = 33 | "cityscopejs_local" in parsed 34 | ? "http://localhost:3000" 35 | : "https://cityscope.media.mit.edu/CS_cityscopeJS"; 36 | console.log("cityScopeJS location: ", cityscopejs_local_url); 37 | return cityscopejs_local_url; 38 | }; 39 | 40 | export const generalSettings = { 41 | csjsURL: getCSJSLocation(), 42 | }; 43 | 44 | export const cityIOSettings = { 45 | docsURL: 46 | "https://raw.githubusercontent.com/CityScope/CS_cityscopeJS/master/docs/", 47 | cityIO: { 48 | baseURL: getServerLocation(), 49 | websocketURL: getWebsocketServerLocation(), 50 | 51 | ListOfTables: "table/list/", 52 | headers: "table/headers/", 53 | interval: 500, 54 | cityIOmodules: [ 55 | { name: "header", expectUpdate: false }, 56 | { name: "GEOGRID", expectUpdate: false }, 57 | { name: "ABM2", expectUpdate: true }, 58 | { name: "geojson", expectUpdate: true }, 59 | { name: "grid", expectUpdate: false }, 60 | { name: "access", expectUpdate: true }, 61 | { name: "GEOGRIDDATA", expectUpdate: false }, 62 | { name: "indicators", expectUpdate: true }, 63 | { name: "textual", expectUpdate: true }, 64 | { name: "scenarios", expectUpdate: true }, 65 | { name: "tui", expectUpdate: true }, 66 | { name: "geo_heatmap", expectUpdate: true }, 67 | { name: "traffic", expectUpdate: true }, 68 | ], 69 | }, 70 | }; 71 | export const mapSettings = { 72 | map: { 73 | mapboxLink: "mapbox://styles/relnox/", 74 | mapboxRefreshString: "?fresh=true", 75 | mapStyles: { 76 | Dark: "ck0h5xn701bpr1dqs3he2lecq", 77 | Inverse: "cjlu6w5sc1dy12rmn4kl2zljn", 78 | Normal: "cl8dv36nv000t14qik9yg4ys6", 79 | }, 80 | 81 | layers: { 82 | ABM: { 83 | endTime: 86400, 84 | startTime: 43200, 85 | animationSpeed: 100, 86 | }, 87 | }, 88 | initialViewState: { 89 | maxZoom: 22, 90 | pitch: 0, 91 | bearing: 0, 92 | longitude: -122.41669, 93 | latitude: 37.7853, 94 | zoom: 13, 95 | }, 96 | }, 97 | }; 98 | 99 | export const expectedLayers = { 100 | GRID_LAYER_CHECKBOX: { 101 | displayName: "CS Grid", 102 | cityIOmoduleName: "GEOGRID", 103 | initState: true, 104 | initSliderValue: 50, 105 | }, 106 | ABM_LAYER_CHECKBOX: { 107 | displayName: "Trips Volume", 108 | cityIOmoduleName: "ABM2", 109 | initState: false, 110 | initSliderValue: 5, 111 | }, 112 | AGGREGATED_TRIPS_LAYER_CHECKBOX: { 113 | displayName: "Origin-Destination", 114 | cityIOmoduleName: "ABM2", 115 | initState: false, 116 | initSliderValue: 20, 117 | }, 118 | ACCESS_LAYER_CHECKBOX: { 119 | displayName: "Heatmap", 120 | cityIOmoduleName: "access", 121 | initState: false, 122 | initSliderValue: 50, 123 | selected: 0, 124 | }, 125 | }; 126 | 127 | export const viewControlCheckboxes = { 128 | ROTATE_CHECKBOX: { 129 | displayName: "Rotate Camera", 130 | sliderTitle: "Camera Rotation Speed", 131 | initState: false, 132 | initSliderValue: 100, 133 | }, 134 | 135 | ANIMATION_CHECKBOX: { 136 | displayName: "Toggle Animation", 137 | sliderTitle: "Animation Speed", 138 | initState: false, 139 | initSliderValue: 100, 140 | }, 141 | }; 142 | 143 | export const viewControlButtons = { 144 | RESET_VIEW_BUTTON: { 145 | displayName: "Reset View", 146 | initState: false, 147 | }, 148 | ORTHO_VIEW_BUTTON: { 149 | displayName: "Ortho View", 150 | initState: false, 151 | }, 152 | NORTH_VIEW_BUTTON: { 153 | displayName: "North View", 154 | initState: false, 155 | }, 156 | }; 157 | 158 | export const GridEditorSettings = { 159 | map: { 160 | mapStyle: { 161 | sat: "mapbox://styles/relnox/cjs9rb33k2pix1fo833uweyjd?fresh=true", 162 | dark: "mapbox://styles/relnox/cjl58dpkq2jjp2rmzyrdvfsds?fresh=true", 163 | blue: "mapbox://styles/relnox/ck0h5xn701bpr1dqs3he2lecq?fresh=true", 164 | normal: "mapbox://styles/relnox/cl8dv36nv000t14qik9yg4ys6?fresh=true", 165 | }, 166 | }, 167 | 168 | GEOGRIDDATA: { 169 | color: [0, 0, 0], 170 | height: [0, 50, 100], 171 | id: 0, 172 | interactive: "Web", 173 | name: "name", 174 | }, 175 | 176 | GEOGRID: { 177 | features: [], 178 | properties: { 179 | header: { 180 | tableName: "test", 181 | cellSize: 15, 182 | latitude: 42.3664655, 183 | longitude: -71.0854323, 184 | tz: -5, 185 | ncols: 20, 186 | nrows: 20, 187 | rotation: 0, 188 | projection: 189 | "+proj=lcc +lat_1=42.68333333333333 +lat_2=41.71666666666667 +lat_0=41 +lon_0=-71.5 +x_0=200000 +y_0=750000 +ellps=GRS80 +datum=NAD83 +units=m +no_def", 190 | }, 191 | 192 | types: { 193 | Office: { 194 | description: "Offices and other commercial buildings, 0-100 stories", 195 | LBCS: [ 196 | { 197 | proportion: 1, 198 | use: { 199 | "2310": 1, 200 | }, 201 | }, 202 | ], 203 | NAICS: [ 204 | { 205 | proportion: 1, 206 | use: { 207 | "5400": 1, 208 | }, 209 | }, 210 | ], 211 | interactive: true, 212 | color: "#2482c6", 213 | height: [0, 50, 100], 214 | }, 215 | Campus: { 216 | description: "Campus buildings, non-interactive, 0-30 stories", 217 | LBCS: [ 218 | { 219 | proportion: 1, 220 | use: { 221 | "2310": 1, 222 | }, 223 | }, 224 | ], 225 | NAICS: [ 226 | { 227 | proportion: 1, 228 | use: { 229 | "5400": 1, 230 | }, 231 | }, 232 | ], 233 | interactive: false, 234 | color: "#ab8f39", 235 | height: [0, 15, 30], 236 | }, 237 | Park: { 238 | description: 239 | "Parks, playgrounds, and other open spaces. No height value", 240 | LBCS: [ 241 | { 242 | proportion: 1, 243 | use: { 244 | "7240": 1, 245 | }, 246 | }, 247 | ], 248 | NAICS: null, 249 | interactive: true, 250 | color: "#7eb346", 251 | height: [0, 0, 0], 252 | }, 253 | Residential: { 254 | description: "Residential buildings and apartments, 0-100 stories", 255 | LBCS: [ 256 | { 257 | proportion: 1, 258 | use: { 259 | "1100": 1, 260 | }, 261 | }, 262 | ], 263 | NAICS: null, 264 | interactive: true, 265 | color: "#b97e18", 266 | height: [0, 50, 100], 267 | }, 268 | }, 269 | }, 270 | type: "FeatureCollection", 271 | }, 272 | }; 273 | -------------------------------------------------------------------------------- /src/theme/index.js: -------------------------------------------------------------------------------- 1 | import typography from "./typography"; 2 | import { createTheme } from "@mui/material/styles"; 3 | 4 | const theme = createTheme({ 5 | typography, 6 | palette: { 7 | mode: "dark", 8 | }, 9 | }); 10 | 11 | export default theme; 12 | -------------------------------------------------------------------------------- /src/theme/typography.js: -------------------------------------------------------------------------------- 1 | const typography = { 2 | fontFamily: `"Roboto Mono", sans-serif`, 3 | fontSize: 11, 4 | fontWeightLight: 100, 5 | fontWeightRegular: 500, 6 | fontWeightMedium: 700, 7 | 8 | h1: { 9 | fontWeight: 700, 10 | fontSize: 45, 11 | letterSpacing: "-1px", 12 | }, 13 | h2: { 14 | fontWeight: 800, 15 | fontSize: 29, 16 | letterSpacing: "-0.24px", 17 | }, 18 | h3: { 19 | fontWeight: 700, 20 | fontSize: 24, 21 | letterSpacing: "-0.06px", 22 | }, 23 | h4: { 24 | fontWeight: 500, 25 | fontSize: 20, 26 | letterSpacing: "-0.06px", 27 | }, 28 | h5: { 29 | fontWeight: 500, 30 | fontSize: 16, 31 | letterSpacing: "-0.05px", 32 | }, 33 | h6: { 34 | fontWeight: 500, 35 | fontSize: 14, 36 | letterSpacing: "-0.05px", 37 | }, 38 | overline: { 39 | fontWeight: 500, 40 | }, 41 | }; 42 | 43 | export default typography; 44 | -------------------------------------------------------------------------------- /src/utils/utils.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { cityIOSettings } from "../settings/settings"; 3 | 4 | /** 5 | * Get API call using axios 6 | */ 7 | 8 | export const getAPICall = async (URL) => { 9 | try { 10 | const response = await axios.get(URL); 11 | return response.data; 12 | } catch (err) { 13 | console.error(err); 14 | } 15 | }; 16 | 17 | /** 18 | * convert rgb to hex 19 | */ 20 | export function rgbToHex(r, g, b) { 21 | function valToHex(c) { 22 | var hex = c.toString(16); 23 | return hex.length === 1 ? "0" + hex : hex; 24 | } 25 | return "#" + valToHex(r) + valToHex(g) + valToHex(b); 26 | } 27 | 28 | /** 29 | * convert hex to rgb array 30 | */ 31 | export function hexToRgb(hex) { 32 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 33 | return result 34 | ? [ 35 | parseInt(result[1], 16), 36 | parseInt(result[2], 16), 37 | parseInt(result[3], 16), 38 | ] 39 | : null; 40 | } 41 | 42 | /** 43 | * 44 | * @param {string} hexString test if vaild 3->6 HEX color 45 | */ 46 | export const testHex = (hexString) => { 47 | let isHex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i.test(hexString); 48 | return isHex; 49 | }; 50 | 51 | /** 52 | * checks if edits are done (toggled off) 53 | * than returns a redux state 54 | * with grid edits payload 55 | */ 56 | export const postToCityIO = (data, tableName, endPoint) => { 57 | let postURL = cityIOSettings.cityIO.baseURL + "table/" + tableName + endPoint; 58 | 59 | const options = { 60 | method: "post", 61 | url: postURL, 62 | data: data, 63 | headers: { 64 | "Content-Type": "application/json", 65 | Accept: "application/json", 66 | }, 67 | }; 68 | axios(options) 69 | .then((res) => { 70 | if (res.data.status === "ok") { 71 | console.log(`--> cityIO endpoint ${postURL} was updated <--`); 72 | } 73 | }) 74 | .catch((error) => { 75 | console.log("ERROR:", error); 76 | }); 77 | }; 78 | 79 | const cityIObaseURL = cityIOSettings.cityIO.baseURL; 80 | 81 | export const fetchJSON = async (url, options) => { 82 | const response = await fetch(url, options); 83 | const data = await response.json(); 84 | return data; 85 | }; 86 | 87 | export const getTablePrevCommitHash = async (id) => 88 | await fetchJSON(`${cityIObaseURL}commit/${id}/`).then((c) => { 89 | return { parent: c.parent, meta: c }; 90 | }); 91 | 92 | export const getTableID = async (tableName) => 93 | await fetchJSON( 94 | `${cityIObaseURL}table/${tableName}/meta/hashes/GEOGRIDDATA/` 95 | ); 96 | 97 | export const getCommit = async (id) => 98 | await fetchJSON(`${cityIObaseURL}commit/${id}/`); 99 | 100 | export const getModule = async (id) => 101 | await fetchJSON(`${cityIObaseURL}module/${id}/`); 102 | 103 | /** 104 | * Compute the middle of the grid and return the coordinates 105 | */ 106 | 107 | export const computeMidGridCell = (cityIOdata) => { 108 | const lastCell = 109 | cityIOdata?.GEOGRID?.features[cityIOdata?.GEOGRID?.features?.length - 1] 110 | ?.geometry?.coordinates[0][0]; 111 | const firstCell = 112 | cityIOdata?.GEOGRID?.features[0]?.geometry?.coordinates[0][0]; 113 | const midGrid = [ 114 | (firstCell[0] + lastCell[0]) / 2, 115 | (firstCell[1] + lastCell[1]) / 2, 116 | ]; 117 | return midGrid; 118 | }; 119 | 120 | /** 121 | * ! http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion 122 | * 123 | * Converts an HSL color value to RGB. Conversion formula 124 | * adapted from http://en.wikipedia.org/wiki/HSL_color_space. 125 | * Assumes h, s, and l are contained in the set [0, 1] and 126 | * returns r, g, and b in the set [0, 255]. 127 | * 128 | * @param Number h The hue 129 | * @param Number s The saturation 130 | * @param Number l The lightness 131 | * @return Array The RGB representation 132 | */ 133 | export function hslToRgb(h, s, l) { 134 | var r, g, b; 135 | 136 | function hue2rgb(p, q, t) { 137 | if (t < 0) t += 1; 138 | if (t > 1) t -= 1; 139 | if (t < 1 / 6) return p + (q - p) * 6 * t; 140 | if (t < 1 / 2) return q; 141 | if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; 142 | return p; 143 | } 144 | 145 | if (s === 0) { 146 | r = g = b = l; // achromatic 147 | } else { 148 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 149 | var p = 2 * l - q; 150 | r = hue2rgb(p, q, h + 1 / 3); 151 | g = hue2rgb(p, q, h); 152 | b = hue2rgb(p, q, h - 1 / 3); 153 | } 154 | 155 | return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; 156 | } 157 | 158 | export function numberToColorHsl(i, min, max) { 159 | var ratio = i; 160 | if (min > 0 || max < 1) { 161 | if (i < min) { 162 | ratio = 0; 163 | } else if (i > max) { 164 | ratio = 1; 165 | } else { 166 | var range = max - min; 167 | ratio = (i - min) / range; 168 | } 169 | } 170 | // as the function expects a value between 0 and 1, and red = 0° and green = 120° 171 | // we convert the input to the appropriate hue value 172 | var hue = (ratio * 1.2) / 3.6; 173 | // we convert hsl to rgb (saturation 100%, lightness 50%) 174 | var rgb = hslToRgb(hue, 1, 0.5); 175 | 176 | // we format to css value and return 177 | return [rgb[0], rgb[1], rgb[2]]; 178 | } 179 | -------------------------------------------------------------------------------- /src/views/CityIOviewer/CityIOdeckGLmap/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { DeckGL } from "@deck.gl/react"; 3 | import { _GlobeView as GlobeView, COORDINATE_SYSTEM } from "@deck.gl/core"; 4 | import { TileLayer } from "@deck.gl/geo-layers"; 5 | import { FlyToInterpolator } from "deck.gl"; 6 | import { LineLayer, IconLayer, TextLayer, BitmapLayer } from "@deck.gl/layers"; 7 | import icon from "./legoio.png"; 8 | import SelectedTable from "../SelectedTable"; 9 | 10 | export default function CityIOdeckGLmap(props) { 11 | const [markerInfo, setMarkerInfo] = useState([]); 12 | const [clicked, setClicked] = useState(); 13 | const [zoom, setZoom] = useState(); 14 | const INIT_VIEW = { 15 | longitude: -71.060929, 16 | latitude: 42.3545259, 17 | zoom: 1, 18 | pitch: 0, 19 | bearing: 0, 20 | zHeight: 2000000, 21 | }; 22 | 23 | const [viewport, setViewport] = useState(INIT_VIEW); 24 | const [initialViewState, setInitialViewState] = useState(viewport); 25 | const [intervalId, setIntervalId] = useState(null); 26 | 27 | // boolean for hovering flag 28 | let isHovering = false; 29 | 30 | // use FlyToInterpolator to randomly select a table and fly to it once a second 31 | // fulfil the first fly immediately. 32 | const flyToTable = () => { 33 | let randomIndex = Math.floor(Math.random() * markerInfo.length); 34 | setInitialViewState({ 35 | longitude: markerInfo[randomIndex].coord.to[0], 36 | latitude: markerInfo[randomIndex].coord.to[1], 37 | zoom: 3, 38 | pitch: 0, 39 | bearing: 0, 40 | transitionDuration: 8000, 41 | transitionInterpolator: new FlyToInterpolator(), 42 | transitionEasing: (t) => 43 | // ease out slow start, fast middle, slow end 44 | t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, 45 | }); 46 | }; 47 | 48 | useEffect(() => { 49 | // check if there are any tables to fly to 50 | if (markerInfo.length === 0) return; 51 | flyToTable(); 52 | 53 | let interval = setInterval(() => { 54 | flyToTable(); 55 | }, 10000); 56 | setIntervalId(interval); 57 | return () => clearInterval(interval); 58 | // eslint-disable-next-line 59 | }, [markerInfo]); 60 | 61 | useEffect(() => { 62 | if (clicked) { 63 | clearInterval(intervalId); 64 | } 65 | // eslint-disable-next-line 66 | }, [clicked]); 67 | 68 | useEffect(() => { 69 | // set initial zoom level to reflect layers appearance 70 | setZoom(INIT_VIEW.zoom); 71 | document 72 | .getElementById("deckgl-wrapper") 73 | .addEventListener("contextmenu", (evt) => evt.preventDefault()); 74 | // set the deckgl-wrapper color to black 75 | document.getElementById("deckgl-wrapper").style.backgroundColor = "black"; 76 | }, [INIT_VIEW.zoom]); 77 | 78 | useEffect(() => { 79 | let markersArr = []; 80 | 81 | props.cityIOdata.forEach((table, index) => { 82 | if(table.tableHeader.cs_project) 83 | markersArr.push({ 84 | tableURL: table.tableURL, 85 | tableName: table.tableName, 86 | index: index, 87 | tableHeader: table.tableHeader, 88 | coord: { 89 | from: [table.tableHeader.longitude, table.tableHeader.latitude], 90 | to: [ 91 | table.tableHeader.longitude + index / 10, 92 | table.tableHeader.latitude + index / 10, 93 | INIT_VIEW.zHeight, 94 | ], 95 | }, 96 | }); 97 | }); 98 | 99 | setMarkerInfo(markersArr); 100 | }, [props, INIT_VIEW.zHeight]); 101 | 102 | const layers = [ 103 | new TileLayer({ 104 | data: 105 | `https://api.mapbox.com/styles/v1/relnox/cjlu6w5sc1dy12rmn4kl2zljn/tiles/256/{z}/{x}/{y}?access_token=` + 106 | process.env.REACT_APP_MAPBOX_TOKEN + 107 | "&attribution=false&logo=false&fresh=true", 108 | minZoom: 0, 109 | maxZoom: 19, 110 | tileSize: 96, 111 | renderSubLayers: (props) => { 112 | const { 113 | bbox: { west, south, east, north }, 114 | } = props.tile; 115 | return new BitmapLayer(props, { 116 | data: null, 117 | image: props.data, 118 | _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN, 119 | bounds: [west, south, east, north], 120 | }); 121 | }, 122 | }), 123 | 124 | new LineLayer({ 125 | id: "LineLayer", 126 | data: markerInfo, 127 | pickable: true, 128 | getWidth: zoom < 2 ? 0.3 : 0.1, 129 | getSourcePosition: (d) => d.coord.from, 130 | getTargetPosition: (d) => d.coord.to, 131 | getColor: [255, 255, 255, 100], 132 | }), 133 | new TextLayer({ 134 | id: "text-layer", 135 | data: markerInfo, 136 | pickable: true, 137 | getPosition: (d) => d.coord.to, 138 | getText: (d) => d.tableName, 139 | getColor: [255, 255, 255], 140 | getSize: zoom < 2 ? 0 : 5, 141 | getAngle: 0, 142 | getPixelOffset: [10, 5], 143 | getTextAnchor: "start", 144 | getAlignmentBaseline: "center", 145 | }), 146 | new IconLayer({ 147 | id: "icon-layer", 148 | data: markerInfo, 149 | pickable: true, 150 | iconAtlas: icon, 151 | onClick: (d) => { 152 | setInitialViewState({ 153 | longitude: d.object.coord.to[0], 154 | latitude: d.object.coord.to[1], 155 | zoom: 3, 156 | pitch: 0, 157 | bearing: 0, 158 | transitionDuration: 1000, 159 | transitionInterpolator: new FlyToInterpolator(), 160 | }); 161 | 162 | setClicked(d); 163 | }, 164 | iconMapping: { 165 | marker: { x: 0, y: 0, width: 768, height: 768, mask: false }, 166 | }, 167 | getIcon: (d) => "marker", 168 | sizeScale: 1, 169 | getSize: zoom < 5 ? 20 : 5, 170 | getPosition: (d) => [d.coord.to[0], d.coord.to[1], INIT_VIEW.zHeight], 171 | }), 172 | ]; 173 | 174 | return ( 175 |
181 | {clicked && clicked.object && ( 182 | setClicked(null)} 185 | /> 186 | )} 187 | 188 | (isHovering = Boolean(object))} 191 | getCursor={({ isDragging }) => 192 | isDragging ? "grabbing" : isHovering ? "crosshair" : "grab" 193 | } 194 | layers={layers} 195 | controller={true} 196 | initialViewState={initialViewState} 197 | onViewportChange={setViewport} 198 | onViewStateChange={(d) => setZoom(d.viewState.zoom)} 199 | > 200 |
201 | ); 202 | } 203 | -------------------------------------------------------------------------------- /src/views/CityIOviewer/CityIOdeckGLmap/legoio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CityScope/CS_cityscopeJS/1cb2e63cbcdc794a6fb5da9fbc60537289e319a1/src/views/CityIOviewer/CityIOdeckGLmap/legoio.png -------------------------------------------------------------------------------- /src/views/CityIOviewer/CityIOlist.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import TableListLoading from "./TableListLoading"; 3 | import axios from "axios"; 4 | import { cityIOSettings } from "../../settings/settings"; 5 | 6 | export default function CityIOlist(props) { 7 | const getTablesList = props.getTablesList; 8 | const [tablesList, setTableList] = useState([]); 9 | const [isLoading, setIsLoading] = useState(true); 10 | 11 | useEffect(() => { 12 | tablesList && getTablesList(tablesList); 13 | // eslint-disable-next-line react-hooks/exhaustive-deps 14 | }, [tablesList]); 15 | 16 | const fetchCityIOtables = async () => { 17 | const cityIOlistURL = 18 | cityIOSettings.cityIO.baseURL + cityIOSettings.cityIO.headers; 19 | // get all table headers 20 | let tablesArr = await axios.get(cityIOlistURL); 21 | // create array of all headers 22 | tablesArr = tablesArr.data.map(table => { 23 | const url = `${cityIOSettings.cityIO.baseURL}table/${table.tableName}/`; 24 | table = {...table, tableURL: url} 25 | return table 26 | }) 27 | setTableList((oldArray) => [...tablesArr]); 28 | setIsLoading(false); 29 | }; 30 | 31 | useEffect(() => { 32 | fetchCityIOtables(); 33 | // eslint-disable-next-line react-hooks/exhaustive-deps 34 | }, []); 35 | 36 | return <>{isLoading && }; 37 | } 38 | -------------------------------------------------------------------------------- /src/views/CityIOviewer/SearchTablesList.js: -------------------------------------------------------------------------------- 1 | import TextField from "@mui/material/TextField"; 2 | import Autocomplete from "@mui/material/Autocomplete"; 3 | import SelectedTable from "./SelectedTable"; 4 | import { useState } from "react"; 5 | export default function SearchTablesList(props) { 6 | const tablesList = props.tablesList; 7 | const [selectedTable, setSelectedTable] = useState(null); 8 | const defaultProps = { 9 | options: tablesList, 10 | getOptionLabel: (option) => option.tableName, 11 | }; 12 | 13 | return ( 14 | <> 15 | {selectedTable && } 16 | } 23 | onChange={(event, newValue) => { 24 | setSelectedTable(newValue); 25 | }} 26 | /> 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/views/CityIOviewer/SelectedTable/index.js: -------------------------------------------------------------------------------- 1 | import { Typography, Link } from "@mui/material"; 2 | import { useEffect, useState } from "react"; 3 | import Dialog from "@mui/material/Dialog"; 4 | import DialogContent from "@mui/material/DialogContent"; 5 | import { generalSettings } from "../../../settings/settings"; 6 | 7 | export default function SelectedTable(props) { 8 | const selectedTable = props.clicked; 9 | 10 | const cityscopeJSendpoint = generalSettings.csjsURL + "/?cityscope="; 11 | // for projection mapping use this endpoint 12 | // https://cityscope.media.mit.edu/CS_cityscopeJS_projection_mapping/?cityscope=TABLE_NAME 13 | const projectionEndpoint = 14 | generalSettings.csjsURL + "_projection_mapping/?cityscope="; 15 | 16 | const [open, setOpen] = useState(false); 17 | 18 | // open dialog when table info has been changed 19 | useEffect(() => { 20 | setOpen(true); 21 | // eslint-disable-next-line react-hooks/exhaustive-deps 22 | }, [selectedTable]); 23 | 24 | const handleClose = () => { 25 | setOpen(false); 26 | }; 27 | 28 | return ( 29 | 45 | 46 | 47 | {selectedTable.tableName} 48 | 49 | 50 | 53 | Go to project 54 | 55 | {", "} 56 | 59 | project this table to TUI 60 | {" "} 61 | or{" "} 62 | 63 | view raw data on cityIO. 64 | 65 | 66 | 67 | 68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/views/CityIOviewer/TableListLoading.js: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import LinearProgress from "@mui/material/LinearProgress"; 3 | import { styled } from "@mui/material/styles"; 4 | import { useEffect, useState } from "react"; 5 | 6 | export default function TableListLoading() { 7 | const [progress, setProgress] = useState(0); 8 | 9 | const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ 10 | height: 10, 11 | })); 12 | 13 | useEffect(() => { 14 | const timer = setInterval(() => { 15 | setProgress((oldProgress) => { 16 | if (oldProgress === 100) { 17 | return 0; 18 | } 19 | const diff = Math.random() * 10; 20 | return Math.min(oldProgress + diff, 100); 21 | }); 22 | }, 500); 23 | 24 | return () => { 25 | clearInterval(timer); 26 | }; 27 | }, []); 28 | 29 | return ( 30 | 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /src/views/CityIOviewer/index.js: -------------------------------------------------------------------------------- 1 | import CityIOlist from "./CityIOlist"; 2 | import SearchTablesList from "./SearchTablesList"; 3 | import { useState } from "react"; 4 | import { Typography, Link, Grid, Box } from "@mui/material"; 5 | import GitHubIcon from "@mui/icons-material/GitHub"; 6 | import CityIOdeckGLmap from "./CityIOdeckGLmap/index"; 7 | 8 | export default function CityIOviewer() { 9 | // get the list of tables from CityIOlist component and pass it to SearchTablesList component 10 | const [tablesList, getTablesList] = useState([]); 11 | return ( 12 | <> 13 | {/* background color black */} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | MIT CityScope 23 | 24 | 25 | 26 | {/* max width 50% on large screen */} 27 | 28 | 29 | MIT CityScope is an open-source urban modeling and simulation 30 | platform project developed by the City Science group at the MIT 31 | Media Lab 32 | {" "} 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/DeckglBase.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useRef } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import DeckGL from "@deck.gl/react"; 4 | import "mapbox-gl/dist/mapbox-gl.css"; 5 | import { computeMidGridCell } from "../../../utils/utils"; 6 | import { Map } from "react-map-gl"; 7 | 8 | export default function DeckglBase({ 9 | layers, 10 | draggingWhileEditing, 11 | setDeckGLRef, 12 | }) { 13 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 14 | const menuState = useSelector((state) => state.menuState); 15 | const [viewState, setViewState] = useState(); 16 | const ref = useRef(null); 17 | 18 | // when ref is set, set the deckGLRef 19 | useEffect(() => { 20 | ref.current && setDeckGLRef(ref); 21 | // eslint-disable-next-line react-hooks/exhaustive-deps 22 | }, [ref]); 23 | 24 | const viewControlButton = 25 | menuState?.viewSettingsMenuState?.VIEW_CONTROL_BUTTONS; 26 | 27 | // ** 28 | // * resets the camera viewport 29 | // * to cityIO header data 30 | // * https://github.com/uber/deck.gl/blob/master/test/apps/viewport-transitions-flyTo/src/app.js 31 | // * 32 | const setViewStateToTableHeader = () => { 33 | const header = cityIOdata.GEOGRID.properties.header; 34 | const midGrid = computeMidGridCell(cityIOdata); 35 | return { 36 | ...viewState, 37 | longitude: midGrid[0], 38 | latitude: midGrid[1], 39 | zoom: 15, 40 | pitch: 45, 41 | bearing: 360 - header.rotation, 42 | orthographic: false, 43 | }; 44 | }; 45 | 46 | useEffect(() => { 47 | const header = cityIOdata.GEOGRID.properties.header; 48 | const midGrid = computeMidGridCell(cityIOdata); 49 | 50 | switch (viewControlButton) { 51 | case "RESET_VIEW_BUTTON": 52 | setViewState((prevViewState) => ({ 53 | ...prevViewState, 54 | longitude: midGrid[0], 55 | latitude: midGrid[1], 56 | pitch: 0, 57 | bearing: 0, 58 | orthographic: false, 59 | })); 60 | break; 61 | 62 | case "NORTH_VIEW_BUTTON": 63 | setViewState((prevViewState) => ({ 64 | ...prevViewState, 65 | bearing: 360 - header.rotation, 66 | })); 67 | break; 68 | 69 | case "ORTHO_VIEW_BUTTON": 70 | setViewState((prevViewState) => ({ 71 | ...prevViewState, 72 | orthographic: prevViewState.orthographic 73 | ? !prevViewState.orthographic 74 | : true, 75 | })); 76 | 77 | break; 78 | default: 79 | break; 80 | } 81 | // eslint-disable-next-line react-hooks/exhaustive-deps 82 | }, [viewControlButton]); 83 | 84 | // fix deck view rotate 85 | useEffect(() => { 86 | document 87 | // ! a more aggressive method which prevents all right click context menu [ OLD: .getElementById("deckgl-wrapper")] 88 | .addEventListener("contextmenu", (evt) => evt.preventDefault()); 89 | // zoom map on CS table location 90 | setViewStateToTableHeader(); 91 | // eslint-disable-next-line react-hooks/exhaustive-deps 92 | }, []); 93 | 94 | const onViewStateChange = ({ viewState }) => { 95 | viewState.orthographic = 96 | viewControlButton === "ORTHO_VIEW_BUTTON" ? true : false; 97 | setViewState(viewState); 98 | }; 99 | 100 | return ( 101 | 115 | 119 | 120 | ); 121 | } 122 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/ABMLayer.js: -------------------------------------------------------------------------------- 1 | // import { TripsLayer } from "@deck.gl/geo-layers"; 2 | import { hexToRgb } from "../../../../utils/utils"; 3 | import { PathLayer } from "@deck.gl/layers"; 4 | 5 | export default function ABMLayer({ data, selected, opacity }) { 6 | if (data.ABM2 && selected) { 7 | // check if the selected mode is a mode or a profile 8 | const attrGroup = "mode" in selected ? "mode" : "profile"; 9 | // return new TripsLayer 10 | return new PathLayer({ 11 | id: "ABM", 12 | shadowEnabled: false, 13 | data: data.ABM2.trips, 14 | // on each trip in data.ABM2.trips get the path for getPath 15 | // if the selected mode is the same as the trip's mode 16 | getPath: (d) => { 17 | if (selected[attrGroup] === d[attrGroup]) { 18 | return d.path; 19 | } 20 | }, 21 | // get the color of the trip from the data.ABM2.attr object 22 | getColor: (d) => hexToRgb(data.ABM2.attr[attrGroup][d[attrGroup]].color), 23 | 24 | opacity: opacity / 100, 25 | getWidth: (d) => { 26 | //! FOR NOW: return the length of the timeStamps array 27 | let len = d.path.length ? d.path.length : 1; 28 | if (len > 30) { 29 | len = 30 + opacity; 30 | } 31 | return len; 32 | }, 33 | updateTriggers: { 34 | getPath: selected, 35 | getWidth: opacity, 36 | }, 37 | }); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/ARCHIVE/ANIMATION: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------- 2 | // ! FROM DeckglBase.js 3 | 4 | const toggleAnimationState = menuState.viewSettingsMenuState.ANIMATION_CHECKBOX; 5 | const [animationTime, setAnimationTime] = useState(0); 6 | useLayoutEffect(() => { 7 | if (toggleAnimationState && toggleAnimationState.isOn) { 8 | let timerId; 9 | const f = () => { 10 | setAnimationTime((t) => { 11 | return t > mapSettings.map.layers.ABM.endTime 12 | ? mapSettings.map.layers.ABM.startTime 13 | : t + toggleAnimationState.slider / 10; 14 | }); 15 | 16 | timerId = requestAnimationFrame(f); 17 | }; 18 | timerId = requestAnimationFrame(f); 19 | return () => cancelAnimationFrame(timerId); 20 | } 21 | }, [toggleAnimationState]); 22 | 23 | // ---------------------------------------------- 24 | 25 | // ! FROM index.js 26 | 27 | ABM: ABMLayer({ 28 | data: cityIOdata, 29 | ABMmode: 0, 30 | selected: 31 | layersMenu && 32 | layersMenu.ABM_LAYER_CHECKBOX && 33 | layersMenu.ABM_LAYER_CHECKBOX.selected, 34 | time: animationTime, 35 | opacity: 36 | layersMenu && 37 | layersMenu.ABM_LAYER_CHECKBOX && 38 | layersMenu.ABM_LAYER_CHECKBOX.slider, 39 | }), 40 | 41 | // ---------------------------------------------- 42 | 43 | // ! FROM AggregatedTripsLayer.js 44 | 45 | import { PathLayer } from "@deck.gl/layers"; 46 | import { hexToRgb } from "../../../../utils/utils"; 47 | 48 | export default function AggregatedTripsLayer({ data, selected, opacity }) { 49 | return new PathLayer({ 50 | id: "AGGREGATED_TRIPS", 51 | shadowEnabled: false, 52 | data: data?.ABM2?.trips, 53 | getPath: (d) => { 54 | if (d.mode === selected) { 55 | return d.path; 56 | } 57 | }, 58 | getColor: (d) => hexToRgb(data.ABM2.attr.mode[d.mode].color), 59 | 60 | opacity, 61 | getWidth: 3, 62 | 63 | updateTriggers: { 64 | getPath: selected, 65 | }, 66 | }); 67 | } 68 | 69 | // ---------------------------------------------- 70 | 71 | // ! FROM ABMLayer.js 72 | 73 | return new TripsLayer({ 74 | // opacity, 75 | id: "ABM", 76 | data: data.ABM2.trips, 77 | getPath: (d) => d.path, 78 | getTimestamps: (d) => d.timestamps, 79 | getColor: (d) => hexToRgb(data.ABM2.attr.mode[d.mode].color), 80 | shadowEnabled: false, 81 | getWidth: 1, 82 | widthScale: opacity, 83 | trailLength: 500, 84 | currentTime: time, 85 | 86 | updateTriggers: { 87 | getColor: ABMmode, 88 | }, 89 | transitions: { 90 | getColor: 500, 91 | }, 92 | }); 93 | 94 | // ---------------------------------------------- 95 | 96 | // ! FROM index.js 97 | 104 | // ---------------------------------------------- 105 | // ! FROM DeckglBase.js 106 | 107 | 108 | // toggle camera rotation on and off 109 | useEffect(() => { 110 | if (toggleRotateCamera && toggleRotateCamera.isOn) { 111 | let bearing = viewState.bearing || 0; 112 | bearing < 360 113 | ? (bearing += (animationTime / 100000000) * toggleRotateCamera.slider) 114 | : (bearing = 0); 115 | setViewState({ 116 | ...viewState, 117 | bearing: bearing, 118 | }); 119 | } 120 | // eslint-disable-next-line react-hooks/exhaustive-deps 121 | }, [toggleRotateCamera, animationTime]); -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/AccessLayer.js: -------------------------------------------------------------------------------- 1 | import { SimpleMeshLayer } from "deck.gl"; 2 | import { CubeGeometry } from "@luma.gl/engine"; 3 | import { OBJLoader } from "@loaders.gl/obj"; 4 | import { numberToColorHsl } from "../../../../utils/utils"; 5 | 6 | export default function AccessLayer({ 7 | data, 8 | intensity, 9 | selected, 10 | setLayerHoveredData, 11 | }) { 12 | const accessData = data.access && data.access.features; 13 | const cube = new CubeGeometry({ type: "x,z", xlen: 0, ylen: 0, zlen: 0 }); 14 | const header = data.GEOGRID.properties.header; 15 | // const colors = [ 16 | // [255, 0, 0], 17 | // [255, 167, 0], 18 | // [255, 244, 0], 19 | // [163, 255, 0], 20 | // [44, 186, 0], 21 | // ]; 22 | // return new HeatmapLayer({ 23 | // id: "ACCESS", 24 | // colorRange: colors, 25 | // debounceTimeout: 800, 26 | // radiusPixels: intensity || 35, 27 | // intensity: 1, 28 | // weightsTextureSize: 1024, 29 | // threshold: 0.3, 30 | 31 | // data: accessData && accessData, 32 | // getPosition: (d) => d.geometry.coordinates, 33 | // getWeight: (d) => d.properties[selected], 34 | // updateTriggers: { 35 | // getWeight: selected, 36 | // }, 37 | // }); 38 | 39 | return new SimpleMeshLayer({ 40 | onHover: (event) => { 41 | if (event.object) { 42 | setLayerHoveredData( 43 | // create a string with data.access.properties[selected] and value of event.object.properties[selected] to display in the tooltip 44 | `${data.access.properties[selected]}: ${Math.floor( 45 | event.object.properties[selected] * 100 46 | )}%` 47 | ); 48 | } 49 | }, 50 | pickable: true, 51 | 52 | id: "ACCESS", 53 | opacity: 0.1 + intensity / 100, 54 | 55 | data: accessData && accessData, 56 | loaders: [OBJLoader], 57 | mesh: cube, 58 | getPosition: (d) => [ 59 | d.geometry.coordinates[0], 60 | d.geometry.coordinates[1], 61 | 1, 62 | ], 63 | 64 | getColor: (d) => { 65 | const selectedWeight = (w) => { 66 | if (w > 0 && w < 1) { 67 | return w; 68 | } else if (w >= 1) { 69 | return 1; 70 | } else { 71 | return 0; 72 | } 73 | }; 74 | // if the heatmap value is null or undefined, return transparent color 75 | if ( 76 | d.properties[selected] === undefined || 77 | d.properties[selected] === null 78 | ) { 79 | return [0, 0, 0, 0]; 80 | // if the heatmap value is a float, return the color based on the value 81 | } else { 82 | const rgb = numberToColorHsl( 83 | selectedWeight(d.properties[selected]), 84 | 0, 85 | 1 86 | ); 87 | return [rgb[0], rgb[1], rgb[2], 200]; 88 | } 89 | }, 90 | 91 | getOrientation: (d) => [-180, header.rotation, -90], 92 | getScale: (d) => [ 93 | data.GEOGRID.properties.header.cellSize / (2 + intensity / 100), 94 | 1 + d.properties[selected] * intensity, 95 | data.GEOGRID.properties.header.cellSize / (2 + intensity / 100), 96 | ], 97 | updateTriggers: { 98 | getScale: selected, 99 | }, 100 | transitions: { 101 | getColor: 500, 102 | getScale: 500, 103 | }, 104 | }); 105 | } 106 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/AggregatedTripsLayer.js: -------------------------------------------------------------------------------- 1 | import { ArcLayer } from "@deck.gl/layers"; 2 | import { hexToRgb } from "../../../../utils/utils"; 3 | 4 | export default function AggregatedTripsLayer({ data, selected, opacity }) { 5 | if (data.ABM2 && selected) { 6 | const attrGroup = "mode" in selected ? "mode" : "profile"; 7 | 8 | return new ArcLayer({ 9 | id: "AGGREGATED_TRIPS", 10 | shadowEnabled: false, 11 | data: data.ABM2.trips, 12 | // on each trip in data.ABM2.trips get the first coordinate of the path for getSourcePosition 13 | 14 | getSourcePosition: (d) => { 15 | if (selected[attrGroup] === d[attrGroup]) { 16 | return d.path[0]; 17 | } 18 | }, 19 | // on each trip in data.ABM2.trips get the last coordinate of the path for getTargetPosition 20 | getTargetPosition: (d) => { 21 | if (selected[attrGroup] === d[attrGroup]) { 22 | return d.path[d.path.length - 1]; 23 | } 24 | }, 25 | getSourceColor: (d) => { 26 | // ! BUGGY - the color is not changing appropriately when the selected mode changes 27 | return hexToRgb(data.ABM2.attr[attrGroup][d[attrGroup]].color); 28 | }, 29 | getTargetColor: [0, 0, 0, 100], 30 | 31 | // opacity: 0.85, 32 | getWidth: 5 * opacity, 33 | 34 | updateTriggers: { 35 | getSourcePosition: selected, 36 | getTargetPosition: selected, 37 | }, 38 | }); 39 | } 40 | } 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/GeojsonLayer.js: -------------------------------------------------------------------------------- 1 | import { GeoJsonLayer } from "@deck.gl/layers"; 2 | import { hexToRgb } from "../../../../utils/utils"; 3 | 4 | export default function GeojsonLayer({ data: cityIOdata, opacity }) { 5 | if (cityIOdata.geojson) { 6 | return new GeoJsonLayer({ 7 | id: "GeojsonLayer", 8 | data: cityIOdata.geojson, 9 | opacity: opacity, 10 | pickable: true, 11 | wireframe: false, 12 | stroked: true, 13 | filled: true, 14 | extruded: true, 15 | lineWidthScale: 1, 16 | getFillColor: (d) => hexToRgb(d.properties.fill), 17 | getLineColor: (d) => hexToRgb(d.properties.stroke), 18 | lineWidthMinPixels: 2, 19 | getElevation: (d) => d.properties.height, 20 | updateTriggers: { 21 | getFillColor: cityIOdata, 22 | getElevation: cityIOdata, 23 | }, 24 | transitions: { 25 | getFillColor: 500, 26 | getElevation: 500, 27 | }, 28 | }); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/GridLayer.js: -------------------------------------------------------------------------------- 1 | import { GeoJsonLayer } from "deck.gl"; 2 | import { hexToRgb, testHex } from "../../../../utils/utils"; 3 | 4 | /** 5 | * Description. uses deck api to 6 | * collect objects in a region 7 | * @argument{object} e picking event 8 | */ 9 | export const multipleObjPicked = (e, pickingRadius, deckGLRef) => { 10 | const dim = pickingRadius; 11 | const x = e.x - dim / 2; 12 | const y = e.y - dim / 2; 13 | let multipleObj = deckGLRef.current.pickObjects({ 14 | x: x, 15 | y: y, 16 | width: dim, 17 | height: dim, 18 | }); 19 | return multipleObj; 20 | }; 21 | 22 | /** 23 | * Description. allow only to pick cells that are 24 | * not of CityScope TUI & that are intractable 25 | * so to not overlap TUI activity 26 | */ 27 | const handleGridCellEditing = ( 28 | e, 29 | selectedType, 30 | setSelectedCellsState, 31 | pickingRadius, 32 | deckGLRef 33 | ) => { 34 | const { height, color, name } = selectedType; 35 | const multiSelectedObj = multipleObjPicked(e, pickingRadius, deckGLRef); 36 | multiSelectedObj.forEach((selected) => { 37 | const thisCellProps = selected.object.properties; 38 | if (thisCellProps && thisCellProps.interactive) { 39 | thisCellProps.color = testHex(color) ? hexToRgb(color) : color; 40 | thisCellProps.height = height; 41 | thisCellProps.name = name; 42 | } 43 | }); 44 | setSelectedCellsState(multiSelectedObj); 45 | }; 46 | 47 | /** 48 | * Description. gets `props` with geojson 49 | * and process the interactive area 50 | */ 51 | export const processGridData = (cityIOdata) => { 52 | // create a copy of the GEOGRID object 53 | const newGEOGRID = JSON.parse(JSON.stringify(cityIOdata.GEOGRID)); 54 | // if GEOGRRIDDATA exist and is the same length as our grid 55 | // update GEOGRID features from GEOGRIDDATA on cityio 56 | for (let i = 0; i < cityIOdata?.GEOGRID?.features?.length; i++) { 57 | newGEOGRID.features[i].properties = cityIOdata.GEOGRIDDATA[i]; 58 | // inject id with ES7 copy of the object 59 | newGEOGRID.features[i].properties = { 60 | ...newGEOGRID.features[i].properties, 61 | id: i, 62 | }; 63 | } 64 | return newGEOGRID; 65 | }; 66 | 67 | export default function GridLayer({ 68 | data, 69 | editOn, 70 | state: { 71 | selectedType, 72 | keyDownState, 73 | selectedCellsState, 74 | pickingRadius, 75 | opacity, 76 | }, 77 | updaters: { setSelectedCellsState, setDraggingWhileEditing, setHoveredObj }, 78 | deckGLRef, 79 | }) { 80 | return new GeoJsonLayer({ 81 | opacity, 82 | id: "GRID", 83 | data, 84 | pickable: true, 85 | extruded: true, 86 | wireframe: true, 87 | //! fixed elevation for now 88 | elevationScale: 5, 89 | lineWidthScale: 1, 90 | lineWidthMinPixels: 2, 91 | getElevation: (d) => d.properties.height[1], 92 | getFillColor: (d) => d.properties.color, 93 | 94 | onClick: (event) => { 95 | if (selectedType && editOn && keyDownState !== "Shift") 96 | handleGridCellEditing( 97 | event, 98 | selectedType, 99 | setSelectedCellsState, 100 | pickingRadius, 101 | deckGLRef 102 | ); 103 | }, 104 | 105 | onDrag: (event) => { 106 | if (selectedType && editOn && keyDownState !== "Shift") 107 | handleGridCellEditing( 108 | event, 109 | selectedType, 110 | setSelectedCellsState, 111 | pickingRadius, 112 | deckGLRef 113 | ); 114 | }, 115 | 116 | onDragStart: () => { 117 | if (selectedType && editOn && keyDownState !== "Shift") { 118 | setDraggingWhileEditing(true); 119 | } 120 | }, 121 | 122 | onHover: (e) => { 123 | if (e.object) { 124 | setHoveredObj(e); 125 | } 126 | }, 127 | 128 | onDragEnd: () => { 129 | setDraggingWhileEditing(false); 130 | }, 131 | updateTriggers: { 132 | getFillColor: selectedCellsState, 133 | getElevation: selectedCellsState, 134 | }, 135 | transitions: { 136 | getFillColor: 500, 137 | getElevation: 150, 138 | }, 139 | }); 140 | } 141 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/MeshLayer.js: -------------------------------------------------------------------------------- 1 | import { SimpleMeshLayer } from "@deck.gl/mesh-layers"; 2 | import { OBJLoader } from "@loaders.gl/obj"; 3 | 4 | export default function MeshLayer({ data, opacity }) { 5 | if (data && data.features) { 6 | return new SimpleMeshLayer({ 7 | id: "mesh-layer", 8 | data: data.features, 9 | loaders: [OBJLoader], 10 | mesh: "./obj/model.obj", 11 | getPosition: (d) => { 12 | const pntArr = d.geometry.coordinates[0]; 13 | const first = pntArr[1]; 14 | const last = pntArr[pntArr.length - 2]; 15 | const center = [(first[0] + last[0]) / 2, (first[1] + last[1]) / 2]; 16 | return center; 17 | }, 18 | getColor: (d) => 19 | // d.properties.color, 20 | [255, 255, 255, 255], 21 | 22 | getOrientation: (d) => [-180, Math.ceil(Math.random() * 4) * 90, -90], 23 | getScale: (d) => 24 | d.properties.height > 0 25 | ? [ 26 | data.properties.header.cellSize / 2, 27 | opacity * d.properties.height , 28 | data.properties.header.cellSize / 2, 29 | ] 30 | : [0, 0, 0], 31 | updateTriggers: { 32 | getScale: opacity, 33 | }, 34 | }); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/TextualLayer.js: -------------------------------------------------------------------------------- 1 | import { TextLayer } from "@deck.gl/layers"; 2 | 3 | export default function TextualLayer({ data, coordinates, opacity }) { 4 | if (!data || !data.text) return; 5 | /* 6 | * this layer takes textual layer procured by a 3rd party 7 | * module, and renders a text message near the grid cell 8 | * defined in the data id attribute. 9 | * 10 | * data format: 11 | [ 12 | {"id": 0, "info": "yes!" }, {"id": 10, "info": "I'm on ID 10!" } 13 | ] 14 | * 15 | * coordinates format: 16 | [ 17 | {"info": "yes!", coordinates: [-122.466233, 37.684638]}, 18 | ] 19 | */ 20 | 21 | let textLayerData = []; 22 | 23 | data.text.forEach((infoIteam) => { 24 | textLayerData.push({ 25 | coordinates: [ 26 | coordinates.features[infoIteam.id].geometry.coordinates[0][0][0], 27 | coordinates.features[infoIteam.id].geometry.coordinates[0][0][1], 28 | 100, 29 | ], 30 | info: infoIteam.info, 31 | }); 32 | }); 33 | 34 | return new TextLayer({ 35 | opacity, 36 | id: "text-layer", 37 | data: textLayerData, 38 | pickable: true, 39 | getPosition: (d) => d.coordinates, 40 | getText: (d) => d.info, 41 | getColor: [255, 255, 255], 42 | getSize: 30, 43 | getAngle: 0, 44 | getTextAnchor: "middle", 45 | getAlignmentBaseline: "center", 46 | }); 47 | } 48 | 49 | // new TextLayer({ 50 | // id: "text", 51 | // data: cityIOdata.GEOGRID && cityIOdata.GEOGRID.features, 52 | // getPosition: (d) => { 53 | // const pntArr = d.geometry.coordinates[0]; 54 | // const first = pntArr[1]; 55 | // const last = pntArr[pntArr.length - 2]; 56 | // const center = [(first[0] + last[0]) / 2, (first[1] + last[1]) / 2]; 57 | // return center; 58 | // }, 59 | 60 | // getText: (d) => { 61 | // var length = 10; 62 | // return d.properties.name.length > length 63 | // ? d.properties.name.substring(0, length - 3) + "..." 64 | // : d.properties.name; 65 | // }, 66 | // getColor: (d) => [0, 0, 0], 67 | // getSize: 8, 68 | // }), 69 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/TileMapLayer.js: -------------------------------------------------------------------------------- 1 | import { BitmapLayer, TileLayer } from "deck.gl"; 2 | import { mapSettings } from "../../../../settings/settings"; 3 | 4 | export default function TileMapLayer() { 5 | const mapStyle = mapSettings.map.mapStyles.Dark; 6 | return new TileLayer({ 7 | // visible: TUIobject?.MAP_STYLE?.active, 8 | data: 9 | `https://api.mapbox.com/styles/v1/relnox/${mapStyle}/tiles/256/{z}/{x}/{y}?access_token=` + 10 | process.env.REACT_APP_MAPBOX_TOKEN + 11 | "&attribution=false&logo=false&fresh=true", 12 | minZoom: 0, 13 | maxZoom: 21, 14 | tileSize: 256, 15 | id: "OSM", 16 | renderSubLayers: (props) => { 17 | const { 18 | bbox: { west, south, east, north }, 19 | } = props.tile; 20 | 21 | return new BitmapLayer(props, { 22 | data: null, 23 | image: props.data, 24 | bounds: [west, south, east, north], 25 | }); 26 | }, 27 | }); 28 | } 29 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/TrafficLayer.js: -------------------------------------------------------------------------------- 1 | import { GeoJsonLayer } from "@deck.gl/layers"; 2 | import { numberToColorHsl } from "../../../../utils/utils"; 3 | 4 | export default function TrafficLayer({ data, opacity, setLayerHoveredData }) { 5 | if (data.traffic) { 6 | // create a new geojson object from `data.traffic` 7 | // where each feature is a rectangular polygon with the coordinates of the 8 | // line and the height of that feature `properties.norm_traffic` attribute. 9 | let newGeoJson = { 10 | type: "FeatureCollection", 11 | features: data.traffic.features.map((feature) => { 12 | let newFeature = { 13 | type: "Feature", 14 | geometry: { 15 | type: "Polygon", 16 | coordinates: 17 | // offset the line coordinates by the width of norm_traffic in meters 18 | // to create a rectangular polygon and then add the height of the norm_traffic 19 | // to the coordinates to create a 3D polygon 20 | [ 21 | [ 22 | [ 23 | feature.geometry.coordinates[0][0] - 24 | feature.properties.lanes / 75000, 25 | feature.geometry.coordinates[0][1] - 26 | feature.properties.lanes / 75000, 27 | 0, 28 | ], 29 | [ 30 | feature.geometry.coordinates[0][0] + 31 | feature.properties.lanes / 75000, 32 | feature.geometry.coordinates[0][1] + 33 | feature.properties.lanes / 75000, 34 | 0, 35 | ], 36 | [ 37 | feature.geometry.coordinates[1][0] + 38 | feature.properties.lanes / 75000, 39 | feature.geometry.coordinates[1][1] + 40 | feature.properties.lanes / 75000, 41 | 0, 42 | ], 43 | [ 44 | feature.geometry.coordinates[1][0] - 45 | feature.properties.lanes / 75000, 46 | feature.geometry.coordinates[1][1] - 47 | feature.properties.lanes / 75000, 48 | 0, 49 | ], 50 | ], 51 | ], 52 | }, 53 | properties: { 54 | norm_traffic: feature.properties.norm_traffic, 55 | }, 56 | }; 57 | return newFeature; 58 | }), 59 | }; 60 | 61 | return new GeoJsonLayer({ 62 | onHover: (event) => { 63 | if (event.object) { 64 | setLayerHoveredData( 65 | `traffic: ${ 66 | Math.floor(event.object.properties.norm_traffic * 100) 67 | }%` 68 | ); 69 | } 70 | }, 71 | pickable: true, 72 | 73 | id: "TRAFFIC_TRIPS", 74 | shadowEnabled: false, 75 | data: newGeoJson, 76 | 77 | filled: true, 78 | extruded: true, 79 | 80 | getFillColor: (d) => { 81 | const selectedWeight = (w) => { 82 | if (w > 0 && w < 1) { 83 | return w; 84 | } else if (w >= 1) { 85 | return 1; 86 | } else { 87 | return 0; 88 | } 89 | }; 90 | 91 | const rgb = numberToColorHsl( 92 | selectedWeight(1 - d.properties.norm_traffic), 93 | 0, 94 | 1 95 | ); 96 | // return the color with the opacity 97 | return [rgb[0], rgb[1], rgb[2], 200 + 55 * opacity]; 98 | }, 99 | 100 | getElevation: (d) => d.properties.norm_traffic * 100 * opacity, 101 | 102 | updateTriggers: { 103 | getLineColor: data, 104 | getLineWidth: opacity, 105 | }, 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Arc.js: -------------------------------------------------------------------------------- 1 | import {ArcLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * { 7 | * inbound: 72633, 8 | * outbound: 74735, 9 | * from: { 10 | * name: '19th St. Oakland (19TH)', 11 | * coordinates: [-122.269029, 37.80787] 12 | * }, 13 | * to: { 14 | * name: '12th St. Oakland City Center (12TH)', 15 | * coordinates: [-122.271604, 37.803664] 16 | * }, 17 | * ... 18 | * ] 19 | */ 20 | export default function ArcBaseLayer({data, opacity}){ 21 | 22 | return new ArcLayer({ 23 | id: data.id, 24 | data: data.data, 25 | pickable: true, 26 | getWidth: data.properties.width || 12, 27 | getSourcePosition: d => d.from.coordinates, 28 | getTargetPosition: d => d.to.coordinates, 29 | getSourceColor: d => d.sourceColor || [255, 140, 0], 30 | getTargetColor: d => d.targetColor || [55, 140, 0], 31 | opacity 32 | }); 33 | 34 | 35 | } 36 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Column.js: -------------------------------------------------------------------------------- 1 | import {ColumnLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {centroid: [-122.4, 37.7], value: 0.2}, 7 | * ... 8 | * ] 9 | */ 10 | export default function ColumnBaseLayer({data, opacity}){ 11 | 12 | return new ColumnLayer({ 13 | id: data.id, 14 | data: data.data, 15 | diskResolution: data.properties.resolution || 12, 16 | radius: data.properties.radius || 30, 17 | extruded: data.properties.extruded || true, 18 | pickable: data.properties.pickable || true, 19 | elevationScale: data.properties.elevationScale || 1, 20 | getPosition: d => d.centroid, 21 | getFillColor: d => [48, 128, d.value * 255, 255], 22 | getLineColor: [0, 0, 0], 23 | getElevation: d => d.value, 24 | opacity 25 | }); 26 | 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Contour.js: -------------------------------------------------------------------------------- 1 | import {ContourLayer} from '@deck.gl/aggregation-layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {coordinates: [-122.42177834, 37.78346622]}, 7 | * ... 8 | * ] 9 | */ 10 | export default function ContourBaseLayer({data, opacity}){ 11 | 12 | return new ContourLayer({ 13 | id: data.id, 14 | contours: data.data, 15 | cellSize: data.properties.cellSize || 200, 16 | getPosition: d => d.coordinates, 17 | opacity 18 | }); 19 | 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/GeoJson.js: -------------------------------------------------------------------------------- 1 | import {GeoJsonLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * Valid GeoJSON object 6 | */ 7 | 8 | export default function GeoJsonBaseLayer({data, opacity}){ 9 | if(data){ 10 | return new GeoJsonLayer({ 11 | id: data.id, 12 | data: data.data, 13 | opacity: opacity || 0.5, 14 | pickable: data.properties?.pickable || true, 15 | stroked: data.properties?.stroked || false, 16 | filled: data.properties?.filled || true, 17 | extruded: data.properties?.extruded || true, 18 | wireframe: data.properties?.wireframe || false, 19 | pointType: data.properties?.pointType || 'circle', 20 | autoHighlight: data.properties?.autoHighlight || true, 21 | highlightColor: data.properties?.highlightColor || [242, 0, 117, 120], 22 | lineWidthUnits: data.properties?.lineWidthUnits || 'pixels', 23 | lineWidthMinPixels: data.properties?.lineWidthMinPixels || 1, 24 | getFillColor: d => d.properties?.color || data.properties?.color || [160, 160, 180, 200], 25 | getLineColor: d => d.properties?.lineColor || data.properties?.lineColor || [255, 255, 255], 26 | getPointRadius: d => d.properties?.pointRadius || data.properties?.pointRadius || 10, 27 | getLineWidth: d => d.properties?.lineWidth ||data.properties?.lineWidth || 1, 28 | getElevation: d => d.properties?.height || data.properties?.height || 1, 29 | updateTriggers: { 30 | getFillColor: data, 31 | getLineColor: data, 32 | getPointRadius: data, 33 | getLineWidth: data, 34 | getElevation: data, 35 | }, 36 | transitions: { 37 | getFillColor: data.properties?.duration || 500, 38 | getElevation: data.properties?.duration || 500, 39 | getLineWidth: data.properties?.duration || 500, 40 | getPointRadius: data.properties?.duration || 500, 41 | getLineColor: data.properties?.duration || 500, 42 | } 43 | }); 44 | 45 | 46 | } 47 | } -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Grid.js: -------------------------------------------------------------------------------- 1 | import {GridLayer} from '@deck.gl/aggregation-layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {coordinates: [-122.42177834, 37.78346622]}, 7 | * ... 8 | * ] 9 | */ 10 | export default function GridBaseLayer({data, opacity}){ 11 | 12 | return new GridLayer({ 13 | id: data.id, 14 | data: data.data, 15 | pickable: data.properties.pickable || true, 16 | extruded: data.properties.extruded || true, 17 | cellSize: data.properties.cellSize || 200, 18 | elevationScale: data.properties.elevationScale || 4, 19 | getPosition: d => d.coordinates, 20 | opacity 21 | }); 22 | 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/GridCell.js: -------------------------------------------------------------------------------- 1 | import {GridCellLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {centroid: [-122.4, 37.7], 7 | * value: 100}, 8 | * ... 9 | * ] 10 | */ 11 | export default function GridCellBaseLayer({data, opacity}){ 12 | 13 | return new GridCellLayer({ 14 | id: data.id, 15 | data: data.data, 16 | pickable: data.properties.pickable || true, 17 | extruded: data.properties.extruded || true, 18 | cellSize: data.properties.cellSize || 200, 19 | elevationScale: data.properties.elevationScale || 5000, 20 | getPosition: d => d.centroid, 21 | getFillColor: d => [48, 128, d.value * 255, 255], 22 | getElevation: d => d.value, 23 | opacity 24 | }); 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/H3Cluster.js: -------------------------------------------------------------------------------- 1 | import {H3ClusterLayer} from '@deck.gl/geo-layers'; 2 | /** 3 | * Data format: 4 | * 5 | { 6 | "color": [R,G,B], 7 | "hexIds": [ 8 | "88283082b9fffff", 9 | "88283082b1fffff", 10 | "88283082b5fffff", 11 | "88283082b7fffff", 12 | "88283082bbfffff", 13 | "882830876dfffff" 14 | ] 15 | }, 16 | { 17 | * ] 18 | */ 19 | export default function H3ClusterBaseLayer({data, opacity}){ 20 | 21 | return new H3ClusterLayer({ 22 | id: data.id, 23 | data: data.data, 24 | pickable: data.properties.pickable || true, 25 | getHexagons: d => d.hexIds, 26 | getFillColor: d => d.color || [255, 255, 0], 27 | getLineColor: data.properties.getLineColor || [255, 255, 255], 28 | lineWidthMinPixels: data.properties.lineWidthMinPixels || 2, 29 | opacity 30 | }); 31 | 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/H3Hexagon.js: -------------------------------------------------------------------------------- 1 | import {H3HexagonLayer} from '@deck.gl/geo-layers'; 2 | /** 3 | * Data format: 4 | * 5 | { 6 | "color": [R,G,B], 7 | "hexIds": [ 8 | "88283082b9fffff", 9 | "88283082b1fffff", 10 | "88283082b5fffff", 11 | "88283082b7fffff", 12 | "88283082bbfffff", 13 | "882830876dfffff" 14 | ] 15 | }, 16 | { 17 | * ] 18 | */ 19 | export default function H3HexagonBaseLayer({data, opacity}){ 20 | 21 | return new H3HexagonLayer({ 22 | id: data.id, 23 | data: data.data, 24 | pickable: data.properties.pickable || true, 25 | extruded: data.properties.extruded || true, 26 | getHexagon: d => d.hex, 27 | getFillColor: d => d.color || [255, (1 - d.elevation / 500) * 255, 0], 28 | getElevation: d => d.elevation, 29 | elevationScale: data.properties.elevationScale || 20, 30 | opacity 31 | }); 32 | 33 | 34 | } 35 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Heatmap.js: -------------------------------------------------------------------------------- 1 | import {HeatmapLayer} from '@deck.gl/aggregation-layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {coordinates: [-122.42177834, 37.78346622], weight: 10}, 7 | * ... 8 | * ] 9 | */ 10 | export default function HeatmapBaseLayer({data, opacity}){ 11 | 12 | return new HeatmapLayer({ 13 | id: data.id, 14 | data: data.data, 15 | getPosition: d => d.coordinates, 16 | getWeight: d => d.weight, 17 | aggregation: 'SUM', 18 | colorRange: data.properties.colorRange || [[255,255,178],[254,217,118],[254,178,76],[253,141,60],[240,59,32],[189,0,38]], 19 | opacity 20 | }); 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Hexagon.js: -------------------------------------------------------------------------------- 1 | import {HexagonLayer} from '@deck.gl/aggregation-layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {coordinates: [-122.42177834, 37.78346622]}, 7 | * ... 8 | * ] 9 | */ 10 | export default function HexagonBaseLayer({data, opacity}){ 11 | 12 | return new HexagonLayer({ 13 | id: data.id, 14 | data: data.data, 15 | pickable: data.properties.pickable || true, 16 | extruded: data.properties.extruded || true, 17 | radius: data.properties.radius || 200, 18 | elevationScale: data.properties.elevationScale || 4, 19 | getPosition: d => d.coordinates, 20 | opacity 21 | }); 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Icon.js: -------------------------------------------------------------------------------- 1 | import {IconLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {coordinates: [-122.466233, 37.684638]}, 7 | * ... 8 | * ] 9 | */ 10 | export default function IconBaseLayer({data, opacity}){ 11 | 12 | return new IconLayer({ 13 | id: data.id, 14 | data: data.data, 15 | pickable: data.properties.pickable || true, 16 | // iconAtlas and iconMapping are required 17 | // getIcon: return a string 18 | getIcon: d => ({ 19 | url: d.icon, 20 | width: d.width || 128, 21 | height: d.height || 128, 22 | anchorY: d.anchorY || 128 23 | }), 24 | sizeScale: data.properties.sizeScale || 10, 25 | sizeMaxPixels: data.properties.sizeMaxPixels || 10, 26 | getPosition: d => [d.coordinates[0],d.coordinates[1],d.elevation || 30], 27 | opacity 28 | }); 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Line.js: -------------------------------------------------------------------------------- 1 | import {LineLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * { 7 | * inbound: 72633, 8 | * outbound: 74735, 9 | * from: { 10 | * name: '19th St. Oakland (19TH)', 11 | * coordinates: [-122.269029, 37.80787] 12 | * }, 13 | * to: { 14 | * name: '12th St. Oakland City Center (12TH)', 15 | * coordinates: [-122.271604, 37.803664] 16 | * }, 17 | * ... 18 | * ] 19 | */ 20 | export default function LineBaseLayer({data, opacity}){ 21 | 22 | return new LineLayer({ 23 | id: data.id, 24 | data: data.data, 25 | pickable: data.properties.pickable || true, 26 | getWidth: data.properties.width || 50, 27 | getSourcePosition: d => d.from.coordinates, 28 | getTargetPosition: d => d.to.coordinates, 29 | getColor: d => d.color || [200, 140, 0], 30 | opacity 31 | }); 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Path.js: -------------------------------------------------------------------------------- 1 | import {PathLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * { 7 | * path: [[-122.4, 37.7], [-122.5, 37.8], [-122.6, 37.85]], 8 | * name: 'Richmond - Millbrae', 9 | * color: [255, 0, 0] 10 | * }, 11 | * ... 12 | * ] 13 | */ 14 | export default function PathBaseLayer({data, opacity}){ 15 | 16 | return new PathLayer({ 17 | id: data.id, 18 | data: data.data, 19 | pickable: data.properties.pickable || true, 20 | widthScale: data.properties.widthScale || 20, 21 | widthMinPixels: data.properties.widthMinPixels || 2, 22 | getPath: d => d.path, 23 | getColor: d => d.color || [255, 0, 0], 24 | getWidth: d => d.width || 5, 25 | opacity 26 | }); 27 | 28 | 29 | } 30 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Scatterplot.js: -------------------------------------------------------------------------------- 1 | import {ScatterplotLayer} from '@deck.gl/layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {name: 'Colma (COLM)', address: '365 D Street, Colma CA 94014', exits: 4214, coordinates: [-122.466233, 37.684638]}, 7 | * ... 8 | * ] 9 | */ 10 | export default function ScatterplotBaseLayer({data, opacity}){ 11 | 12 | return new ScatterplotLayer({ 13 | id: data.id, 14 | data: data.data, 15 | pickable: data.path.properties.pickable || true, 16 | stroked: data.path.properties.stroked || true, 17 | filled: data.path.properties.filled || true, 18 | radiusScale: data.path.properties.radiusScale || 6, 19 | radiusMinPixels: data.path.properties.radiusMinPixels || 1, 20 | radiusMaxPixels: data.path.properties.radiusMaxPixels || 100, 21 | lineWidthMinPixels: data.path.properties.lineWidthMinPixels || 1, 22 | getPosition: d => d.coordinates, 23 | getRadius: d => Math.sqrt(d.exits), 24 | getFillColor: d => [255, 140, 0], 25 | getLineColor: d => [0, 0, 0], 26 | opacity 27 | }); 28 | 29 | } 30 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/Scenegraph.js: -------------------------------------------------------------------------------- 1 | import {ScenegraphLayer} from '@deck.gl/mesh-layers'; 2 | 3 | /** 4 | * Data format: 5 | * [ 6 | * {name: 'Colma (COLM)', code:'CM', address: '365 D Street, Colma CA 94014', exits: 4214, coordinates: [-122.466233, 37.684638]}, 7 | * ... 8 | * ] 9 | */ 10 | export default function ScenegraphBaseLayer({data, opacity}){ 11 | 12 | return new ScenegraphLayer({ 13 | id: data.id, 14 | data: data.data, 15 | pickable: data.properties.pickable || true, 16 | scenegraph: data.properties.scenegraph || 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb', 17 | getPosition: d => d.coordinates, 18 | getOrientation: d => [0, Math.random() * 180, 90], 19 | _animations: { 20 | '*': {speed: 5} 21 | }, 22 | sizeScale: data.properties.sizeScale || 500, 23 | _lighting: 'pbr', 24 | opacity 25 | }); 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/SimpleMesh.js: -------------------------------------------------------------------------------- 1 | import {SimpleMeshLayer} from '@deck.gl/mesh-layers'; 2 | import {OBJLoader} from "@loaders.gl/obj"; 3 | 4 | /** 5 | * Data format: 6 | * [ 7 | * { 8 | * position: [-122.45, 37.7], 9 | * angle: 0, 10 | * color: [255, 0, 0] 11 | * }, 12 | * { 13 | * position: [-122.46, 37.73], 14 | * angle: 90, 15 | * color: [0, 255, 0] 16 | * }, 17 | * ... 18 | * ] 19 | */ 20 | export default function SimpleMeshBaseLayer({data, opacity}){ 21 | 22 | return new SimpleMeshLayer({ 23 | id: data.id, 24 | data: data.data, 25 | mesh: data.properties.mesh || 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/humanoid_quad.obj', 26 | getPosition: d => [d.position[0],d.position[1],0], 27 | getColor: d => d.color, 28 | getOrientation: d => [0, d.angle, 0], 29 | loaders:[OBJLoader], 30 | sizeScale: data.properties.sizeScale || 1, 31 | opacity 32 | }); 33 | 34 | } 35 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/base/TextLayer.js: -------------------------------------------------------------------------------- 1 | import {TextLayer} from '@deck.gl/layers'; 2 | /** 3 | * Data format: 4 | * [ 5 | * {name: 'Colma (COLM)', address: '365 D Street, Colma CA 94014', coordinates: [-122.466233, 37.684638]}, 6 | * ... 7 | * ] 8 | */ 9 | export default function TextBaseLayer({data, opacity}){ 10 | 11 | return new TextLayer({ 12 | id: data.id, 13 | data: data.data, 14 | pickable: data.properties.pickable || true, 15 | getPosition: d => [d.coordinates[0],d.coordinates[1],20], 16 | getText: d => d.text, 17 | getAngle: 0, 18 | getTextAnchor: 'middle', 19 | getAlignmentBaseline: 'center', 20 | background: true, 21 | backgroundPadding: [3,3,3,3], 22 | getBackgroundColor: [255, 255, 255, 200], 23 | getBorderWidth: 1, 24 | billboard: true, 25 | getSize: 5, 26 | sizeScale: 2, 27 | opacity 28 | }); 29 | 30 | 31 | } 32 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/geojsonLayer.md: -------------------------------------------------------------------------------- 1 | # Geojson Layer 2 | 3 | to post a geojson layer to table `test` using `curl`, follow this schema 4 | 5 | ``` 6 | curl -v -d '{ 7 | "type": "FeatureCollection", 8 | "features": [ 9 | { 10 | "type": "Feature", 11 | "properties": { 12 | "stroke": "#555555", 13 | "stroke-width": 2, 14 | "stroke-opacity": 1, 15 | "fill": "#ff0000", 16 | "fill-opacity": 1 17 | }, 18 | "geometry": { 19 | "type": "Polygon", 20 | "coordinates": [ 21 | [ 22 | [ 23 | -71.08785152435301, 24 | 42.36458476210186 25 | ], 26 | [ 27 | -71.08394622802734, 28 | 42.367073865050585 29 | ], 30 | [ 31 | -71.07536315917967, 32 | 42.3621114156308 33 | ], 34 | [ 35 | -71.07175827026367, 36 | 42.3640615623146 37 | ], 38 | [ 39 | -71.07199430465698, 40 | 42.36563114860502 41 | ], 42 | [ 43 | -71.07624292373657, 44 | 42.36989578604455 45 | ], 46 | [ 47 | -71.08624219894409, 48 | 42.37117987666218 49 | ], 50 | [ 51 | -71.09549045562744, 52 | 42.36528235504046 53 | ], 54 | [ 55 | -71.08858108520508, 56 | 42.36005021919292 57 | ], 58 | [ 59 | -71.07965469360352, 60 | 42.362460226799854 61 | ], 62 | [ 63 | -71.08280897140503, 64 | 42.365139666205934 65 | ], 66 | [ 67 | -71.08785152435301, 68 | 42.36458476210186 69 | ] 70 | ] 71 | ] 72 | } 73 | } 74 | ] 75 | }' -H "Content-Type: application/json" https://cityio.media.mit.edu/api/table/test/geojson 76 | ``` 77 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/deckglLayers/index.js: -------------------------------------------------------------------------------- 1 | export { default as AccessLayer } from "./AccessLayer"; 2 | export { default as AggregatedTripsLayer } from "./AggregatedTripsLayer"; 3 | export { default as ABMLayer } from "./ABMLayer"; 4 | export { default as GridLayer } from "./GridLayer"; 5 | export { default as TextualLayer } from "./TextualLayer"; 6 | export { default as GeojsonLayer } from "./GeojsonLayer"; 7 | export { default as TileMapLayer } from "./TileMapLayer"; 8 | export { default as TrafficLayer } from "./TrafficLayer"; 9 | export {default as ArcBaseLayer} from "./base/Arc" 10 | export {default as ColumnBaseLayer} from "./base/Column" 11 | export {default as ContourBaseLayer} from "./base/Contour" 12 | export {default as GeoJsonBaseLayer} from "./base/GeoJson" 13 | export {default as GridBaseLayer} from "./base/Grid" 14 | export {default as GridCellBaseLayer} from "./base/GridCell" 15 | export {default as HeatmapBaseLayer} from "./base/Heatmap" 16 | export {default as HexagonBaseLayer} from "./base/Hexagon" 17 | export {default as IconBaseLayer} from "./base/Icon" 18 | export {default as LineBaseLayer} from "./base/Line" 19 | export {default as PathBaseLayer} from "./base/Path" 20 | export {default as ScatterplotBaseLayer} from "./base/Scatterplot" 21 | export {default as ScenegraphBaseLayer} from "./base/Scenegraph" 22 | export {default as SimpleMeshBaseLayer} from "./base/SimpleMesh" 23 | export {default as TextBaseLayer} from "./base/TextLayer" 24 | export {default as H3ClusterBaseLayer} from "./base/H3Cluster" 25 | export {default as H3HexagonBaseLayer} from "./base/H3Hexagon" 26 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/DeckglMap/index.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import PaintBrush from "../../../Components/PaintBrush"; 4 | import { LayerHoveredTooltip } from "../../../Components/LayerHoveredTooltip"; 5 | import DeckglBase from "./DeckglBase"; 6 | import "mapbox-gl/dist/mapbox-gl.css"; 7 | import { 8 | AccessLayer, 9 | AggregatedTripsLayer, 10 | ABMLayer, 11 | GridLayer, 12 | TextualLayer, 13 | GeojsonLayer, 14 | TileMapLayer, 15 | TrafficLayer, 16 | ArcBaseLayer, 17 | ColumnBaseLayer, 18 | ContourBaseLayer, 19 | GeoJsonBaseLayer, 20 | GridBaseLayer, 21 | GridCellBaseLayer, 22 | HeatmapBaseLayer, 23 | HexagonBaseLayer, 24 | IconBaseLayer, 25 | LineBaseLayer, 26 | PathBaseLayer, 27 | ScatterplotBaseLayer, 28 | ScenegraphBaseLayer, 29 | SimpleMeshBaseLayer, 30 | TextBaseLayer, 31 | H3ClusterBaseLayer, 32 | H3HexagonBaseLayer, 33 | } from "./deckglLayers"; 34 | import { processGridData } from "./deckglLayers/GridLayer"; 35 | import useWebSocket from "react-use-websocket"; 36 | import { cityIOSettings } from "../../../settings/settings"; 37 | 38 | export default function DeckGLMap() { 39 | // get cityio data from redux store 40 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 41 | // get menu state from redux store 42 | const menuState = useSelector((state) => state.menuState); 43 | const [draggingWhileEditing, setDraggingWhileEditing] = useState(false); 44 | const [selectedCellsState, setSelectedCellsState] = useState(); 45 | const [deckGLRef, setDeckGLRef] = useState(null); 46 | const [keyDownState, setKeyDownState] = useState(); 47 | const [mousePos, setMousePos] = useState(); 48 | const [mouseDown, setMouseDown] = useState(); 49 | const [hoveredObj, setHoveredObj] = useState(); 50 | const [GEOGRIDDATA, setGEOGRIDDATA] = useState(); 51 | 52 | // sets data from all hovered objected currently in the viewport 53 | const [layerHoveredData, setLayerHoveredData] = useState(); 54 | 55 | const pickingRadius = 40; 56 | const editModeToggle = menuState.editMenuState.EDIT_BUTTON; 57 | const selectedType = menuState.typesMenuState.SELECTED_TYPE; 58 | const layersMenu = menuState.layersMenuState; 59 | 60 | const toggleRotateCamera = menuState?.viewSettingsMenuState?.ROTATE_CHECKBOX; 61 | 62 | const { sendJsonMessage } = useWebSocket(cityIOSettings.cityIO.websocketURL, { 63 | share: true, 64 | shouldReconnect: () => true, 65 | }); 66 | 67 | // Send changes to cityIO 68 | useEffect(() => { 69 | if (!editModeToggle && GEOGRIDDATA) { 70 | let dataProps = []; 71 | for (let i = 0; i < GEOGRIDDATA.features.length; i++) { 72 | dataProps[i] = GEOGRIDDATA.features[i].properties; 73 | } 74 | sendJsonMessage({ 75 | type: "UPDATE_GRID", 76 | content: { 77 | geogriddata: dataProps, 78 | }, 79 | }); 80 | } 81 | // eslint-disable-next-line react-hooks/exhaustive-deps 82 | }, [editModeToggle]); 83 | 84 | // update the grid layer with every change to GEOGRIDDATA 85 | useEffect(() => { 86 | setGEOGRIDDATA(processGridData(cityIOdata)); 87 | // eslint-disable-next-line react-hooks/exhaustive-deps 88 | }, [cityIOdata.GEOGRIDDATA]); 89 | 90 | const layersKey = { 91 | TILE_MAP: TileMapLayer(), 92 | 93 | ABM: ABMLayer({ 94 | data: cityIOdata, 95 | selected: 96 | layersMenu && 97 | layersMenu.ABM_LAYER_CHECKBOX && 98 | layersMenu.ABM_LAYER_CHECKBOX.selected, 99 | 100 | opacity: 101 | layersMenu && 102 | layersMenu.ABM_LAYER_CHECKBOX && 103 | layersMenu.ABM_LAYER_CHECKBOX.slider, 104 | }), 105 | 106 | AGGREGATED_TRIPS: AggregatedTripsLayer({ 107 | data: cityIOdata, 108 | selected: 109 | layersMenu && 110 | layersMenu.ABM_LAYER_CHECKBOX && 111 | layersMenu.ABM_LAYER_CHECKBOX.selected, 112 | opacity: 113 | layersMenu && 114 | layersMenu.AGGREGATED_TRIPS_LAYER_CHECKBOX && 115 | layersMenu.AGGREGATED_TRIPS_LAYER_CHECKBOX.slider * 0.01, 116 | }), 117 | 118 | GRID: GridLayer({ 119 | data: GEOGRIDDATA, 120 | editOn: editModeToggle, 121 | state: { 122 | selectedType, 123 | keyDownState, 124 | selectedCellsState, 125 | pickingRadius, 126 | opacity: 127 | layersMenu && 128 | layersMenu.GRID_LAYER_CHECKBOX && 129 | layersMenu.GRID_LAYER_CHECKBOX.slider * 0.01, 130 | }, 131 | updaters: { 132 | setSelectedCellsState, 133 | setDraggingWhileEditing, 134 | setHoveredObj, 135 | }, 136 | deckGLRef: deckGLRef, 137 | }), 138 | 139 | ACCESS: AccessLayer({ 140 | setLayerHoveredData, 141 | data: cityIOdata, 142 | selected: 143 | layersMenu && 144 | layersMenu.ACCESS_LAYER_CHECKBOX && 145 | layersMenu.ACCESS_LAYER_CHECKBOX.selected, 146 | intensity: 147 | layersMenu && 148 | layersMenu.ACCESS_LAYER_CHECKBOX && 149 | layersMenu.ACCESS_LAYER_CHECKBOX.slider, 150 | }), 151 | 152 | TEXTUAL: TextualLayer({ 153 | data: cityIOdata, 154 | coordinates: GEOGRIDDATA && GEOGRIDDATA, 155 | opacity: 156 | layersMenu && 157 | layersMenu.TEXTUAL_LAYER_CHECKBOX && 158 | layersMenu.TEXTUAL_LAYER_CHECKBOX.slider * 0.01, 159 | }), 160 | 161 | GEOJSON: GeojsonLayer({ 162 | data: cityIOdata, 163 | opacity: 164 | layersMenu && 165 | layersMenu.GEOJSON_LAYER_CHECKBOX && 166 | layersMenu.GEOJSON_LAYER_CHECKBOX.slider * 0.01, 167 | }), 168 | 169 | TRAFFIC: TrafficLayer({ 170 | setLayerHoveredData, 171 | data: cityIOdata, 172 | opacity: 173 | layersMenu && 174 | layersMenu.TRAFFIC_LAYER_CHECKBOX && 175 | layersMenu.TRAFFIC_LAYER_CHECKBOX.slider * 0.01, 176 | }), 177 | }; 178 | 179 | function getLayerByType(type, content) { 180 | if (type === "text") { 181 | return TextBaseLayer({ 182 | data: content, 183 | opacity: 184 | layersMenu && 185 | layersMenu[content.id] && 186 | layersMenu[content.id].slider * 0.01, 187 | }); 188 | } else if (type === "arc") { 189 | return ArcBaseLayer({ 190 | data: content, 191 | opacity: 192 | layersMenu && 193 | layersMenu[content.id] && 194 | layersMenu[content.id].slider * 0.01, 195 | }); 196 | } else if (type === "heatmap") { 197 | return HeatmapBaseLayer({ 198 | data: content, 199 | opacity: 200 | layersMenu && 201 | layersMenu[content.id] && 202 | layersMenu[content.id].slider * 0.01, 203 | }); 204 | } else if (type === "column") { 205 | return ColumnBaseLayer({ 206 | data: content, 207 | opacity: 208 | layersMenu && 209 | layersMenu[content.id] && 210 | layersMenu[content.id].slider * 0.01, 211 | }); 212 | } else if (type === "contour") { 213 | return ContourBaseLayer({ 214 | data: content, 215 | opacity: 216 | layersMenu && 217 | layersMenu[content.id] && 218 | layersMenu[content.id].slider * 0.01, 219 | }); 220 | } else if (type === "geojsonbase") { 221 | return GeoJsonBaseLayer({ 222 | data: content, 223 | opacity: 224 | layersMenu && 225 | layersMenu[content.id] && 226 | layersMenu[content.id].slider * 0.01, 227 | }); 228 | } else if (type === "grid") { 229 | return GridBaseLayer({ 230 | data: content, 231 | opacity: 232 | layersMenu && 233 | layersMenu[content.id] && 234 | layersMenu[content.id].slider * 0.01, 235 | }); 236 | } else if (type === "gridCell") { 237 | return GridCellBaseLayer({ 238 | data: content, 239 | opacity: 240 | layersMenu && 241 | layersMenu[content.id] && 242 | layersMenu[content.id].slider * 0.01, 243 | }); 244 | } else if (type === "hexagon") { 245 | return HexagonBaseLayer({ 246 | data: content, 247 | opacity: 248 | layersMenu && 249 | layersMenu[content.id] && 250 | layersMenu[content.id].slider * 0.01, 251 | }); 252 | } else if (type === "icon") { 253 | return IconBaseLayer({ 254 | data: content, 255 | opacity: 256 | layersMenu && 257 | layersMenu[content.id] && 258 | layersMenu[content.id].slider * 0.01, 259 | }); 260 | } else if (type === "line") { 261 | return LineBaseLayer({ 262 | data: content, 263 | opacity: 264 | layersMenu && 265 | layersMenu[content.id] && 266 | layersMenu[content.id].slider * 0.01, 267 | }); 268 | } else if (type === "path") { 269 | return PathBaseLayer({ 270 | data: content, 271 | opacity: 272 | layersMenu && 273 | layersMenu[content.id] && 274 | layersMenu[content.id].slider * 0.01, 275 | }); 276 | } else if (type === "scatterplot") { 277 | return ScatterplotBaseLayer({ 278 | data: content, 279 | opacity: 280 | layersMenu && 281 | layersMenu[content.id] && 282 | layersMenu[content.id].slider * 0.01, 283 | }); 284 | } else if (type === "scenegraph") { 285 | return ScenegraphBaseLayer({ 286 | data: content, 287 | opacity: 288 | layersMenu && 289 | layersMenu[content.id] && 290 | layersMenu[content.id].slider * 0.01, 291 | }); 292 | } else if (type === "simpleMesh") { 293 | return SimpleMeshBaseLayer({ 294 | data: content, 295 | opacity: 296 | layersMenu && 297 | layersMenu[content.id] && 298 | layersMenu[content.id].slider * 0.01, 299 | }); 300 | } else if (type === "H3Cluster") { 301 | return H3ClusterBaseLayer({ 302 | data: content, 303 | opacity: 304 | layersMenu && 305 | layersMenu[content.id] && 306 | layersMenu[content.id].slider * 0.01, 307 | }); 308 | } else if (type === "H3Hexagon") { 309 | return H3HexagonBaseLayer({ 310 | data: content, 311 | opacity: 312 | layersMenu && 313 | layersMenu[content.id] && 314 | layersMenu[content.id].slider * 0.01, 315 | }); 316 | } 317 | } 318 | 319 | const layerOrder = [ 320 | "TEXT", 321 | "ICON", 322 | "MESH", 323 | "SCENEGRAPH", 324 | "SCATTERPLOT", 325 | "PATH", 326 | "LINE", 327 | "GRID_CELL", 328 | "GRID_BASE", 329 | "GEOJSON_BASE", 330 | "CONTOUR", 331 | "COLUMN", 332 | "ARC", 333 | "ABM", 334 | "AGGREGATED_TRIPS", 335 | "TILE_MAP", 336 | "GRID", 337 | "TEXTUAL", 338 | "GEOJSON", 339 | "ACCESS", 340 | "TRAFFIC", 341 | "HEATMAP", 342 | "HEXAGON", 343 | ]; 344 | 345 | const renderDeckLayers = () => { 346 | let layers = []; 347 | // ! [TEST] we stop loading the tile map layer as the base layer and instead use mapbox-gl 348 | // layers.push(layersKey["TILE_MAP"]); 349 | for (var layerNameString of layerOrder) { 350 | // toggle layers on and off 351 | if ( 352 | layersMenu && 353 | layersMenu[layerNameString + "_LAYER_CHECKBOX"] && 354 | layersMenu[layerNameString + "_LAYER_CHECKBOX"].isOn 355 | ) { 356 | layers.push(layersKey[layerNameString]); 357 | } 358 | } 359 | if (cityIOdata.layers) 360 | for (let i = 0; i < cityIOdata.layers.length; i++) { 361 | const moduleName = cityIOdata.layers[i].id; 362 | const moduleType = cityIOdata.layers[i].type; 363 | 364 | if ( 365 | layersMenu && 366 | layersMenu[moduleName] && 367 | layersMenu[moduleName].isOn 368 | ) { 369 | layers.push(getLayerByType(moduleType, cityIOdata.layers[i])); 370 | } 371 | } 372 | 373 | return layers; 374 | }; 375 | 376 | return ( 377 | <> 378 |
{ 380 | setKeyDownState(e.nativeEvent.key); 381 | }} 382 | onKeyUp={() => setKeyDownState(null)} 383 | onMouseMove={(e) => setMousePos(e.nativeEvent)} 384 | onMouseUp={() => setMouseDown(false)} 385 | onMouseDown={() => setMouseDown(true)} 386 | > 387 | {layerHoveredData && ( 388 | 392 | )} 393 | {/* only show if grid layer is on */} 394 | {layersMenu.GRID_LAYER_CHECKBOX && 395 | layersMenu.GRID_LAYER_CHECKBOX.isOn && ( 396 | 404 | )} 405 | 411 |
412 | 413 | ); 414 | } 415 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/EditMenu/index.js: -------------------------------------------------------------------------------- 1 | import { Button, Typography } from "@mui/material"; 2 | import { updateEditMenuState } from "../../../../redux/reducers/menuSlice"; 3 | import EditIcon from "@mui/icons-material/Edit"; 4 | import CloudUploadIcon from "@mui/icons-material/CloudUpload"; 5 | import { useState, useEffect } from "react"; 6 | import { useDispatch } from "react-redux"; 7 | 8 | export default function EditMenu() { 9 | const dispatch = useDispatch(); 10 | const [editMenu, setEditMenu] = useState({ EDIT_BUTTON: false }); 11 | 12 | // controls the menu state for the edit button 13 | const handleEditButtonClicks = (event) => { 14 | setEditMenu({ 15 | ...editMenu, 16 | [event.currentTarget.id]: !editMenu[event.currentTarget.id], 17 | }); 18 | }; 19 | 20 | useEffect(() => { 21 | // dispatch the edit menu state to the redux store 22 | dispatch(updateEditMenuState(editMenu)); 23 | // eslint-disable-next-line react-hooks/exhaustive-deps 24 | }, [editMenu]); 25 | 26 | return ( 27 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/LayersMenu/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | Slider, 3 | Checkbox, 4 | Typography, 5 | FormControlLabel, 6 | Box, 7 | } from "@mui/material"; 8 | import { useSelector, useDispatch } from "react-redux"; 9 | import { useEffect, useState } from "react"; 10 | import { expectedLayers } from "../../../../settings/settings"; 11 | import { updateLayersMenuState } from "../../../../redux/reducers/menuSlice"; 12 | 13 | function LayersMenu() { 14 | const dispatch = useDispatch(); 15 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 16 | const layersMenuReduxState = useSelector( 17 | (state) => state.menuState.layersMenuState 18 | ); 19 | 20 | // get the keys from cityIOdata 21 | const cityIOkeys = Object.keys(cityIOdata); 22 | 23 | // update the layer slider value 24 | const [sliderVal, setSliderVal] = useState(() => { 25 | const sv = {}; 26 | for (const menuItem in expectedLayers) { 27 | sv[menuItem] = expectedLayers[menuItem].initSliderValue; 28 | } 29 | return sv; 30 | }); 31 | 32 | // initial layer menu state 33 | let initState = {}; 34 | const [layersMenuState, setLayersMenuState] = useState(() => { 35 | for (const menuItem in expectedLayers) { 36 | initState[menuItem] = { 37 | isOn: expectedLayers[menuItem].initState, 38 | slider: expectedLayers[menuItem].initSliderValue, 39 | }; 40 | } 41 | return initState; 42 | }); 43 | 44 | useEffect(() => { 45 | dispatch(updateLayersMenuState(layersMenuState)); 46 | // eslint-disable-next-line react-hooks/exhaustive-deps 47 | }, [layersMenuState]); 48 | 49 | const updateSliderVal = (menuItem, val) => { 50 | setSliderVal({ ...sliderVal, [menuItem]: val }); 51 | }; 52 | 53 | const handleCheckboxEvent = (menuItem, e) => { 54 | setLayersMenuState({ 55 | ...layersMenuReduxState, 56 | [menuItem]: { 57 | ...layersMenuReduxState[menuItem], 58 | isOn: e, 59 | }, 60 | }); 61 | }; 62 | 63 | const commitSliderVal = (menuItem, val) => { 64 | setLayersMenuState({ 65 | ...layersMenuReduxState, 66 | [menuItem]: { 67 | ...layersMenuReduxState[menuItem], 68 | slider: val, 69 | }, 70 | }); 71 | }; 72 | 73 | const toggleListArr = []; 74 | const makeLayerControlsMenu = () => { 75 | // loop through the keys in cityIOdata and make a list of keys 76 | for (const menuItem in expectedLayers) { 77 | const moduleName = expectedLayers[menuItem].cityIOmoduleName; 78 | // if the module name is in the data for this CS instance, make a checkbox 79 | if (cityIOkeys.includes(moduleName)) { 80 | toggleListArr.push( 81 | 82 | 94 | handleCheckboxEvent(menuItem, e.target.checked) 95 | } 96 | /> 97 | } 98 | label={ 99 | 100 | {expectedLayers[menuItem].displayName} 101 | 102 | } 103 | /> 104 | 105 | {layersMenuState[menuItem] && layersMenuState[menuItem].isOn && ( 106 | commitSliderVal(menuItem, val)} 111 | onChange={(_, val) => updateSliderVal(menuItem, val)} 112 | value={sliderVal[menuItem] ?? 0} 113 | /> 114 | )} 115 | 116 | ); 117 | } 118 | } 119 | // loop through the keys in deckgl layers 120 | if(cityIOdata.layers) 121 | for (let i = 0; i < cityIOdata.layers.length; i++) { 122 | const moduleName = cityIOdata.layers[i].id; 123 | if(!layersMenuState[moduleName]){ 124 | setLayersMenuState({...layersMenuState, [moduleName]: { 125 | isOn: true, 126 | slider: 50, 127 | }}) 128 | } 129 | // if the module name is in the data for this CS instance, make a checkbox 130 | toggleListArr.push( 131 | 132 | 144 | handleCheckboxEvent(moduleName, e.target.checked) 145 | } 146 | /> 147 | } 148 | label={ 149 | 150 | {moduleName} 151 | 152 | } 153 | /> 154 | 155 | {layersMenuState[moduleName] && layersMenuState[moduleName].isOn && ( 156 | commitSliderVal(moduleName, val)} 161 | onChange={(_, val) => updateSliderVal(moduleName, val)} 162 | value={sliderVal[moduleName] ?? 50} 163 | /> 164 | )} 165 | 166 | ); 167 | 168 | } 169 | 170 | return toggleListArr; 171 | }; 172 | 173 | return makeLayerControlsMenu(); 174 | } 175 | 176 | export default LayersMenu; 177 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/ScenariosMenu/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { 4 | Typography, 5 | DialogActions, 6 | DialogContent, 7 | DialogContentText, 8 | DialogTitle, 9 | ListItem, 10 | Button, 11 | List, 12 | Dialog, 13 | IconButton, 14 | Tooltip, 15 | Badge, 16 | TextField, 17 | } from "@mui/material"; 18 | import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined'; 19 | import DeleteIcon from "@mui/icons-material/Delete"; 20 | import RestorePageOutlinedIcon from '@mui/icons-material/RestorePageOutlined'; 21 | import useWebSocket from "react-use-websocket" 22 | import { cityIOSettings } from "../../../../settings/settings"; 23 | 24 | export default function ScenariosMenu() { 25 | const [scenariosButtonsList, setScenariosButtonsList] = useState([]); 26 | const [scenariosBinButtonsList, setScenariosBinButtonsList] = useState([]); 27 | const [scenarioToRestore, setScenariosToRestore] = useState(); 28 | const [saveDialogState, setSaveDialogState] = useState(false); 29 | const [loadDialogState, setLoadDialogState] = useState(false); 30 | const [binDialogState, setBinDialogState] = useState(false); 31 | const [scenarioTextInput, setScenarioTextInput] = useState({ 32 | name: "", 33 | description: "", 34 | }); 35 | // get cityIO data from redux store 36 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 37 | 38 | const { sendJsonMessage } = useWebSocket( 39 | cityIOSettings.cityIO.websocketURL, 40 | { 41 | share: true, 42 | shouldReconnect: () => true, 43 | }, 44 | ) 45 | 46 | const handleSaveThisState = () => { 47 | handleClose(); 48 | const newScenario = { 49 | // ! to be updated from dynamic ui element 50 | name: scenarioTextInput.name || `noname`, 51 | description: 52 | scenarioTextInput.description || `no description yet.`, 53 | } 54 | sendJsonMessage({ 55 | type: "SAVE_SCENARIO", 56 | content: newScenario, 57 | }) 58 | 59 | 60 | }; 61 | 62 | const handleClose = () => { 63 | setLoadDialogState(false); 64 | setSaveDialogState(false); 65 | setBinDialogState(false); 66 | }; 67 | 68 | const handleOpenDialog = (scenario) => { 69 | // store to state the scenario to be restored 70 | setScenariosToRestore(scenario); 71 | // open dialog 72 | setLoadDialogState(true); 73 | }; 74 | 75 | const handleRestoreThisState = async () => { 76 | if (!scenarioToRestore) return; 77 | sendJsonMessage({ 78 | type: "RESTORE_SCENARIO", 79 | content: {name: scenarioToRestore.name}, 80 | }) 81 | handleClose(); 82 | }; 83 | 84 | const handleDeleteThisState = (scenario) => { 85 | // copy the scenarios array 86 | const tempArr = [...cityIOdata.scenarios]; 87 | // find the clicked scenario in the array 88 | var scnToDelete = tempArr.filter((obj) => { 89 | return obj.hash === scenario.hash; 90 | }); 91 | // find the index of the scenario to delete 92 | var index = tempArr.indexOf(scnToDelete[0]); 93 | if (index !== -1) { 94 | // remove the scenario from the array 95 | let scenarioToMod = tempArr[index] 96 | sendJsonMessage({ 97 | type: "MODIFY_SCENARIO", 98 | content: {name: scenarioToMod.name, isInBin:true}, 99 | }) 100 | } 101 | handleClose() 102 | }; 103 | 104 | const handleRestoreSce = (scenario) => { 105 | // copy the scenarios array 106 | const tempArr = [...cityIOdata.scenarios]; 107 | // find the clicked scenario in the array 108 | var scnToDelete = tempArr.filter((obj) => { 109 | return obj.hash === scenario.hash; 110 | }); 111 | // find the index of the scenario to delete 112 | var index = tempArr.indexOf(scnToDelete[0]); 113 | if (index !== -1) { 114 | // remove the scenario from the array 115 | let scenarioToMod = tempArr[index] 116 | sendJsonMessage({ 117 | type: "MODIFY_SCENARIO", 118 | content: {name: scenarioToMod.name, isInBin:false}, 119 | }) 120 | } 121 | handleClose() 122 | }; 123 | 124 | const createScenariosButtons = () => { 125 | const scenariosButtons = cityIOdata.scenarios.filter(x => !x.isInBin).map((scenario, i) => { 126 | return ( 127 | 128 | 135 | 156 | 157 | 158 | { 161 | handleDeleteThisState(scenario); 162 | }} 163 | aria-label="delete" 164 | size="medium" 165 | > 166 | 171 | 172 | 173 | ); 174 | }); 175 | return scenariosButtons; 176 | }; 177 | 178 | const createBinScenariosButtons = () => { 179 | const scenariosButtons = cityIOdata.scenarios.filter(x => x.isInBin).map((scenario, i) => { 180 | return ( 181 | 182 | 189 | 210 | 211 | 212 | { 215 | handleRestoreSce(scenario); 216 | }} 217 | aria-label="delete" 218 | size="large" 219 | > 220 | 225 | 226 | 227 | ); 228 | }); 229 | return scenariosButtons; 230 | }; 231 | 232 | useEffect(() => { 233 | // check if there are any scenarios in the cityIOdata 234 | if (!cityIOdata.scenarios) return; 235 | const scenariosButtons = createScenariosButtons(); 236 | setScenariosButtonsList(scenariosButtons); 237 | const scenariosBinButtons = createBinScenariosButtons(); 238 | setScenariosBinButtonsList(scenariosBinButtons); 239 | 240 | // eslint-disable-next-line react-hooks/exhaustive-deps 241 | }, [cityIOdata]); 242 | 243 | return ( 244 | <> 245 | 252 | 260 | 261 | 262 | 263 | {scenariosButtonsList} 264 | 265 | 266 | {"Save this Scenario"} 267 | 268 | 269 | Give your scenario a name and a description to help you remember 270 | what it is about. 271 | 272 | 273 | 274 | 280 | setScenarioTextInput({ 281 | ...scenarioTextInput, 282 | name: e.target.value, 283 | }) 284 | } 285 | /> 286 | 287 | 288 | 294 | setScenarioTextInput({ 295 | ...scenarioTextInput, 296 | description: e.target.value, 297 | }) 298 | } 299 | /> 300 | 301 | 302 | 303 | 304 | 305 | 308 | 309 | 310 | 311 | 312 | 313 | {"Revert to saved scenario?"} 314 | 315 | 316 | 317 | You can revert to this saved scenario by clicking the button below. 318 | Reverting will delete all changes made since the last commit. 319 | 320 | 321 | 322 | 323 | 326 | 327 | 328 | 329 | 330 | 331 | {"Bin"} 332 | 333 | 334 | The scenarios in the bin will be permanently deleted after 15 days. 335 | 336 | 337 | {scenariosBinButtonsList} 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | ); 346 | } 347 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/ScenariosMenu/scenarios.md: -------------------------------------------------------------------------------- 1 | # data structure for scenario list 2 | ``` 3 | 4 | [ 5 | { 6 | name: "Scenario 1", 7 | hash: "dfglkadfgkjn435rtegf", 8 | description: "this is a description", 9 | }, 10 | { 11 | name: "Scenario 2", 12 | hash: "dfglkadfgfjn435rtegf", 13 | description: "this is yet another a description", 14 | }, 15 | ]; 16 | */ 17 | ``` 18 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/SpecialLayersControlsMenu/ABMLayerControls.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | import { 4 | FormControlLabel, 5 | RadioGroup, 6 | Radio, 7 | Typography, 8 | FormControl, 9 | } from "@mui/material"; 10 | import { updateLayersMenuState } from "../../../../redux/reducers/menuSlice"; 11 | import CollapsableCard from "../../../../Components/CollapsableCard"; 12 | 13 | export default function ABMLayerControls() { 14 | const menuState = useSelector((state) => state.menuState); 15 | const layersMenuState = menuState.layersMenuState; 16 | const dispatch = useDispatch(); 17 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 18 | 19 | const abmData = cityIOdata.ABM2; 20 | const mode = abmData.attr.mode; 21 | const profile = abmData.attr.profile; 22 | 23 | const [radioValue, setRadioValue] = useState(null); 24 | 25 | const handleChange = (attrGroupName, item, index) => { 26 | setRadioValue(item); 27 | 28 | const newAbmLayerState = { 29 | ...layersMenuState, 30 | ABM_LAYER_CHECKBOX: { 31 | ...layersMenuState.ABM_LAYER_CHECKBOX, 32 | selected: { [attrGroupName]: index }, 33 | }, 34 | }; 35 | dispatch(updateLayersMenuState(newAbmLayerState)); 36 | }; 37 | 38 | // set the default value of the radio button to the first item in the list 39 | useEffect(() => { 40 | // first item in obj 41 | handleChange("mode", mode["1"].name, 1); 42 | // eslint-disable-next-line react-hooks/exhaustive-deps 43 | }, []); 44 | 45 | const createHeatMapArray = (attrGroupName, object) => { 46 | let heatMapArray = []; 47 | for (const item in object) { 48 | heatMapArray.push( 49 | } 52 | label={{object[item].name}} 53 | onChange={() => 54 | handleChange(attrGroupName, object[item].name, parseInt(item)) 55 | } 56 | checked={radioValue === object[item].name} 57 | /> 58 | ); 59 | } 60 | return ( 61 | 62 | {heatMapArray} 63 | 64 | ); 65 | }; 66 | 67 | return ( 68 | <> 69 | 74 | {createHeatMapArray("mode", mode)} 75 | {createHeatMapArray("profile", profile)} 76 | 77 | 78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/SpecialLayersControlsMenu/HeatmapLayerControls.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useSelector, useDispatch } from "react-redux"; 3 | import { 4 | FormControlLabel, 5 | RadioGroup, 6 | Radio, 7 | Typography, 8 | FormControl, 9 | } from "@mui/material"; 10 | import { updateLayersMenuState } from "../../../../redux/reducers/menuSlice"; 11 | import CollapsableCard from "../../../../Components/CollapsableCard"; 12 | 13 | export default function HeatmapLayerControls() { 14 | const menuState = useSelector((state) => state.menuState); 15 | const layersMenuState = menuState.layersMenuState; 16 | const dispatch = useDispatch(); 17 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 18 | const accessData = cityIOdata.access; 19 | const [radioValue, setRadioValue] = useState(); 20 | 21 | const handleChange = (item, index) => { 22 | setRadioValue(item); 23 | const newLayersMenuState = { 24 | ...layersMenuState, 25 | ACCESS_LAYER_CHECKBOX: { 26 | ...layersMenuState.ACCESS_LAYER_CHECKBOX, 27 | selected: index, 28 | }, 29 | }; 30 | 31 | dispatch(updateLayersMenuState(newLayersMenuState)); 32 | }; 33 | // set the default value of the radio button to the first item in the list 34 | useEffect(() => { 35 | handleChange(accessData.properties[0], 0); 36 | // eslint-disable-next-line react-hooks/exhaustive-deps 37 | }, []); 38 | 39 | const CreateHeatMapArray = () => { 40 | const accessArray = accessData.properties.map((item, index) => { 41 | return ( 42 | } 45 | label={{item}} 46 | onChange={() => handleChange(item, index)} 47 | checked={radioValue === item} 48 | /> 49 | ); 50 | }); 51 | return ( 52 | 53 | 54 | {accessArray} 55 | 56 | 57 | ); 58 | }; 59 | 60 | return ( 61 | <> 62 | 67 | 68 | 69 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/SpecialLayersControlsMenu/index.js: -------------------------------------------------------------------------------- 1 | // import the two special layers controls components from the same folder 2 | import HeatmapLayerControls from "./HeatmapLayerControls"; 3 | import ABMLayerControls from "./ABMLayerControls"; 4 | import { useSelector } from "react-redux"; 5 | 6 | export default function SpecialLayersControlsMenu() { 7 | const menuState = useSelector((state) => state.menuState); 8 | const layersMenuState = menuState.layersMenuState; 9 | 10 | const ABMLayerControlsDisplay = () => { 11 | if ( 12 | (layersMenuState.AGGREGATED_TRIPS_LAYER_CHECKBOX && 13 | layersMenuState.AGGREGATED_TRIPS_LAYER_CHECKBOX.isOn) || 14 | (layersMenuState.ABM_LAYER_CHECKBOX && 15 | layersMenuState.ABM_LAYER_CHECKBOX.isOn) 16 | ) { 17 | return ; 18 | } 19 | }; 20 | 21 | // return them to the menu container 22 | return ( 23 | <> 24 | {layersMenuState.ACCESS_LAYER_CHECKBOX && 25 | layersMenuState.ACCESS_LAYER_CHECKBOX.isOn && } 26 | {ABMLayerControlsDisplay()} 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/TableInfo/index.js: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import { Typography } from "@mui/material"; 3 | 4 | function TableInfo() { 5 | const cityIOtableName = useSelector( 6 | (state) => state.cityIOdataState.cityIOtableName 7 | ); 8 | 9 | return ( 10 | <> 11 | CityScope 12 | {cityIOtableName} 13 | 14 | ); 15 | } 16 | 17 | export default TableInfo; 18 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/TypesMenu/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { 3 | Slider, 4 | Card, 5 | Typography, 6 | ListItem, 7 | CardContent, 8 | Button, 9 | List, 10 | Divider, 11 | } from "@mui/material"; 12 | import { useSelector, useDispatch } from "react-redux"; 13 | import { updateTypesMenuState } from "../../../../redux/reducers/menuSlice"; 14 | 15 | export default function TypesListMenu() { 16 | const dispatch = useDispatch(); 17 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 18 | const landUseTypesList = cityIOdata.GEOGRID.properties.types; 19 | 20 | const cellSize = cityIOdata?.GEOGRID?.properties?.header?.cellSize; 21 | // covert the cell size to square kilometers 22 | const squareQmPerCellSqM = cellSize * cellSize; 23 | 24 | const [selectedType, setSelectedType] = useState(); 25 | const [localTypesState, setLocalTypesState] = useState(); 26 | // handle selected type 27 | const handleListItemClick = (typeProps, thisTypeName) => { 28 | typeProps = { ...typeProps, thisTypeName: thisTypeName }; 29 | setSelectedType(typeProps); 30 | }; 31 | 32 | useEffect(() => { 33 | dispatch( 34 | updateTypesMenuState({ 35 | SELECTED_TYPE: selectedType, 36 | }) 37 | ); 38 | // eslint-disable-next-line react-hooks/exhaustive-deps 39 | }, [selectedType]); 40 | 41 | // get the LBCS/NAICS types info 42 | const LBCS = selectedType && selectedType.LBCS; 43 | const NAICS = selectedType && selectedType.NAICS; 44 | // get type description text if exist 45 | let description = 46 | selectedType && selectedType.description ? selectedType.description : null; 47 | 48 | // create the types themselves 49 | const createTypesIcons = (typesList) => { 50 | let listMenuItemsArray = []; 51 | Object.keys(typesList).forEach((thisType, index) => { 52 | // get color 53 | let col = typesList[thisType].color; 54 | 55 | if (typeof col !== "string") { 56 | col = 57 | "rgb(" + 58 | typesList[thisType].color[0] + 59 | "," + 60 | typesList[thisType].color[1] + 61 | "," + 62 | typesList[thisType].color[2] + 63 | ")"; 64 | } 65 | // check if this type has height prop 66 | listMenuItemsArray.push( 67 |
68 | 69 | 84 | 85 | 86 | {selectedType && selectedType.thisTypeName === thisType && ( 87 | 88 | 93 | 94 | {description && ( 95 | {description} 96 | )} 97 | 103 | 104 | {selectedType && 105 | selectedType.thisTypeName && 106 | selectedType.height && ( 107 |
108 | Set Floors 109 | {localTypesState && 110 | Array.isArray(localTypesState.height) && ( 111 | 112 | Each cell adds{" "} 113 | {squareQmPerCellSqM * localTypesState.height[1]} 114 | m² 115 | 116 | )} 117 | 118 | 124 | setLocalTypesState((localTypesState) => { 125 | const update = { ...localTypesState }; 126 | const newHeight = [ 127 | selectedType.height[0], 128 | val, 129 | selectedType.height[2], 130 | ]; 131 | Object.assign(update, { height: newHeight }); 132 | return update; 133 | }) 134 | } 135 | // on change committed update the redux state 136 | onChangeCommitted={(e, val) => { 137 | setSelectedType({ 138 | ...selectedType, 139 | height: [ 140 | selectedType.height[0], 141 | val, 142 | selectedType.height[2], 143 | ], 144 | }); 145 | }} 146 | min={selectedType.height[0]} 147 | value={ 148 | localTypesState && 149 | localTypesState[selectedType] && 150 | localTypesState[selectedType].height[1] 151 | } 152 | max={selectedType.height[2]} 153 | /> 154 |
155 | )} 156 | {LBCS && ( 157 |
158 | LBCS 159 | 160 | {JSON.stringify(LBCS, null, "\t")} 161 | 162 |
163 | )} 164 | {NAICS && ( 165 |
166 | NAICS 167 | 168 | {JSON.stringify(NAICS, null, "\t")} 169 | 170 |
171 | )} 172 | 173 | 174 | 175 | )} 176 |
177 | ); 178 | }); 179 | 180 | return ( 181 | 190 | {listMenuItemsArray} 191 | 192 | ); 193 | }; 194 | 195 | return <>{createTypesIcons(landUseTypesList)}; 196 | } 197 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/ViewSettingsMenu/AnimationSubmenu.js: -------------------------------------------------------------------------------- 1 | import { useLayoutEffect, useState } from "react"; 2 | import { Typography, Slider, Switch, List, ListItem } from "@mui/material"; 3 | import { viewControlCheckboxes } from "../../../../settings/settings"; 4 | import { updateViewSettingsMenuState } from "../../../../redux/reducers/menuSlice"; 5 | import { useDispatch } from "react-redux"; 6 | 7 | function AnimationSubmenu() { 8 | const dispatch = useDispatch(); 9 | 10 | const [viewSettingsMenuState, setViewSettingsMenuState] = useState(() => { 11 | let initState = {}; 12 | for (const menuItem in viewControlCheckboxes) { 13 | initState[menuItem] = { 14 | isOn: viewControlCheckboxes[menuItem].initState, 15 | slider: 16 | viewControlCheckboxes[menuItem].initSliderValue && 17 | viewControlCheckboxes[menuItem].initSliderValue, 18 | }; 19 | } 20 | return initState; 21 | }); 22 | 23 | // return the menu state to parent component 24 | useLayoutEffect(() => { 25 | // dispatch this menu state to the redux store 26 | dispatch(updateViewSettingsMenuState(viewSettingsMenuState)); 27 | // eslint-disable-next-line react-hooks/exhaustive-deps 28 | }, [viewSettingsMenuState]); 29 | 30 | const [sliderVal, setSliderVal] = useState({}); 31 | const updateSliderVal = (menuItem, val) => { 32 | setSliderVal({ ...sliderVal, [menuItem]: val }); 33 | 34 | setViewSettingsMenuState({ 35 | ...viewSettingsMenuState, 36 | [menuItem]: { 37 | ...viewSettingsMenuState[menuItem], 38 | slider: val, 39 | }, 40 | }); 41 | }; 42 | 43 | const createCheckboxes = (menuItemList) => { 44 | const toggleListArr = []; 45 | for (const menuItem in menuItemList) { 46 | // check if we add slider to this menuItem 47 | const hasSlider = menuItemList[menuItem].initSliderValue; 48 | 49 | toggleListArr.push( 50 |
51 | 52 | 60 | setViewSettingsMenuState({ 61 | ...viewSettingsMenuState, 62 | [menuItem]: { 63 | ...viewSettingsMenuState[menuItem], 64 | isOn: e.target.checked, 65 | }, 66 | }) 67 | } 68 | /> 69 | 70 | 74 | {menuItemList[menuItem].displayName} 75 | 76 | 77 | {hasSlider && 78 | viewSettingsMenuState[menuItem] && 79 | viewSettingsMenuState[menuItem].isOn && ( 80 | <> 81 | 82 | {menuItemList[menuItem].sliderTitle} 83 | 84 | 85 | 92 | updateSliderVal(menuItem, val) 93 | } 94 | /> 95 | 96 | 97 | )} 98 |
99 | ); 100 | } 101 | return toggleListArr; 102 | }; 103 | 104 | return {createCheckboxes(viewControlCheckboxes)}; 105 | } 106 | 107 | export default AnimationSubmenu; 108 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/ViewSettingsMenu/ViewAnglesSubmenu.js: -------------------------------------------------------------------------------- 1 | import { useLayoutEffect, useState } from "react"; 2 | import { ButtonGroup, Button, List } from "@mui/material"; 3 | import { viewControlButtons } from "../../../../settings/settings"; 4 | import { updateViewSettingsMenuState } from "../../../../redux/reducers/menuSlice"; 5 | import { useDispatch } from "react-redux"; 6 | 7 | function ViewAnglesSubmenu() { 8 | const dispatch = useDispatch(); 9 | 10 | const [viewSettingsMenuState, setViewSettingsMenuState] = useState(); 11 | 12 | // return the menu state to parent component 13 | useLayoutEffect(() => { 14 | // dispatch this menu state to the redux store 15 | dispatch(updateViewSettingsMenuState(viewSettingsMenuState)); 16 | // eslint-disable-next-line react-hooks/exhaustive-deps 17 | }, [viewSettingsMenuState]); 18 | 19 | const handleButtonClicks = (thisButton) => { 20 | setViewSettingsMenuState({ 21 | ...viewSettingsMenuState, 22 | VIEW_CONTROL_BUTTONS: thisButton, 23 | }); 24 | }; 25 | 26 | // create a button group for the view control buttons 27 | const createViewControlButtons = (viewControlButtons) => { 28 | const buttonsArr = []; 29 | for (const thisButton in viewControlButtons) { 30 | buttonsArr.push( 31 | 38 | ); 39 | } 40 | return ( 41 | 42 | {buttonsArr} 43 | 44 | ); 45 | }; 46 | 47 | return {createViewControlButtons(viewControlButtons)}; 48 | } 49 | 50 | export default ViewAnglesSubmenu; 51 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/ViewSettingsMenu/index.js: -------------------------------------------------------------------------------- 1 | import { List } from "@mui/material"; 2 | // import AnimationSubmenu from "./AnimationSubmenu"; 3 | import ViewAnglesSubmenu from "./ViewAnglesSubmenu"; 4 | 5 | function ViewSettingsMenu() { 6 | return ( 7 | 8 | 9 | {/* */} 10 | 11 | ); 12 | } 13 | 14 | export default ViewSettingsMenu; 15 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/MenuContainer/index.js: -------------------------------------------------------------------------------- 1 | import { Grid, Box } from "@mui/material"; 2 | import TypesMenu from "./TypesMenu"; 3 | import LayersMenu from "./LayersMenu"; 4 | import ViewSettingsMenu from "./ViewSettingsMenu"; 5 | import ScenariosMenu from "./ScenariosMenu"; 6 | import ResizableDrawer from "../../../Components/ResizableDrawer"; 7 | import EditMenu from "./EditMenu"; 8 | import TableInfo from "./TableInfo"; 9 | import SpecialLayersControlsMenu from "./SpecialLayersControlsMenu/"; 10 | import CollapsableCard from "../../../Components/CollapsableCard"; 11 | 12 | function MenuContainer() { 13 | const menuItemsArray = [ 14 | { 15 | component: , 16 | collapse: true, 17 | }, 18 | 19 | { 20 | component: ( 21 | <> 22 | 23 | 24 | 25 | ), 26 | collapse: false, 27 | title: "Edit Mode", 28 | subheader: "Select Types & Edit", 29 | }, 30 | { 31 | component: , 32 | collapse: false, 33 | title: "Scenarios", 34 | subheader: "Save and Load Scenarios", 35 | }, 36 | { 37 | component: ( 38 | <> 39 | 40 | 41 | 42 | ), 43 | collapse: true, 44 | title: "Layers", 45 | subheader: "Layers visibility", 46 | }, 47 | 48 | { 49 | component: , 50 | collapse: false, 51 | title: "View Settings", 52 | subheader: "Toggle different visibility settings", 53 | }, 54 | ]; 55 | 56 | const MenuItems = () => { 57 | const m = []; 58 | 59 | menuItemsArray.forEach((item, index) => { 60 | m.push( 61 | 62 | 68 | {item.component} 69 | 70 | 71 | ); 72 | }); 73 | return m; 74 | }; 75 | 76 | return ( 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | ); 85 | } 86 | 87 | export default MenuContainer; 88 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/VisContainer/AreaCalc/index.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; 4 | import { Doughnut } from "react-chartjs-2"; 5 | import ChartDataLabels from "chartjs-plugin-datalabels"; 6 | import { 7 | Switch, 8 | FormGroup, 9 | FormControlLabel, 10 | Typography, 11 | } from "@mui/material/"; 12 | 13 | export const options = { 14 | plugins: { 15 | legend: { 16 | display: true, 17 | position: "left", 18 | align: "center", 19 | textDirection: "ltr", 20 | 21 | labels: { 22 | usePointStyle: true, 23 | font: function (context) { 24 | var avgSize = Math.round( 25 | (context.chart.height + context.chart.width) / 2 26 | ); 27 | var size = Math.round(avgSize / 40); 28 | return { 29 | size: size > 8 ? size : 8, 30 | }; 31 | }, 32 | }, 33 | }, 34 | 35 | tooltip: { 36 | callbacks: { 37 | label: (value) => { 38 | const name = value.label; 39 | const val = `${value.parsed.toFixed(0) || 0} m²`; 40 | const areaSqFt = `${Math.floor(value.parsed * 10.7639) || 0} ft²`; 41 | 42 | return `${name} [${val}] [${areaSqFt}]`; 43 | }, 44 | }, 45 | }, 46 | datalabels: { 47 | anchor: "center", //start, center, end 48 | rotation: function (context) { 49 | const valuesBefore = context.dataset.data 50 | .slice(0, context.dataIndex) 51 | .reduce((a, b) => a + b, 0); 52 | const sum = context.dataset.data.reduce((a, b) => a + b, 0); 53 | const rotation = 54 | ((valuesBefore + context.dataset.data[context.dataIndex] / 2) / sum) * 55 | 360; 56 | return rotation < 180 ? rotation - 90 : rotation + 90; 57 | }, 58 | 59 | color: (context) => { 60 | const color = context.dataset.borderColor[context.dataIndex]; 61 | return color; 62 | }, 63 | 64 | formatter: (value, context) => { 65 | // up to 5 letters of the label 66 | const label = context.chart.data.labels[context.dataIndex].slice(0, 10); 67 | const area = value.toFixed(0); 68 | // add the area in millions of square feet 69 | const areaSqFt = Math.floor(area * 10.7639); 70 | return `${label}..\n${area} m² \n${areaSqFt} ft²`; 71 | }, 72 | font: (context) => { 73 | var avgSize = Math.round( 74 | (context.chart.height + context.chart.width) / 2 75 | ); 76 | var size = Math.round(avgSize / 80); 77 | 78 | return { 79 | size: size > 5 ? size : 0, 80 | }; 81 | }, 82 | }, 83 | }, 84 | }; 85 | 86 | export default function AreaCalc() { 87 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 88 | const [chartData, setChartData] = useState({ 89 | labels: [], 90 | datasets: [], 91 | }); 92 | 93 | const [onlyInteractive, setOnlyInteractive] = useState(false); 94 | 95 | ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels); 96 | 97 | const createChartData = (geoGridData) => { 98 | const cellSize = cityIOdata?.GEOGRID?.properties?.header?.cellSize; 99 | // covert the cell size to square kilometers 100 | const cellSquareMeters = cellSize * cellSize; 101 | 102 | const data = { 103 | labels: [], 104 | datasets: [ 105 | { 106 | label: "Area Calculation", 107 | data: [], 108 | backgroundColor: [], 109 | borderColor: [], 110 | borderWidth: 1, 111 | }, 112 | ], 113 | }; 114 | 115 | geoGridData.forEach((gridCellData) => { 116 | // if the switch is on, only show interactive cells 117 | if (onlyInteractive && !gridCellData.interactive) return; 118 | 119 | const typeName = gridCellData.name; 120 | if ( 121 | !typeName || 122 | typeName === "None" || 123 | typeName === "none" || 124 | typeName === "" 125 | ) { 126 | // typeName = "Unknown type..."; 127 | return; 128 | } 129 | 130 | // check if the cell height val is an array of values [min,this, max] 131 | const floors = Array.isArray(gridCellData.height) 132 | ? gridCellData.height[1] 133 | : // if not, just use the value 134 | gridCellData.height 135 | ? // if the value is undefined, set it to 0 136 | gridCellData.height 137 | : 0; 138 | 139 | // function to add the value to the data array at existing label 140 | const addAreaToExistingType = (typeName, floors, squareQmPerCell) => { 141 | const index = data.labels.indexOf(typeName); 142 | // add the value to the data array at existing label 143 | data.datasets[0].data[index] += 144 | floors > 0 ? squareQmPerCell * floors : squareQmPerCell; 145 | }; 146 | 147 | // check if this type is already in the array of labels 148 | // if it's already there, add the value to the data array at existing label 149 | if (data.labels.includes(typeName)) { 150 | addAreaToExistingType(typeName, floors, cellSquareMeters); 151 | } else { 152 | // if not, add it to the array of labels and add a new data point 153 | data.labels.push(typeName); 154 | data.datasets[0].data.push(0); 155 | data.datasets[0].backgroundColor.push( 156 | `rgba(${gridCellData.color[0]}, ${gridCellData.color[1]}, ${gridCellData.color[2]}, 0.2)` 157 | ); 158 | data.datasets[0].borderColor.push( 159 | `rgba(${gridCellData.color[0]}, ${gridCellData.color[1]}, ${gridCellData.color[2]}, 0.8)` 160 | ); 161 | addAreaToExistingType(typeName, floors, cellSquareMeters); 162 | } 163 | }); 164 | 165 | setChartData(data); 166 | }; 167 | 168 | useEffect(() => { 169 | if (!cityIOdata.GEOGRIDDATA) return; 170 | createChartData(cityIOdata.GEOGRIDDATA); 171 | // eslint-disable-next-line react-hooks/exhaustive-deps 172 | }, [cityIOdata, onlyInteractive]); 173 | 174 | // on change of the switch, update the chart data to only show interactive cells 175 | const handleSwitchChange = (event) => { 176 | setOnlyInteractive(event.target.checked); 177 | }; 178 | 179 | return ( 180 | <> 181 | {cityIOdata.GEOGRIDDATA && ( 182 | <> 183 | 184 | 185 | } 187 | label={ 188 | 189 | {onlyInteractive 190 | ? `display only interactive cells` 191 | : `display all cells`} 192 | 193 | } 194 | /> 195 | 196 | 197 | )} 198 | 199 | ); 200 | } 201 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/VisContainer/BarChart/index.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { 4 | Chart as ChartJS, 5 | CategoryScale, 6 | LinearScale, 7 | BarElement, 8 | Title, 9 | Tooltip, 10 | Legend, 11 | } from "chart.js"; 12 | import { Bar } from "react-chartjs-2"; 13 | import { numberToColorHsl } from "../../../../utils/utils"; 14 | 15 | ChartJS.register( 16 | CategoryScale, 17 | LinearScale, 18 | BarElement, 19 | Title, 20 | Tooltip, 21 | Legend 22 | ); 23 | 24 | export const options = { 25 | plugins: { 26 | // format the tooltip to show the value as a percentage 27 | tooltip: { 28 | callbacks: { 29 | label: function (context) { 30 | const val = `${(context.parsed.y * 100).toFixed(2) || 0}%`; 31 | // if no description is available, only show the value 32 | if ( 33 | !context.dataset.descriptions || 34 | context.dataset.descriptions[context.dataIndex] === undefined 35 | ) { 36 | return [`${val}`]; 37 | } 38 | // also add description to the tooltip if available 39 | const description = context.dataset.descriptions[context.dataIndex]; 40 | // if description is longer than 30 characters, split it into two lines 41 | if (description.length > 30) { 42 | const splitIndex = description.lastIndexOf(" ", 30); 43 | return [ 44 | `${val}`, 45 | `${description.slice(0, splitIndex)}`, 46 | `${description.slice(splitIndex + 1)}`, 47 | ]; 48 | } 49 | return [`${val}`, `${description}`]; 50 | }, 51 | }, 52 | }, 53 | 54 | legend: { 55 | display: false, 56 | }, 57 | 58 | datalabels: { 59 | display: false, 60 | }, 61 | }, 62 | maintainAspectRatio: true, 63 | aspectRatio: 1, 64 | 65 | scales: { 66 | y: { 67 | suggestedMin: 0, 68 | suggestedMax: 1, 69 | 70 | grid: { 71 | color: "#414141", 72 | }, 73 | pointLabels: { 74 | color: "#414141", 75 | }, 76 | ticks: { 77 | color: "#414141", 78 | format: { 79 | style: "percent", 80 | }, 81 | }, 82 | }, 83 | }, 84 | responsive: true, 85 | }; 86 | 87 | export const noData = { 88 | labels: ["no data..."], 89 | datasets: [ 90 | { 91 | label: "No indicator data...", 92 | data: [0], 93 | backgroundColor: "#696969", 94 | }, 95 | ], 96 | }; 97 | 98 | export default function BarChart() { 99 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 100 | const [barChartData, setBarChartData] = useState(); 101 | 102 | useEffect(() => { 103 | if (!cityIOdata.indicators) { 104 | setBarChartData(noData); 105 | } else { 106 | const d = createBarChartData(cityIOdata.indicators); 107 | setBarChartData(d); 108 | } 109 | // eslint-disable-next-line react-hooks/exhaustive-deps 110 | }, [cityIOdata]); 111 | 112 | const createBarChartData = (indicators) => { 113 | let barChartData = { 114 | labels: [], 115 | // add descriptions array to the dataset 116 | datasets: [ 117 | { 118 | descriptions: [], 119 | label: "Chart Data", 120 | data: [], 121 | backgroundColor: [], 122 | borderColor: [], 123 | borderWidth: 1, 124 | }, 125 | ], 126 | }; 127 | 128 | for (let i = 0; i < indicators.length; i++) { 129 | if (indicators[i].viz_type === "bar") { 130 | barChartData.labels.push(indicators[i].name); 131 | barChartData.datasets[0].data.push(indicators[i].value); 132 | var rgb = numberToColorHsl(indicators[i].value, 0, 1); 133 | barChartData.datasets[0].backgroundColor.push( 134 | `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)` 135 | ); 136 | barChartData.datasets[0].borderColor.push( 137 | `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)` 138 | ); 139 | 140 | // push description value to the array if available 141 | indicators[i].description 142 | ? barChartData.datasets[0].descriptions.push( 143 | indicators[i].description 144 | ) 145 | : barChartData.datasets[0].descriptions.push( 146 | "No description available" 147 | ); 148 | } 149 | } 150 | return barChartData; 151 | }; 152 | 153 | return ( 154 | <> 155 | {barChartData && ( 156 | 157 | )} 158 | 159 | ); 160 | } 161 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/VisContainer/RadarChart/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | Chart as ChartJS, 3 | RadialLinearScale, 4 | PointElement, 5 | LineElement, 6 | Filler, 7 | Tooltip, 8 | Legend, 9 | } from "chart.js"; 10 | import { Radar } from "react-chartjs-2"; 11 | import { useSelector } from "react-redux"; 12 | import { useState, useEffect } from "react"; 13 | 14 | const options = { 15 | plugins: { 16 | tooltip: { 17 | callbacks: { 18 | // display tooltip with indicator name, value and description (if available) 19 | label: (value) => { 20 | const val = `${(value.parsed.r * 100).toFixed(2) || 0}%`; 21 | // if no description is available, only show the value 22 | if ( 23 | !value.dataset.descriptions || 24 | value.dataset.descriptions[value.dataIndex] === undefined 25 | ) { 26 | return [`${val}`]; 27 | } 28 | 29 | // also add description to the tooltip if available 30 | const description = value.dataset.descriptions[value.dataIndex]; 31 | // if description is longer than 30 characters, split it into two lines 32 | if (description.length > 30) { 33 | const splitIndex = description.lastIndexOf(" ", 30); 34 | return [ 35 | `${val}`, 36 | `${description.slice(0, splitIndex)}`, 37 | `${description.slice(splitIndex + 1)}`, 38 | ]; 39 | } 40 | return [`${val}`, `${description}`]; 41 | }, 42 | }, 43 | }, 44 | 45 | datalabels: { 46 | display: false, 47 | }, 48 | }, 49 | 50 | scales: { 51 | r: { 52 | ticks: { 53 | display: false, 54 | backdropColor: 'rgba(0, 0, 0, 0)', // transparent background 55 | }, 56 | angleLines: { 57 | color: "#696969", 58 | }, 59 | suggestedMin: 0, 60 | suggestedMax: 1, 61 | grid: { 62 | color: "#959595", 63 | circular: true, 64 | }, 65 | pointLabels: { 66 | color: "#bcbcbc", 67 | // reduce font size to fit labels 68 | font: function (context) { 69 | var avgSize = Math.round( 70 | (context.chart.height + context.chart.width) / 2 71 | ); 72 | var size = Math.round(avgSize / 80); 73 | return { 74 | size: size > 8 ? size : 8, 75 | }; 76 | }, 77 | }, 78 | }, 79 | }, 80 | }; 81 | 82 | const optionsNoData = { 83 | scales: { 84 | r: { 85 | angleLines: { 86 | color: "#363636", 87 | }, 88 | grid: { 89 | color: "#363636", 90 | circular: true, 91 | }, 92 | pointLabels: { 93 | color: "#363636", 94 | }, 95 | ticks: { 96 | color: "#363636", 97 | backdropColor: 'rgba(0, 0, 0, 0)', // transparent background 98 | }, 99 | }, 100 | }, 101 | }; 102 | 103 | const noData = { 104 | labels: [null, null, null], 105 | datasets: [ 106 | { 107 | label: "Waiting for data...", 108 | data: [null, null, null], 109 | backgroundColor: "#00000000", 110 | borderColor: "#00000000", 111 | borderWidth: 1, 112 | }, 113 | ], 114 | }; 115 | 116 | export default function RadarChart() { 117 | ChartJS.register( 118 | RadialLinearScale, 119 | PointElement, 120 | LineElement, 121 | Filler, 122 | Tooltip, 123 | Legend 124 | ); 125 | 126 | const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); 127 | const [radarData, setRadarData] = useState(); 128 | 129 | const createRadarData = (indicators) => { 130 | let radarData = { 131 | labels: [], 132 | datasets: [ 133 | { 134 | label: "Project Values", 135 | data: [], 136 | backgroundColor: "#42a4f573", 137 | borderColor: "#42a5f5", 138 | borderWidth: 1.5, 139 | // add descriptions array to the dataset 140 | descriptions: [], 141 | }, 142 | { 143 | label: "reference", 144 | data: [], 145 | backgroundColor: "#55555581", 146 | borderColor: "#b4b4b4", 147 | borderWidth: 1, 148 | // add descriptions array to the dataset 149 | descriptions: [], 150 | }, 151 | ], 152 | }; 153 | 154 | for (let i = 0; i < indicators.length; i++) { 155 | if (indicators[i].viz_type === "radar") { 156 | radarData.labels.push(indicators[i].name); 157 | radarData.datasets[0].data.push(indicators[i].value); 158 | radarData.datasets[0].label = cityIOdata?.tableName; 159 | 160 | // push description value to the array if available 161 | indicators[i].description 162 | ? radarData.datasets[0].descriptions.push(indicators[i].description) 163 | : radarData.datasets[0].descriptions.push("No description available"); 164 | 165 | // push reference value to the array 166 | radarData.datasets[1].data.push(indicators[i].ref_value); 167 | } 168 | } 169 | 170 | return radarData; 171 | }; 172 | 173 | useEffect(() => { 174 | if (!cityIOdata.indicators) { 175 | setRadarData(noData); 176 | } else { 177 | const d = createRadarData(cityIOdata.indicators); 178 | setRadarData(d); 179 | } 180 | // eslint-disable-next-line react-hooks/exhaustive-deps 181 | }, [cityIOdata]); 182 | 183 | return ( 184 | <> 185 | {radarData && ( 186 | 190 | )} 191 | 192 | ); 193 | } 194 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/VisContainer/index.js: -------------------------------------------------------------------------------- 1 | import { Grid, Box } from "@mui/material"; 2 | import RadarChart from "./RadarChart"; 3 | import BarChart from "./BarChart"; 4 | import AreaCalc from "./AreaCalc"; 5 | import ResizableDrawer from "../../../Components/ResizableDrawer"; 6 | import CollapsableCard from "../../../Components/CollapsableCard"; 7 | 8 | function VisContainer() { 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 27 | 28 | 34 | 35 | 36 | 37 | 38 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | } 53 | 54 | export default VisContainer; 55 | -------------------------------------------------------------------------------- /src/views/CityScopeJS/index.js: -------------------------------------------------------------------------------- 1 | import CityIO from "../../Components/CityIO"; 2 | import { useSelector } from "react-redux"; 3 | import MenuContainer from "./MenuContainer"; 4 | import DeckGLMap from "./DeckglMap/index"; 5 | import VisContainer from "./VisContainer"; 6 | 7 | export default function CityScopeJS() { 8 | const cityIOisDone = useSelector( 9 | (state) => state.cityIOdataState.cityIOisDone 10 | ); 11 | const tableName = useSelector( 12 | (state) => state.cityIOdataState.cityIOtableName 13 | ); 14 | 15 | return ( 16 | <> 17 | {/* if we got a cityIO table name, start cityIO module */} 18 | {tableName && } 19 | {/* if cityIO module is done loading, start the CSjs app */} 20 | {cityIOisDone && ( 21 | <> 22 |
23 | 24 |
25 | 26 | 27 | 28 | )} 29 | 30 | ); 31 | } 32 | --------------------------------------------------------------------------------