###########                                                    
             ###################  %%                                            
           ####################%%%%%%                                           
         #########         #%%%%%%%%%%                                          
        #######          %%%%%%%%%%%%%%                                         
       #######        %%%%%%%%%%%%%%#      __ _        _   _                    
       ######       %%%%%%%%%%%%%#####    / _\ |_ __ _| |_(_) ___  _ __         
       ######    %%%%%%%%%%%%%  ######    \ \| __/ _` | __| |/ _ \| '_ \        
       ###### %%%%%%%%%%%%%     ######    _\ \ || (_| | |_| | (_) | | | |       
       ####%%%%%%%%%%%%%        ######    \__/\__\__,_|\__|_|\___/|_| |_|       
        %%%%%%%%%%%%%%         ######                                           
      %%%%%%%%%%%%%          #######        __                     _            
       %%%%%%%%%###       #########        / _\ ___  __ _ _ __ ___| |__         
        %%%%%####################@@        \ \ / _ \/ _` | '__/ __| '_ \        
              #################@@@@@       _\ \  __/ (_| | | | (__| | | |       
                   #######  @@@@@@@@@@     \__/\___|\__,_|_|  \___|_| |_|       
                              @@@@@@@@@                                         
                               @@@@@@@@@@                                       
                                @@@@@@@@@@                                      
                                  @@@@@@@@@                                     
                                   @@@@@@@@@@                                   
                                     @@@@@@@@                                   
                                      @@@@@@@                                   
                                                                                
        ┌──────────────────────────────────────────────────────────────┐        
        │                    Deployed application:                     │        
        │              https://chris.sarl/station-search/              │        
        ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│        
        │ To run locally, first run                                    │        
        │                                                              │        
        │     npm install                                              │        
        │                                                              │        
        │ Application can be run with a development server by running: │        
        │                                                              │        
        │     npm start                                                │        
        │                                                              │        
        │ Or with a production server using:                           │        
        │                                                              │        
        │     npm run build && serve -s build                          │        
        └──────────────────────────────────────────────────────────────┘        
                                                                                
Station Search is a simple interface to filter and sort the 270 stations of the 
London Underground.                                                             
                                                                                
Stations can be filtered by name, Tube services, and travel card zone. Filtered 
results can be sorted by name, original opening date, and annual ridership (each
ascending or descending).                                                       
                                                                                
Upon selection, each filtered item will open the corresponding station's        
Wikipedia page in a new tab.                                                    
                                                                                
The interface offers users several affordances:                                 
 • Hovering on a station changes the cursor to a pointer and alters background  
   color.                                                                       
 • Hovering on certain clickable text elements adds an underline                
 • Text field has a relevant placeholder value "Station name..."                
                                                                                
Additionally, white space and mindful typography (size and weight) is used      
frequently to imply structure. For filtering, simple text options are used. Some
icons were tested for some operations (selecting all and none, changing         
ascending/descending of sorting function), but ultimately not used. While they  
did simplify the interface, they were not clearly recognizable. On small screen 
sizes, the sizes of certain buttons are increased, so they are easier to select 
given the less precise input method.                                            
                                                                                
P22 Underground, similar to the official New Johnston, is used as the sole      
typeface in the interface. Many UI elements (especially colors) are based on the
Transport for London Design Style Guide, available here:                        
                                                                                
https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards                              
                                                                                
The data for this project was sourced from the following Wikipedia page:        
                                                                                
https://en.wikipedia.org/wiki/List_of_London_Underground_stations               
                                                                                
I downloaded an excerpt of the page source, and wrote a Python script to parse  
the page. The script extracted station name, lines, zones, date opened,         
ridership, and the URL of each station's individual Wikipedia page.             
Additionally, the script also parsed the URL of each station's included image,  
and downloaded a copy of each of these images. Because all of these images are  
published under Creative Commons, no citation is required in my interface.      
Ultimately, this script outputs a JSON file with all of this parsed information,
including relative links to the appropriate downloaded images.                  
                                                                                
Please note, I was feeling lazy, so the three station names that are each shared
by more than one station (Edgware Road, Hammersmith, and Paddington) are not    
handled in the most elegant way possible. I manually appended the names of the  
second entries (as appearing in the original Wikipedia page) with "*", so there 
is both a "Paddington" station and a "Paddington*" station. Additionally, some  
ridership statistics were improperly parsed, so I manually corrected them.      
                                                                                
The JSON file created by the script is loaded by the App component, and passed  
as a prop to an SearchTool component. SearchTool contains both the filter/sort  
manipulation elements, but also the resultant items. SearchTool manages user    
changes to filtering/sorting, either through entering a query, changing         
line/zones options, or using one of the filter clearing options.                
                                                                                
SearchTool also renders a ResList (short for "Result List") component, to which 
it passes various aspects of its state as props, reflecting the current state of
the filter, along with the original full collection of items created from the   
imported data.                                                                  
                                                                                
ResList, upon render, applies a series of mappings, filters, and sorts to the   
original item list to reflect the desired filtering/sorting. For each match, an 
Entry component is rendered, passed the JSON blob representing that specific    
station.                                                                        
                                                                                
Entry is merely a presentation component, which interprets the data passed to it
and rendering the result block. Tube services are further rendered with a list  
of ServiceLine components, which are passed a line name to represent as a prop. 
                                                                                
Here is a summarizing diagram of the components:                                
                                                                                
                           ┌───────────────────────┐                            
                           │          App          │                            
                           │imports data from JSON │                            
                           └───────────────────────┘                            
                                       ┃                                        
                                       ▼                                        
                             ┌───────────────────┐                              
                             │ SearchTool(data)  │                              
                             └───────────────────┘                              
                                       ┃                                        
                                       ▼                                        
                  ┌─────────────────────────────────────────┐                   
                  │ResList(init, crit, zones, lines, sortby)│                   
                  │        init refers to JSON data,        │                   
                  │          crit to search query           │                   
                  └─────────────────────────────────────────┘                   
                                       ┃                                        
                                       ┃ one-to-many                            
                                      ╱┃╲                                       
                             ┌───────────────────┐                              
                             │    Entry(item)    │                              
                             └───────────────────┘                              
                                       ┃                                        
                                       ┃ one-to-many                            
                                      ╱┃╲                                       
                             ┌───────────────────┐                              
                             │ ServiceLine(line) │                              
                             └───────────────────┘