Release SlowZones (#186)

* Sort Slowzones

* fix build

* add derailments

* add emoji

* add alt text

* add FAQ

* add css

* change faq css

* tweak css

* Warning icon fix maybe (#187)

* Add attribution

* allow dashboard links that are 18 months

* chance faq text

Co-authored-by: Preston Mueller <skierjunk@gmail.com>

Author: skaplan-dev

src/App.css

@@ -622,3 +622,72 @@ button:disabled,
   font-size: 14px;
 }
 
+.derailment-footer {
+  padding-left: 4em;
+  font-size: 14px;
+  display: flex;
+  padding-bottom: 10px;
+}
+
+.derailment-footer-text {
+  align-self: center;
+}
+
+.accordion > li {
+  list-style: none;
+}
+
+.accordion > a {
+  text-decoration: none;
+}
+
+.accordion {
+  padding-top: 10px;
+  max-width: 1000px;
+  height: auto;
+  overflow: hidden;
+  font-size: 14px;
+  padding-left: 2em;
+}
+
+.accordion .accordion-item-header{
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding: 10px;
+  border-bottom: 1px solid #cecece;
+  position: relative;
+  color: black;
+  font-weight: 600;
+}
+
+.accordion .accordion-item-header:after {
+  content: "•";
+  position: absolute;
+  right: 0;
+  display: none;
+  font-size: 14px;
+}
+
+.accordion .accordion-item-header .accordion-item-active-marker {
+  margin-left: auto;
+}
+
+.accordion .accordion-text {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 300ms ease-in-out;
+  font-style: italic;
+}
+
+.accordion .accordion-text p {
+  padding: 10px;
+}
+
+.accordion-item:target .accordion-text{
+  max-height: 300px;
+}
+
+.accordion-item:target .accordion-item-header:after {
+  display: block;
+}

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SingleDaySet, AggregateSet } from './ChartSets';
 import StationConfiguration from './StationConfiguration';
-import { withRouter } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 import { lookup_station_by_id, get_stop_ids_for_stations, line_name } from './stations';
 import { trainDateRange, busDateRange } from './constants';
 import { recognize } from './alerts/AlertFilter';
@@ -394,7 +394,7 @@ class App extends React.Component {
     return <div className="main-column">
       <div className="empty-state">
         {error_message && <>{error_message}</>}
-        {/* <div id="slowzone-container"> Check out our new <Link to='/slowzones'><button id="slowzone-button">Slow Zone Tracker</button></Link></div> */}
+        <div id="slowzone-container"> Check out our new <Link to='/slowzones'><button id="slowzone-button">Slow Zone Tracker</button></Link></div>
         {!error_message && <>See MBTA rapid transit performance data, including travel times between stations, headways,
         and dwell times, for any given day. <span style={{fontWeight: "bold"}}>Select a line, station pair, and date above to get started.</span><div style={{marginTop: 10}}>Looking for something interesting? <span style={{fontWeight: "bold"}}>Try one of these dates:</span></div>
         <Select

src/OpenSource.js

@@ -175,7 +175,13 @@ export default function OpenSource() {
     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,<br />
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE<br />
     SOFTWARE.<br />
-    
+  
+  
+    <hr />
+      Highcharts:<br />
+      Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0)<br />
+      <br />
+      Copyright (c) 2022 Highsoft<br />
     </div>
     );
   }

src/constants.ts

@@ -1206,3 +1206,22 @@ export const stations = {
 		]
 	}
 };
+
+export const derailments = {
+  Red: {
+    start: "2019-06-11T00:00:00Z",
+    end: "2019-09-21T00:00:00Z",
+    color: "Red",
+    title: "Red line derailment",
+    description:
+      "A red line train derailment at JFK/UMass destroyed important signal infrastructure that took months to repair.",
+  },
+  Orange: {
+    start: "2021-03-16T00:00:00Z",
+    end: "2021-04-16T00:00:00Z",
+    color: "Orange",
+    title: "Orange line derailment",
+    description:
+      "An orange line train derailment damaged a switch, requiring track replacement. A speed restriction followed in order to give the new track time to settle.",
+  },
+};

src/slowzones/SlowZones.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { ChartView, Direction, SlowZone } from "./types";
-import { useHistory, useLocation } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import xrange from "highcharts/modules/xrange";
 import exporting from "highcharts/modules/exporting";
