Frontend

This monorepo hosts frontend packages and applications of the <a href="https://globalfishingwatch.org/map">GlobalFishingWatch</a> ecosystem.

Packages

All of them availables with the @globalfishingwatch/ prefix:

| | | | ----------------------------------------------- | ------------------------------------------------------------------------- | | api-client | JS library to simplify GFW API login and resources fetch | | api-types | API typescript schema definitions | | data-transforms | Set ot shared tools for data transformations | | datasets-client | A set of utils for handling api datasets | | dataviews-client | A set of utils for merge, combine and consume api dataviews into the apps | | deck-layer-composer | Map integration of the deck-layers | | deck-layers | Deck classes for GFW layers | | deck-loaders | Deck loaders for GFW layers | | i18n-labels | GFW shared translations | | ocean-areas | Small library to get ocean area / eez names by viewport or by text search | | pbf-decoders | PBF custom responses parsers | | react-hooks | Set of hooks to use libraries easily in react | | timebar | Timebar component, not many more to say | | ui-components | Reusable atoms components kit |

Applications

| | | | --------------------------------------------------- | -------------------------------------- | | api-portal | Api documentation portal | | data-download-portal | The place to download datasets | | fishing-map | Version 3.0 of the fishing map project | | fishing-map-e2e | Playwright e2e testing for the map | | image-labeler | Labeling tool for satellite images | | port-labeler | Labeling tool for ports | | track-labeler | Labeling tool for tracks | | user-groups-admin | Tool to manage user groups with ease |

To create a new application using a template with sidebar + map + timebar just run:

Other utils

| | | | ------------------ | --------------------------------------------------- | | config | Shared generic build config | | linting | Define eslint prettier and stylelint configurations |

See also

🗑️ Legacy 🗑️ MapLibre GL fork

We maintain our own forks of <a href="https://github.com/GlobalFishingWatch/maplibre-gl-js/">Mapbox GL</a> to handle gridded temporal data (see temporalgrid branches on both repos)

🗑️ Legacy 🗑️ LayerComposer / Dataviews / Workspaces

See: <a href="https://docs.google.com/presentation/d/1LdxRbB491Rjf64C5VVF9oTWwWjFVnN5dzDf1uhxcHY4/edit?ts=5f031be2#slide=id.g807f22e76b_0_78">From WebGL triangles to Dataviews - Organizing visualization of data at GFW</a>

Dependencies

The repo is using yarn workspaces so npm is not suported yet, to install yarn follow this instructions

Install a new dependency

For all packages:

yarn add [package] -W

Only for a specific package

cd apps/[you-app]
yarn add [package]

Installation

To install all packages dependencies just run:

yarn

Developmment

Nx handles every app or library by its own project.json file, see for example fishing-map:

nx start [app-name]

To ensure git flow process, master branch will be protected to force opening PR to every change desired. For now, the only one strong recommendation is to tag every PR to prepare the changelog automatically.

Building locally

To test all packages builds process run, useful to test everything works well before publishing.

nx build [app-name]

Building using Docker

To test all packages builds process run, useful to test everything works well before publishing.

docker compose up [app-name] --build

Publishing

TODO

API DOCS

https://gateway.api.dev.globalfishingwatch.org/swagger?version=3

Running production environment locally

To replicate the prod build and serve it locally:

nx build-serve [app-name]

Generating release notes for github releases

To generate the release notes you can run nx release changelog [version] -i all -p [project] --from @globalfishingwatchapp/[app]@[prev-tag] --tagVersionPrefix @globalfishingwatchapp/[app] --dry-run.