{"version":3,"sources":["App.module.css","projects/gas-trade-flow/components/GtfVector.js","projects/gas-trade-flow/components/GtfAnimatedFlowMap.js","projects/gas-trade-flow/components/GtfAnimatedFlow.js","App.js","serviceWorker.js","index.js"],"names":["module","exports","Map","width","height","viewState","colors","onViewStateChange","data","React","useState","time","setTime","undefined","highlight","setHighlight","x","y","object","type","selectedCountry","setSelectedCountry","animationFrames","useRef","HighlightType","getLocationId","loc","properties","name","animate","useCallback","timestamp","Date","now","loopLength","current","window","requestAnimationFrame","useEffect","cancelAnimationFrame","layers","FlowMapLayer","id","locations","flows","pickable","animationCurrentTime","getFlowMagnitude","flow","total","getFlowOriginId","entry","getFlowDestId","exit","getLocationCentroid","centroid","highlightedFlow","highlightedLocationId","locationId","highlightedLocationAreaId","onHover","e","info","PickingType","FLOW","_onHover","selectHighLight","LOCATION_AREA","LOCATION","defaultProps","value","handleFlowMapHover","selected","initialViewState","controller","mapboxApiAccessToken","process","mapStyle","_","style","position","background","padding","zIndex","pointerEvents","left","top","GTFContainer","props","setData","loaded","setLoaded","latitude","longitude","zoom","minZoom","maxZoom","maxBounds","setViewState","console","log","baseURL","calls","axios","get","all","then","response","Papa","parse","header","map","d","lon","lat","locationWithShape","forEach","ISO3","features","push","geometry","coordinates","result","parseFloat","App","test","url","component","GtfAnimatedFlow","path","exact","render","className","classes","Wrapper","PROJECTS","project","idx","Item","baseurl","C","status","styledClass","pending","done","href","Boolean","location","hostname","match","ReactDOM","StrictMode","document","getElementById","navigator","serviceWorker","ready","registration","unregister","catch","error","message"],"mappings":"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","file":"static/js/main.2ca4002f.chunk.js","sourcesContent":["// extracted by mini-css-extract-plugin\nmodule.exports = {\"Wrapper\":\"App_Wrapper__2FdRQ\",\"pending\":\"App_pending__1Acoy\",\"done\":\"App_done__Xh8fV\",\"progress\":\"App_progress__2NmV6\"};","import React, { useEffect, useState } from \"react\";\nimport Papa from \"papaparse\";\nimport { useMap, MapContainer, Map } from \"@iea/react-components\";\nimport axios from \"axios\";\nimport {\n  borderPoints,\n  getCountryColor,\n  countryShape,\n  getCountryInfo,\n  getBorderPointInfo,\n  getBorderPointCountriesColor,\n} from \"./util\";\n\nconst GtfVectorContainer = () => {\n  const config = {\n    map: \"oecd\",\n    style: \"mapbox://styles/iea/ckas69pof1o2c1ioys10kqej6\",\n    center: [0, 0],\n    minZoom: 4.1,\n    maxZoom: 7,\n    maxBounds: [\n      [-15, 23],\n      [50, 65],\n    ],\n  };\n  const { map, mapContainerRef, popUp } = useMap(config);\n  const colors = [\n    \"case\",\n    \"#00CDB0\",\n    \"#00B3C5\",\n    \"#0076C0\",\n    \"#0095CB\",\n    \"#1355A3\",\n    \"red\",\n  ];\n  const [data, setData] = useState({ borderPoints: null, countryShape: null });\n\n  let baseURL = process.env.REACT_APP_DEV;\n  if (process.env.NODE_ENV === \"production\")\n    baseURL = process.env.REACT_APP_PROD;\n  useEffect(() => {\n    axios.get(`${baseURL}gtf/flowdata.csv`).then((response) => {\n      const results = Papa.parse(response.data, { header: true }),\n        data = [...results.data];\n      setData({\n        borderPoints: borderPoints(data),\n        countryShape: countryShape(data),\n      });\n    });\n  }, [baseURL]);\n\n  useEffect(() => {\n    if (!map) return;\n    let borders = [\"solid-border\", \"dotted-border\"];\n\n    for (let i in borders) {\n      map\n        .setPaintProperty(`${borders[i]}-layer`, \"line-color\", \"#404040\")\n        .setPaintProperty(`${borders[i]}-layer`, \"line-width\", [\n          \"interpolate\",\n          [\"exponential\", 0.5],\n          [\"zoom\"],\n          config.minZoom,\n          0.5,\n          config.maxZoom,\n          0.7,\n        ]);\n    }\n  }, [map, config.minZoom, config.maxZoom]);\n\n  useEffect(() => {\n    if (!map || !data) return;\n    const { borderPoints, countryShape } = data;\n\n    // Define border points buffer animation\n    let size = 100;\n    let borderPointsBuffer = {\n      width: size,\n      height: size,\n      data: new Uint8Array(size * size * 4),\n\n      // get rendering context for the map canvas when layer is added to the map\n      onAdd() {\n        let canvas = document.createElement(\"canvas\");\n        canvas.width = this.width;\n        canvas.height = this.height;\n        this.context = canvas.getContext(\"2d\");\n      },\n\n      // called once before every frame where the icon will be used\n      render() {\n        let duration = 1000;\n        let t = (performance.now() % duration) / duration;\n        let outerRadius = (size / 2) * t;\n        let ctx = this.context;\n\n        // draw outer circle\n        ctx.clearRect(0, 0, this.width, this.height);\n        ctx.beginPath();\n        ctx.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);\n        ctx.fillStyle = \"rgba(255,255,0,\" + (1 - t) + \")\";\n        ctx.fill();\n\n        // update this image's data with data from the canvas\n        this.data = ctx.getImageData(0, 0, this.width, this.height).data;\n        map.triggerRepaint();\n        return true;\n      },\n    };\n\n    let borderpoints = {\n      type: \"FeatureCollection\",\n      features: borderPoints.map((point, idx) => ({\n        type: \"Feature\",\n        geometry: {\n          type: \"Point\",\n          coordinates: [point.lonlat[0], point.lonlat[1]],\n        },\n        id: idx,\n        properties: {\n          ...point,\n          lonlat: point.lonlat,\n          totalValue: point.totalValue,\n          tx: point.tx,\n        },\n      })),\n    };\n\n    map // Add images for border points buffer\n      .addImage(\"borderPointsBuffer\", borderPointsBuffer, { pixelRatio: 2 });\n\n    map // Add source\n      .addSource(\"border-points\", {\n        type: \"geojson\",\n        data: borderpoints,\n      });\n\n    map // Add layers\n      .addLayer({\n        id: \"border-point\",\n        type: \"circle\",\n        source: \"border-points\",\n        paint: {\n          \"circle-radius\": 4,\n          \"circle-color\": \"yellow\",\n        },\n      })\n      .addLayer({\n        id: \"border-point-buffers\",\n        type: \"symbol\",\n        source: \"border-points\",\n        layout: {\n          \"icon-image\": \"borderPointsBuffer\",\n          \"icon-size\": [\n            \"step\",\n            [\"get\", \"totalValue\"],\n            0.3,\n            20000,\n            0.5,\n            100000,\n            0.7,\n            200000,\n            1,\n          ],\n          \"icon-allow-overlap\": true,\n        },\n      });\n\n    let countries = [];\n    countryShape.forEach((d) => countries.push(d.ISO3));\n    map\n      .setFilter(\"shapes-layer\", [\n        \"all\",\n        [\"match\", [\"get\", \"ISO3\"], countries, true, false],\n      ])\n      .setPaintProperty(\n        \"shapes-layer\",\n        \"fill-color\",\n        getCountryColor(countryShape, colors)\n      );\n\n    return () => {\n      console.log(\"CLEAR\");\n      map\n        .removeLayer(\"border-point\")\n        .removeLayer(\"border-point-buffers\")\n        .removeSource(\"border-points\")\n        .removeImage(\"borderPointsBuffer\");\n    };\n  });\n\n  useEffect(() => {\n    if (!map) return;\n    map\n      .on(\"mousemove\", \"shapes-layer\", function (e) {\n        map.getCanvas().style.cursor = \"pointer\";\n        let mousePos = [e.lngLat.lng, e.lngLat.lat];\n        let selected = e.features[0].properties.ISO3;\n        while (Math.abs(e.lngLat.lng - mousePos[0]) > 180) {\n          mousePos[0] += e.lngLat.lng > mousePos[0] ? 360 : -360;\n        }\n        popUp\n          .setLngLat(mousePos)\n          .setHTML(getCountryInfo(data.countryShape, selected))\n          .addTo(map);\n      })\n      .on(\"mouseleave\", \"shapes-layer\", function () {\n        map.getCanvas().style.cursor = \"\";\n        popUp.remove();\n      })\n      .on(\"mousemove\", \"border-point\", function (e) {\n        map.getCanvas().style.cursor = \"pointer\";\n        let coordinates = e.features[0].geometry.coordinates;\n        let selected = e.features[0].properties;\n        popUp.addClassName(\"borderpoint\");\n        popUp\n          .setLngLat(coordinates)\n          .setHTML(getBorderPointInfo(selected))\n          .addTo(map);\n        if (e.features.length > 0) {\n          map.setPaintProperty(\n            \"shapes-layer\",\n            \"fill-color\",\n            getBorderPointCountriesColor(e.features[0].properties.tx)\n          );\n        }\n      })\n      .on(\"mouseleave\", \"border-point\", function () {\n        map.getCanvas().style.cursor = \"\";\n        popUp.remove();\n        map.setPaintProperty(\n          \"shapes-layer\",\n          \"fill-color\",\n          getCountryColor(data.countryShape, colors)\n        );\n      });\n  });\n\n  return (\n    <MapContainer fluid loaded={data} selector=\"gtf-country\">\n      <Map mapRef={mapContainerRef} />\n    </MapContainer>\n  );\n};\n\nexport default GtfVectorContainer;\n","import React from 'react';\nimport MapGL from 'react-map-gl';\nimport { DeckGL } from '@deck.gl/react';\nimport FlowMapLayer, { PickingType } from '@flowmap.gl/core';\n\nexport default function Map({ width, height, viewState, colors, onViewStateChange, data }) {\n\t\n\tconst [time, setTime] = React.useState(0);\n\tconst [highlight, setHighlight] = React.useState(undefined);\n\tconst [selectedCountry, setSelectedCountry] = React.useState({x: undefined, y: undefined, object: undefined, type: undefined});\n\n\tconst animationFrames = React.useRef(0);\n\tconst HighlightType = {\n\t\tLOCATION_AREA: 'location-area',\n\t\tLOCATION: 'location',\n\t\tFLOW: 'flow',\n\t}\n\tconst getLocationId = loc  => loc.properties.name;\n\n\tconst  animate = React.useCallback(() =>{\n    const loopLength = 1800; \n    const animationSpeed = 20;\n    const timestamp = Date.now() / 1000;\n    const loopTime = loopLength / animationSpeed;\n    setTime(((timestamp % loopTime) / loopTime) * loopLength);\n\t\tanimationFrames.current = window.requestAnimationFrame(animate);\n\t}, []) \n\n\tReact.useEffect(() => {\n\t\tanimate();\n\t\treturn () => {\n\t\t\tif(animationFrames.current) window.cancelAnimationFrame(animationFrames.current);\n\t\t}\n  }, [animate])\n\t\n\tconst layers=[\n\t\tnew FlowMapLayer ({\n\t\t\tid: 'my-flowmap-layer',\n\t\t\tlocations: data.locations,\n\t\t\tflows: data.flows,\n\t\t\tcolors: colors,\n\t\t\tpickable: true,\n\t\t\tanimate: true,\n\t\t\tanimationCurrentTime: time,\n\t\t\tgetFlowMagnitude: flow => flow.total || 0,\n\t\t\tgetFlowOriginId: flow => flow.entry,\n\t\t\tgetFlowDestId: flow => flow.exit,\n\t\t\tgetLocationId: loc => loc.properties.name,\n\t\t\tgetLocationCentroid: loc => [loc.properties.centroid[0], loc.properties.centroid[1]],\n\t\t\t// showLocationAreas: false,\n\t\t\t// maxLocationCircleSize:3,\n\t\t\thighlightedFlow: highlight && highlight.type === HighlightType.FLOW ? highlight.flow : undefined,\n\t\t\thighlightedLocationId: highlight && highlight.type === HighlightType.LOCATION ? highlight.locationId : undefined,\n      highlightedLocationAreaId: highlight && highlight.type === HighlightType.LOCATION_AREA ? highlight.locationId : undefined,\n\t\t\tonHover: e => handleFlowMapHover(e),\n\t\t\t// getFlowColor: e => console.log(e)\n\t\t})\n\t];\n\n\tfunction handleFlowMapHover(info){\n\t\tconst {object, type, x , y} = info;\n\t\tswitch(type) {\n\t\t\tcase PickingType.FLOW: {\n\t\t\t\tif ( !object ) {\n\t\t\t\t\tselectHighLight(undefined);\n\t\t\t\t\t_onHover(undefined, undefined, undefined, undefined);\n\t\t\t\t} else {\n\t\t\t\t\t_onHover(x, y, object, type);\n\t\t\t\t\tselectHighLight({ type: PickingType.FLOW, flow: object });\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase PickingType.LOCATION_AREA:\n      case PickingType.LOCATION: {\n        if (!object) {\n\t\t\t\t\tselectHighLight(undefined);\n\t\t\t\t\t_onHover(undefined, undefined, undefined, undefined);\n        } else {\n\t\t\t\t\t_onHover(x, y, object, type);\n          selectHighLight(\n            {\n              type: type === PickingType.LOCATION_AREA ? PickingType.LOCATION_AREA : PickingType.LOCATION,\n              locationId: (getLocationId || FlowMapLayer.defaultProps.getLocationId.value)(object),\n            }\n          );\n        }\n        break;\n      }\n\t\t\tdefault: \n\t\t\t\treturn null;\n\t\t}\n\t}\n\n\tconst selectHighLight = selected => setHighlight(selected);\n\n\tfunction _onHover( x, y, object, type) {\n\t\tsetSelectedCountry({x: x, y: y, object: object, type: type})\n\t}\n\n\tconst  _renderTooltip = _ => {\n\t\tlet { x, y, object, type } = selectedCountry;\n\t\tif( object ) {\n\t\t\tif (type === PickingType.LOCATION_AREA || type === PickingType.LOCATION ) {\n\t\t\t\treturn (\n\t\t\t\t\t<div style={{position: 'absolute', background: 'white', padding: '20px', zIndex: 1000, pointerEvents: 'none', left: x, top: y}}>\n\t\t\t\t\t\t{object.properties.name}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\treturn (\n\t\t\t\t\t<div style={{position: 'absolute', background: 'white', padding: '20px', zIndex: 1000, pointerEvents: 'none', left: x, top: y}}>\n\t\t\t\t\t\t<p>exit: {object.exit}</p>\n\t\t\t\t\t\t<p>entry: {object.entry}</p>\n\t\t\t\t\t\t<p>value: {object.total}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\treturn;\n\t\t}\n\t}\n\n\treturn (\n\t\t<DeckGL initialViewState={viewState} layers={layers} controller={true}>\n\t\t\t<MapGL width={width} height={height} \n\t\t\t\tviewState={viewState} onViewStateChange={onViewStateChange}\n\t\t\t\tmapboxApiAccessToken={process.env.REACT_APP_MAPBOX_KEY}\n\t\t\t\tmapStyle=\"mapbox://styles/iea/ckas69pof1o2c1ioys10kqej6\"\n\t\t\t/>\n\t\t\t{_renderTooltip}\n\t\t</DeckGL>\n\t);\n}\n\n","import React from 'react';\nimport Flowmap from './GtfAnimatedFlowMap';\nimport Papa from 'papaparse';\nimport axios from 'axios';\n\nexport default function GTFContainer(props) {\n\n  const [data, setData] = React.useState({ locations: [], flows: [] });\n  const [loaded, setLoaded] = React.useState(false);\n  const [viewState, setViewState] = React.useState({\n    latitude: 40,\n    longitude: 0,\n    zoom: 2.3,\n    minZoom: 3.5,\n    maxZoom: 7,\n    maxBounds: [[-15, 23],[50, 65]]\n  });\n  \n  React.useEffect(() => {\n    console.log(props.baseURL);\n    let calls = [\n      axios.get(`${props.baseURL}gtf/flow.json`),\n      axios.get(`${props.baseURL}gtf/places.csv`),\n      axios.get(`${props.baseURL}gtf/Europe3.json`),\n    ]\n    axios.all(calls)\n\t\t.then(response => {\n      let flows = [ ...response[0].data ];\n      const locations = Papa.parse(response[1].data, { header:true }).data.map(d => ({...d, lon: +d.lon, lat: +d.lat }));\n      let locationWithShape = response[2].data;\n\n      locations.forEach(d => {\n        if ( !d.ISO3 ) {\n          locationWithShape.features.push({\n            type: \"Feature\",\n            properties: { name: d.name, lon: d.lon, lat: d.lat },\n            geometry: { type:\"Polygon\", coordinates: []}\n          })\n        }\n      })\n\n      let result = locationWithShape.features.map(d => \n        ({ ...d, \n          properties: { \n            ISO3: d.properties.ISO3, \n            name: d.properties.name, \n            centroid: [parseFloat(d.properties.lon), parseFloat(d.properties.lat)] \n          }\n        })\n      );\n      \n      setData({\n        locations: {type: 'FeatureCollection', features: result},\n        flows: flows,\n      });\n      setLoaded(true);\n\t\t})\n\t}, [props.baseURL])\n\n  if(loaded){\n    return (\n      <Flowmap \n        width='100vw' \n        height='100vh' \n        data={data}\n        viewState={viewState} \n        colors={{}}\n        onViewStateChange={({ viewState }) => setViewState(viewState)}/>\n    )\n  } else {\n    return <div>Loading...</div>\n  }\n  \n}\n","import React from \"react\";\nimport { BrowserRouter as Router, Route, Link, Switch } from \"react-router-dom\";\n// import ComboMap from \"./projects/ccus-combo-map\";\n// import WeatherForEnergy from \"./projects/weather-for-energy\";\n// import HeatingCoolingDemands from './projects/heating-cooling-demands'\nimport { GtfVector, GtfAnimatedFlow } from \"./projects/gas-trade-flow\";\n// import RegionsMap from './projects/ccus-region-maps'\n// import Test from './component-test'\nimport classes from \"./App.module.css\";\n\nexport default function App() {\n\n  const test = [{ id: \"test\", url: \"/test\", component: GtfAnimatedFlow }];\n  const projecturl = \"https://ieademoviz.azurewebsites.net/projects/\";\n  const prod = process.env.NODE_ENV === \"production\";\n  const baseurl = prod ? process.env.REACT_APP_PROD : process.env.REACT_APP_DEV;\n\n  return (\n    <Router>\n      <Switch>\n        <Route\n          path=\"/\"\n          exact\n          render={(_) => (\n            <div className={classes.Wrapper}>\n              <div>\n                <header>IEA Demo Visualisations</header>\n                <div>\n                  <ul>\n                    {!prod &&\n                      test.map((project) => (\n                        <li key={project.id}>\n                          <Link to={project.url} style={{ color: \"#04f\" }}>\n                            {project.id}\n                          </Link>\n                        </li>\n                      ))}\n                    {PROJECTS.map((project, idx) => (\n                      <Item key={idx} {...project} baseurl={projecturl} />\n                    ))}\n                  </ul>\n                </div>\n              </div>\n            </div>\n          )}\n        />\n        {test.map(({ id, url, component: C }) => (\n          <Route\n            exact\n            key={id}\n            path={url}\n            render={(props) => <C {...props} baseURL={baseurl} />}\n          />\n        ))}\n      </Switch>\n    </Router>\n  );\n}\n\nfunction Item({ project, status, url, baseurl }) {\n  let styledClass =\n    status === \"pending\"\n      ? classes.pending\n      : \"done\"\n      ? classes.done\n      : classes.progress;\n\n  return (\n    <li>\n      <a className={styledClass} href={`${baseurl}${url}`}>\n        {project}\n      </a>\n    </li>\n  );\n}\n\nconst PROJECTS = [\n  {\n    status: \"done\",\n    project: \"CCUS Combo Map\",\n    url: \"ccus-combo-map\",\n  },\n  {\n    status: \"done\",\n    project: \"ETP Heating and Cooling Demands\",\n    url: \"heating-cooling-demands\",\n  },\n  {\n    status: \"done\",\n    project: \"Weather for energy tracker\",\n    url: \"weather-for-energy\",\n  },\n  {\n    status: \"done\",\n    project: \"CCUS Region Map - US\",\n    url: \"ccus-regions-maps/us\",\n  },\n  {\n    status: \"done\",\n    project: \"CCUS Region Map - Europe\",\n    url: \"ccus-regions-maps/europe\",\n  },\n  {\n    status: \"done\",\n    project: \"CCUS Region Map - China\",\n    url: \"ccus-regions-maps/china\",\n  },\n  {\n    status: \"pending\",\n    project: \"GTF - Flow\",\n    url: \"gas-trade-flow/animated\",\n  },\n  {\n    status: \"pending\",\n    project: \"GTF - Vector\",\n    url: \"gas-trade-flow/vector\",\n  },\n];\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport \"./index.css\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}