Code Monkey home page Code Monkey logo

frontend's Introduction

This monorepo hosts frontend packages and applications of the GlobalFishingWatch 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
deck-layers-composer Deck classes for GFW layers and its react integration
dataviews-client Api-client wrapper to fetch and edit dataviews and associated datasets/data
fourwings-aggregate Logic to turn fourwings tiles or cells into meaningful values for the frontend
i18n-labels GFW shared translations
layer-composer Orchestrates various Layer Generators to generate a Mapbox GL Style document
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
deck-playground Playground for deck layers
fishing-map-e2e Cypress e2e testing for the map
fishing-map Version 3.0 of the fishing map project
port-labeler Labeling tool for ports
tile-inspector Debugger for 4wings tiles
user-groups-admin Tool to manage user groups with ease
vessel-history Vessel history app

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

nx workspace-generator app [your-name]
nx start [your-name]

Other utils
config Shared generic build config as tsconfig, rollup or postcss
linting Define eslint prettier and stylelint configurations

See also

MapLibre GL fork

We maintain our own forks of Mapbox GL to handle gridded temporal data (see temporalgrid branches on both repos)

LayerComposer / Dataviews / Workspaces

See: From WebGL triangles to Dataviews - Organizing visualization of data at GFW

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

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

nx build [app-name] --parallel

Publishing

TODO

API DOCS

https://gateway.api.dev.globalfishingwatch.org/swagger#/

Docker Compose

To replicate the prod environment where the apps run on a path (not the root) and with https we use a nginx proxy that runs on SSL and maps all the incoming request to its corresponding app.

Setup

  1. Generate the ssl certificates:
./generate-certificate.sh
  1. Set the proper environment variables to build each app, lookt at the build.env.sample file for reference:
cp apps/fishing-map/.build.env.sample apps/fishing-map/.build.env
# Edit apps/fishing-map/.build.env and save your changes
cp apps/vessel-history/.build.env.sample apps/vessel-history/.build.env
# Edit apps/vessel-history/.build.env and save your changes
cp apps/api-portal/.build.env.sample apps/api-portal/.build.env
# Edit apps/api-portal/.build.env and save your changes
cp apps/fourwings-explorer/.build.env.sample apps/fourwings-explorer/.build.env
# Edit apps/fourwings-explorer/.build.env and save your changes
  1. Build the apps:
npx env-cmd -f apps/fishing-map/.build.env nx build fishing-map --parallel
npx env-cmd -f apps/vessel-history/.build.env nx build vessel-history --parallel
npx env-cmd -f apps/api-portal/.build.env nx build api-portal --parallel
npx env-cmd -f apps/fourwings-explorer/.build.env nx build fourwings-explorer --parallel
nx run-many --target=docker-prepare --all
  1. Spin up docker compose:
docker-compose up -d
  1. Navigate to https://localhost/map and/or https://localhost/vessel-viewer. Note that if you want to develop/test the progressive web app (offline mode) you'll have to start Chrome with specific flags to omit the SSL self signed certificate error:

Osx

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome   --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost

Windows

chrome.exe --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost/

Pending: Add https://localhost (or a more meaningful hostname) to the list of redirectUrls in the GFW application

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.

frontend's People

Contributors

actions-user avatar aperdizs avatar dependabot[bot] avatar fertandil87 avatar giselamo avatar github-actions[bot] avatar j8seangel avatar nataliafz avatar nerik avatar rdgfuentes avatar rrequero avatar satellitestudiodesign avatar weberjavi avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

pieterprovoost

frontend's Issues

Layer composer brainstorming

Coming from map-components/issues/64 this issue resume the main points of that conversation and opens the conversation in this repo.

Brainstorm 23/01/2020:

  • Tests all existing generators - mapbox gl style check for each of them as a minimum

  • Playground to test layers, we could even include a layer template for each type

  • Generators need documentation

  • Error handling: generators should throw when bad inputs are given

  • We need a core generator class that generators extend:

    • Manage standard style behaviours : visibility, interactive, selected/highlighted states with default and overrides system
    • Common utilities set: color handling/conversion
    • Handle overrides done by dataviews-client
    • Pass global parameters : start/end. others?

  • InteractionManager as done in the Books project:

    • Based on LayerManager input parameters
    • Responsible for generation of interactiveLayerIds
    • Handles feature interaction priority
    • Prepares popup data in a standard way
    • Overwrites style generated by LM depending on selectedFeatures and highlightedFeatures for each layer?
    • Manages map cursor states?
    • Handles cluster interactivity? (ie zoom to zoom level X when feature is clustered, do whatever when feature is not clustered)
    • selectedFeatures: support multiple features and expressions (might be overkill for now)

  • LegendManager / Legend component

    • Reads standardised legend data generated by LayerManager in map style

  • Attributions / AttributionManager

map-styler

  • compose (params -> GL style)
  • sort (GL style -> GL style)
  • getFeatures (GL style -> GL style with selected features, selected features info, interactiveLayerIds)
  • getAttributions (GL style -> attributions)
  • getLegends (GL style -> legends)

Data download not available even for registered users.

Hi there,

I've noticed some changes in the data download in the past 3-4 weeks. No geometry datasets are available for download even for registered users.
In registered log in mode, I'm trying and failing to:

  1. Download ship tracks for specific ship (worked last time for download on 22nd Jan) -> no download button available.
  2. Download EEZ limits.

Download works for gridded data.

I guess this might be one of the culprits?
[https://github.com/GlobalFishingWatch/frontend/commit/54bf793a16e50de94fa207fbbd41234bb1da3a0d] #1234

Can you please check?
It has been reported by multiple users.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.