export default function App()

in examples/website/highway/app.js [99:172]
65 lines of code
5 McCabe index (conditional complexity)

export default function App({
  roads = DATA_URL.ROADS,
  year,
  accidents,
  mapStyle = 'mapbox://styles/mapbox/dark-v9'
}) {
  const [hoverInfo, setHoverInfo] = useState({});
  const {incidents, fatalities} = useMemo(() => aggregateAccidents(accidents), [accidents]);

  const getLineColor = f => {
    if (!fatalities[year]) {
      return [200, 200, 200];
    }
    const key = getKey(f.properties);
    const fatalitiesPer1KMile = ((fatalities[year][key] || 0) / f.properties.length) * 1000;
    return COLOR_SCALE(fatalitiesPer1KMile);
  };

  const getLineWidth = f => {
    if (!incidents[year]) {
      return 10;
    }
    const key = getKey(f.properties);
    const incidentsPer1KMile = ((incidents[year][key] || 0) / f.properties.length) * 1000;
    return WIDTH_SCALE(incidentsPer1KMile);
  };

  const layers = [
    new GeoJsonLayer({
      id: 'geojson',
      data: roads,
      stroked: false,
      filled: false,
      lineWidthMinPixels: 0.5,
      parameters: {
        depthTest: false
      },

      getLineColor,
      getLineWidth,

      pickable: true,
      onHover: setHoverInfo,

      updateTriggers: {
        getLineColor: {year},
        getLineWidth: {year}
      },

      transitions: {
        getLineColor: 1000,
        getLineWidth: 1000
      }
    })
  ];

  return (
    <DeckGL
      layers={layers}
      pickingRadius={5}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
    >
      <StaticMap
        reuseMaps
        mapStyle={mapStyle}
        preventStyleDiffing={true}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />

      {renderTooltip({incidents, fatalities, year, hoverInfo})}
    </DeckGL>
  );
}