From 34d86de432c7ba58a17e7505931dd5edde55c61f Mon Sep 17 00:00:00 2001 From: Kelly Innes Date: Thu, 26 Sep 2019 13:34:50 -0400 Subject: [PATCH] Update guide tab with new vector tile text - add new guide tab text to display when the vector tile feature is active - keep old text for displaying prior to activating vector tiles --- CHANGELOG.md | 1 + src/app/src/components/FilterSidebar.jsx | 9 +- .../src/components/FilterSidebarGuideTab.jsx | 168 +++++++++++++----- 3 files changed, 137 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f62493cf..b82890c78 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Changed - Restyle grid layer legend & show conditionally based on zoom level [#826](https://github.com/open-apparel-registry/open-apparel-registry/pull/826) +- Update guide tab text along with vector tile feature [#834](https://github.com/open-apparel-registry/open-apparel-registry/pull/834) ### Deprecated diff --git a/src/app/src/components/FilterSidebar.jsx b/src/app/src/components/FilterSidebar.jsx index d9d91fd04..c5701540a 100644 --- a/src/app/src/components/FilterSidebar.jsx +++ b/src/app/src/components/FilterSidebar.jsx @@ -153,7 +153,14 @@ class FilterSidebar extends Component { const insetComponent = (() => { switch (activeFilterSidebarTab) { case filterSidebarTabsEnum.guide: - return ; + return ( + } + > + + + ); case filterSidebarTabsEnum.search: // We wrap this component in a `Route` to give it access to `history.push` // in its `mapDispatchToProps` function. diff --git a/src/app/src/components/FilterSidebarGuideTab.jsx b/src/app/src/components/FilterSidebarGuideTab.jsx index 397788a65..4e461d7f1 100644 --- a/src/app/src/components/FilterSidebarGuideTab.jsx +++ b/src/app/src/components/FilterSidebarGuideTab.jsx @@ -1,44 +1,132 @@ -import React, { memo } from 'react'; +import React from 'react'; +import { Link } from 'react-router-dom'; import { filterSidebarStyles } from '../util/styles'; +import { authRegisterFormRoute } from '../util/constants'; -const FilterSidebarGuideTab = memo(() => ( -
-

- The Open Apparel Registry (OAR) is an open data tool for correctly - identifying global apparel facilities and their affiliations. The - OAR collates disparate supplier lists from industry stakeholders - into one global map and registry and assigns each unique facility an - OAR ID. -

-

- The collated database of facility names, addresses and affiliated - parties, pulled from public and contributed data, is powered by an - advanced name and address-matching algorithm, developed by - geospatial software firm, Azavea. The free-to-use, open source tool - can be used by any organization to update and standardize a supplier - list against the database, view facility affiliations and use the - OAR ID as a unique and shared ID across software systems and - databases. -

-

- To contribute to the database, users must create a free account at - the Register tab on the main toolbar. Anyone can sign up and - contribute. Users interested in browsing the OAR are able to search - the site without creating an account. -

- - Learn More - -
-)); +export default function FilterSidebarGuideTab({ vectorTile }) { + if (!vectorTile) { + return ( +
+

+ The Open Apparel Registry (OAR) is an open data tool for + correctly identifying global apparel facilities and their + affiliations. The OAR collates disparate supplier lists from + industry stakeholders into one global map and registry and + assigns each unique facility an OAR ID. +

+

+ The collated database of facility names, addresses and + affiliated parties, pulled from public and contributed data, + is powered by an advanced name and address-matching + algorithm, developed by geospatial software firm, Azavea. + The free-to-use, open source tool can be used by any + organization to update and standardize a supplier list + against the database, view facility affiliations and use the + OAR ID as a unique and shared ID across software systems and + databases. +

+

+ To contribute to the database, users must create a free + account at the Register tab on the main toolbar. Anyone can + sign up and contribute. Users interested in browsing the OAR + are able to search the site without creating an account. +

+ + Learn More + +
+ ); + } -export default FilterSidebarGuideTab; + return ( +
+

+ The Open Apparel Registry (OAR) is an open data tool for + identifying global apparel facilities and their affiliations + (“Contributors”). The OAR brings together facility lists from + industry stakeholders into one map and registry and assigns each + unique facility an OAR ID. +

+

How does it work?

+
    +
  1. + With a{' '} + + Free Account + + , industry stakeholders can add a list of facilities, from + any tier of the supply chain (excluding raw materials - so + no cotton farms or cattle ranches, for example) +
    2. +
  2. + The OAR software checks the uploaded list against facilities + already in the system and uses the name and address to + either match the facility with one already in the system, or + to create a new facility on the map +
    3. +
  3. + The user who added the list reviews the suggested matches + and new listings and, in some instances where the algorithm + cannot automatically make a decision, will be required to + manually confirm or reject the options +
    4. +
  4. + New, confirmed facilities are given their own unique OAR ID + - a valuable tool for linking facilities across software + systems and databases - and are added to the map +
    5. +
  5. + Facilities that match with an entry already in the OAR + database are updated to include the association with the new + organization (the “Contributor”) +
    6. +
+

+ Anybody can search the facilities and view associated + affiliations. Users can search the site by entering a facility + name or OAR ID number; searching by a particular contributor (or + multiple contributors); or searching by country (or multiple + countries). All of these search filters can be used in + combination. +

+

+ Users can download the data for free by clicking the “Download” + button (free account required) or{' '} + + connecting via API + + . +

+

+ By default, the map includes all facilities in the database and + is updated as new facilities are added. The list of facilities + in the left column corresponds to the dots on the map, with the + dot colors representing the volume of facilities in that area. + As users zoom on the map, the dots update to reflect the change + in density as the area represented by the dot changes. The + legend (or key) for the dots is visible on the bottom left of + the OAR map. +

+ + Learn More + +
+ ); +}