${\n layer.title\n }
${\n layer.description\n }
${this.parseDatetime(\n mindatetime\n )}
${\n data.lat[i]\n }, ${\n data.lon[i]\n }
${value}
${unit}
${\n layer.name\n }
`,\n { className: \"datasetsPopup\" }\n )\n .bindTooltip(valuestring, {\n permanent: false,\n direction: \"top\",\n className: \"basic-tooltip\",\n opacity: 1,\n })\n );\n }\n this.raster.push(L.layerGroup(polygons).addTo(this.map));\n };\n\n swapCoord = (arr) => {\n var newArr = [];\n for (var i = 0; i < arr.length; i++) {\n newArr.push([arr[i][1], arr[i][0]]);\n }\n return newArr;\n };\n\n findFeature = (features, key) => {\n return features.find((f) => parseInt(f.properties.id) === parseInt(key));\n };\n\n simstrat = async (layer, file) => {\n var { min, max, data } = layer;\n var layerData, outdate;\n var url = \"https://www.datalakes-eawag.ch/datadetail/\" + layer.datasets_id;\n if (Object.keys(data).includes(\"time\")) {\n var { lakejson, datetime } = this.props;\n var di = this.indexClosest(datetime.getTime() / 1000, data[\"time\"]);\n outdate = new Date(data[\"time\"][di] * 1000);\n var value, name, latlng;\n layerData = [];\n var type = \"surface\";\n if (layer.parameters_id === 56) {\n type = \"bottom\";\n }\n for (var key in data) {\n var lakefeature = this.findFeature(lakejson.features, key);\n if (typeof lakefeature !== \"undefined\") {\n value = data[key][type][di];\n name = lakefeature.properties.Name;\n latlng = this.swapCoord(lakefeature.geometry.coordinates[0]);\n layerData.push({ value, name, latlng });\n }\n }\n } else {\n layerData = JSON.parse(JSON.stringify(data));\n outdate = file.maxdatetime;\n }\n var polygons = [];\n for (var i = 0; i < layerData.length; i++) {\n var pixelcolor = getColor(layerData[i].value, min, max, layer.colors);\n var valuestring = String(layerData[i].value) + \"°C\";\n polygons.push(\n L.polygon(layerData[i].latlng, {\n color: pixelcolor,\n fillColor: pixelcolor,\n fillOpacity: 0.8,\n title: layerData[i].value,\n })\n .bindPopup(\n `${\n layer.title\n }
${\n layer.description\n }
${this.parseDatetime(\n outdate\n )}
${\n layerData[i].name\n }
${\n layerData[i].value\n }
°C
${\n layer.name\n }
`,\n { className: \"datasetsPopup\" }\n )\n .bindTooltip(valuestring, {\n permanent: false,\n direction: \"top\",\n className: \"basic-tooltip\",\n opacity: 1,\n })\n );\n }\n this.raster.push(L.layerGroup(polygons).addTo(this.map));\n };\n\n delft3dToJavascriptDatetime = (date) => {\n const out = new Date(2008, 2, 1, 0, 0, 0);\n out.setTime(out.getTime() + date * 1000);\n return out;\n };\n\n getCellCorners = (data, i, j) => {\n function cellCorner(center, opposite, left, right) {\n if (\n center[0] !== null &&\n opposite[0] !== null &&\n left[0] !== null &&\n right[0] !== null\n ) {\n let x = (opposite[0] + left[0] + right[0] + center[0]) / 4;\n let y = (opposite[1] + left[1] + right[1] + center[1]) / 4;\n return [x, y];\n } else {\n return false;\n }\n }\n\n function oppositePoint(center, corner) {\n let x = center[0] + center[0] - corner[0];\n let y = center[1] + center[1] - corner[1];\n return [x, y];\n }\n // TopLeft\n var tl = cellCorner(\n [data[\"lng\"][i][j], data[\"lat\"][i][j]],\n [data[\"lng\"][i - 1][j - 1], data[\"lat\"][i - 1][j - 1]],\n [data[\"lng\"][i][j - 1], data[\"lat\"][i][j - 1]],\n [data[\"lng\"][i - 1][j], data[\"lat\"][i - 1][j]]\n );\n // BottomLeft\n var bl = cellCorner(\n [data[\"lng\"][i][j], data[\"lat\"][i][j]],\n [data[\"lng\"][i + 1][j - 1], data[\"lat\"][i + 1][j - 1]],\n [data[\"lng\"][i + 1][j], data[\"lat\"][i + 1][j]],\n [data[\"lng\"][i][j - 1], data[\"lat\"][i][j - 1]]\n );\n // BottomRight\n var br = cellCorner(\n [data[\"lng\"][i][j], data[\"lat\"][i][j]],\n [data[\"lng\"][i + 1][j + 1], data[\"lat\"][i + 1][j + 1]],\n [data[\"lng\"][i][j + 1], data[\"lat\"][i][j + 1]],\n [data[\"lng\"][i + 1][j], data[\"lat\"][i + 1][j]]\n );\n // TopRight\n var tr = cellCorner(\n [data[\"lng\"][i][j], data[\"lat\"][i][j]],\n [data[\"lng\"][i - 1][j + 1], data[\"lat\"][i - 1][j + 1]],\n [data[\"lng\"][i - 1][j], data[\"lat\"][i - 1][j]],\n [data[\"lng\"][i][j + 1], data[\"lat\"][i][j + 1]]\n );\n\n let op = [data[\"lng\"][i][j], data[\"lat\"][i][j]];\n\n if (!tl && br) tl = oppositePoint(op, br);\n if (!bl && tr) bl = oppositePoint(op, tr);\n if (!br && tl) br = oppositePoint(op, tl);\n if (!tr && bl) tr = oppositePoint(op, bl);\n if (tl && bl && br && tr) {\n return [\n [tl[1], tl[0]],\n [bl[1], bl[0]],\n [br[1], br[0]],\n [tr[1], tr[0]],\n ];\n } else {\n return false;\n }\n };\n\n prepareContourData = (data) => {\n var x = [];\n var y = [];\n for (let i = 0; i < data[\"variables\"][\"temperature\"][\"data\"].length; i++) {\n var xx = [];\n var yy = [];\n for (\n let j = 0;\n j < data[\"variables\"][\"temperature\"][\"data\"][0].length;\n j++\n ) {\n if (data[\"variables\"][\"temperature\"][\"data\"][i][j]) {\n let latlng = [data[\"lng\"][i][j], data[\"lat\"][i][j]];\n xx.push(latlng[0]);\n yy.push(latlng[1]);\n } else {\n xx.push(null);\n yy.push(null);\n }\n }\n x.push(xx);\n y.push(yy);\n }\n return { x, y, z: data[\"variables\"][\"temperature\"][\"data\"] };\n };\n\n onEachContour = (info, datetime, depth, url) => {\n var parseDatetime = this.parseDatetime;\n return function onEachFeature(feature, layer) {\n layer.bindPopup(\n `${\n info.title\n }
${\n info.description\n }
${parseDatetime(\n datetime\n )}
${String(\n feature.value.toFixed(2)\n )}
${String(\n info.unit\n )}
Water Temperature @ ${depth}m
`,\n { className: \"datasetsPopup\" }\n );\n //layer.bindTooltip(feature.value + info.unit);\n };\n };\n\n threeDmodel = async (layer, file, timeformat) => {\n var { parameters_id, data, id } = layer;\n var datetime = new Date(data[\"time\"]);\n var depth = Math.abs(data[\"depth\"][\"data\"]).toFixed(2);\n var parseDatetime = this.parseDatetime;\n var {\n vectorArrows,\n vectorMagnitude,\n vectorFlow,\n vectorFlowColor,\n vectorArrowColor,\n contour,\n thresholds,\n min,\n max,\n colors,\n unit,\n datasets_id,\n opacity,\n } = layer;\n var url = \"https://www.datalakes-eawag.ch/datadetail/\" + datasets_id;\n var polygons, i, j, coords, value, valuestring, pixelcolor;\n var map = this.map;\n if (parameters_id === 5) {\n // Temperature plot\n if (contour) {\n var contourData = this.prepareContourData(data);\n var contours = L.contour(contourData, {\n thresholds: thresholds,\n style: (feature) => {\n return {\n color: getColor(feature.geometry.value, min, max, colors),\n opacity: 0,\n fillOpacity: 1,\n };\n },\n onEachFeature: this.onEachContour(layer, datetime, depth, url),\n });\n this.raster.push(contours.addTo(this.map));\n } else {\n polygons = [];\n for (i = 1; i < data[\"lat\"].length - 1; i++) {\n for (j = 1; j < data[\"lat\"][0].length - 1; j++) {\n if (data[\"variables\"][\"temperature\"][\"data\"][i][j] !== null) {\n coords = this.getCellCorners(data, i, j);\n if (coords) {\n value =\n Math.round(\n data[\"variables\"][\"temperature\"][\"data\"][i][j] * 1000\n ) / 1000;\n valuestring = String(value) + String(unit);\n pixelcolor = getColor(\n data[\"variables\"][\"temperature\"][\"data\"][i][j],\n min,\n max,\n colors\n );\n let lat = Math.round(coords[0][0] * 1000) / 1000;\n let lng = Math.round(coords[0][1] * 1000) / 1000;\n polygons.push(\n L.polygon(coords, {\n color: pixelcolor,\n fillColor: pixelcolor,\n fillOpacity: 1,\n title: value,\n })\n .bindPopup(\n `${\n layer.title\n }
${\n layer.description\n }
${parseDatetime(\n datetime\n )}
${lat}, ${lng}
${String(\n value\n )}
${String(\n unit\n )}
Water Temperature @ ${depth}m
`,\n { className: \"datasetsPopup\" }\n )\n .bindTooltip(valuestring, {\n permanent: false,\n direction: \"top\",\n className: \"basic-tooltip\",\n opacity: 1,\n })\n );\n }\n }\n }\n }\n this.raster.push(L.featureGroup(polygons).addTo(this.map));\n }\n if (\n !(\"center\" in this.props) &&\n !(\"zoom\" in this.props) &&\n !this.zoomedtolayer\n ) {\n this.map.fitBounds(this.raster[0].getBounds());\n this.zoomedtolayer = true;\n }\n } else if (parameters_id === 25) {\n // Velocity plot\n if (vectorMagnitude) {\n polygons = [];\n for (i = 1; i < data[\"lng\"].length - 1; i++) {\n for (j = 1; j < data[\"lng\"][0].length - 1; j++) {\n if (data[\"variables\"][\"u\"][\"data\"][i][j] !== null) {\n coords = this.getCellCorners(data, i, j);\n if (coords) {\n let u = data[\"variables\"][\"u\"][\"data\"][i][j];\n let v = data[\"variables\"][\"v\"][\"data\"][i][j];\n var magnitude = Math.abs(\n Math.sqrt(Math.pow(u, 2) + Math.pow(v, 2))\n );\n let deg = Math.round(\n (Math.atan2(u / magnitude, v / magnitude) * 180) / Math.PI\n );\n if (deg < 0) deg = 360 + deg;\n value = Math.round(magnitude * 1000) / 1000;\n let html = `${value}m/s ${deg}°`;\n valuestring = String(value) + String(unit);\n pixelcolor = getColor(magnitude, min, max, colors);\n let lat = Math.round(coords[0][0] * 1000) / 1000;\n let lng = Math.round(coords[0][1] * 1000) / 1000;\n polygons.push(\n L.polygon(coords, {\n color: pixelcolor,\n fillColor: pixelcolor,\n fillOpacity: 1,\n title: magnitude,\n })\n .bindPopup(\n `${\n layer.title\n }
${\n layer.description\n }
${parseDatetime(\n datetime\n )}
${lat}, ${lng}
${String(\n html\n )}
Water Velocity @ ${depth}m
`,\n { className: \"datasetsPopup\" }\n )\n .bindTooltip(html, {\n permanent: false,\n direction: \"top\",\n className: \"basic-tooltip\",\n opacity: 1,\n })\n );\n }\n }\n }\n }\n this.raster.push(L.layerGroup(polygons).addTo(this.map));\n }\n if (vectorArrows) {\n var arrows = L.vectorField(data, {\n vectorArrowColor,\n colors,\n min,\n max,\n size: 15,\n }).addTo(this.map);\n var arrowtooltip = arrows.bindTooltip(\"my tooltip text\", {\n permanent: false,\n direction: \"top\",\n className: \"basic-tooltip\",\n opacity: 1,\n });\n arrows.on(\"mousemove\", function (e) {\n let { u, v } = e.value;\n if (u && v) {\n let mag = Math.round(Math.sqrt(u ** 2 + v ** 2) * 1000) / 1000;\n let deg = Math.round(\n (Math.atan2(u / mag, v / mag) * 180) / Math.PI\n );\n if (deg < 0) deg = 360 + deg;\n let html = `${mag}m/s ${deg}°`;\n arrowtooltip._tooltip._content = html;\n arrowtooltip.openTooltip(e.latlng);\n } else {\n arrowtooltip.closeTooltip();\n }\n });\n arrows.on(\"click\", function (e) {\n console.log(\"Firing\", e);\n if (e.value !== null && e.value.u !== null) {\n let { u, v } = e.value;\n let { lat, lng } = e.latlng;\n lat = Math.round(lat * 1000) / 1000;\n lng = Math.round(lng * 1000) / 1000;\n let mag = Math.round(Math.sqrt(u ** 2 + v ** 2) * 1000) / 1000;\n let deg = Math.round(\n (Math.atan2(u / mag, v / mag) * 180) / Math.PI\n );\n if (deg < 0) deg = 360 + deg;\n value = Math.round(mag * 1000) / 1000;\n let inner = `${value}m/s ${deg}°`;\n let html = `${\n layer.title\n }
${\n layer.description\n }
${parseDatetime(\n datetime\n )}
${lat}, ${lng}
${String(\n inner\n )}
Water Veloctiy @ ${depth}m
`;\n console.log(e.latlng);\n L.popup({ className: \"datasetsPopup\" })\n .setLatLng(e.latlng)\n .setContent(html)\n .openOn(map);\n }\n });\n this.raster.push(arrows);\n }\n if (vectorFlow) {\n var dict = {\n 2: 0.0005,\n 14: 0.004,\n 5: 0.001,\n 6: 0.001,\n 8: 0.001,\n 10: 0.001,\n 15: 0.001,\n };\n var radius =\n String(datasets_id) in dict ? dict[String(datasets_id)] : 0.002;\n var vectordata = this.parseVectorData(data, radius);\n var vectors;\n if (Object.keys(this.vectorfieldanim).includes(id)) {\n this.vectorfieldanim[id].updateData(vectordata.data);\n this.vectorfieldtime = this.props.datetime;\n vectors = this.vectorfieldanim[id];\n } else {\n function getLineColor(val) {\n return getColor(val, min, max, colors);\n }\n var color = \"white\";\n if (vectorFlowColor === \"true\") {\n color = getLineColor;\n } else if ([\"white\", \"grey\", \"black\"].includes(vectorFlowColor)) {\n color = vectorFlowColor;\n }\n vectors = L.streamlines(vectordata.data, {\n paths: 5000,\n color,\n opacity,\n xMin: vectordata.xMin,\n xMax: vectordata.xMax,\n yMin: vectordata.yMin,\n yMax: vectordata.yMax,\n }).addTo(this.map);\n this.vectorfieldtime = this.props.datetime;\n this.vectorfieldanim[id] = vectors;\n }\n\n try {\n this.flowtooltip.closeTooltip();\n } catch (e) {}\n\n this.flowtooltip = vectors.bindTooltip(\"\", {\n permanent: false,\n direction: \"top\",\n className: \"basic-tooltip\",\n opacity: 1,\n });\n var flowtooltip = this.flowtooltip;\n vectors.on(\"mousemove\", function (e) {\n let { u, v } = e.value;\n if (u && v) {\n let mag = Math.round(Math.sqrt(u ** 2 + v ** 2) * 1000) / 1000;\n let deg = Math.round(\n (Math.atan2(u / mag, v / mag) * 180) / Math.PI\n );\n if (deg < 0) deg = 360 + deg;\n let html = `${mag}m/s ${deg}°`;\n flowtooltip._tooltip._content = html;\n flowtooltip.openTooltip(e.latlng);\n } else {\n flowtooltip.closeTooltip();\n }\n });\n vectors.on(\"click\", function (e) {\n if (e.value !== null && e.value.u !== null) {\n let { u, v } = e.value;\n let { lat, lng } = e.latlng;\n lat = Math.round(lat * 1000) / 1000;\n lng = Math.round(lng * 1000) / 1000;\n let mag = Math.round(Math.sqrt(u ** 2 + v ** 2) * 1000) / 1000;\n let deg = Math.round(\n (Math.atan2(u / mag, v / mag) * 180) / Math.PI\n );\n if (deg < 0) deg = 360 + deg;\n value = Math.round(mag * 1000) / 1000;\n let inner = `${value}m/s ${deg}°`;\n let html = `${\n layer.title\n }
${\n layer.description\n }
${parseDatetime(\n datetime\n )}
${lat}, ${lng}
${String(\n inner\n )}
Water Veloctiy @ ${depth}m
`;\n L.popup({ className: \"datasetsPopup\" })\n .setLatLng(e.latlng)\n .setContent(html)\n .openOn(map);\n }\n });\n }\n }\n };\n\n capitalize = (s) => {\n if (typeof s !== \"string\") return \"\";\n return s.charAt(0).toUpperCase() + s.slice(1);\n };\n\n gitPlot = async (layer, file) => {\n var {\n datasetparameters,\n parameters_id,\n datasets_id,\n markerLabel,\n min,\n max,\n colors,\n markerSymbol,\n markerFixedSize,\n markerSize,\n latitude,\n longitude,\n unit,\n maxdepth,\n data,\n yselectindex,\n } = layer;\n var datasetparameter = datasetparameters.find(\n (dp) => dp.parameters_id === parameters_id\n );\n var { datetime, depth } = this.props;\n var type = datasetparameters.map((dp) => dp.axis + \"&\" + dp.parameters_id);\n var index, indexx, indexy, size, marker;\n var minSize = 5;\n var maxSize = 30;\n var markerGroup = L.layerGroup().addTo(this.map);\n var dt = datetime;\n var dd = Math.round(depth * 100) / 100;\n var value = \"NA\";\n\n if (file.latitude !== \"-9999\" && file.longitude !== \"-9999\") {\n latitude = file.latitude;\n longitude = file.longitude;\n }\n\n if (type.includes(\"M&1\") && type.includes(\"y&2\")) {\n // Profiler vs depth\n let dp2 = datasetparameters.find((dp) => dp.parameters_id === 1);\n let dp3 = datasetparameters.find((dp) => dp.parameters_id === 2);\n index = this.indexClosest(depth, data.y);\n value = this.numberformat(parseFloat(data[datasetparameter.axis][index]));\n dt = new Date(data[dp2.axis][index] * 1000);\n dd = Math.round(data[dp3.axis][index] * 100) / 100 + \"m\";\n } else if (type.includes(\"M&1\") && type.includes(\"y&18\")) {\n // Profiler vs pressure\n let dp2 = datasetparameters.find((dp) => dp.parameters_id === 1);\n let dp3 = datasetparameters.find((dp) => dp.parameters_id === 18);\n index = this.indexClosest(depth, data.y);\n value = this.numberformat(parseFloat(data[datasetparameter.axis][index]));\n dt = new Date(data[dp2.axis][index] * 1000);\n dd = Math.round(data[dp3.axis][index] * 100) / 100 + \"m\";\n } else if (\n type.join(\",\").includes(\"z&\") &&\n type.includes(\"x&1\") &&\n type.includes(\"y&2\")\n ) {\n // 2D Depth Time Dataset\n indexx = this.indexClosest(datetime.getTime() / 1000, data[\"x\"]);\n indexy = this.indexClosest(depth, data[\"y\"]);\n if (Array.isArray(data[datasetparameter.axis][0])) {\n value = this.numberformat(data[datasetparameter.axis][indexy][indexx]);\n dd = Math.round(data[\"y\"][indexy] * 100) / 100 + \"m\";\n } else {\n value = this.numberformat(data[datasetparameter.axis][indexx]);\n dd = \"\";\n }\n dt = new Date(data[\"x\"][indexx] * 1000);\n } else if (\n type.includes(\"x&1\") &&\n !type.includes(\"y&2\") &&\n type.join(\",\").includes(\"z&\")\n ) {\n // 2D Non-Depth Time Dataset\n var param = datasetparameters.find((dp) => dp.axis === \"y\");\n indexx = this.indexClosest(datetime.getTime() / 1000, data[\"x\"]);\n if (yselectindex) {\n value = this.numberformat(\n data[datasetparameter.axis][yselectindex][indexx]\n );\n dt = new Date(data[\"x\"][indexx] * 1000);\n dd = `` +\n `
`,\n }),\n })\n .bindTooltip(\n `` +\n `
${this.parseDatetime(\n dt\n )}
${value}
${unit}
${\n datasetparameter.name\n } ${dd !== \"\" ? \"@\" : \"\"} ${dd}
${\n layer.title\n }
${\n layer.description\n }
${this.parseDatetime(\n dt\n )}
${latitude}, ${longitude}
${String(\n value\n )}
${String(\n unit\n )}
${datasetparameter.name} ${\n dd !== \"\" ? \"@\" : \"\"\n } ${dd}
`,\n { className: \"datasetsPopup\" }\n );\n\n this.marker.push(markerGroup);\n };\n\n plotDatasets = () => {\n var { datasets, datasetparameters } = this.props;\n var addSelectedLayer = this.addSelectedLayer;\n var measurementIcon = L.icon({\n iconUrl: measurement,\n iconSize: [38, 38],\n iconAnchor: [19, 19],\n popupAnchor: [0, -24],\n className: \"leaflet-custom-icon\",\n });\n var modelIcon = L.icon({\n iconUrl: model,\n iconSize: [38, 38],\n iconAnchor: [19, 19],\n popupAnchor: [0, -24],\n className: \"leaflet-custom-icon\",\n });\n var satelliteIcon = L.icon({\n iconUrl: satellite,\n iconSize: [38, 38],\n iconAnchor: [19, 19],\n popupAnchor: [0, -24],\n className: \"leaflet-custom-icon\",\n });\n var markerGroup = L.markerClusterGroup().addTo(this.map);\n var marker;\n var id;\n for (var dataset of datasets) {\n if (\n [\"gitPlot\", \"meteolakes\", \"remoteSensing\"].includes(\n dataset.mapplotfunction\n )\n ) {\n var icon = measurementIcon;\n if (dataset.origin === \"model\") {\n icon = modelIcon;\n } else if (dataset.origin === \"satellite\") {\n icon = satelliteIcon;\n }\n marker = new L.marker([dataset.latitude, dataset.longitude], {\n icon: icon,\n })\n .bindTooltip(dataset.title, {\n direction: \"bottom\",\n offset: [0, 25],\n opacity: 1,\n className: \"basic-tooltip\",\n })\n .addTo(markerGroup);\n let buttons = \"\";\n let d_id = dataset.id;\n let ids = [];\n for (var dp of datasetparameters.filter(\n (dp) =>\n dp.datasets_id === d_id &&\n ![1, 2, 3, 4, 27, 28, 29, 30].includes(dp.parameters_id)\n )) {\n id = `${dataset.id}_${dp.parameters_id}`;\n ids.push({\n id,\n datasets_id: dataset.id,\n parameters_id: dp.parameters_id,\n });\n buttons = buttons + ``;\n }\n let url = \"https://www.datalakes-eawag.ch/datadetail/\" + dataset.id;\n marker\n .bindPopup(\n `${\n dataset.title\n }
${\n dataset.description\n }
${this.parseMonth(\n dataset.mindatetime\n )} to ${this.parseMonth(\n dataset.maxdatetime\n )}
\n );\n }\n}\n\nexport default SidebarLayout;\n","export const urlFromSsh = (ssh, renku = false) => {\n var url;\n var group = ssh.replace(\".git\", \"\").split(\":\")[1].split(\"/\")[0];\n var repository = ssh.replace(\".git\", \"\").split(\":\")[1].split(\"/\")[1];\n\n if (ssh.includes(\"git@renkulab.io\")) {\n if (renku) {\n url = `https://renkulab.io/projects/${group}/${repository}`;\n } else {\n url = `https://renkulab.io/gitlab/${group}/${repository}`;\n }\n } else if (ssh.includes(\"git@gitlab.renkulab.io\")) {\n url = `https://gitlab.renkulab.io/${group}/${repository}`;\n } else if (ssh.includes(\"github.com\")) {\n url = `https://github.com/${group}/${repository}`;\n } else if (ssh.includes(\"gitlab.com\")) {\n url = `https://gitlab.com/${group}/${repository}`;\n }\n return url;\n};\n","import React, { Component } from \"react\";\nimport L from \"leaflet\";\nimport \"./leaflet_customcontrol\";\nimport \"leaflet.markercluster\";\nimport \"leaflet-draw\";\nimport \"./css/leaflet.css\";\nimport \"./css/markercluster.css\";\nimport \"./css/markerclusterdefault.css\";\nimport \"./css/marker.css\";\nimport \"./css/mapselect.css\";\n\nclass MapSelect extends Component {\n rectEnable = (e) => {\n if (e.ctrlKey) {\n this.rectangle.enable();\n }\n };\n\n componentDidMount() {\n const { datasets, selectPoints, mapToggle } = this.props;\n var center = [46.85, 7.55];\n var zoom = 8;\n\n this.map = L.map(\"mapselect\", {\n center: center,\n zoom: zoom,\n minZoom: 2,\n maxZoom: 18,\n layers: [\n //L.tileLayer('https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-grau/default/current/3857/{z}/{x}/{y}.jpeg', {attribution: 'swisstopo'})\n L.tileLayer(\n \"https://api.mapbox.com/styles/v1/jamesrunnalls/ckfs3ngtw0fx519o5oinhc5mh/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamFtZXNydW5uYWxscyIsImEiOiJjazk0ZG9zd2kwM3M5M2hvYmk3YW0wdW9yIn0.uIJUZoDgaC2LfdGtgMz0cQ\",\n {\n attribution:\n 'swisstopo DV 5704 000 000 | © OpenStreetMap | © mapbox',\n }\n ),\n ],\n });\n\n if (selectPoints) {\n var drawnItems = new L.FeatureGroup();\n this.map.addLayer(drawnItems);\n var drawControl = new L.Control.Draw({\n edit: {\n draw: true,\n featureGroup: drawnItems,\n },\n });\n this.map.addControl(drawControl);\n\n this.rectangle = new L.Draw.Rectangle(\n this.map,\n drawControl.options.Rectangle\n );\n\n this.map.on(\"draw:created\", function (e) {\n var layer = e.layer;\n selectPoints(layer._latlngs[0]);\n drawnItems.clearLayers();\n drawnItems.addLayer(layer);\n });\n this.drawnItems = drawnItems;\n window.addEventListener(\"keydown\", this.rectEnable);\n }\n\n // Close button\n if (mapToggle) {\n L.control\n .custom({\n position: \"topright\",\n content: '✘
',\n classes: \"closemap\",\n style: {\n margin: \"10px\",\n padding: \"0px 0 0 0\",\n cursor: \"pointer\",\n },\n events: {\n click: function (data) {\n mapToggle();\n },\n },\n })\n .addTo(this.map);\n }\n\n // Plot markers\n var bounds = this.plotMarkers(datasets);\n try {\n this.map.fitBounds(bounds, { maxZoom: 12 });\n } catch (e) {}\n }\n\n componentDidUpdate() {\n this.map.invalidateSize();\n const { datasets, filters } = this.props;\n if (filters && !(\"Location\" in filters)) {\n this.drawnItems.clearLayers();\n var bounds = this.plotMarkers(datasets);\n try {\n this.map.fitBounds(bounds, { maxZoom: 8 });\n } catch (e) {}\n } else {\n this.plotMarkers(datasets);\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"keydown\", this.rectEnable);\n }\n\n plotMarkers = (datasets) => {\n try {\n this.map.removeLayer(this.markers);\n } catch (e) {}\n\n try {\n const { clickPoint, files } = this.props;\n var shape = \"marker\";\n var color = \"#38bec9\";\n var Icon = L.divIcon({\n className: \"map-marker\",\n html: ` `,\n });\n var IconSelect = L.divIcon({\n className: \"map-marker\",\n html: ` `,\n });\n\n this.markers = L.markerClusterGroup();\n var bounds = L.latLngBounds();\n for (let i = 0; i < datasets.length; i++) {\n let dataset = datasets[i];\n var { latitude, longitude, title, id, ave, fileid } = dataset;\n latitude = parseFloat(latitude);\n longitude = parseFloat(longitude);\n if (latitude !== -9999 && longitude !== -9999) {\n bounds.extend([latitude, longitude]);\n if (title && id) {\n this.markers.addLayer(\n new L.marker([latitude, longitude], {\n icon: Icon,\n }).bindPopup(`${title}`)\n );\n } else if (ave && clickPoint) {\n let inIcon = Icon;\n let text = \"Select file\";\n if (files.includes(fileid)) {\n inIcon = IconSelect;\n text = \"Selected file\";\n }\n let value = new Date(ave);\n this.markers.addLayer(\n new L.marker([latitude, longitude], {\n icon: inIcon,\n id: fileid,\n })\n .bindTooltip(\n `${text}
${\n value.toDateString() + \" \" + value.toLocaleTimeString()\n }
${dataset.nc_name}
`\n )\n .on(\"click\", (e) => {\n clickPoint(e);\n })\n );\n } else {\n this.markers.addLayer(\n new L.marker([latitude, longitude], {\n icon: Icon,\n })\n );\n }\n }\n }\n this.map.addLayer(this.markers);\n return bounds;\n } catch (e) {\n console.error(e);\n }\n };\n render() {\n return (\n \n \n
\n \n \n \n
\n
\n | {title} | \n {toggleYgraph && (\n\n | \n )}\n {toggleXgraph && (\n \n | \n )}\n {display && (\n \n | \n )}\n \n Download Graph \n \n | \n {fontSize && (\n \n \n {[8, 10, 12, 14, 16, 18, 20, 22, 24].map((item) => (\n \n ))}\n \n | \n )}\n \n | \n \n \n \n \n \n
| \n
${\n Math.round(depth * 100) / 100\n }m below surface
`;\n var layerstring = \"| ${selectedlayers[i].title} ${selectedlayers[i].name} | ` +\n `◉ |
\n \n
\n );\n }\n}\n\nexport default DepthSelector;\n","import React, { Component } from \"react\";\nimport Calendar from \"react-calendar\";\nimport 'react-calendar/dist/Calendar.css';\nimport \"./datetimedepthselector.css\";\nimport DepthSelector from \"./depthselector\";\n\nclass TimeModal extends Component {\n scrollHour = (event) => {\n var { changeTime } = this.props;\n if (event.deltaY < 0) {\n changeTime(3600);\n } else if (event.deltaY > 0) {\n changeTime(-3600);\n }\n };\n scrollMins = (event) => {\n var { changeTime } = this.props;\n if (event.deltaY < 0) {\n changeTime(60);\n } else if (event.deltaY > 0) {\n changeTime(-60);\n }\n };\n escFunction = (event) => {\n if (event.keyCode === 27) {\n this.props.closeTime();\n }\n };\n componentDidMount() {\n document.addEventListener(\"keydown\", this.escFunction, false);\n }\n componentWillUnmount() {\n document.removeEventListener(\"keydown\", this.escFunction, false);\n }\n render() {\n var { datetime, changeTime, closeTime } = this.props;\n var hours = datetime.getHours();\n var hstring = hours < 10 ? \"0\" + hours : hours.toString();\n var mins = datetime.getMinutes();\n var mstring = mins < 10 ? \"0\" + mins : mins.toString();\n return (\n \n
\n );\n }\n}\n\nclass DateModal extends Component {\n changeDate = (datetime) => {\n var { toggleModal, onChangeDatetime, datetime: datetimeold } = this.props;\n var hours = datetimeold.getHours();\n var mins = datetimeold.getMinutes();\n datetime = new Date(datetime.getTime() + (hours * 3600 + mins * 60) * 1000);\n toggleModal();\n onChangeDatetime(datetime);\n };\n escFunction = (event) => {\n var { toggleModal } = this.props;\n if (event.keyCode === 27) {\n toggleModal();\n }\n };\n componentDidMount() {\n document.addEventListener(\"keydown\", this.escFunction, false);\n }\n componentWillUnmount() {\n document.removeEventListener(\"keydown\", this.escFunction, false);\n }\n render() {\n var { datetime, toggleModal } = this.props;\n return (\n \n
\n ✕
\n \n \n \n
\n
\n | changeTime(3600)}>\n ▲\n | \n\n | changeTime(60)}>\n ▲\n | \n\n |
| {hstring} | \n: | \n{mstring} | \n{hours < 12 ? \"AM\" : \"PM\"} | \n
| changeTime(-3600)}>\n ▼\n | \n\n | changeTime(-60)}>\n ▼\n | \n\n |
\n
\n );\n }\n}\n\nclass DepthModal extends Component {\n changeDepth = (depth) => {\n var { toggleModal, onChangeDepth } = this.props;\n toggleModal();\n onChangeDepth(depth);\n };\n escFunction = (event) => {\n if (event.keyCode === 27) {\n this.close();\n }\n };\n componentDidMount() {\n document.addEventListener(\"keydown\", this.escFunction, false);\n }\n componentWillUnmount() {\n document.removeEventListener(\"keydown\", this.escFunction, false);\n }\n render() {\n var { depth, selectedlayers, mindepth, maxdepth, toggleModal } = this.props;\n return (\n \n
\n ✕
\n \n
\n \n
\n );\n }\n}\n\nclass TimestepModal extends Component {\n changeTimestep = (timestep) => {\n var { toggleModal, onChangeTimestep } = this.props;\n toggleModal();\n onChangeTimestep(timestep);\n };\n\n escFunction = (event) => {\n if (event.keyCode === 27) {\n this.close();\n }\n };\n componentDidMount() {\n document.addEventListener(\"keydown\", this.escFunction, false);\n }\n componentWillUnmount() {\n document.removeEventListener(\"keydown\", this.escFunction, false);\n }\n render() {\n var { lableTimestep, timestep, toggleModal } = this.props;\n var timesteps = [\n \"Next\",\n 10,\n 20,\n 30,\n 60,\n 3 * 60,\n 6 * 60,\n 12 * 60,\n 24 * 60,\n 2 * 24 * 60,\n 7 * 24 * 60,\n 4 * 7 * 24 * 60,\n ];\n return (\n \n
\n ✕
\n \n
\n \n
\n \n
\n ✕
\n \n
\n Animation Timestep\n \n {timesteps.map((t) => (\n this.changeTimestep(t)}\n >\n {lableTimestep(t)}\n
\n ))}\n \n \n \n
\n
\n );\n }\n}\n\nexport default SelectorModal;\n","import React, { Component } from \"react\";\nimport isEqual from \"lodash/isEqual\";\nimport * as d3 from \"d3\";\nimport \"./timeselector.css\";\n\nclass TimeSelector extends Component {\n state = {\n domain: false,\n instructions: true,\n };\n updateDomain = (domain) => {\n this.domain = domain;\n };\n close = () => {\n this.setState({ instructions: false });\n };\n plotLineGraph = async () => {\n try {\n d3.select(\"#timeselectorsvg\").remove();\n d3.select(\"#tooltip\").remove();\n } catch (e) {}\n var {\n selectedlayers,\n datetime,\n mindatetime,\n maxdatetime,\n onChangeDatetime,\n } = this.props;\n var { instructions } = this.state;\n var close = this.close;\n if (selectedlayers.length && mindatetime && maxdatetime) {\n try {\n // Set graph size\n var margin = { top: 0, right: 10, bottom: 20, left: 0 },\n viswidth = d3\n .select(\"#timeselector\")\n .node()\n .getBoundingClientRect().width,\n visheight = margin.bottom + selectedlayers.length * 5,\n width = viswidth - margin.left - margin.right,\n height = visheight - margin.top - margin.bottom;\n\n // Format X-axis\n var x = d3\n .scaleTime()\n .range([0, width])\n .domain([mindatetime, maxdatetime]);\n var xx = d3\n .scaleTime()\n .range([0, width])\n .domain([mindatetime, maxdatetime]);\n\n // Define the axes\n var xAxis = d3.axisBottom(x).ticks(5);\n\n var updateDomain = this.updateDomain;\n var zoom = d3\n .zoom()\n .extent([\n [0, 0],\n [width, height],\n ])\n .on(\"zoom\", zoomed)\n .on(\"end\", zoomEnd);\n\n function zoomEnd(event) {\n if (event) {\n updateDomain(event.transform.rescaleX(xx).domain());\n if (instructions) close();\n }\n }\n\n function zoomed(event) {\n plotdata();\n if (event) {\n let d = event.transform.rescaleX(xx).domain();\n x.domain(d);\n current.attr(\"cx\", x(datetime));\n }\n gX.call(xAxis);\n }\n\n // Adds the svg canvas\n var svg = d3\n .select(\"#timeselector\")\n .append(\"svg\")\n .attr(\"id\", \"timeselectorsvg\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom)\n .append(\"g\")\n .attr(\n \"transform\",\n \"translate(\" + margin.left + \",\" + margin.top + \")\"\n )\n .call(zoom);\n\n // Add the X Axis\n var gX = svg\n .append(\"g\")\n .attr(\"class\", \"xaxis\")\n .attr(\"id\", \"axis--x\")\n .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(xAxis);\n\n // Add the availability data\n var bars = svg.append(\"g\").attr(\"class\", \"bars\").attr(\"id\", \"bars\");\n function plotdata() {\n d3.select(\"#bars\").selectAll(\"*\").remove();\n var array;\n for (let i = 0; i < selectedlayers.length; i++) {\n array = selectedlayers[i].files.map((x) => ({\n min: new Date(x.mindatetime),\n max: new Date(x.maxdatetime),\n }));\n bars\n .selectAll(\"dot\")\n .data(array)\n .enter()\n .append(\"rect\")\n .attr(\"height\", 4)\n .attr(\"width\", function (d) {\n return Math.max(2, x(d.max) - x(d.min));\n })\n .attr(\"stroke\", selectedlayers[i].color)\n .attr(\"fill\", selectedlayers[i].color)\n .attr(\"x\", function (d) {\n return x(d.min);\n })\n .attr(\"y\", function (d) {\n return i * 5;\n });\n }\n }\n\n plotdata();\n\n if (this.domain) {\n x.domain(this.domain);\n xx.domain(this.domain);\n zoomed(false);\n }\n\n // Add Focus\n var focus = svg\n .append(\"g\")\n .append(\"circle\")\n .style(\"fill\", \"#F83F3F\")\n .attr(\"stroke\", \"#F83F3F\")\n .attr(\"r\", 5)\n .attr(\"cy\", selectedlayers.length * 5)\n .style(\"opacity\", 0);\n\n // Add the current value\n var current = svg\n .append(\"g\")\n .append(\"circle\")\n .style(\"fill\", \"red\")\n .attr(\"stroke\", \"red\")\n .attr(\"r\", 6)\n .attr(\"cy\", selectedlayers.length * 5)\n .attr(\"cx\", x(datetime));\n\n // Add tooltip\n var tooltip = d3\n .select(\"#timeselector\")\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .attr(\"class\", \"timetooltip\");\n\n svg\n .append(\"rect\")\n .style(\"fill\", \"none\")\n .style(\"pointer-events\", \"all\")\n .attr(\"width\", width)\n .attr(\"height\", height + margin.bottom)\n .on(\"mouseover\", mouseover)\n .on(\"mousemove\", mousemove)\n .on(\"mouseout\", mouseout)\n .on(\"click\", onClick);\n\n function onClick(event) {\n tooltip.style(\"visibility\", \"hidden\");\n focus.style(\"opacity\", 0);\n var date = x.invert(d3.pointer(event)[0]);\n if (typeof date.getMonth === \"function\") {\n onChangeDatetime(date);\n current.attr(\"cx\", d3.pointer(event)[0]);\n focus.style(\"opacity\", 0);\n }\n }\n\n function mouseover() {\n focus.style(\"opacity\", 1);\n tooltip.style(\"visibility\", \"visible\");\n }\n\n function mouseout() {\n focus.style(\"opacity\", 0);\n tooltip.style(\"visibility\", \"hidden\");\n }\n\n function mousemove(event) {\n try {\n focus.attr(\"cx\", d3.pointer(event)[0]);\n } catch (e) {}\n try {\n tooltip\n .style(\"left\", d3.pointer(event)[0] - 75 + \"px\")\n .html(tooltiptext(x.invert(d3.pointer(event)[0])))\n .style(\n \"top\",\n `-${\n d3.select(\"#tooltip\").node().getBoundingClientRect().height +\n (30 - (selectedlayers.length - 1) * 5)\n }px`\n );\n } catch (e) {}\n }\n\n function tooltiptext(datetime) {\n var months = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ];\n var info =\n '| \n {modal === \"time\" && (\n | \n
Hint!
Scroll in on the slider to zoom in and select a specific date time.
';\n var datestring = `Scroll in on the slider to zoom in and select a specific date time.
${datetime.toLocaleTimeString(\n [],\n {\n hour: \"2-digit\",\n minute: \"2-digit\",\n }\n )} ${datetime.getDate()}-${\n months[datetime.getMonth()]\n } ${datetime.getFullYear()}
`;\n var layerstring = \"| ${selectedlayers[i].title} ${selectedlayers[i].name} | ` +\n `▬ |
\n \n
\n );\n }\n}\n\nexport default TimeSelector;\n","import React, { Component } from \"react\";\nimport { setIntervalAsync } from \"set-interval-async/dynamic\";\nimport { clearIntervalAsync } from \"set-interval-async\";\nimport \"./datetimedepthselector.css\";\nimport pauseicon from \"./img/pause.svg\";\nimport playicon from \"./img/play.svg\";\nimport skipbackwardsicon from \"./img/skipbackwards.svg\";\nimport skipforwardsicon from \"./img/skipforwards.svg\";\nimport clockicon from \"./img/clock.svg\";\nimport depthicon from \"./img/depth.svg\";\nimport SelectorModal from \"./selectormodal\";\nimport TimeSelector from \"./timeselector\";\n\nclass DatetimeDepthSelector extends Component {\n state = {\n modal: false,\n play: false,\n };\n\n skipForwards = () => {\n var { datetime, timestep, onChangeDatetime, selectedlayers } = this.props;\n if (timestep === \"Next\") {\n var files = [];\n var unix = datetime.getTime();\n for (let sl of selectedlayers) {\n files = files.concat(\n sl.files.map((f) => new Date(f.mindatetime).getTime())\n );\n }\n files = files.filter((f) => f > unix);\n files.sort(function (a, b) {\n return a - b;\n });\n if (files.length < 1) {\n return;\n } else {\n onChangeDatetime(new Date(files[0]));\n }\n } else {\n onChangeDatetime(new Date(datetime.getTime() + timestep * 60 * 1000));\n }\n };\n\n skipBackwards = () => {\n var { datetime, timestep, onChangeDatetime, selectedlayers } = this.props;\n if (timestep === \"Next\") {\n var files = [];\n var unix = datetime.getTime();\n for (let sl of selectedlayers) {\n files = files.concat(\n sl.files.map((f) => new Date(f.mindatetime).getTime())\n );\n }\n files = files.filter((f) => f < unix);\n files.sort(function (a, b) {\n return a - b;\n });\n if (files.length < 1) {\n return;\n } else {\n onChangeDatetime(new Date(files[files.length - 1]));\n }\n } else {\n onChangeDatetime(new Date(datetime.getTime() - timestep * 60 * 1000));\n }\n };\n\n moveOneTimestep = async () => {\n var { datetime, timestep, maxdatetime, mindatetime, onChangeDatetime } =\n this.props;\n if (\n datetime.getTime() >= mindatetime.getTime() &&\n datetime.getTime() <= maxdatetime.getTime()\n ) {\n await onChangeDatetime(\n new Date(datetime.getTime() + timestep * 60 * 1000)\n );\n } else {\n clearIntervalAsync(this.timer);\n this.setState({ play: !this.state.play });\n }\n };\n\n togglePlay = () => {\n var { play } = this.state;\n if (!play) {\n //this.timer = d3.interval(this.moveOneTimestep, 3000);\n this.timer = setIntervalAsync(async () => {\n await this.moveOneTimestep();\n }, 1500);\n } else {\n //this.timer.stop();\n clearIntervalAsync(this.timer);\n }\n this.setState({ play: !play });\n };\n\n toggleModal = (modal) => {\n if (this.state.modal) {\n this.setState({ modal: false });\n } else {\n this.setState({ modal });\n }\n };\n\n lableTimestep = (mins) => {\n if (Number.isInteger(mins / (60 * 24 * 7))) {\n var weeks = mins / (60 * 24 * 7);\n if (weeks === 1) {\n return \"1 week\";\n } else {\n return weeks + \" weeks\";\n }\n } else if (Number.isInteger(mins / (60 * 24))) {\n var days = mins / (60 * 24);\n if (days === 1) {\n return \"1 day\";\n } else {\n return days + \" days\";\n }\n } else if (Number.isInteger(mins / 60)) {\n var hours = mins / 60;\n if (hours === 1) {\n return \"1 hour\";\n } else {\n return hours + \" hours\";\n }\n } else if (Number.isInteger(mins)) {\n return mins + \" mins\";\n } else {\n return mins;\n }\n };\n\n render() {\n var {\n datetime,\n depth,\n timestep,\n onChangeDatetime,\n onChangeDepth,\n onChangeTimestep,\n mindatetime,\n maxdatetime,\n mindepth,\n maxdepth,\n selectedlayers,\n } = this.props;\n var { modal, play } = this.state;\n return (\n \n \n 
\n
\n \n
\n \n \n 
\n
\n \n
\n \n {this.lableTimestep(timestep)}\n
\n \n this.toggleModal(\"depth\")}\n >\n 
\n {` ${depth}m`}\n
\n \n \n \n
\n
\n );\n }\n}\n\nexport default SidebarDatetime;\n","import React, { Component } from \"react\";\nimport editlayers from \"./img/editlayers.svg\";\nimport { groups } from \"../../config.json\";\nimport drawing from \"./img/drawing.svg\";\nimport \"./layergroups.css\";\n\nclass Group extends Component {\n clickOnGroup = () => {\n var { setLayerGroup, properties, onClick } = this.props;\n if (onClick) {\n onClick();\n } else {\n var { data } = properties;\n setLayerGroup(data);\n }\n };\n render() {\n var { name, img } = this.props.properties;\n return (\n | \n {datetime.getDate()}\n | \n{months[datetime.getMonth()]} | \n
| {datetime.getFullYear()} | \n
\n {datetime.toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n })}{\" \"}\n @ {depth}m\n
\n \n 
\n
\n );\n }\n}\n\nclass LayerGroups extends Component {\n render() {\n var { setLayerGroup } = this.props;\n var lgroups = JSON.parse(JSON.stringify(groups));\n lgroups = lgroups.map((g) => {\n if (\"datetime\" in g.data) {\n g.data.datetime = new Date(g.data.datetime * 1000);\n }\n g.img = editlayers;\n return g;\n });\n return (\n {name}
\n \n
\n );\n }\n}\n\nexport default LayerGroups;\n","import React, { Component } from \"react\";\nimport \"./legend.css\";\n\nclass RasterLegendItem extends Component {\n linearGradient = (colors) => {\n if (colors) {\n var lineargradient = [];\n for (var i = 0; i < colors.length; i++) {\n lineargradient.push(`${colors[i].color} ${colors[i].point * 100}%`);\n }\n return `linear-gradient(0deg,${lineargradient.join(\",\")})`;\n }\n };\n render() {\n var { min, max, unit, colors } = this.props;\n if (min === null) min = 0;\n if (max === null) max = 0;\n min = parseFloat(min);\n max = parseFloat(max);\n var inner = [];\n var fixedColor = false;\n var selectStyle;\n if (colors.length === 2 && colors[0].color === colors[1].color) {\n fixedColor = true;\n }\n if (fixedColor) {\n selectStyle = {\n background: colors[0].color,\n };\n inner.push(\n \n Select an example package or add a layer to start building your own\n custom map.\n
\n \n
\n \n this.toggle(\"legend\")}\n >\n
\n );\n }\n}\n\nexport default EditSettings;\n","import React, { Component } from \"react\";\nimport EditSettings from \"./editsettings\";\nimport { sortableHandle } from \"react-sortable-hoc\";\nimport settings_img from \"./img/settings.svg\";\nimport \"./maplayers.css\";\n\nconst DragHandle = sortableHandle(({ inner }) => (\n \n \n \n
\n
\n {type.includes(\"x&1\") &&\n !type.includes(\"y&2\") &&\n type.join(\",\").includes(\"z&\") && (\n | Min: | \n\n | \n \n \n \n \n | \n
| Max: | \n\n | \n \n \n \n \n | \n
\n {this.capitalize(yselectparam.parseparameter) + \" \"}\n this.onChangeInput(e, \"yselectindex\")}\n >\n {data.y.map((d, index) => (\n \n ))}\n \n {\" \" + yselectparam.unit}\n
\n )}\n {[\"raster\", \"group\"].includes(mapplot) &&\n validpixelexpression === \"NA\" && (\n \n \n \n
\n
\n )}\n {[\"marker\", \"group\"].includes(mapplot) && (\n Raster Options
\n | Contour (Beta) | \n\n | \n
| No. Contours | \n\n | \n
\n \n \n
\n
\n )}\n {[\"field\", \"group\"].includes(mapplot) && (\n Marker Options
\n | Symbol | \n\n | \n |
| Size | \n\n | \n \n {markerFixedSize && (\n | \n
| Show Labels | \n\n | \n
\n \n \n
\n
\n )}\n {movingAverage && (\n Field Options
\n | \n | \n Magnitude Raster | \n|
| \n | \n Directional Arrows | \n\n | \n
| \n | \n Flow Path | \n\n | \n
| Opacity | \n\n | \n
\n \n \n
\n
\n )}\n {validpixelexpression !== \"NA\" && (\n | Moving Averge: | \n\n | \n
\n \n \n
\n
\n )}\n | Valid Pixel Expression: | \n\n | \n
| {vpe} | \n
Color Options
\n \n \n Update Plot\n \n {removeSelected && (\n removeSelected(id)}\n >\n Delete Layer\n \n )}\n
\n {inner}
\n));\n\nclass LayerObject extends Component {\n state = {\n open: this.props.defaultOpen,\n settings: false,\n };\n toggleOpen = () => {\n this.setState({ open: !this.state.open });\n };\n toggleSettings = () => {\n this.setState({ settings: !this.state.settings });\n };\n render() {\n var { open, settings } = this.state;\n var {\n id,\n title,\n parameter_name,\n color,\n content,\n allowSettings,\n display,\n displayGroup,\n removeSelected,\n onUpdate,\n toggleLayerView,\n } = this.props;\n return (\n \n
\n\n \n \n \n
\n \n {content}\n
\n | \n {\" \"}\n | \n \n \n {parameter_name}\n \n | \n {allowSettings && (\n
\n
\n );\n }\n}\n\nconst SortableItem = SortableElement(({ layer, props }) => {\n var { id, title, name, color } = layer;\n var { selectedlayers, removeSelected, updateMapLayers, toggleLayerView } =\n props;\n return (\n {description}
\n {inner}\n Source:{\" \"}\n \n {datasource}\n \n - \n {selectedlayers.map((layer, index) => (\n
\n
\n )}\n \n
\n\n {open && (\n {parameter.name}
\n \n {open ? \"-\" : \"+\"}\n
\n \n {subdatasets.map((sd) => {\n return (\n \n addSelected([{ datasets_id: sd.id, parameters_id }])\n }\n className=\"addlayers-detail\"\n key={sd.id}\n title=\"Add layer\"\n >\n \n \n
\n
\n );\n })}\n | {sd.title} | \n{this.getLake(sd.lakes_id)} | \n\n {this.formatDate(sd.mindatetime)} :{\" \"}\n {this.formatDate(sd.maxdatetime)}\n | \n
\n {paramd.map((param) => (\n
\n );\n }\n}\n\nclass AddLayers extends Component {\n state = {};\n render() {\n var { datasets, parameters, datasetparameters, addSelected } = this.props;\n return (\n \n
\n );\n }\n}\n\nexport default AddLayers;\n","import React, { Component } from \"react\";\nimport \"./legend.css\";\nimport MarkerLegendItem from \"./markerlegenditem\";\nimport RasterLegendItem from \"./rasterlegenditem\";\n\nclass Legend extends Component {\n render() {\n var { selectedlayers, toggleLegend, open } = this.props;\n var legendmaplayers = selectedlayers.filter((layer) => layer.legend);\n var inner = [];\n var l;\n for (var i = 0; i < legendmaplayers.length; i++) {\n l = legendmaplayers[i];\n if (l.mapplot === \"marker\") {\n inner.push(\n \n {l.title}\n
\n );\n }\n if (l.mapplot === \"raster\") {\n inner.push(\n {l.name}
\n {l.realdatetime.toString()}
\n Depth: {Math.round(l.realdepth * 100) / 100}m
\n \n {l.datasource}\n \n \n {l.title}\n
\n );\n }\n if (l.mapplot === \"field\") {\n inner.push(\n {l.name}
\n {l.realdatetime.toString()}
\n Depth: {Math.round(l.realdepth * 100) / 100}m
\n \n {l.datasource}\n \n \n {l.title}\n
\n );\n }\n }\n if (inner.length > 0) {\n return (\n {l.name}
\n {l.realdatetime.toString()}
\n Depth: {Math.round(l.realdepth * 100) / 100}m
\n \n {l.datasource}\n \n \n \n
\n\n Legend
\n \n {inner}\n
\n \n {list.map((b, index) => (\n \n
\n ))}\n {basemaps[b].title}
\n \n
\n );\n }\n}\n\nclass TimeDepth extends Component {\n state = {\n time: `${this.props.datetime.getHours()}:${this.props.datetime.getMinutes()}`,\n depth: this.props.depth,\n };\n onChangeTime = (event) => {\n this.setState({ time: event.target.value });\n };\n\n onChangeDepth = (event) => {\n this.setState({ depth: event.target.value });\n };\n\n update = () => {\n var { time, depth } = this.state;\n this.props.onChangeDepth(depth);\n var datetime = new Date(this.props.datetime.getTime());\n var time_arr = time.split(\":\");\n datetime.setHours(time_arr[0]);\n datetime.setMinutes(time_arr[1]);\n this.props.onChangeDatetime(datetime);\n };\n\n componentDidUpdate = (prevProps) => {\n if (prevProps.datetime !== this.props.datetime) {\n this.setState({\n time: `${this.props.datetime.getHours()}:${this.props.datetime.getMinutes()}`,\n });\n }\n if (prevProps.depth !== this.props.depth) {\n this.setState({\n depth: this.props.depth,\n });\n }\n };\n\n render() {\n return (\n \n
\n \n {title}\n
\n \n ×\n
\n \n {content}\n
\n \n
\n );\n }\n}\n\nclass GIS extends Component {\n state = {\n menu: window.screen.width < 900 ? false : true,\n layersModal: false,\n dateModal: false,\n timeDepthModal: false,\n selectedlayers: [],\n parameters: [],\n datasets: [],\n downloads: [],\n datasetparameters: [],\n loading: true,\n selected: [],\n hidden: [],\n datetime: new Date(),\n depth: 1,\n timestep: 180,\n center: [46.85, 7.55],\n zoom: 9,\n basemap: \"datalakesmap\",\n modal: false,\n modaltext: \"\",\n modaldetail: \"\",\n lakejson: false,\n plotDatasets: false,\n legend: false,\n };\n\n togglePlotDataset = () => {\n this.setState({ plotDatasets: !this.state.plotDatasets });\n };\n\n hideMenu = () => {\n this.setState({ menu: false }, () => {\n window.dispatchEvent(new Event(\"resize\"));\n });\n };\n\n showMenu = () => {\n this.setState({ menu: true }, () => {\n window.dispatchEvent(new Event(\"resize\"));\n });\n };\n\n toggleLegend = () => {\n this.setState({ legend: !this.state.legend });\n };\n\n hideTimeDepthModal = () => {\n this.setState({ timeDepthModal: false });\n };\n\n showTimeDepthModal = () => {\n this.setState({ timeDepthModal: true });\n };\n\n hideDateModal = () => {\n this.setState({ dateModal: false });\n };\n\n showDateModal = () => {\n this.setState({ dateModal: true });\n };\n\n hideLayersModal = () => {\n this.setState({ layersModal: false });\n };\n\n showLayersModal = () => {\n this.setState({ layersModal: true });\n };\n\n closeModal = () => {\n this.setState({ modal: false, modaltext: \"\" });\n };\n\n updateLocation = (zoom, center) => {\n if (zoom !== this.state.zoom || center !== this.state.center) {\n this.setState({ zoom, center });\n }\n };\n\n updateState = async (newState) => {\n this.setState({ loading: true }, async () => {\n if (\"selected\" in newState) {\n var {\n datasets,\n datasetparameters,\n parameters,\n datetime,\n depth,\n hidden,\n lakejson,\n } = this.state;\n var { selected } = newState;\n if (\"datetime\" in newState) datetime = newState.datetime;\n var selectedlayers = [];\n var fixedSelected = JSON.parse(JSON.stringify(selected));\n for (var i = 0; i < fixedSelected.length; i++) {\n var datasets_id = fixedSelected[i][0];\n var parameters_id = fixedSelected[i][1];\n ({ selectedlayers, datasets, selected, lakejson } =\n await this.addNewLayer(\n selected,\n datasets_id,\n parameters_id,\n datasets,\n selectedlayers,\n datasetparameters,\n parameters,\n datetime,\n depth,\n hidden,\n lakejson\n ));\n }\n var { mindatetime, maxdatetime, mindepth, maxdepth } =\n this.getSliderParameters(selectedlayers);\n newState[\"selectedlayers\"] = selectedlayers;\n newState[\"datasets\"] = datasets;\n }\n newState[\"loading\"] = false;\n this.setState({\n mindatetime,\n maxdatetime,\n mindepth,\n maxdepth,\n lakejson,\n plotDatasets: false,\n });\n this.setState(newState);\n });\n };\n\n onChangeTimestep = (timestep) => {\n if (timestep !== this.state.timestep) {\n this.setState({ timestep });\n }\n };\n\n onChangeDatetime = async (datetime) => {\n if (datetime.getTime() !== this.state.datetime.getTime()) {\n var { depth } = this.state;\n await this.updateVariable(datetime, depth);\n }\n };\n\n onChangeDepth = async (depth) => {\n if (depth !== this.state.depth) {\n var { datetime } = this.state;\n this.setState({ depth }, async () => {\n this.updateVariable(datetime, depth);\n });\n }\n };\n\n onChangeBasemap = (basemap) => {\n this.setState({ basemap });\n };\n\n setSelected = (selectedlayers) => {\n this.setState({ loading: true }, () => {\n var selected = [];\n for (var i = 0; i < selectedlayers.length; i++) {\n selected.push([\n selectedlayers[i].datasets_id,\n selectedlayers[i].parameters_id,\n ]);\n }\n this.setState({ selectedlayers, selected, loading: false });\n });\n };\n\n addSelected = async (ids) => {\n this.setState({ loading: true }, async () => {\n var {\n datasets,\n selected,\n selectedlayers,\n datasetparameters,\n parameters,\n datetime,\n depth,\n hidden,\n lakejson,\n } = this.state;\n for (var i = 0; i < ids.length; i++) {\n var { datasets_id, parameters_id } = ids[i];\n if (\n JSON.stringify(selected).indexOf(\n JSON.stringify([datasets_id, parameters_id])\n ) === -1\n ) {\n selected.unshift([datasets_id, parameters_id]);\n }\n ({ selectedlayers, datasets, selected, lakejson } =\n await this.addNewLayer(\n selected,\n datasets_id,\n parameters_id,\n datasets,\n selectedlayers,\n datasetparameters,\n parameters,\n datetime,\n depth,\n hidden,\n lakejson\n ));\n }\n var { mindatetime, maxdatetime, mindepth, maxdepth } =\n this.getSliderParameters(selectedlayers);\n this.setState({\n selectedlayers,\n selected,\n datasets,\n loading: false,\n mindatetime,\n maxdatetime,\n mindepth,\n maxdepth,\n lakejson,\n });\n });\n };\n\n removeSelected = (id) => {\n var dp = id.split(\"&\");\n this.setState({ loading: true }, () => {\n var { selectedlayers, selected, hidden } = this.state;\n selectedlayers = selectedlayers.filter((x) => x.id !== id);\n selected = selected.filter(\n (x) =>\n parseInt(x[0]) !== parseInt(dp[0]) ||\n parseInt(x[1]) !== parseInt(dp[1])\n );\n hidden = hidden.filter(\n (x) =>\n parseInt(x[0]) !== parseInt(dp[0]) ||\n parseInt(x[1]) !== parseInt(dp[1])\n );\n this.setState({ selectedlayers, selected, hidden, loading: false });\n });\n };\n\n toggleLayerView = (id) => {\n this.setState({ loading: true }, () => {\n var { selectedlayers, hidden } = this.state;\n var index = selectedlayers.findIndex((x) => x.id === id);\n var visible = !selectedlayers[index].visible;\n selectedlayers[index].visible = visible;\n var idArr = id.split(\"&\");\n var idParse = [parseInt(idArr[0]), parseInt(idArr[1])];\n if (visible) {\n hidden = hidden.filter(\n (h) => h[0] !== idParse[0] && h[1] !== idParse[1]\n );\n } else {\n hidden.push(idParse);\n }\n this.setState({ selectedlayers, hidden, loading: false });\n });\n };\n\n updateMapLayers = (selectedlayers) => {\n this.setState({ loading: true }, () => {\n this.setState({ selectedlayers, loading: false });\n });\n };\n\n updateBaseMap = (event) => {\n this.setState({ basemap: event.target.value });\n };\n\n simstratMinMax = (array, parameters_id) => {\n var type = \"surface\";\n if (parameters_id === 56) type = \"bottom\";\n var filearray;\n if (Object.keys(array).includes(\"time\")) {\n filearray = [];\n for (var key in array) {\n if (key !== \"time\") {\n filearray = filearray.concat(array[key][type]);\n }\n }\n } else {\n filearray = array.map((x) => x.value);\n }\n var filemax = this.getMax(filearray);\n var filemin = this.getMin(filearray);\n return { filemin, filemax, filearray };\n };\n\n remoteSensingMinMax = (array) => {\n array = array.v;\n var max = this.getMax(array);\n var min = this.getMin(array);\n return { filemin: min, filemax: max, filearray: array };\n };\n\n threeDmodelScalarMinMax = (inarray) => {\n var min = Infinity;\n var max = -Infinity;\n var flat = inarray[\"variables\"][\"temperature\"][\"data\"].flat();\n flat = flat.filter((item) => item !== null);\n min = Math.min(min, this.getMin(flat));\n max = Math.max(max, this.getMax(flat));\n return { filemin: min, filemax: max, filearray: flat };\n };\n\n threeDmodelVectorMinMax = (inarray) => {\n var min = Infinity;\n var max = -Infinity;\n var flat_u = inarray[\"variables\"][\"u\"][\"data\"].flat();\n var flat_v = inarray[\"variables\"][\"u\"][\"data\"].flat();\n var flat = []\n for (let i = 0; i < flat_u.length; i++){\n if (flat_u !== null){\n flat.push(Math.abs(Math.sqrt(Math.pow(flat_u[i], 2) + Math.pow(flat_v[i], 2))))\n }\n }\n min = Math.min(min, this.getMin(flat));\n max = Math.max(max, this.getMax(flat));\n return { filemin: min, filemax: max, filearray: flat };\n };\n\n gitPlotMinMax = (data, parameters_id, datasetparameters) => {\n var datasetparameter = datasetparameters.find(\n (dp) => dp.parameters_id === parameters_id\n );\n var array = data[datasetparameter.axis].flat();\n var min = this.getMin(array);\n var max = this.getMax(array);\n return { filemin: min, filemax: max, filearray: array };\n };\n\n getMinMax = (data, parameters_id, datasetparameters, mapplotfunction) => {\n var min = Infinity;\n var max = -Infinity;\n var array = [];\n var filemin, filemax;\n var filearray = [];\n\n if (mapplotfunction === \"gitPlot\") {\n ({ filemin, filemax, filearray } = this.gitPlotMinMax(\n data,\n parameters_id,\n datasetparameters\n ));\n }\n if (mapplotfunction === \"simstrat\") {\n ({ filemin, filemax, filearray } = this.simstratMinMax(\n data,\n parameters_id\n ));\n }\n if (mapplotfunction === \"remoteSensing\") {\n ({ filemin, filemax, filearray } = this.remoteSensingMinMax(data));\n }\n if (mapplotfunction === \"meteolakes\" || mapplotfunction === \"datalakes\") {\n if (parameters_id === 25) {\n ({ filemin, filemax, filearray } = this.threeDmodelVectorMinMax(data));\n } else {\n ({ filemin, filemax, filearray } = this.threeDmodelScalarMinMax(data));\n }\n }\n\n if (filemin < min) min = filemin;\n if (filemax > max) max = filemax;\n array = array.concat(filearray);\n return { min, max, array };\n };\n\n getMax = (arr) => {\n let len = arr.length;\n let max = -Infinity;\n\n while (len--) {\n max = arr[len] > max ? arr[len] : max;\n }\n return max;\n };\n\n getMin = (arr) => {\n let len = arr.length;\n let min = Infinity;\n\n while (len--) {\n min = arr[len] < min ? arr[len] : min;\n }\n return min;\n };\n\n parseColor = (colorname) => {\n var defaultColors = [\n { color: \"#0000ff\", point: 0 },\n { color: \"#ff0000\", point: 1 },\n ];\n var colorparse = colorlist.find((c) => c.name === colorname);\n if (colorparse) {\n return colorparse.data;\n } else {\n return defaultColors;\n }\n };\n\n parseBoolean = (bool) => {\n if (bool === \"true\") {\n return true;\n } else {\n return false;\n }\n };\n\n closestFile = (datetime, depth, files) => {\n var time = new Date(datetime).getTime() / 1000;\n var array = [];\n for (var i = 0; i < files.length; i++) {\n var fileid = files[i].id;\n var mintime = new Date(files[i].mindatetime).getTime() / 1000;\n var maxtime = new Date(files[i].maxdatetime).getTime() / 1000;\n var mindepth = files[i].mindepth;\n var maxdepth = files[i].maxdepth;\n var timedistance;\n if (time > mintime && time < maxtime) {\n timedistance = 0;\n } else {\n timedistance = Math.min(\n Math.abs(mintime - time),\n Math.abs(maxtime - time)\n );\n }\n var depthdistance;\n if (depth > mindepth && depth < maxdepth) {\n depthdistance = 0;\n } else {\n depthdistance = Math.min(\n Math.abs(mindepth - depth),\n Math.abs(maxdepth - depth)\n );\n }\n array.push({ fileid, timedistance, depthdistance });\n }\n array.sort((a, b) => {\n if (a.timedistance > b.timedistance) {\n return 1;\n } else if (a.timedistance === b.timedistance) {\n if (a.depthdistance > b.depthdistance) {\n return 1;\n } else {\n return -1;\n }\n } else {\n return -1;\n }\n });\n return array[0].fileid;\n };\n\n layervisible = (datasets_id, parameters_id, hidden) => {\n var visible = true;\n for (var i = 0; i < hidden.length; i++) {\n if (datasets_id === hidden[i][0] && parameters_id === hidden[i][1]) {\n visible = false;\n }\n }\n return visible;\n };\n\n getSliderParameters = (selectedlayers) => {\n var files = [];\n var mindatetime = Infinity;\n var maxdatetime = -Infinity;\n var mindepth = 0;\n var maxdepth = 100;\n for (var i = 0; i < selectedlayers.length; i++) {\n mindatetime = new Date(\n Math.min(mindatetime, new Date(selectedlayers[i].mindatetime))\n );\n maxdatetime = new Date(\n Math.max(maxdatetime, new Date(selectedlayers[i].maxdatetime))\n );\n maxdepth = Math.max(maxdepth, selectedlayers[i].maxdepth);\n\n files = files.concat(selectedlayers[i].files);\n }\n maxdepth = Math.min(370, maxdepth);\n if (mindatetime === Infinity)\n mindatetime = new Date().getTime() - 1209600000;\n if (maxdatetime === -Infinity) maxdatetime = new Date().getTime();\n maxdatetime = new Date(maxdatetime);\n mindatetime = new Date(mindatetime);\n return { files, mindepth, maxdepth, mindatetime, maxdatetime };\n };\n\n indexClosest = (num, arr) => {\n var index = 0;\n var diff = Math.abs(num - arr[0]);\n for (var val = 0; val < arr.length; val++) {\n var newdiff = Math.abs(num - arr[val]);\n if (newdiff < diff) {\n diff = newdiff;\n index = val;\n }\n }\n return index;\n };\n\n matlabToJavascriptDatetime = (date) => {\n return new Date((date - 719529) * 24 * 60 * 60 * 1000);\n };\n\n getInternalDatetimeAndDepth = (\n data,\n datasetparameters,\n datetime,\n depth,\n maxdepth\n ) => {\n var type = datasetparameters\n .map((dp) => dp.axis + \"&\" + dp.parameters_id)\n .join(\",\");\n var realdatetime = datetime;\n var realdepth = depth;\n var index;\n if (type.includes(\"M&1\") && type.includes(\"y&2\")) {\n // Profiler\n var dp2 = datasetparameters.find((dp) => dp.parameters_id === 1);\n var dp3 = datasetparameters.find((dp) => dp.parameters_id === 2);\n index = this.indexClosest(depth, data.y);\n realdatetime = new Date(data[dp2.axis][index] * 1000);\n realdepth = data[dp3.axis][index];\n } else if (\n type.includes(\"z&\") &&\n type.includes(\"x&1\") &&\n type.includes(\"y&2\")\n ) {\n // 2D Depth Time Dataset\n var indexx = this.indexClosest(datetime.getTime() / 1000, data[\"x\"]);\n var indexy = this.indexClosest(depth, data[\"y\"]);\n realdatetime = new Date(data[\"x\"][indexx] * 1000);\n realdepth = data[\"y\"][indexy];\n } else if (\n type.includes(\"x&1\") &&\n type.includes(\"y&\") &&\n !type.includes(\"z&\")\n ) {\n // 1D Parameter Time Dataset\n index = this.indexClosest(datetime.getTime() / 1000, data[\"x\"]);\n realdatetime = new Date(data[\"x\"][index] * 1000);\n realdepth = parseFloat(maxdepth);\n }\n return { realdatetime, realdepth };\n };\n\n getExternalDatetimeAndDepth = (data, datetime, depth, datasource, file) => {\n var realdatetime = datetime;\n var realdepth = depth;\n if (datasource === \"Meteolakes\") {\n ({ time: realdatetime, depth: realdepth } = data);\n realdepth = Math.abs(data[\"depth\"][\"data\"]);\n realdatetime = new Date(data[\"time\"])\n } else if (datasource === \"Eawag RS\") {\n realdepth = 0;\n realdatetime = new Date(file.mindatetime);\n } else if ([\"MeteoSwiss\", \"FOEN\"].includes(datasource)) {\n var coeff = 1000 * 60 * 10;\n realdepth = 0;\n realdatetime = new Date(Math.round(datetime.getTime() / coeff) * coeff);\n }\n return { realdatetime, realdepth };\n };\n\n formatDate = (date) => {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, \"0\"); // Months are 0-based\n const day = String(date.getDate()).padStart(2, \"0\");\n const hours = String(date.getHours()).padStart(2, \"0\");\n const minutes = String(date.getMinutes()).padStart(2, \"0\");\n return `${year}${month}${day}${hours}${minutes}`;\n };\n\n downloadFile = async (\n datasets_id,\n fileid,\n file,\n source,\n datetime,\n depth,\n datasetparameters,\n dataset\n ) => {\n var { filelink } = file;\n var { downloads } = this.state;\n var downloaded = downloads.find(\n (d) =>\n d.datasets_id === datasets_id &&\n d.fileid === fileid &&\n d.datetime === datetime &&\n d.depth === depth\n );\n\n if (downloaded) {\n return {\n data: downloaded.data,\n realdatetime: downloaded.realdatetime,\n realdepth: downloaded.realdepth,\n };\n } else {\n var data, realdatetime, realdepth;\n if (source === \"internal\") {\n ({ data } = await axios.get(apiUrl + \"/files/\" + fileid + \"?get=raw\"));\n ({ realdatetime, realdepth } = this.getInternalDatetimeAndDepth(\n data,\n datasetparameters,\n datetime,\n depth,\n dataset.maxdepth\n ));\n } else {\n filelink = filelink.replace(\":datetime\", this.formatDate(datetime));\n filelink = filelink.replace(\":depth\", depth);\n ({ data } = await axios\n .get(filelink, { timeout: 5000 })\n .catch((error) => {\n console.error(error);\n let modaltext = `Failed to retrieve data from the ${dataset.datasource} API. Datalakes has no control over the availability of data from external API's, please try again later to see if the API is back online.`;\n this.setState({\n loading: false,\n modal: true,\n modaltext,\n modaldetail: error.message,\n });\n }));\n ({ realdatetime, realdepth } = this.getExternalDatetimeAndDepth(\n data,\n datetime,\n depth,\n dataset.datasource,\n file\n ));\n }\n downloads.push({\n data,\n datetime,\n depth,\n datasets_id,\n fileid,\n realdatetime,\n realdepth,\n });\n this.setState({ downloads });\n return { data, realdatetime, realdepth };\n }\n };\n\n optimisePoints = (array, colors) => {\n var min = Math.min(...array);\n var max = Math.max(...array);\n var q, val, point;\n for (var i = 0; i < colors.length; i++) {\n if (i === 0) colors[i].point = 0;\n else if (i === colors.length - 1) colors[i].point = 1;\n else {\n q = (1 / (colors.length - 1)) * i;\n val = this.quantile(array, q);\n point = (val - min) / (max - min);\n colors[i].point = point;\n }\n }\n return colors;\n };\n\n quantile = (arr, q) => {\n const sorted = arr.slice(0).sort((a, b) => a - b);\n const pos = (sorted.length - 1) * q;\n const base = Math.floor(pos);\n const rest = pos - base;\n if (sorted[base + 1] !== undefined) {\n return sorted[base] + rest * (sorted[base + 1] - sorted[base]);\n } else {\n return sorted[base];\n }\n };\n\n getColor = (selectedlayers) => {\n var usedColors = selectedlayers.map((s) => s.color);\n var colors = [\n \"#28B5F5\",\n \"#FB0000\",\n \"#0B3954\",\n \"#8F0000\",\n \"#8AD6F9\",\n \"#FF4747\",\n \"#f0a3ff\",\n \"#0075dc\",\n \"#993f00\",\n \"#4c005c\",\n \"#191919\",\n \"#005c31\",\n \"#2bce48\",\n \"#ffcc99\",\n \"#808080\",\n \"#94ffb5\",\n \"#8f7c00\",\n \"#9dcc00\",\n \"#c20088\",\n \"#003380\",\n \"#ffa405\",\n \"#ffa8bb\",\n \"#426600\",\n \"#ff0010\",\n \"#5ef1f2\",\n \"#00998f\",\n \"#e0ff66\",\n \"#740aff\",\n \"#990000\",\n \"#ffff80\",\n \"#ffff00\",\n \"#ff5005\",\n ];\n var unusedColors = colors.filter((c) => !usedColors.includes(c));\n return unusedColors[0];\n };\n\n addNewLayer = async (\n selected,\n datasets_id,\n parameters_id,\n datasets,\n selectedlayers,\n datasetparameters,\n parameters,\n datetime,\n depth,\n hidden,\n lakejson\n ) => {\n // Check layer not already loaded\n if (\n selectedlayers.filter(\n (sl) =>\n sl.datasets_id === datasets_id && sl.parameters_id === parameters_id\n ).length === 0\n ) {\n // Find index of datasets and parameters\n var dataset = datasets.find((d) => d.id === datasets_id);\n var parameter = parameters.find((p) => p.id === parameters_id);\n\n if (dataset && parameter) {\n // Get file list for dataset\n var { data: files } = await axios.get(\n apiUrl + \"/files?datasets_id=\" + datasets_id + \"&type=json\"\n );\n\n // Find closest file to datetime and depth\n var fileid = this.closestFile(datetime, depth, files);\n var datafile = files.find((f) => f.id === fileid);\n\n // Get the dataset parameter\n var dp = datasetparameters.filter((d) => d.datasets_id === datasets_id);\n\n var { data, realdatetime, realdepth } = await this.downloadFile(\n datasets_id,\n fileid,\n datafile,\n dataset.datasource,\n datetime,\n depth,\n dp,\n dataset\n );\n\n // Special case download lakejson\n if ([23].includes(datasets_id)) {\n ({ data: lakejson } = await axios.get(\n apiUrl + \"/externaldata/lakejson\"\n ));\n }\n\n // Update the parameter min and max value\n var { min, max, array } = this.getMinMax(\n data,\n parameters_id,\n dp,\n dataset.mapplotfunction\n );\n\n // Get unit\n var unit = dp.find((d) => d.parameters_id === parameters_id).unit;\n\n // Merge Plot properties, dataset and parameter\n let layer = {\n ...JSON.parse(JSON.stringify(dataset.plotproperties)),\n ...JSON.parse(JSON.stringify(parameter)),\n ...JSON.parse(JSON.stringify(dataset)),\n };\n\n // Meteolakes hack\n if (parameters_id === 25) {\n layer[\"mapplot\"] = \"field\";\n }\n\n // Moving Average for Remote Sensing\n if (dataset.mapplotfunction === \"remoteSensing\") {\n layer[\"validpixelexpression\"] = true;\n } else {\n layer[\"validpixelexpression\"] = \"NA\";\n }\n\n // Optimise colors\n var unoptimisedcolors = this.parseColor(layer.colors);\n //var optimisedcolors = this.optimisePoints(array, unoptimisedcolors);\n\n // Add Additional Parameters\n layer[\"contour\"] = false;\n layer[\"thresholds\"] = 200;\n layer[\"files\"] = files;\n layer[\"data\"] = data;\n layer[\"min\"] = min;\n layer[\"max\"] = max;\n layer[\"datamin\"] = min;\n layer[\"datamax\"] = max;\n layer[\"unit\"] = unit;\n layer[\"opacity\"] = 1;\n layer[\"array\"] = array;\n layer[\"fileid\"] = fileid;\n layer[\"datasetparameters\"] = dp;\n layer[\"datasets_id\"] = datasets_id;\n layer[\"parameters_id\"] = parameters_id;\n layer[\"realdatetime\"] = realdatetime;\n layer[\"realdepth\"] = realdepth;\n layer[\"colors\"] = unoptimisedcolors;\n layer[\"color\"] = this.getColor(selectedlayers);\n layer[\"id\"] = datasets_id.toString() + \"&\" + parameters_id.toString();\n layer[\"visible\"] = this.layervisible(\n datasets_id,\n parameters_id,\n hidden\n );\n\n selectedlayers.unshift(layer);\n } else {\n alert(\"Failed to add layer, not found in database.\");\n selected = selected.filter(\n (x) =>\n parseInt(x[0]) !== parseInt(datasets_id) ||\n parseInt(x[1]) !== parseInt(parameters_id)\n );\n }\n }\n return { selectedlayers, datasets, selected, lakejson };\n };\n\n updateVariable = async (datetime, depth) => {\n function findFileId(files, fileid) {\n return files.find((f) => f.id === fileid);\n }\n this.setState({ loading: true, datetime, depth }, async () => {\n var { selectedlayers, datasets } = this.state;\n\n for (var i = 0; i < selectedlayers.length; i++) {\n // Find closest file to datetime and depth\n var fileid = this.closestFile(datetime, depth, selectedlayers[i].files);\n var datafile = findFileId(selectedlayers[i].files, fileid);\n\n // Add data from file closes to datetime and depth\n var { data, realdatetime, realdepth } = await this.downloadFile(\n selectedlayers[i].datasets_id,\n fileid,\n datafile,\n selectedlayers[i].datasource,\n datetime,\n depth,\n selectedlayers[i].datasetparameters,\n selectedlayers[i]\n );\n\n // Update the min and max value\n var { min, max, array } = this.getMinMax(\n data,\n selectedlayers[i].parameters_id,\n selectedlayers[i].datasetparameters,\n selectedlayers[i].mapplotfunction\n );\n\n var newMax = Math.max(max, selectedlayers[i].datamax);\n var newMin = Math.min(min, selectedlayers[i].datamin);\n selectedlayers[i].data = data;\n selectedlayers[i].datamin = newMin;\n selectedlayers[i].datamax = newMax;\n selectedlayers[i].array = selectedlayers[i].array.concat(array);\n selectedlayers[i].fileid = fileid;\n selectedlayers[i][\"realdatetime\"] = realdatetime;\n selectedlayers[i][\"realdepth\"] = realdepth;\n }\n\n this.setState({\n datasets,\n selectedlayers,\n loading: false,\n });\n });\n };\n\n getSliderParameters = (selectedlayers) => {\n var files = [];\n var mindatetime = Infinity;\n var maxdatetime = -Infinity;\n var mindepth = 0;\n var maxdepth = 100;\n for (var i = 0; i < selectedlayers.length; i++) {\n mindatetime = new Date(\n Math.min(mindatetime, new Date(selectedlayers[i].mindatetime))\n );\n maxdatetime = new Date(\n Math.max(maxdatetime, new Date(selectedlayers[i].maxdatetime))\n );\n maxdepth = Math.max(maxdepth, selectedlayers[i].maxdepth);\n\n files = files.concat(selectedlayers[i].files);\n }\n maxdepth = Math.min(370, maxdepth);\n if (mindatetime === Infinity)\n mindatetime = new Date().getTime() - 1209600000;\n if (maxdatetime === -Infinity) maxdatetime = new Date().getTime();\n maxdatetime = new Date(maxdatetime);\n mindatetime = new Date(mindatetime);\n return { files, mindepth, maxdepth, mindatetime, maxdatetime };\n };\n\n updateLocation = (zoom, center) => {\n if (zoom !== this.state.zoom || center !== this.state.center) {\n this.setState({ zoom, center });\n }\n };\n\n siderbarMinDatetime = (datetime) => {\n var months = [\n \"January\",\n \"Feburary\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ];\n return `${datetime.toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n })} ${datetime.getDate()} ${\n months[datetime.getMonth()]\n } ${datetime.getFullYear()}`;\n };\n\n setDefaults = () => {\n var { selected, hidden, datetime, depth, zoom, center, basemap, timestep } =\n this.state;\n var { defaults } = this.props;\n if (\"selected\" in defaults) selected = defaults.selected;\n if (\"hidden\" in defaults) hidden = defaults.hidden;\n if (\"datetime\" in defaults) datetime = defaults.datetime;\n if (\"depth\" in defaults) depth = defaults.depth;\n if (\"zoom\" in defaults) zoom = defaults.zoom;\n if (\"center\" in defaults) center = defaults.center;\n if (\"basemap\" in defaults) basemap = defaults.basemap;\n if (\"timestep\" in defaults) timestep = defaults.timestep;\n return {\n selected,\n hidden,\n datetime,\n depth,\n zoom,\n center,\n basemap,\n timestep,\n };\n };\n\n componentDidUpdate() {\n var { setDefaults } = this.props;\n if (setDefaults) {\n var {\n selected,\n hidden,\n datetime,\n depth,\n zoom,\n center,\n basemap,\n timestep,\n } = this.state;\n var defaults = {\n selected,\n hidden,\n datetime,\n depth,\n zoom,\n center,\n basemap,\n timestep,\n };\n setDefaults(defaults);\n }\n }\n\n async componentDidMount() {\n // Defaults\n var { lakejson, plotDatasets, menu, legend } = this.state;\n var { defaults } = this.props;\n var { selected, hidden, datetime, depth, zoom, center, basemap, timestep } =\n this.setDefaults();\n\n if (\"timestep\" in this.props) timestep = this.props.timestep;\n\n if (\"menu\" in defaults) {\n menu = defaults.menu === \"visible\";\n }\n\n if (\"legend\" in defaults) {\n legend = defaults.legend === \"visible\";\n }\n\n // Get data\n try {\n let server = await Promise.all([\n axios.get(apiUrl + \"/selectiontables/parameters\"),\n axios.get(apiUrl + \"/datasets\"),\n axios.get(apiUrl + \"/datasetparameters\"),\n axios.get(apiUrl + \"/selectiontables/lakes\"),\n ]);\n var parameters = server[0].data;\n var datasets = server[1].data;\n var datasetparameters = server[2].data;\n\n datasetparameters.map((dp) => {\n let param = parameters.find((p) => p.id === dp.parameters_id);\n dp.name = param.name;\n return dp;\n });\n\n var selectedlayers = [];\n for (var i = selected.length - 1; i > -1; i--) {\n var datasets_id = selected[i][0];\n var parameters_id = selected[i][1];\n ({ selectedlayers, datasets, selected, lakejson } =\n await this.addNewLayer(\n selected,\n datasets_id,\n parameters_id,\n datasets,\n selectedlayers,\n datasetparameters,\n parameters,\n datetime,\n depth,\n hidden,\n lakejson\n ));\n }\n\n var { mindatetime, maxdatetime, mindepth, maxdepth } =\n this.getSliderParameters(selectedlayers);\n\n if (selectedlayers.length === 0) plotDatasets = true;\n\n this.setState({\n selectedlayers,\n parameters,\n datasets,\n datasetparameters,\n loading: false,\n selected,\n hidden,\n datetime,\n depth,\n zoom,\n center,\n basemap,\n mindatetime,\n maxdatetime,\n mindepth,\n maxdepth,\n lakejson,\n timestep,\n lakes: server[3].data,\n plotDatasets,\n menu,\n legend,\n });\n } catch (error) {\n console.error(error);\n let modaltext = `Appologies the Datalakes API is experiencing some connectivity issues. Please wait a few minutes then try refreshing the page.`;\n this.setState({\n loading: false,\n modal: true,\n modaltext,\n modaldetail: error.message,\n });\n }\n }\n\n render() {\n var { menu, legend } = this.state;\n var hidelayerbutton = false;\n if (this.props.hidelayerbutton) hidelayerbutton = true;\n return (\n \n {}}\n >\n \n \n ☰\n
\n \n {this.siderbarMinDatetime(this.state.datetime)}\n
\n \n
\n \n \n {!hidelayerbutton && (\n \n \n \n )}\n
\n \n Available Datasets\n \n
\n \n
\n \n
\n )}\n \n
\n \n \n
\n {open ? \"<\" : \">\"}
\n \n \n
\n );\n }\n}\n\nexport default ColorTable;\n","import React, { Component } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./colorslider.css\";\n\nclass ColorSlider extends Component {\n state = {\n };\n\n histogram = (array, bins) => {\n var min = Math.min(...array);\n var max = Math.max(...array);\n var bin_width = (max - min) / bins;\n var data = [];\n var x, index;\n for (var i = 0; i < bins; i++) {\n x = min + i * bin_width;\n data.push({ x: x, y: 0 });\n }\n for (i = 0; i < array.length; i++) {\n index = Math.max(Math.ceil((array[i] - min) / bin_width) - 1, 0);\n data[index].y++;\n }\n return { bin_width: bin_width, data: data };\n };\n\n plotHistogram = async () => {\n try {\n d3.select(\"#histogramsvg\").remove();\n } catch (e) {}\n\n var { array, colors } = this.props;\n\n if (this.props.array.length > 0) {\n try {\n var bins = 500;\n\n var { bin_width, data } = this.histogram(array, bins);\n\n // Set graph size\n var histogramwidth = d3\n .select(\"#histogram\")\n .node()\n .getBoundingClientRect().width,\n histogramheight = d3\n .select(\"#histogram\")\n .node()\n .getBoundingClientRect().height,\n width = histogramwidth,\n height = histogramheight;\n\n var svg = d3\n .select(\"#histogram\")\n .append(\"svg\")\n .attr(\"id\", \"histogramsvg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .append(\"g\");\n\n var x = d3\n .scaleLinear()\n .range([0, width])\n .domain([Math.min(...array), Math.max(...array)]);\n\n var y = d3.scaleLinear().range([height, 0]);\n y.domain([\n 0,\n d3.max(data, function(d) {\n return d.y;\n })\n ]);\n\n \n\n svg\n .selectAll(\"rect\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d) {\n return x(d.x);\n })\n .attr(\"y\", function(d) {\n return y(d.y);\n })\n .attr(\"width\", x(bin_width))\n .attr(\"height\", function(d) {\n return height - y(d.y);\n })\n .style(\"fill\", \"#fff\");\n\n // Create gradients\n\n var defs = svg.append(\"defs\");\n defs\n .append(\"linearGradient\")\n .attr(\"id\", \"svgGradient\")\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"100%\")\n .attr(\"y2\", \"0%\")\n .selectAll(\"stop\")\n .data(colors)\n .enter()\n .append(\"stop\")\n .attr(\"offset\", function(d) {\n return d.point;\n })\n .attr(\"stop-color\", function(d) {\n return d.color;\n });\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", 20)\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"fill\", \"url(#svgGradient)\");\n\n } catch (e) {\n console.error(\"Error plotting histogram\", e);\n }\n }\n };\n\n componentDidMount() {\n this.plotHistogram();\n }\n\n componentDidUpdate() {\n this.plotHistogram();\n }\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nexport default ColorSlider;\n","import React, { Component } from \"react\";\nimport \"./colorsolid.css\";\n\nclass ColorSolid extends Component {\n updateColors = event => {\n var { onChange } = this.props;\n var colors = [\n { color: event.target.value, point: 0 },\n { color: event.target.value, point: 1 }\n ];\n onChange(colors);\n };\n\n render() {\n var { colors } = this.props;\n return (\n \n \n
\n );\n }\n}\n\nexport default ColorSolid;\n","import React, { Component } from \"react\";\nimport \"./colormanipulation.css\";\nimport ColorRamp from \"../colorramp/colorramp\";\nimport ColorTable from \"../colortable/colortable\";\nimport ColorSlider from \"../colorslider/colorslider\";\nimport ColorSolid from \"../colorsolid/colorsolid\";\n\nclass ColorManipulation extends Component {\n state = {\n manipulation: \"ramp\",\n colors: [\n { color: \"#000080\", point: 0 },\n { color: \"#3366FF\", point: 0.142857142857143 },\n { color: \"#00B0DC\", point: 0.285714285714286 },\n { color: \"#009933\", point: 0.428571428571429 },\n { color: \"#FFFF5B\", point: 0.571428571428571 },\n { color: \"#E63300\", point: 0.714285714285714 },\n { color: \"#CC0000\", point: 0.857142857142857 },\n { color: \"#800000\", point: 1 },\n ],\n };\n\n setManipulation = (manipulation) => {\n if (manipulation !== this.state.manipulation) {\n this.setState({ manipulation });\n }\n };\n\n render() {\n var { manipulation } = this.state;\n var { onChange, array, colors } = this.props;\n return (\n \n this.setManipulation(\"ramp\")}\n >\n Ramp\n
\n \n this.setManipulation(\"solid\")}\n >\n Solid\n
\n