-
+import annotations from "highcharts/modules/annotations";
 import {
   formatSlowZones,
   generateLineOptions,
@@ -18,6 +18,7 @@ import moment from "moment";
 
 xrange(Highcharts);
 exporting(Highcharts);
+annotations(Highcharts);
 
 export const optionsForSelect = () => {
   const lines = subway_lines();
@@ -37,6 +38,7 @@ function useQuery() {
 }
 
 export const SlowZones = () => {
+  document.title = "Data Dashboard - Slow zones";
   const params = useQuery();
   const history = useHistory();
   const [options, setOptions] = useState<Highcharts.Options>();
@@ -160,12 +162,104 @@ export const SlowZones = () => {
       />
       {options && (
         <HighchartsReact
-          containerProps={{ style: { height: "75vh", paddingTop: "5px" } }}
+          containerProps={{
+            style: { "min-height": "83vh", paddingTop: "1em" },
+          }}
           options={options}
           highcharts={Highcharts}
           immutable={true}
         />
       )}
+      {chartView === "xrange" && (
+        <div className="derailment-footer">
+          ⚠️
+          <span className="derailment-footer-text">
+            = Affected by a derailment
+          </span>
+        </div>
+      )}
+
+      <div className="accordion">
+        <li className="accordion-item" id="what-is-this">
+          <a className="accordion-item-header" href="#what-is-this">
+            What is this?
+          </a>
+          <div className="accordion-text">
+            <p>
+              This is a tool to help find and track slow zones. That is, areas
+              where trains have lower-than-usual speeds due to track conditions,
+              signal issues, or other infrastructure problems.
+            </p>
+          </div>
+        </li>
+        <li className="accordion-item" id="how-do-we-calculate-this">
+          <a className="accordion-item-header" href="#how-do-we-calculate-this">
+            How do we calculate this?
+          </a>
+          <div className="accordion-text">
+            <p>
+              We look at the daily median travel time + dwell time for each
+              segment along a route. Whenever that trip time is at least 10%
+              slower than the baseline for 3 or more days in a row, it gets
+              flagged as a slow zone. Currently, our baseline is the median
+              value in our data, which goes back to 2016. It’s not a perfect
+              system, but various algorithmic improvements are in the works.
+              Frontend
+            </p>
+          </div>
+        </li>
+        <li className="accordion-item" id="how-do-we-build-this">
+          <a className="accordion-item-header" href="#how-do-we-build-this">
+            How do we build this?
+          </a>
+          <div className="accordion-text">
+            <p>
+              ReactJS + HighchartsJS and Highcharts Gantt from 
+              <a href="highcharts.com"> Highcharts</a> <br />
+              See our <Link to="/opensource"> Attribution</Link> page for more
+              information.
+            </p>
+          </div>
+        </li>
+        <li className="accordion-item" id="why-did-we-build-this">
+          <a className="accordion-item-header" href="#why-did-we-build-this">
+            Why did we build this?
+          </a>
+          <div className="accordion-text">
+            <p>
+              There’s power in data, but it’s only useful when you can tell a
+              story. Slow zones are a nice story to tell: they tie our
+              observable results to a cause. With so much data available, it can
+              be difficult to find the interesting bits. So we’ve built this
+              tool to help us locate and track this type of issue (slow zones),
+              and monitor the severity over time.
+            </p>
+          </div>
+        </li>
+        <li className="accordion-item" id="how-can-you-use-this">
+          <a className="accordion-item-header" href="#how-can-you-use-this">
+            How can you use this?
+          </a>
+          <div className="accordion-text">
+            <p>
+              Share it. Bring the data to public meetings. Pressure the T to do
+              better, but also give them credit where it’s due.
+            </p>
+          </div>
+        </li>
+        <li className="accordion-item" id="green-line">
+          <a className="accordion-item-header" href="#green-line">
+            What about the Green Line?
+          </a>
+          <div className="accordion-text">
+            <p>
+              Due to variable traffic, much of the Green Line doesn’t have
+              consistent enough trip times to measure. As for the main trunk and
+              the D line? Coming “soon”.
+            </p>
+          </div>
+        </li>
+      </div>
     </>
   );
 };