export default function App()

in examples/website/scenegraph/app.js [72:148]


export default function App({sizeScale = 25, onDataLoad, mapStyle = MAPBOX_STYLE}) {
  const [data, setData] = useState(null);
  const [timer, setTimer] = useState({});

  useEffect(
    () => {
      fetch(DATA_URL)
        .then(resp => resp.json())
        .then(resp => {
          if (resp && resp.states && timer.id !== null) {
            // In order to keep the animation smooth we need to always return the same
            // objects in the exact same order. This function will discard new objects
            // and only update existing ones.
            let sortedData = resp.states;
            if (data) {
              const dataAsObj = {};
              sortedData.forEach(entry => (dataAsObj[entry[DATA_INDEX.UNIQUE_ID]] = entry));
              sortedData = data.map(entry => dataAsObj[entry[DATA_INDEX.UNIQUE_ID]] || entry);
            }

            setData(sortedData);

            if (onDataLoad) {
              onDataLoad(sortedData.length);
            }
          }
        })
        .finally(() => {
          timer.nextTimeoutId = setTimeout(() => setTimer({id: timer.nextTimeoutId}), REFRESH_TIME);
        });

      return () => {
        clearTimeout(timer.nextTimeoutId);
        timer.id = null;
      };
    },
    [timer]
  );

  const layer =
    data &&
    new ScenegraphLayer({
      id: 'scenegraph-layer',
      data,
      pickable: true,
      sizeScale,
      scenegraph: MODEL_URL,
      _animations: ANIMATIONS,
      sizeMinPixels: 0.1,
      sizeMaxPixels: 1.5,
      getPosition: d => [
        d[DATA_INDEX.LONGITUDE] || 0,
        d[DATA_INDEX.LATITUDE] || 0,
        d[DATA_INDEX.GEO_ALTITUDE] || 0
      ],
      getOrientation: d => [verticalRateToAngle(d), -d[DATA_INDEX.TRUE_TRACK] || 0, 90],
      transitions: {
        getPosition: REFRESH_TIME * 0.9
      }
    });

  return (
    <DeckGL
      layers={[layer]}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      getTooltip={getTooltip}
    >
      <StaticMap
        reuseMaps
        mapStyle={mapStyle}
        preventStyleDiffing={true}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />
    </DeckGL>
  );
}