\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default LeftDrawer;\r\n","// const domain = \"https://f3ad9fyuu0.execute-api.eu-central-1.amazonaws.com\";\r\n// const api_version = \"development\";\r\nconst domain = \"https://api.digifarm.io\";\r\nconst api_version = \"v1\";\r\n\r\nconst params = new URLSearchParams(window.location.search);\r\nconst showDRAPI = params.get(\"showDRAPI\")\r\n ? params.get(\"showDRAPI\") === \"true\"\r\n : false;\r\nconst showTimeSeries =\r\n params.get(\"showTimeSeries\") && params.get(\"showTimeSeries\") === \"true\"\r\n ? true\r\n : false;\r\n// This stuff should taken appropraitely based on the npm run deploy:env command and should not have to be edited here.\r\n// Also even by the url of the deployed app, it should be able to determine the environment and the version of the API to use.\r\nexport { domain };\r\nexport { api_version };\r\nexport { showDRAPI };\r\nexport { showTimeSeries };\r\n","import { GlobeFinanceIcon } from \"../icons\";\r\nimport { makeStyles } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles({\r\n email: {\r\n color: \"#01B075\",\r\n fontWeight: 600,\r\n textDecoration: \"underline\",\r\n display: \"inline\",\r\n },\r\n disclaimer: {\r\n boxShadow: \"0px 2px 8px rgba(0, 0, 0, 0.08)\",\r\n borderRadius: 8,\r\n padding: 12,\r\n marginTop: 24,\r\n display: \"flex\",\r\n color: \"#1D2023\",\r\n alignItems: \"center\",\r\n },\r\n disclaimerIconSection: {\r\n padding: 12,\r\n backgroundColor: \"#FDF5EC\",\r\n borderRadius: 8,\r\n marginRight: 8,\r\n },\r\n disclaimerIcon: {\r\n fill: \"none\",\r\n },\r\n});\r\nconst Disclaimer = (props) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n \r\n \r\n ![](\"/digifarm_logo.png\")
\r\n \r\n
\r\n \r\n \r\n 3 types of API queries
\r\n\r\n We can serve our field boundaries data via API so you can integrate\r\n it withing your application.\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n By Field ID
\r\n We serve low res (simplified) boundaries inside a bbox or as\r\n vector tiles, so they can be displayed on a map in your app. After\r\n click the app queries our API with ID of the clicked field. Our\r\n API returns the field boundary in high res.\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n By Point
\r\n Click on a map in your app, it makes a query to our API with\r\n latitude / longitude of the point and our API returns field\r\n boundary geojson data around that point.\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n By Bbox
\r\n User draws a polygon on a map and our API returns all field\r\n boundaries in that bbox.\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Coverage
\r\n Returns polygons representing the areas where we have data.\r\n\r\n \r\n Discover\r\n \r\n
\r\n \r\n Automatic Field Delineation Model\r\n
\r\n \r\n We have developed state-of-the-art deep neural network model for\r\n Field Delineation (automatic detection of field boundaries and\r\n seeded acres).\r\n
\r\n \r\n For any questions please get in touch\r\n
\r\nhello@digifarm.io
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Disclaimer;\r\n","function fallbackCopyTextToClipboard(text) {\r\n var textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n \r\n // Avoid scrolling to bottom\r\n textArea.style.top = \"0\";\r\n textArea.style.left = \"0\";\r\n textArea.style.position = \"fixed\";\r\n \r\n document.body.appendChild(textArea);\r\n textArea.focus();\r\n textArea.select();\r\n \r\n try {\r\n var successful = document.execCommand('copy');\r\n var msg = successful ? 'successful' : 'unsuccessful';\r\n console.log('Fallback: Copying text command was ' + msg);\r\n } catch (err) {\r\n console.error('Fallback: Oops, unable to copy', err);\r\n }\r\n \r\n document.body.removeChild(textArea);\r\n }\r\n function copyTextToClipboard(text) {\r\n if (!navigator.clipboard) {\r\n fallbackCopyTextToClipboard(text);\r\n return;\r\n }\r\n navigator.clipboard.writeText(text).then(function() {\r\n console.log('Async: Copying to clipboard was successful!');\r\n }, function(err) {\r\n console.error('Async: Could not copy text: ', err);\r\n });\r\n }\r\n\r\n export default copyTextToClipboard;","import { Button, makeStyles } from \"@material-ui/core\";\r\nimport copyToClipboard from \"../util/copyToClipboard\";\r\nimport { saveAs } from \"file-saver\";\r\n\r\nconst useStyles = makeStyles({\r\n mt8: {\r\n marginTop: 8,\r\n },\r\n\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n responseJsonContainer: {\r\n position: \"relative\",\r\n },\r\n responseJson: {\r\n backgroundColor: \"#EEEFF1\",\r\n borderRadius: 4,\r\n padding: \"8px 16px\",\r\n maxHeight: 520,\r\n overflowY: \"scroll\",\r\n maxWidth: 440,\r\n \"& pre\": {\r\n maxWidth: \"100%\",\r\n },\r\n },\r\n\r\n copyButton: {\r\n position: \"absolute\",\r\n top: 16,\r\n right: 16,\r\n textTransform: \"capitalize\",\r\n borderRadius: 4,\r\n backgroundColor: \"#E5F7F1\",\r\n \"@media (max-width: 600px)\": {\r\n position: \"static\",\r\n marginBottom: 8,\r\n },\r\n \"&:hover\": {\r\n backgroundColor: \"#E5F7F1\",\r\n },\r\n },\r\n downloadButton: {\r\n position: \"absolute\",\r\n top: 60,\r\n right: 16,\r\n textTransform: \"capitalize\",\r\n borderRadius: 4,\r\n backgroundColor: \"#E5F7F1\",\r\n \"@media (max-width: 600px)\": {\r\n position: \"static\",\r\n marginBottom: 8,\r\n },\r\n \"&:hover\": {\r\n backgroundColor: \"#E5F7F1\",\r\n },\r\n },\r\n});\r\n\r\nconst ResponseDisplay = (props) => {\r\n const classes = useStyles();\r\n const { responseJson, responseStatus } = props;\r\n\r\n const copyContent = () => {\r\n copyToClipboard(JSON.stringify(responseJson));\r\n };\r\n const downloadGeoJSON = () => {\r\n const blob = new Blob([JSON.stringify(responseJson, null, 2)], {\r\n type: \"application/json\",\r\n });\r\n saveAs(blob, \"Response.json\");\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n Our Sandbox API only lets you query boundaries within a small sample\r\n area of each region. If you’d like to query boundaries in any of our\r\n regions, get in touch with us at{\" \"}\r\n \r\n hello@digifarm.io{\" \"}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ResponseDisplay;\r\n","import { makeStyles } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles({\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n url: {\r\n color: \"#EA891D\",\r\n },\r\n});\r\n\r\nconst UrlDisplay = (props) => {\r\n const classes = useStyles();\r\n const { requestUrl } = props;\r\n\r\n return (\r\n <>\r\n \r\n {responseStatus === 200 && (\r\n <>\r\n \r\n Copy to clipboard\r\n \r\n \r\n Save as GeoJSON\r\n \r\n \r\n )}\r\n {responseJson &&
\r\n {JSON.stringify(responseJson, null, 2)}}\r\n \r\n
\r\n Curl
\r\n \r\n curl -X GET\r\n
\"{requestUrl}\" -H\r\n accept: application/json\r\n
\r\n \"{requestUrl}\" -H\r\n accept: application/json\r\n
\r\n
\r\n \r\n );\r\n};\r\nexport default UrlDisplay;\r\n","import { makeStyles, TextField } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles({\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n\r\n shrinkLabel: {\r\n fontSize: 14,\r\n },\r\n});\r\n\r\nconst InputField = (props) => {\r\n const classes = useStyles();\r\n return (\r\n Request Url
\r\n \r\n {requestUrl}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PointDrawer;\r\n","import {\r\n Button,\r\n FilledInput,\r\n FormControlLabel,\r\n makeStyles,\r\n Radio,\r\n RadioGroup,\r\n TextField,\r\n} from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport { setMode, setFeature, setPolygon } from \"../contexts/actions\";\r\n\r\nimport debounce from \"lodash.debounce\";\r\nimport { domain, api_version } from \"../config\";\r\nimport Disclaimer from \"./Disclaimer\";\r\nimport ResponseDisplay from \"./ResponseDisplay\";\r\nimport UrlDisplay from \"./UrlDisplay\";\r\nimport InputField from \"./InputField\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n\r\n mt8: {\r\n marginTop: 8,\r\n },\r\n\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n maxWidth: \"100%\",\r\n marginTop: 16,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n generateResp: {\r\n marginTop: 16,\r\n textTransform: \"capitalize\",\r\n },\r\n\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n },\r\n shrinkLabel: {\r\n fontSize: 14,\r\n },\r\n radioGroupRoot: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginTop: 8,\r\n },\r\n typeOfBiling: {\r\n fontSize: 16,\r\n marginRight: 32,\r\n color: \"#1D2023\",\r\n width: 118,\r\n },\r\n});\r\n\r\nconst BBoxDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { mode: mapDrawMode, polygon, feature },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const [bBoxPoints, setBBoxPoints] = useState([]);\r\n const [nextCursor, setNextCursor] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (polygon && polygon[0] && polygon[0].length) {\r\n let maxCallback = (max, cur) =>\r\n Math.max(parseFloat(max), parseFloat(cur));\r\n let minCallback = (max, cur) =>\r\n Math.min(parseFloat(max), parseFloat(cur));\r\n\r\n const minLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(minCallback, Infinity);\r\n const maxLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n const minLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(minCallback, Infinity);\r\n const maxLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n setBBoxPoints([minLng, minLat, maxLng, maxLat]);\r\n }\r\n }, [polygon]);\r\n\r\n const comparePolygonArrays = (array1, array2) => {\r\n return array1.every(\r\n (value, index) =>\r\n value[0] == array2[index][0] && value[1] == array2[index][1]\r\n );\r\n };\r\n\r\n const baseUrl = `${domain}/${api_version}`;\r\n // \"https://2aqfsaq392.execute-api.eu-central-1.amazonaws.com/production\";\r\n // \"https://api.digifarm.io/v1\";\r\n\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [requestUrl, setRequestUrl] = useState();\r\n const defaultToken = \"a0731a8c-5259-4c68-af3a-7ad4f6d53faa\";\r\n const [token, setToken] = useState(defaultToken);\r\n const [billing, setBilling] = useState(\"by_field\");\r\n const [limit, setLimit] = useState(300);\r\n const [version, setVersion] = useState(\"latest\");\r\n\r\n const handleClick = () => {\r\n const nextCursorParam =\r\n api_version === \"development\" && nextCursor\r\n ? `&cursor=${nextCursor}`\r\n : \"\";\r\n const limitParam =\r\n api_version === \"development\" && limit ? `&limit=${limit}` : \"\";\r\n const fetchUrl =\r\n baseUrl +\r\n \"/delineated-fields\" +\r\n \"?token=\" +\r\n token +\r\n \"&bbox=\" +\r\n bBoxPoints.join(\",\") +\r\n \"&data_version=\" +\r\n version +\r\n \"&billing=\" +\r\n billing +\r\n nextCursorParam +\r\n limitParam;\r\n\r\n const rectangle = [\r\n [\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n ],\r\n ];\r\n\r\n if (polygon && polygon.length) {\r\n if (!comparePolygonArrays(rectangle[0], polygon[0])) {\r\n dispatch({\r\n type: setPolygon,\r\n payload: {\r\n polygon: rectangle,\r\n },\r\n });\r\n }\r\n }\r\n\r\n setRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setResponseJson(data);\r\n if (api_version === \"development\") {\r\n // nextCursor\r\n // If next cursor is present then take the previous feature and then add the current set of features to it.\r\n // The previous data is a feature collection, the current one will be too.\r\n // let newFeatures =\r\n\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: nextCursor\r\n ? {\r\n type: \"FeatureCollection\",\r\n features: [...feature.features, ...data.geojson.features],\r\n }\r\n : data.geojson,\r\n },\r\n });\r\n data.next_cursor\r\n ? setNextCursor(data.next_cursor)\r\n : setNextCursor(\"\");\r\n } else {\r\n console.log(\"data\", data);\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: data,\r\n },\r\n });\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n >\r\n \r\n Generate Response\r\n \r\n
\r\n\r\n {responseStatus && (\r\n /delineated-fields/location
\r\nReturns the field for the given location
\r\nParameters
\r\n\r\n \r\n
\r\n Data Version :
\r\n \r\n {\r\n setSimplyfiedGeometry(e.target.value);\r\n }}\r\n >\r\n
\r\n Simplified Geometry :
\r\n \r\n {\r\n setCoordinates([e.target.value, coordinates[1]]);\r\n }}\r\n >\r\n {\r\n setCoordinates([coordinates[0], e.target.value]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setVersion(e.target.value);\r\n }}\r\n >\r\n \r\n
\r\n\r\n \r\n
\r\n )}\r\n Responses
\r\n\r\n
\r\n {responseStatus}
\r\n \r\n
\r\n \r\n {responseStatus === 200 && \"Successfully fetched\"}{\" \"}\r\n {responseStatus === 404 && \"Field not found at the location\"}\r\n
\r\n\r\n Please check the coverage API to see if we have data for the\r\n region you are querying. The test token allows you to query to\r\n the DR API for only a sample area of each region. If you wish\r\n to query outside the sample region shown get in touch with us\r\n at hello@digifarm.io\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BBoxDrawer;\r\n","import {\r\n Button,\r\n FilledInput,\r\n FormControl,\r\n FormControlLabel,\r\n Input,\r\n makeStyles,\r\n RadioGroup,\r\n TextField,\r\n Radio,\r\n} from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setMode,\r\n setDrawMode,\r\n setFeature,\r\n setPolygon,\r\n setFieldId,\r\n setAPI,\r\n} from \"../contexts/actions\";\r\n\r\nimport { saveAs } from \"file-saver\";\r\nimport { VectorTile } from \"@mapbox/vector-tile\";\r\nimport Protobuf from \"pbf\";\r\nimport { domain, api_version } from \"../config\";\r\nimport Disclaimer from \"./Disclaimer\";\r\nimport UrlDisplay from \"./UrlDisplay\";\r\nimport ResponseDisplay from \"./ResponseDisplay\";\r\n\r\nimport InputField from \"./InputField\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n maxWidth: \"100%\",\r\n marginTop: 16,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n responseJson: {\r\n backgroundColor: \"#EEEFF1\",\r\n borderRadius: 4,\r\n padding: \"8px 16px\",\r\n position: \"relative\",\r\n maxWidth: 420,\r\n minHeight: 100,\r\n maxHeight: 520,\r\n overflowY: \"scroll\",\r\n },\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n generateResp: {\r\n marginTop: 16,\r\n textTransform: \"capitalize\",\r\n },\r\n\r\n downloadButton: {\r\n position: \"absolute\",\r\n top: 60,\r\n right: 16,\r\n textTransform: \"capitalize\",\r\n borderRadius: 4,\r\n \"@media (max-width: 600px)\": {\r\n position: \"static\",\r\n marginBottom: 8,\r\n },\r\n },\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n },\r\n shrinkLabel: {\r\n fontSize: 14,\r\n },\r\n leftButton: {\r\n textTransform: \"lowercase\",\r\n lineHeight: \"24px\",\r\n padding: \"6px\",\r\n borderRadius: 0,\r\n flex: 1,\r\n border: \"1px solid #01B075\",\r\n color: \"#01B075\",\r\n fontWeight: 600,\r\n borderTopLeftRadius: 8,\r\n borderBottomLeftRadius: 8,\r\n },\r\n rightButton: {\r\n textTransform: \"lowercase\",\r\n lineHeight: \"24px\",\r\n padding: \"6px\",\r\n borderRadius: 0,\r\n flex: 1,\r\n border: \"1px solid #01B075\",\r\n color: \"#01B075\",\r\n fontWeight: 600,\r\n borderTopRightRadius: 8,\r\n borderBottomRightRadius: 8,\r\n },\r\n activeModeButton: {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n \"&:hover\": {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n },\r\n },\r\n radioFormControl: {\r\n verticalAlign: \"middle\",\r\n marginLeft: 16,\r\n },\r\n parameters: {\r\n marginTop: \"24px !important\",\r\n },\r\n radioGroupRoot: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginTop: 8,\r\n },\r\n typeOfBiling: {\r\n fontSize: 16,\r\n marginRight: 32,\r\n color: \"#1D2023\",\r\n width: 118,\r\n },\r\n});\r\n\r\nconst baseUrl = `${domain}/${api_version}`;\r\n// \"https://2aqfsaq392.execute-api.eu-central-1.amazonaws.com/production\";\r\n// \"https://api.digifarm.io/v1\";\r\n\r\nconst FieldIdDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { mode, polygon, tile, fieldId, dataLayer },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const [bBoxPoints, setBBoxPoints] = useState([]);\r\n const [outputFormat, setOutputFormat] = useState(\"geojson\");\r\n const [tileCoordinates, setTileCoordinates] = useState([]);\r\n const [version, setVersion] = useState(\"latest\");\r\n useEffect(() => {\r\n if (polygon && polygon[0] && polygon[0].length) {\r\n let maxCallback = (max, cur) =>\r\n Math.max(parseFloat(max), parseFloat(cur));\r\n let minCallback = (max, cur) =>\r\n Math.min(parseFloat(max), parseFloat(cur));\r\n\r\n const minLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(minCallback, Infinity);\r\n const maxLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n const minLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(minCallback, Infinity);\r\n const maxLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n setBBoxPoints([minLng, minLat, maxLng, maxLat]);\r\n }\r\n }, [polygon]);\r\n\r\n useEffect(() => {\r\n if (tile && tile.length) {\r\n setTileCoordinates(tile);\r\n }\r\n }, [tile]);\r\n\r\n const comparePolygonArrays = (array1, array2) => {\r\n return array1.every(\r\n (value, index) =>\r\n value[0] == array2[index][0] && value[1] == array2[index][1]\r\n );\r\n };\r\n\r\n const defaultToken = \"a0731a8c-5259-4c68-af3a-7ad4f6d53faa\";\r\n\r\n const [token, setToken] = useState(defaultToken);\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [requestUrl, setRequestUrl] = useState();\r\n const [fieldIdInput, setFieldIdInput] = useState();\r\n const [fieldResponseJson, setFieldResponseJson] = useState();\r\n const [fieldresponseStatus, setFieldResponseStatus] = useState();\r\n const [fieldRequestUrl, setFieldRequestUrl] = useState();\r\n const [mvtResponse, setMvtResponse] = useState();\r\n const step2DivRef = useRef(null);\r\n const [billing, setBilling] = useState(\"by_field\");\r\n const [simplifiedGeometry, setSimplyfiedGeometry] = useState(\"false\");\r\n const [mapDrawMode, setMapDrawMode] = useState(dataLayer.drawMode);\r\n\r\n useEffect(() => {\r\n setMapDrawMode(dataLayer.drawMode);\r\n }, [dataLayer.drawMode]);\r\n\r\n useEffect(() => {\r\n if (mvtResponse) {\r\n try {\r\n var tile = new VectorTile(new Protobuf(mvtResponse));\r\n\r\n const features = [];\r\n\r\n for (let i = 0; i < tile.layers[\"digifarm\"].length; i++) {\r\n features.push(\r\n tile.layers[\"digifarm\"]\r\n .feature(i)\r\n .toGeoJSON(\r\n tileCoordinates[0],\r\n tileCoordinates[1],\r\n tileCoordinates[2]\r\n )\r\n );\r\n }\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: {\r\n type: \"FeatureCollection\",\r\n features,\r\n },\r\n },\r\n });\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n }\r\n }, [mvtResponse]);\r\n\r\n const handleClick = () => {\r\n if (mapDrawMode === \"draw_rectangle\") {\r\n const fetchUrl =\r\n baseUrl +\r\n \"/delineated-fields/low-res\" +\r\n \"?token=\" +\r\n token +\r\n \"&bbox=\" +\r\n bBoxPoints.join(\",\") +\r\n \"&data_version=\" +\r\n version;\r\n\r\n const rectangle = [\r\n [\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n ],\r\n ];\r\n\r\n if (polygon && polygon.length) {\r\n if (!comparePolygonArrays(rectangle[0], polygon[0])) {\r\n dispatch({\r\n type: setPolygon,\r\n payload: {\r\n polygon: rectangle,\r\n },\r\n });\r\n }\r\n }\r\n\r\n setRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setFieldIdInput(\"\");\r\n setFieldResponseStatus(null);\r\n setResponseJson(data);\r\n console.log(data, \"data\");\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: data,\r\n },\r\n });\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n } else {\r\n if (tileCoordinates.length) {\r\n const fetchUrl =\r\n baseUrl +\r\n \"/delineated-fields/low-res/merc\" +\r\n \"?token=\" +\r\n token +\r\n \"&x=\" +\r\n tileCoordinates[0] +\r\n \"&y=\" +\r\n tileCoordinates[1] +\r\n \"&z=\" +\r\n tileCoordinates[2] +\r\n \"&ext=\" +\r\n outputFormat +\r\n \"&data_version=\" +\r\n version;\r\n\r\n setRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n if (outputFormat === \"mvt\") {\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.arrayBuffer();\r\n })\r\n .then((buffer) => {\r\n setMvtResponse(buffer);\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n\r\n return;\r\n }\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n console.log(response);\r\n setResponseStatus(response.status);\r\n\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setFieldIdInput(\"\");\r\n setFieldResponseStatus(null);\r\n setResponseJson(data);\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: data,\r\n },\r\n });\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n }\r\n }\r\n };\r\n\r\n const fetchByFieldId = () => {\r\n const fetchUrl =\r\n baseUrl +\r\n `/delineated-fields/high-res/${fieldId}` +\r\n \"?token=\" +\r\n token +\r\n \"&data_version=latest\" +\r\n \"&simplified_geometry=\" +\r\n simplifiedGeometry;\r\n setFieldRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setFieldResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setFieldResponseJson(data);\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: data,\r\n },\r\n });\r\n });\r\n };\r\n\r\n const downloadPbf = () => {\r\n const blob = new Blob([mvtResponse]);\r\n saveAs(\r\n blob,\r\n `${tileCoordinates[0]}_${tileCoordinates[1]}_${tileCoordinates[2]}.pbf`\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n setFieldIdInput(fieldId);\r\n }, [fieldId]);\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n >\r\n \r\n Generate Response\r\n \r\n
\r\n\r\n {responseStatus && (\r\n /delineated-fields
\r\n\r\n {api_version === \"development\"\r\n ? \"Returns GeoJSON of delineated fields in the given bbox. Returned GeoJSON features will be limited to max 300 features or 6 Megabytes. If there are more polygons that match the query than the ones already recieved in the response, next_cursor value present in the response can be used to query the next set of fields by passing it as the value of cursor parameter\"\r\n : \"Returns GeoJSON of delineated fields in the given bbox. Returned GeoJSON features will be limited to max 1000 features. In case you get 1000 features, split the querying bbox further to get complete features.\"}\r\n
\r\nParameters
\r\n\r\n {\r\n setBilling(e.target.value);\r\n }}\r\n >\r\n
\r\n Type of Billing :
\r\n \r\n \r\n
\r\n\r\n Data Version :
\r\n \r\n {\r\n setBBoxPoints([\r\n parseFloat(e.target.value),\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n parseFloat(e.target.value),\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n parseFloat(e.target.value),\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n >\r\n
\r\n {api_version === \"development\" ? (\r\n <>\r\n \r\n {\r\n setLimit(e.target.value);\r\n }}\r\n >\r\n {\r\n setVersion(e.target.value);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setNextCursor(e.target.value);\r\n }}\r\n >\r\n
\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n
\r\n )}\r\n Responses
\r\n\r\n
\r\n {responseStatus}
\r\n \r\n
\r\n \r\n {responseStatus === 200 && \"Successfully fetched\"}{\" \"}\r\n {responseStatus === 404 && \"Field not found at the location\"}\r\n
\r\n\r\n Please check the coverage API to see if we have data for the\r\n region you are querying. The test token allows you to query\r\n to the DR API for only a sample area of each region. If you\r\n wish to query outside the sample region shown get in touch\r\n with us at hello@digifarm.io\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FieldIdDrawer;\r\n","import {\r\n Button,\r\n FilledInput,\r\n makeStyles,\r\n Tabs,\r\n TextField,\r\n Tab,\r\n List,\r\n ListItem,\r\n ListItemText,\r\n ListItemIcon,\r\n FormControlLabel,\r\n Radio,\r\n RadioGroup,\r\n} from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setFeature,\r\n setMode,\r\n setPoint,\r\n setLocation,\r\n dispatch,\r\n} from \"../contexts/actions\";\r\nimport { domain, api_version } from \"../config\";\r\n\r\nimport copyToClipboard from \"../util/copyToClipboard\";\r\nimport { saveAs } from \"file-saver\";\r\nimport turf from \"turf\";\r\n\r\nimport Disclaimer from \"./Disclaimer\";\r\nimport InputField from \"./InputField\";\r\nimport UrlDisplay from \"./UrlDisplay\";\r\nimport ResponseDisplay from \"./ResponseDisplay\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n\r\n mt8: {\r\n marginTop: 8,\r\n },\r\n\r\n getInTouch: {\r\n color: \"#1D2023\",\r\n marginBottom: 4,\r\n lineHeight: \"24px\",\r\n fontSize: 16,\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n\r\n generateResp: {\r\n marginTop: 16,\r\n minHeight: 48,\r\n borderRadius: 4,\r\n textTransform: \"capitalize\",\r\n fontWeight: 600,\r\n fontSize: 16,\r\n },\r\n\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n \"@media (max-width: 600px)\": {\r\n flexWrap: \"wrap\",\r\n \"& >div\": {\r\n marginRight: \"0px !important\",\r\n marginBottom: 8,\r\n },\r\n },\r\n },\r\n tabsRoot: {\r\n backgroundColor: \"#fff\",\r\n borderRadius: 8,\r\n minHeight: 36,\r\n // margin: \"0px 16px\",\r\n color: \"#1D2023\",\r\n border: \"1px solid #01B075\",\r\n marginTop: 12,\r\n },\r\n tab: {\r\n paddingBottom: 6,\r\n paddingTop: 6,\r\n minHeight: 36,\r\n minWidth: 120,\r\n },\r\n tabSelected: {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n },\r\n tabWrapper: {\r\n // paddingTop: 6,\r\n // paddingBottom: 6,\r\n },\r\n tabIndicator: {\r\n backgroundColor: \"#fff\",\r\n height: 0,\r\n },\r\n listItemIconRoot: {\r\n minWidth: 32,\r\n marginTop: 6,\r\n },\r\n listItemText: {\r\n fontWeight: 600,\r\n color: \"#1D2023\",\r\n },\r\n inDevMarker: {\r\n fill: \"#EA891D\",\r\n },\r\n showAllButton: {\r\n fontWeight: \"600\",\r\n marginBottom: \"1em\",\r\n },\r\n listItemRoot: {\r\n alignItems: \"start\",\r\n cursor: \"pointer\",\r\n },\r\n availableTab: {\r\n minWidth: 190,\r\n },\r\n listRoot: {\r\n minHeight: 180,\r\n },\r\n radioGroupRoot: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginTop: 8,\r\n },\r\n typeOfBiling: {\r\n fontSize: 16,\r\n marginRight: 32,\r\n color: \"#1D2023\",\r\n width: 118,\r\n },\r\n});\r\n\r\nfunction TabPanel(props) {\r\n const { children, value, index, ...other } = props;\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n >\r\n
\r\n\r\n {mapDrawMode === \"draw_rectangle\" ? (\r\n <>\r\n Step 1. Area selection
\r\nReturns low resolution fields for the given bbox/tile coordinates
\r\n\r\n {\r\n setFieldResponseJson(null);\r\n setFieldRequestUrl(\"\");\r\n setFieldResponseStatus(null);\r\n setOutputFormat(\"geojson\");\r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"lowResBBOX\",\r\n drawMode: \"draw_rectangle\",\r\n },\r\n });\r\n }}\r\n >\r\n via bounding box\r\n \r\n {\r\n setResponseJson(null);\r\n setRequestUrl(\"\");\r\n setResponseStatus(null);\r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"lowResTile\",\r\n drawMode: \"\",\r\n },\r\n });\r\n }}\r\n >\r\n via vector tile\r\n \r\n
\r\n Parameters
\r\n\r\n\r\n \r\n Generate Response\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n {\r\n setBBoxPoints([\r\n parseFloat(e.target.value),\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n />\r\n\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n parseFloat(e.target.value),\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n parseFloat(e.target.value),\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setVersion(e.target.value);\r\n }}\r\n >\r\n
\r\n \r\n \r\n Generate Response for Step 1\r\n \r\n
\r\n \r\n )}\r\n {responseStatus && (\r\n <>\r\n \r\n {\r\n setTileCoordinates([\r\n parseFloat(e.target.value),\r\n tileCoordinates[1],\r\n tileCoordinates[2],\r\n ]);\r\n }}\r\n >\r\n {\r\n setTileCoordinates([\r\n tileCoordinates[0],\r\n parseFloat(e.target.value),\r\n tileCoordinates[2],\r\n ]);\r\n }}\r\n >\r\n {\r\n setTileCoordinates([\r\n tileCoordinates[0],\r\n tileCoordinates[1],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setVersion(e.target.value);\r\n }}\r\n >\r\n
\r\n \r\n Type of Output:\r\n \r\n {\r\n setOutputFormat(e.target.value);\r\n }}\r\n >\r\n
\r\n \r\n Use \"digifarm\" as the source layer when using as a vector layer\r\n in mapbox\r\n
\r\n \r\n
\r\n Responses
\r\n\r\n
\r\n {responseStatus}
\r\n \r\n {outputFormat === \"mvt\" && responseStatus !== 204 ? (\r\n
\r\n \r\n <>\r\n {\r\n downloadPbf(mvtResponse);\r\n }}\r\n className={classes.downloadButton}\r\n >\r\n Save as file\r\n \r\n \r\n
\r\n ) : (\r\n \r\n Please check the coverage API to see if we have data for the\r\n region you are querying. The test token allows you to query\r\n to the DR API for only a sample area of each region. If you\r\n wish to query outside the sample region shown get in touch\r\n with us at hello@digifarm.io\r\n
\r\n )}\r\n \r\n {\r\n dispatch({\r\n type: setFieldId,\r\n payload: {\r\n fieldId: e.target.value,\r\n },\r\n });\r\n }}\r\n >\r\n \r\n Generate Response\r\n \r\n
\r\n {fieldresponseStatus && (\r\n Step 2. Field boundary selection
\r\nReturns the high resolution polygon for the given field id
\r\n\r\n \r\n
\r\n Data Version :
\r\n \r\n {\r\n setSimplyfiedGeometry(e.target.value);\r\n }}\r\n >\r\n
\r\n Simplified Geometry :
\r\n \r\n
\r\n )}\r\n \r\n )}\r\n Responses
\r\n\r\n
\r\n \r\n {fieldresponseStatus}\r\n
\r\n \r\n
\r\n \r\n {fieldresponseStatus === 200 && \"Successfully fetched\"}{\" \"}\r\n {fieldresponseStatus === 404 &&\r\n \"Field not found at the location\"}\r\n
\r\n{children}
}\r\n \r\n );\r\n}\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n \"aria-controls\": `simple-tabpanel-${index}`,\r\n };\r\n}\r\n// dispatch({\r\n// type: setPoint,\r\n// payload: {\r\n// point: e.features[0].geometry.coordinates,\r\n// },\r\n// });\r\n\r\nconst LocationListItem = ({ feature }) => {\r\n const classes = useStyles();\r\n const location =\r\n feature.geometry.type === \"Point\"\r\n ? feature.geometry.coordinates\r\n : turf.center(feature.geometry).geometry.coordinates;\r\n\r\n const { dispatch } = useContext(store);\r\n\r\n const setMapLocation = (location) => {\r\n dispatch({\r\n type: setLocation,\r\n payload: {\r\n location: { center: location, zoom: 6 },\r\n },\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst LocationList = ({ list }) => {\r\n const classes = useStyles();\r\n const [showAll, setShowAll] = useState(false);\r\n\r\n return (\r\n \r\n {\r\n setShowAll(true);\r\n }}\r\n className={classes.showAllButton}\r\n variant=\"outlined\"\r\n color=\"primary\"\r\n fullWidth\r\n >\r\n View all {list.length}\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst CoverageDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { mode: mapDrawMode },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const baseUrl = `${domain}/${api_version}`;\r\n // \"https://2aqfsaq392.execute-api.eu-central-1.amazonaws.com/production\";\r\n // \"https://api.digifarm.io/v1\";\r\n\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [requestUrl, setRequestUrl] = useState();\r\n const defaultToken = \"a0731a8c-5259-4c68-af3a-7ad4f6d53faa\";\r\n const [token, setToken] = useState(defaultToken);\r\n const [tabValue, setTabValue] = useState(0);\r\n\r\n const handleClick = () => {\r\n const fetchUrl =\r\n baseUrl +\r\n \"/delineated-areas\" +\r\n \"?token=\" +\r\n token +\r\n \"&data_version=latest\";\r\n setRequestUrl(fetchUrl);\r\n\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setResponseJson(data);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (responseJson) {\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: responseJson,\r\n },\r\n });\r\n }\r\n }, [responseJson]);\r\n\r\n const copyContent = () => {\r\n copyToClipboard(JSON.stringify(responseJson));\r\n };\r\n const downloadGeoJSON = () => {\r\n const blob = new Blob([JSON.stringify(responseJson, null, 2)], {\r\n type: \"application/json\",\r\n });\r\n saveAs(blob, \"coverage-area.json\");\r\n };\r\n\r\n const handleChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const handleChangeIndex = (index) => {\r\n setTabValue(index);\r\n };\r\n\r\n return (\r\n - \r\n {(list.length <= 4 || showAll) &&\r\n list.map((feature) => {\r\n return
\r\n
\r\n );\r\n};\r\n\r\nexport default CoverageDrawer;\r\n","import { makeStyles } from \"@material-ui/core\";\r\nimport { useState, useContext } from \"react\";\r\nimport turf from \"turf\";\r\nimport { store } from \"../contexts/store\";\r\nimport { setLocation } from \"../contexts/actions\";\r\n\r\nconst useStyles = makeStyles({\r\n flex: {\r\n display: \"flex\",\r\n },\r\n tile: {\r\n fontWeight: 600,\r\n color: \"#1D2023\",\r\n minWidth: 74,\r\n },\r\n year: {\r\n minWidth: 46,\r\n },\r\n dates: {\r\n wordWrap: \"break-word\",\r\n maxWidth: \"100%\",\r\n flex: 1,\r\n marginBottom: 10,\r\n },\r\n tileContainer: {\r\n display: \"flex\",\r\n \"&:hover\": {\r\n cursor: \"pointer\",\r\n },\r\n },\r\n});\r\n\r\nconst months = {\r\n \"01\": \"Jan\",\r\n \"02\": \"Feb\",\r\n \"03\": \"Mar\",\r\n \"04\": \"Apr\",\r\n \"05\": \"May\",\r\n \"06\": \"Jun\",\r\n \"07\": \"Jul\",\r\n \"08\": \"Aug\",\r\n \"09\": \"Sep\",\r\n 10: \"Oct\",\r\n 11: \"Nov\",\r\n 12: \"Dec\",\r\n};\r\n\r\nconst DRCoverageTileDisplay = (props) => {\r\n const classes = useStyles();\r\n const { feature } = props;\r\n const { properties } = feature;\r\n const [years, setYears] = useState([]);\r\n\r\n const location =\r\n feature.geometry.type === \"Point\"\r\n ? feature.geometry.coordinates\r\n : turf.center(feature.geometry).geometry.coordinates;\r\n\r\n const { dispatch } = useContext(store);\r\n\r\n const setMapLocation = (location) => {\r\n dispatch({\r\n type: setLocation,\r\n payload: {\r\n location: { center: location },\r\n },\r\n });\r\n };\r\n\r\n // run filter on the available dates to extract the years.\r\n // Then on each of them\r\n // console.log(properties);\r\n useState(() => {\r\n // console.log(properties);\r\n properties &&\r\n properties.availableDates.length &&\r\n setYears(\r\n properties.availableDates\r\n .map(({ source_date }) => source_date.substring(0, 4))\r\n .filter((item, i, ar) => ar.indexOf(item) === i)\r\n );\r\n }, []);\r\n\r\n {\r\n /* Need to show the new response. \r\n map over the features. \r\n tile name is in properties. \r\n availableDates array contains source_date\r\n\r\n Component for each tile\r\n Show the tile name, \r\n Then map over the years , \r\n then show the dates - in a user readable format.\r\n - collapse \r\n\r\n Filling the details of the date and tile location zoom in XYZ api\r\n */\r\n }\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n value={token}\r\n >\r\n \r\n Generate Response\r\n \r\n\r\n
\r\n\r\n {responseStatus && (\r\n /delineated-areas
\r\n\r\n Returns polygons for the areas where delineated fields are available\r\n
\r\nParameters
\r\n\r\n \r\n
\r\n\r\n Data Version :
\r\n \r\n \r\n \r\n feature.properties.delineation_status === \"done\"\r\n ).length\r\n })`}\r\n {...a11yProps(0)}\r\n classes={{\r\n root: [classes.tab, classes.availableTab].join(\" \"),\r\n selected: classes.tabSelected,\r\n wrapper: classes.tabWrapper,\r\n }}\r\n />\r\n \r\n feature.properties.delineation_status ===\r\n \"in development\"\r\n ).length\r\n })`}\r\n {...a11yProps(1)}\r\n classes={{\r\n root: classes.tab,\r\n selected: classes.tabSelected,\r\n wrapper: classes.tabWrapper,\r\n }}\r\n />\r\n \r\n\r\n \r\n \r\n feature.properties.delineation_status === \"done\"\r\n )}\r\n />\r\n \r\n \r\n \r\n feature.properties.delineation_status === \"in development\"\r\n )}\r\n />\r\n \r\n \r\n )}\r\n
\r\n )}\r\n Responses
\r\n {responseJson && (\r\n <>\r\n\r\n
\r\n {responseStatus}
\r\n \r\n
\r\n \r\n {responseStatus === 200 && \"Successfully fetched\"}{\" \"}\r\n {responseStatus === 404 && \"Field not found at the location\"}\r\n
\r\n{properties.mgrs_tile} :
\r\n \r\n {years.map((year) => {\r\n return (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DRCoverageTileDisplay;\r\n","import {\r\n Button,\r\n FilledInput,\r\n makeStyles,\r\n TextField,\r\n List,\r\n ListItem,\r\n ListItemText,\r\n ListItemIcon,\r\n} from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setFeature,\r\n setMode,\r\n setPoint,\r\n setLocation,\r\n dispatch,\r\n} from \"../contexts/actions\";\r\nimport { domain, api_version } from \"../config\";\r\n\r\nimport turf from \"turf\";\r\n\r\nimport countryCodes from \"../util/countryCodes.json\";\r\nimport UrlDisplay from \"./UrlDisplay\";\r\nimport ResponseDisplay from \"./ResponseDisplay\";\r\nimport InputField from \"./InputField\";\r\nimport DRCoverageTileDisplay from \"./DRCoverageTileDisplay\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n generateResp: {\r\n marginTop: 16,\r\n minHeight: 48,\r\n borderRadius: 4,\r\n textTransform: \"capitalize\",\r\n fontWeight: 600,\r\n fontSize: 16,\r\n },\r\n url: {\r\n color: \"#EA891D\",\r\n },\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n \"@media (max-width: 600px)\": {\r\n flexWrap: \"wrap\",\r\n \"& >div\": {\r\n marginRight: \"0px !important\",\r\n marginBottom: 8,\r\n },\r\n },\r\n },\r\n tabsRoot: {\r\n backgroundColor: \"#fff\",\r\n borderRadius: 8,\r\n minHeight: 36,\r\n // margin: \"0px 16px\",\r\n color: \"#1D2023\",\r\n border: \"1px solid #01B075\",\r\n marginTop: 12,\r\n flexWrap: \"wrap\",\r\n maxWidth: \"100%\",\r\n },\r\n tab: {\r\n paddingBottom: 6,\r\n paddingTop: 6,\r\n minHeight: 36,\r\n minWidth: 120,\r\n },\r\n tabSelected: {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n },\r\n tabWrapper: {\r\n // paddingTop: 6,\r\n // paddingBottom: 6,\r\n },\r\n tabIndicator: {\r\n backgroundColor: \"#fff\",\r\n height: 0,\r\n },\r\n listItemIconRoot: {\r\n minWidth: 28,\r\n marginTop: 6,\r\n },\r\n listItemText: {\r\n fontWeight: 600,\r\n color: \"#1D2023\",\r\n },\r\n inDevMarker: {\r\n fill: \"#EA891D\",\r\n },\r\n showAllButton: {\r\n fontWeight: \"600\",\r\n marginBottom: \"1em\",\r\n },\r\n listItemRoot: {\r\n alignItems: \"start\",\r\n cursor: \"pointer\",\r\n },\r\n availableTab: {\r\n minWidth: 190,\r\n },\r\n listRoot: {\r\n minHeight: 120,\r\n },\r\n\r\n mgrsTitle: {\r\n marginLeft: 16,\r\n marginTop: 8,\r\n fontWeight: 600,\r\n fontSize: 14,\r\n marginBottom: -8,\r\n color: \"#1D2023\",\r\n },\r\n countryButton: {\r\n marginTop: 8,\r\n marginRight: 8,\r\n },\r\n countryButtonActive: {\r\n borderColor: \"#01B075\",\r\n },\r\n});\r\n\r\nconst LocationListItem = ({ feature }) => {\r\n const classes = useStyles();\r\n const location =\r\n feature.geometry.type === \"Point\"\r\n ? feature.geometry.coordinates\r\n : turf.center(feature.geometry).geometry.coordinates;\r\n\r\n const { dispatch } = useContext(store);\r\n\r\n const setMapLocation = (location) => {\r\n dispatch({\r\n type: setLocation,\r\n payload: {\r\n location: { center: location },\r\n },\r\n });\r\n };\r\n const countryLowerCase = feature.properties.country.toLowerCase();\r\n\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n {year}:
\r\n \r\n {properties.availableDates\r\n .filter(\r\n ({ source_date }, i) => source_date.substring(0, 4) === year\r\n )\r\n .map(\r\n ({ source_date }) =>\r\n months[source_date.substring(4, 6)] +\r\n \" \" +\r\n source_date.substring(6, 8)\r\n )\r\n .join(\", \")}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst LocationList = ({ list }) => {\r\n const classes = useStyles();\r\n const [showAll, setShowAll] = useState(false);\r\n\r\n return (\r\n \r\n {\r\n setShowAll(true);\r\n }}\r\n className={classes.showAllButton}\r\n variant=\"outlined\"\r\n color=\"primary\"\r\n fullWidth\r\n >\r\n View all {list.length}\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst CountryList = ({ list, setSelectedCountry, selectedCountry }) => {\r\n const classes = useStyles();\r\n const [showAll, setShowAll] = useState(false);\r\n\r\n return (\r\n - \r\n {(list.length <= 4 || showAll) &&\r\n list.map((feature) => {\r\n return
\r\n
\r\n );\r\n};\r\n\r\nconst DRCoverageDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { mode: mapDrawMode },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const baseUrl = `${domain}/${api_version}`;\r\n // \"https://2aqfsaq392.execute-api.eu-central-1.amazonaws.com/production\";\r\n // \"https://api.digifarm.io/v1\";\r\n\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [requestUrl, setRequestUrl] = useState();\r\n const defaultToken = \"a0731a8c-5259-4c68-af3a-7ad4f6d53faa\";\r\n const [token, setToken] = useState(defaultToken);\r\n const [countryList, setCountryList] = useState([]);\r\n const [selectedCountry, setSelectedCountry] = useState();\r\n const [mgrsTiles, setMgrsTiles] = useState();\r\n // const [bBoxPoints, setBBoxPoints] = useState([-180, -90, 180, 90]);\r\n const [bbox, setBBOX] = useState(\"-180, -90, 180, 90\");\r\n\r\n const handleClick = () => {\r\n const fetchUrl = `${baseUrl}/dr-imagery?token=${token}${\r\n mgrsTiles ? `&mgrs_tile=${mgrsTiles}` : \"\"\r\n }${bbox ? \"&bbox=\" + bbox : \"\"}`;\r\n setRequestUrl(fetchUrl);\r\n\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setResponseJson(data);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (responseJson) {\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: responseJson,\r\n },\r\n });\r\n const uniqueCountryCodes =\r\n responseJson &&\r\n responseJson.features\r\n .map(({ properties }) => properties.country)\r\n .filter((item, i, ar) => ar.indexOf(item) === i);\r\n setCountryList(uniqueCountryCodes);\r\n setSelectedCountry(uniqueCountryCodes[0]);\r\n }\r\n }, [responseJson]);\r\n\r\n return (\r\n - \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default DRCoverageDrawer;\r\n","import { Button, makeStyles, Select, MenuItem } from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setPolygon,\r\n setToken,\r\n setTiles,\r\n setTileURL,\r\n} from \"../contexts/actions\";\r\nimport copyToClipboard from \"../util/copyToClipboard\";\r\n\r\nimport { VectorTile } from \"@mapbox/vector-tile\";\r\nimport { domain, api_version } from \"../config\";\r\nimport {\r\n MuiPickersUtilsProvider,\r\n KeyboardDatePicker,\r\n} from \"@material-ui/pickers\";\r\n// import \"date-fns\";\r\nimport DateFnsUtils from \"@date-io/date-fns\";\r\nimport InputField from \"./InputField\";\r\nimport Disclaimer from \"./Disclaimer\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n mt8: {\r\n marginTop: 8,\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n maxWidth: \"100%\",\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n responseJson: {\r\n backgroundColor: \"#EEEFF1\",\r\n borderRadius: 4,\r\n padding: \"8px 16px\",\r\n position: \"relative\",\r\n maxWidth: 420,\r\n minHeight: 100,\r\n maxHeight: 520,\r\n overflowY: \"scroll\",\r\n },\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n generateResp: {\r\n marginTop: 16,\r\n textTransform: \"capitalize\",\r\n },\r\n url: {\r\n color: \"#EA891D\",\r\n },\r\n copyButton: {\r\n marginRight: 8,\r\n textTransform: \"capitalize\",\r\n borderRadius: 4,\r\n \"@media (max-width: 600px)\": {\r\n position: \"static\",\r\n marginBottom: 8,\r\n },\r\n },\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n },\r\n parameters: {\r\n marginTop: \"24px !important\",\r\n },\r\n imageGrid: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(auto-fit, minmax(76px, 1fr))\",\r\n columnGap: \"16px\",\r\n rowGap: \"16px\",\r\n fontSize: \"10px\",\r\n },\r\n drImageThumbnail: {\r\n width: \"100%\",\r\n borderRadius: 4,\r\n marginTop: 4,\r\n border: \"1px solid #E0E0E0\",\r\n },\r\n rasterUrlContainer: {\r\n position: \"relative\",\r\n display: \"flex\",\r\n marginTop: 16,\r\n },\r\n rasterUrl: {\r\n color: \"#1D2023\",\r\n fontWeight: 600,\r\n maxWidth: \"100%\",\r\n wordWrap: \"anywhere\",\r\n },\r\n rasterUrlLabel: {\r\n fontSize: 12,\r\n marginBottom: 8,\r\n },\r\n});\r\n\r\nconst baseUrl = `${domain}/${api_version}`;\r\n//To do: Needs to be changed when promoting to production\r\nconst DRUrl = \"https://api.digifarm.io/development/s2/tiles\";\r\n\r\nconst isTileLoaded = new Array(64).fill(false);\r\n\r\nconst DRTileDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { drawMode: mapDrawMode, tile, token, tiles },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const [tileCoordinates, setTileCoordinates] = useState([]);\r\n\r\n useEffect(() => {\r\n if (tile && tile.length) {\r\n setTileCoordinates(tile);\r\n }\r\n }, [tile]);\r\n\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [startDate, setStartDate] = React.useState(new Date(\"2019-01-01\"));\r\n const [endDate, setEndDate] = React.useState(new Date());\r\n // Need to set it from locationObject[region].mgrs\r\n const [mgrsTiles, setMgrsTiles] = useState();\r\n const [imageType, setImageType] = useState(\"rgbn_rgb\");\r\n const [imageFormat, setImageFormat] = useState(\"png\");\r\n const [responseClicked, setResponseClicked] = useState(false);\r\n const [imageUrls, setImageUrls] = useState([]);\r\n const [isAtleastOneImageLoaded, setIsAtleastOneImageLoaded] = useState(false);\r\n\r\n const handleStartDateChange = (date) => {\r\n setStartDate(date);\r\n };\r\n const handleEndDateChange = (date) => {\r\n setEndDate(date);\r\n };\r\n\r\n const handleClick = () => {\r\n // Although I can just add the image component with the generated urls, what happens when there is an error? The error will need to be shown properly/at least the user needs to know about it\r\n // I think I need to add a loading state to the image component and show a loading spinner while the image is loading\r\n // I also need to add a fallback image if the image is not found\r\n dispatch({\r\n type: setTileURL,\r\n payload: {\r\n tileURL: `${DRUrl}/{z}/{x}/{y}.${\r\n imageFormat === \"tif\" ? \"png\" : imageFormat\r\n }?token=${token}&render=${imageType}${\r\n mgrsTiles ? `&mgrs_t=${mgrsTiles}` : \"\"\r\n }&start_date=${getFormattedDate(startDate)}&end_date=${getFormattedDate(\r\n endDate\r\n )}`,\r\n },\r\n });\r\n setResponseClicked(true);\r\n const tileUrls = tiles[0].map(\r\n (tile, index) =>\r\n `${DRUrl}/${tiles[2]}/${tiles[0][index]}/${\r\n tiles[1][index]\r\n }.${imageFormat}?token=${token}&render=${imageType}${\r\n mgrsTiles ? `&mgrs_t=${mgrsTiles}` : \"\"\r\n }&start_date=${getFormattedDate(startDate)}&end_date=${getFormattedDate(\r\n endDate\r\n )}`\r\n );\r\n\r\n setImageUrls(tileUrls);\r\n\r\n fetchOneTile(tileUrls[0]);\r\n };\r\n\r\n const getFormattedDate = (date) => {\r\n const yyyy = date.getFullYear();\r\n let mm = date.getMonth() + 1; // Months start at 0!\r\n let dd = date.getDate();\r\n if (dd < 10) dd = \"0\" + dd;\r\n if (mm < 10) mm = \"0\" + mm;\r\n\r\n return `${yyyy}${mm}${dd}`;\r\n };\r\n\r\n const copyContent = (responseJson) => {\r\n copyToClipboard(JSON.stringify(responseJson));\r\n };\r\n\r\n const fetchOneTile = async (tileUrl) => {\r\n console.log(tileUrl);\r\n fetch(tileUrl).then((response) => {\r\n console.log(\"response -fetch one tile\", response);\r\n setResponseStatus(response.status);\r\n });\r\n };\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n value={token}\r\n >\r\n
\r\n /dr-imagery
\r\n\r\n Returns polygons for the areas where Deeply resolved satellite imagery\r\n is available\r\n
\r\nParameters
\r\n\r\n {\r\n setMgrsTiles(e.target.value);\r\n }}\r\n >\r\n\r\n \r\n Generate Response\r\n \r\n
\r\n\r\n {responseStatus && (\r\n \r\n setBBOX(e.target.value)}\r\n />\r\n
\r\n\r\n \r\n {responseJson && (\r\n <>\r\n \r\n feature.properties.country === selectedCountry\r\n )\r\n : responseJson.features\r\n }\r\n />\r\n \r\n )}\r\n
\r\n )}\r\n MGRS tiles:
\r\n\r\n
\r\n {responseStatus}
\r\n \r\n
\r\n \r\n {responseStatus === 200 && \"Successfully fetched\"}{\" \"}\r\n {responseStatus === 404 && \"Field not found at the location\"}\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default DRTileDrawer;\r\n","import { Button, makeStyles, Select, MenuItem } from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setPolygon,\r\n setToken,\r\n setTiles,\r\n setTileURL,\r\n} from \"../contexts/actions\";\r\nimport copyToClipboard from \"../util/copyToClipboard\";\r\n\r\nimport { domain, api_version } from \"../config\";\r\nimport {\r\n MuiPickersUtilsProvider,\r\n KeyboardDatePicker,\r\n} from \"@material-ui/pickers\";\r\nimport DateFnsUtils from \"@date-io/date-fns\";\r\nimport InputField from \"./InputField\";\r\nimport Disclaimer from \"./Disclaimer\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n mt8: {\r\n marginTop: 8,\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n maxWidth: \"100%\",\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n generateResp: {\r\n marginTop: 16,\r\n textTransform: \"capitalize\",\r\n },\r\n url: {\r\n color: \"#EA891D\",\r\n },\r\n copyButton: {\r\n marginRight: 4,\r\n textTransform: \"capitalize\",\r\n borderRadius: 4,\r\n marginTop: 8,\r\n \"@media (max-width: 600px)\": {\r\n position: \"static\",\r\n marginBottom: 8,\r\n },\r\n },\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n },\r\n parameters: {\r\n marginTop: \"24px !important\",\r\n },\r\n imageGrid: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(auto-fit, minmax(68px, 1fr))\",\r\n columnGap: \"16px\",\r\n rowGap: \"16px\",\r\n },\r\n drImageThumbnail: {\r\n width: \"100%\",\r\n borderRadius: 4,\r\n border: \"1px solid #EEEFF1\",\r\n },\r\n rasterUrlContainer: {\r\n position: \"relative\",\r\n display: \"flex\",\r\n marginTop: 16,\r\n },\r\n rasterUrl: {\r\n color: \"#1D2023\",\r\n fontWeight: 600,\r\n maxWidth: \"100%\",\r\n wordWrap: \"anywhere\",\r\n marginRight: 8,\r\n },\r\n rasterUrlLabel: {\r\n fontSize: 12,\r\n marginBottom: 8,\r\n },\r\n});\r\n\r\nconst baseUrl = `${domain}/${api_version}`;\r\n//To do: Needs to be changed when promoting to production\r\nconst DRUrl = \"https://api.digifarm.io/development/s2/crop/\";\r\n\r\nconst DRBboxDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { drawMode: mapDrawMode, tile, fieldId, token, tiles, polygon },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [startDate, setStartDate] = React.useState(new Date(\"2019-01-01\"));\r\n const [endDate, setEndDate] = React.useState(new Date());\r\n // Need to set it from locationObject[region].mgrs\r\n const [mgrsTiles, setMgrsTiles] = useState();\r\n const [imageType, setImageType] = useState(\"rgbn_rgb\");\r\n const [imageFormat, setImageFormat] = useState(\"png\");\r\n const [bBoxPoints, setBBoxPoints] = useState([]);\r\n\r\n const [requestUrl, setRequestUrl] = useState(\"\");\r\n const [imageBlobUrl, setImageBlobUrl] = useState(\"\");\r\n const [blobSize, setBlobSize] = useState(0);\r\n\r\n const handleStartDateChange = (date) => {\r\n setStartDate(date);\r\n };\r\n const handleEndDateChange = (date) => {\r\n setEndDate(date);\r\n };\r\n\r\n useEffect(() => {\r\n if (polygon && polygon[0] && polygon[0].length) {\r\n let maxCallback = (max, cur) =>\r\n Math.max(parseFloat(max), parseFloat(cur));\r\n let minCallback = (max, cur) =>\r\n Math.min(parseFloat(max), parseFloat(cur));\r\n\r\n const minLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(minCallback, Infinity);\r\n const maxLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n const minLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(minCallback, Infinity);\r\n const maxLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n setBBoxPoints([minLng, minLat, maxLng, maxLat]);\r\n }\r\n }, [polygon]);\r\n\r\n const getFormattedDate = (date) => {\r\n const yyyy = date.getFullYear();\r\n let mm = date.getMonth() + 1; // Months start at 0!\r\n let dd = date.getDate();\r\n if (dd < 10) dd = \"0\" + dd;\r\n if (mm < 10) mm = \"0\" + mm;\r\n\r\n return `${yyyy}${mm}${dd}`;\r\n };\r\n\r\n const copyContent = (responseJson) => {\r\n copyToClipboard(JSON.stringify(responseJson));\r\n };\r\n\r\n const handleClick = () => {\r\n const fetchUrl =\r\n DRUrl +\r\n bBoxPoints.join(\",\") +\r\n `.${imageFormat}?token=${token}&render=${imageType}${\r\n mgrsTiles ? `&mgrs_t=${mgrsTiles}` : \"\"\r\n }&start_date=${getFormattedDate(startDate)}&end_date=${getFormattedDate(\r\n endDate\r\n )}`;\r\n\r\n const rectangle = [\r\n [\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n ],\r\n ];\r\n\r\n if (polygon && polygon.length) {\r\n if (!comparePolygonArrays(rectangle[0], polygon[0])) {\r\n dispatch({\r\n type: setPolygon,\r\n payload: {\r\n polygon: rectangle,\r\n },\r\n });\r\n }\r\n }\r\n\r\n setRequestUrl(fetchUrl);\r\n\r\n dispatch({\r\n type: setTileURL,\r\n payload: {\r\n tileURL: `${fetchUrl}`,\r\n },\r\n });\r\n\r\n fetch(fetchUrl)\r\n .then(function (response) {\r\n setResponseStatus(response.status);\r\n return response.blob();\r\n })\r\n .then(function (imageBlob) {\r\n setBlobSize(imageBlob.size);\r\n const objectURL = URL.createObjectURL(imageBlob);\r\n setImageBlobUrl(objectURL);\r\n });\r\n };\r\n\r\n const comparePolygonArrays = (array1, array2) => {\r\n return array1.every(\r\n (value, index) =>\r\n value[0] == array2[index][0] && value[1] == array2[index][1]\r\n );\r\n };\r\n\r\n return (\r\n \r\n {\r\n dispatch({\r\n type: setToken,\r\n payload: {\r\n token: e.target.value,\r\n },\r\n });\r\n }}\r\n >\r\n\r\n
\r\n\r\n Parameters
\r\n\r\n\r\n \r\n \r\n
\r\n \r\n {\r\n setMgrsTiles(e.target.value);\r\n }}\r\n >\r\n\r\n \r\n Generate Response\r\n \r\n
\r\n {responseStatus &&\r\n responseClicked &&\r\n responseStatus !== 200 &&\r\n !isTileLoaded.filter((value) => value === true).length && (\r\n <>\r\n \r\n {\r\n setTileCoordinates([\r\n tileCoordinates[0],\r\n tileCoordinates[1],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n className=\"mr-12\"\r\n >\r\n {\r\n dispatch({\r\n type: setTiles,\r\n payload: {\r\n tiles: [e.target.value.split(\",\"), tiles[1], tiles[2]],\r\n },\r\n });\r\n }}\r\n className=\"mr-12\"\r\n >\r\n {\r\n dispatch({\r\n type: setTiles,\r\n payload: {\r\n tiles: [tiles[0], e.target.value.split(\",\"), tiles[2]],\r\n },\r\n });\r\n }}\r\n >\r\n
\r\n\r\n \r\n {\r\n setImageType(event.target.value);\r\n }}\r\n select\r\n className=\"mr-12\"\r\n >\r\n \r\n \r\n \r\n \r\n {\r\n setImageFormat(event.target.value);\r\n }}\r\n select\r\n >\r\n \r\n \r\n \r\n {/* */}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n Raster Tile Url
\r\n \r\n {`${DRUrl}/{z}/{x}/{y}.${imageFormat}?token=${token}&render=${imageType}${\r\n mgrsTiles ? `&mgrs_t=${mgrsTiles}` : \"\"\r\n }&start_date=${getFormattedDate(\r\n startDate\r\n )}&end_date=${getFormattedDate(endDate)}`}\r\n
\r\n \r\n {\r\n copyContent(\r\n `${DRUrl}/{z}/{x}/{y}.${imageFormat}?token=${token}&render=${imageType}${\r\n mgrsTiles ? `&mgrs_t=${mgrsTiles}` : \"\"\r\n }&start_date=${getFormattedDate(\r\n startDate\r\n )}&end_date=${getFormattedDate(endDate)}`\r\n );\r\n }}\r\n className={classes.copyButton}\r\n >\r\n Copy\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n Response
\r\n\r\n
\r\n {responseStatus}
\r\n \r\n \r\n {responseStatus === 404 ? (\r\n \"DR image not found at the location\"\r\n ) : (\r\n <>\r\n \"Response Status\": {responseStatus}
\r\n
\r\n \r\n {responseStatus === 404 ? (\r\n \"DR image not found at the location\"\r\n ) : (\r\n <>\r\n \"Response Status\": {responseStatus}
\r\n {responseJson.detail && (\r\n <>\"Response Message\": {responseJson.detail}\r\n )}\r\n
\r\n \r\n )}\r\n
\r\n \r\n Please check the coverage API to see if we have data for the\r\n region you are querying. The test token allows you to query\r\n to the DR API for only a sample area of each region. If you\r\n wish to query outside the sample region shown get in touch\r\n with us at hello@digifarm.io\r\n
\r\n\r\n
\r\n \r\n {imageUrls && responseClicked\r\n ? imageUrls.map((tileUrl, index) => (\r\n
\r\n \r\n {/* Need to show the tile number label */}\r\n {/* Alt should also preferably be the same */}\r\n {tiles &&\r\n tiles[2] + \"/\" + tiles[0][index] + \"/\" + tiles[1][index]}\r\n {\r\n !isAtleastOneImageLoaded &&\r\n setIsAtleastOneImageLoaded(true);\r\n }}\r\n />\r\n
\r\n ))\r\n : \"\"}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DRBboxDrawer;\r\n","import { Checkbox, FormControlLabel, makeStyles } from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport {\r\n LineChart,\r\n Line,\r\n XAxis,\r\n YAxis,\r\n CartesianGrid,\r\n Tooltip,\r\n ResponsiveContainer,\r\n} from \"recharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n },\r\n checkboxLabel: {\r\n color: \"inherit\",\r\n fontSize: 12,\r\n fontWeight: 600,\r\n width: 36,\r\n marginRight: 0,\r\n },\r\n graphLabel: {\r\n fontSize: 12,\r\n fontWeight: 700,\r\n color: \"#949EA7\",\r\n },\r\n ndviEviCheckboxContainer: {\r\n width: 126,\r\n },\r\n}));\r\n\r\nvar months = [\r\n \"Jan\",\r\n \"Feb\",\r\n \"Mar\",\r\n \"Apr\",\r\n \"May\",\r\n \"Jun\",\r\n \"Jul\",\r\n \"Aug\",\r\n \"Sep\",\r\n \"Oct\",\r\n \"Nov\",\r\n \"Dec\",\r\n];\r\n\r\nconst TimeSeriesChart = ({ data }) => {\r\n const classes = useStyles();\r\n const [bands, setBands] = useState([\r\n { name: \"B01\", active: true },\r\n { name: \"B02\", active: true },\r\n { name: \"B03\", active: true },\r\n { name: \"B04\", active: true },\r\n { name: \"B05\", active: true },\r\n { name: \"B06\", active: true },\r\n { name: \"B07\", active: true },\r\n { name: \"B08\", active: true },\r\n { name: \"B08A\", active: true },\r\n { name: \"B09\", active: true },\r\n { name: \"B11\", active: true },\r\n { name: \"B12\", active: true },\r\n ]);\r\n\r\n const [render, setRender] = useState([\r\n { name: \"EVI\", active: true },\r\n { name: \"NDVI\", active: true },\r\n { name: \"NDMI\", active: true },\r\n { name: \"MI\", active: true },\r\n ]);\r\n\r\n const [graphData, setGraphData] = useState({});\r\n // format data.\r\n // Extract unique dates and then add the individual values to it\r\n\r\n useEffect(() => {\r\n try {\r\n if (data) {\r\n // console.log(\"keys\", Object.keys(data.names));\r\n const keys = Object.keys(data.names);\r\n const arryaOfObjects = Object.keys(data.names).map(\r\n (key) => data.names[key].values\r\n );\r\n var flattenedArray = arryaOfObjects.reduce(\r\n (r, e) => (r.push(...e), r),\r\n []\r\n );\r\n\r\n const uniqueDates = flattenedArray\r\n .map((item) => item.date)\r\n .filter((value, index, self) => self.indexOf(value) === index)\r\n .sort((date1, date2) => date1 - date2);\r\n console.log(uniqueDates);\r\n\r\n const graphData = uniqueDates.map((date) => {\r\n const graphEntry = { date };\r\n keys.forEach((key) => {\r\n const dateMatchingObj = data.names[key].values.find(\r\n (elem) => elem.date === date\r\n );\r\n if (dateMatchingObj) {\r\n graphEntry[key] = dateMatchingObj.value;\r\n // const dateObj = new Date(date);\r\n graphEntry[\"date\"] = date;\r\n graphEntry[\"formattedDate\"] = `${date.substring(6)} ${\r\n months[parseInt(date.substring(4, 6)) - 1]\r\n } ${date.substring(0, 4)}`;\r\n\r\n graphEntry[\"unixTime\"] = Date.parse(\r\n `${date.substring(6)} ${\r\n months[parseInt(date.substring(4, 6)) - 1]\r\n } ${date.substring(0, 4)}`\r\n );\r\n }\r\n });\r\n return graphEntry;\r\n });\r\n // .sort(({ date: date1 }, { date: date2 }) => date1 - date2);\r\n console.log(\"ddg\", graphData);\r\n setGraphData(graphData);\r\n }\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n }, [data]);\r\n\r\n // Get unique dates\r\n\r\n const colors = {\r\n B01: \"#33A5C9\",\r\n B02: \"#E8C242\",\r\n B03: \"#D81B1D\",\r\n B04: \"#BCDB78\",\r\n B05: \"#9CD1C7\",\r\n B06: \"#CC4794\",\r\n B07: \"#86C3AA\",\r\n B08: \"#949EA7\",\r\n B08A: \"#BCDB78\",\r\n B09: \"#8DF097\",\r\n B11: \"#9CD1C7\",\r\n B12: \"#B493F8\",\r\n EVI: \"#01B075\",\r\n NDVI: \"#EA891D\",\r\n NDMI: \"#33A5C9\",\r\n MI: \"#E8C242\",\r\n };\r\n const formatXAxis = (value) => {\r\n const date = new Date(value);\r\n\r\n return `${date.getDate(6)} ${\r\n months[parseInt(date.getMonth(4, 6))]\r\n } ${date.getFullYear()}`;\r\n };\r\n\r\n const RenderItemCheckbox = ({ band }) => {\r\n return (\r\n \r\n {\r\n dispatch({\r\n type: setToken,\r\n payload: {\r\n token: e.target.value,\r\n },\r\n });\r\n }}\r\n >\r\n\r\n
\r\n\r\n Parameters
\r\n\r\n\r\n \r\n \r\n
\r\n \r\n {\r\n setMgrsTiles(e.target.value);\r\n }}\r\n >\r\n\r\n \r\n Generate Response\r\n \r\n
\r\n\r\n {responseStatus &&\r\n (responseStatus !== 200 || parseInt(blobSize) < 2000) ? (\r\n \r\n {\r\n setBBoxPoints([\r\n parseFloat(e.target.value),\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n parseFloat(e.target.value),\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n parseFloat(e.target.value),\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n >\r\n
\r\n\r\n \r\n {\r\n setImageType(event.target.value);\r\n }}\r\n select\r\n className=\"mr-12\"\r\n >\r\n \r\n \r\n \r\n \r\n {\r\n setImageFormat(event.target.value);\r\n }}\r\n select\r\n >\r\n \r\n \r\n {/* */}\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n
\r\n\r\n Raster Tile Url
\r\n {requestUrl}
\r\n \r\n {\r\n copyContent(\r\n `${DRUrl}/{z}/{x}/{y}.${imageFormat}?token=${token}&render=${imageType}${\r\n mgrsTiles ? `&mgrs_t=${mgrsTiles}` : \"\"\r\n }&start_date=${getFormattedDate(\r\n startDate\r\n )}&end_date=${getFormattedDate(endDate)}`\r\n );\r\n }}\r\n className={classes.copyButton}\r\n >\r\n Copy\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n Please check the coverage API to see if we have data for the region\r\n you are querying. The test token allows you to query to the DR API\r\n for only a sample area of each region. If you wish to query outside\r\n the sample region shown get in touch with us at hello@digifarm.io\r\n
\r\n\r\n
\r\n \r\n {requestUrl && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TimeSeriesChart;\r\n","import {\r\n Button,\r\n FilledInput,\r\n FormControl,\r\n FormControlLabel,\r\n Input,\r\n makeStyles,\r\n RadioGroup,\r\n TextField,\r\n Radio,\r\n Select,\r\n MenuItem,\r\n} from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setMode,\r\n setDrawMode,\r\n setFeature,\r\n setPolygon,\r\n setFieldId,\r\n setAPI,\r\n} from \"../contexts/actions\";\r\n\r\nimport { saveAs } from \"file-saver\";\r\nimport { VectorTile } from \"@mapbox/vector-tile\";\r\nimport Protobuf from \"pbf\";\r\nimport { domain, api_version } from \"../config\";\r\nimport Disclaimer from \"./Disclaimer\";\r\nimport UrlDisplay from \"./UrlDisplay\";\r\nimport ResponseDisplay from \"./ResponseDisplay\";\r\n\r\nimport InputField from \"./InputField\";\r\n// import {\r\n// MuiPickersUtilsProvider,\r\n// KeyboardDatePicker,\r\n// } from \"@material-ui/pickers\";\r\n// import \"date-fns\";\r\nimport DateFnsUtils from \"@date-io/date-fns\";\r\nimport TimeSeriesChart from \"./TimeSeriesChart\";\r\nimport {\r\n KeyboardDatePicker,\r\n MuiPickersUtilsProvider,\r\n} from \"@material-ui/pickers\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n maxWidth: \"100%\",\r\n marginTop: 16,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n responseJson: {\r\n backgroundColor: \"#EEEFF1\",\r\n borderRadius: 4,\r\n padding: \"8px 16px\",\r\n position: \"relative\",\r\n maxWidth: 420,\r\n minHeight: 100,\r\n maxHeight: 520,\r\n overflowY: \"scroll\",\r\n },\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n generateResp: {\r\n marginTop: 16,\r\n textTransform: \"capitalize\",\r\n },\r\n\r\n downloadButton: {\r\n position: \"absolute\",\r\n top: 60,\r\n right: 16,\r\n textTransform: \"capitalize\",\r\n borderRadius: 4,\r\n \"@media (max-width: 600px)\": {\r\n position: \"static\",\r\n marginBottom: 8,\r\n },\r\n },\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n },\r\n shrinkLabel: {\r\n fontSize: 14,\r\n },\r\n leftButton: {\r\n textTransform: \"lowercase\",\r\n lineHeight: \"24px\",\r\n padding: \"6px\",\r\n borderRadius: 0,\r\n flex: 1,\r\n border: \"1px solid #01B075\",\r\n color: \"#01B075\",\r\n fontWeight: 600,\r\n borderTopLeftRadius: 8,\r\n borderBottomLeftRadius: 8,\r\n },\r\n rightButton: {\r\n textTransform: \"lowercase\",\r\n lineHeight: \"24px\",\r\n padding: \"6px\",\r\n borderRadius: 0,\r\n flex: 1,\r\n border: \"1px solid #01B075\",\r\n color: \"#01B075\",\r\n fontWeight: 600,\r\n borderTopRightRadius: 8,\r\n borderBottomRightRadius: 8,\r\n },\r\n activeModeButton: {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n \"&:hover\": {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n },\r\n },\r\n radioFormControl: {\r\n verticalAlign: \"middle\",\r\n marginLeft: 16,\r\n },\r\n parameters: {\r\n marginTop: \"24px !important\",\r\n },\r\n radioGroupRoot: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginTop: 8,\r\n },\r\n typeOfBiling: {\r\n fontSize: 16,\r\n marginRight: 32,\r\n color: \"#1D2023\",\r\n width: 118,\r\n },\r\n select: {\r\n // paddingTop: 12,\r\n // paddingBottom: 12,\r\n backgroundColor: \"#EEEFF1\",\r\n textAlign: \"left\",\r\n // border: \"1px solid #EEEFF1\",\r\n },\r\n selectIcon: {\r\n color: theme.palette.primary.main,\r\n },\r\n fieldResponseContainer: {\r\n position: \"absolute\",\r\n top: 80,\r\n width: \"100%\",\r\n backgroundColor: \"#fff\",\r\n paddingBottom: 80,\r\n zIndex: 1,\r\n boxShadow: \"0px -7px 32px 0px rgba(170,170,170,1)\",\r\n borderRadius: 24,\r\n },\r\n borderRadius: {\r\n borderRadius: 24,\r\n },\r\n clearFieldButton: {\r\n borderRadius: 4,\r\n backgroundColor: \"#E5F7F1\",\r\n textTransform: \"capitalize\",\r\n fontSize: 12,\r\n fontWeight: 600,\r\n position: \"absolute\",\r\n top: 20,\r\n right: 24,\r\n },\r\n fieldResponseRef: {\r\n position: \"relative\",\r\n top: -36,\r\n },\r\n}));\r\n\r\nconst baseUrl = `${domain}/${api_version}`;\r\n// \"https://2aqfsaq392.execute-api.eu-central-1.amazonaws.com/production\";\r\n// \"https://api.digifarm.io/v1\";\r\n\r\nconst params = new URLSearchParams(window.location.search);\r\n\r\nconst isAegro = params.get(\"brazilLowResag\");\r\nconst customLowRes = isAegro\r\n ? \"demo_br_aegro_560240ts\"\r\n : params.get(\"customLowRes\");\r\n\r\nconst TimeSeriesFieldIdDrawer = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { mode, polygon, tile, fieldId, dataLayer },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const defaultToken = \"a0731a8c-5259-4c68-af3a-7ad4f6d53faa\";\r\n\r\n const [bBoxPoints, setBBoxPoints] = useState([]);\r\n const [outputFormat, setOutputFormat] = useState(\"geojson\");\r\n const [tileCoordinates, setTileCoordinates] = useState([]);\r\n const [startDate, setStartDate] = React.useState(new Date(\"2017-01-01\"));\r\n const [endDate, setEndDate] = React.useState(new Date(Date.now()));\r\n\r\n const [token, setToken] = useState(defaultToken);\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [requestUrl, setRequestUrl] = useState();\r\n const [fieldIdInput, setFieldIdInput] = useState();\r\n const [fieldResponseJson, setFieldResponseJson] = useState();\r\n const [fieldresponseStatus, setFieldResponseStatus] = useState();\r\n const [fieldRequestUrl, setFieldRequestUrl] = useState();\r\n const [mvtResponse, setMvtResponse] = useState();\r\n const step2DivRef = useRef(null);\r\n const step2ResponseRef = useRef(null);\r\n const [mapDrawMode, setMapDrawMode] = useState(dataLayer.drawMode);\r\n\r\n const [source, setSource] = useState(\"s2l2a\");\r\n const [type, setType] = useState(\"normal\");\r\n\r\n useEffect(() => {\r\n if (polygon && polygon[0] && polygon[0].length) {\r\n let maxCallback = (max, cur) =>\r\n Math.max(parseFloat(max), parseFloat(cur));\r\n let minCallback = (max, cur) =>\r\n Math.min(parseFloat(max), parseFloat(cur));\r\n\r\n const minLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(minCallback, Infinity);\r\n const maxLng = polygon[0]\r\n .map((point) => point[0])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n const minLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(minCallback, Infinity);\r\n const maxLat = polygon[0]\r\n .map((point) => point[1])\r\n .reduce(maxCallback, -Infinity);\r\n\r\n setBBoxPoints([minLng, minLat, maxLng, maxLat]);\r\n }\r\n }, [polygon]);\r\n\r\n useEffect(() => {\r\n if (tile && tile.length) {\r\n setTileCoordinates(tile);\r\n }\r\n }, [tile]);\r\n\r\n const comparePolygonArrays = (array1, array2) => {\r\n return array1.every(\r\n (value, index) =>\r\n value[0] == array2[index][0] && value[1] == array2[index][1]\r\n );\r\n };\r\n\r\n const handleStartDateChange = (date) => {\r\n setStartDate(date);\r\n };\r\n\r\n useEffect(() => {\r\n setMapDrawMode(dataLayer.drawMode);\r\n }, [dataLayer.drawMode]);\r\n\r\n useEffect(() => {\r\n if (mvtResponse) {\r\n try {\r\n var tile = new VectorTile(new Protobuf(mvtResponse));\r\n\r\n const features = [];\r\n\r\n for (let i = 0; i < tile.layers[\"digifarm\"].length; i++) {\r\n features.push(\r\n tile.layers[\"digifarm\"]\r\n .feature(i)\r\n .toGeoJSON(\r\n tileCoordinates[0],\r\n tileCoordinates[1],\r\n tileCoordinates[2]\r\n )\r\n );\r\n }\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: {\r\n type: \"FeatureCollection\",\r\n features,\r\n },\r\n },\r\n });\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n }\r\n }, [mvtResponse]);\r\n\r\n const handleClick = () => {\r\n if (mapDrawMode === \"draw_rectangle\") {\r\n const fetchUrl = !customLowRes\r\n ? baseUrl +\r\n \"/delineated-fields/low-res\" +\r\n \"?token=\" +\r\n token +\r\n \"&bbox=\" +\r\n bBoxPoints.join(\",\") +\r\n \"&data_version=latest\"\r\n : `https://polygons.digifarm.io/development/layers/${customLowRes}/polygons` +\r\n \"?token=\" +\r\n token +\r\n \"&bbox=\" +\r\n bBoxPoints.join(\",\") +\r\n \"&data_version=latest\";\r\n\r\n const rectangle = [\r\n [\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[3]],\r\n [bBoxPoints[2], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[1]],\r\n [bBoxPoints[0], bBoxPoints[3]],\r\n ],\r\n ];\r\n\r\n if (polygon && polygon.length) {\r\n if (!comparePolygonArrays(rectangle[0], polygon[0])) {\r\n dispatch({\r\n type: setPolygon,\r\n payload: {\r\n polygon: rectangle,\r\n },\r\n });\r\n }\r\n }\r\n\r\n setRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setFieldIdInput(\"\");\r\n setFieldResponseStatus(null);\r\n setResponseJson(data);\r\n console.log(data, \"data\");\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: data,\r\n },\r\n });\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n } else {\r\n if (tileCoordinates.length) {\r\n const fetchUrl =\r\n baseUrl +\r\n \"/delineated-fields/low-res/merc\" +\r\n \"?token=\" +\r\n token +\r\n \"&x=\" +\r\n tileCoordinates[0] +\r\n \"&y=\" +\r\n tileCoordinates[1] +\r\n \"&z=\" +\r\n tileCoordinates[2] +\r\n \"&ext=\" +\r\n outputFormat +\r\n \"&data_version=latest\";\r\n\r\n setRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n if (outputFormat === \"mvt\") {\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.arrayBuffer();\r\n })\r\n .then((buffer) => {\r\n setMvtResponse(buffer);\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n\r\n return;\r\n }\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n console.log(response);\r\n setResponseStatus(response.status);\r\n\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setFieldIdInput(\"\");\r\n setFieldResponseStatus(null);\r\n setResponseJson(data);\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: data,\r\n },\r\n });\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n }\r\n }\r\n };\r\n\r\n const fetchByFieldId = () => {\r\n const fetchUrl =\r\n `https://6k36erufmg.execute-api.eu-central-1.amazonaws.com/frk-dev/indices-timeseries/${fieldId}` +\r\n \"?token=\" +\r\n token +\r\n \"&names=\" +\r\n \"EVI,EVI2,NDVI,NDMI,MI,B01,B02,B03,B04,B05,B06,B07,B08,B08A,B09,B11,B12\" +\r\n \"&dates=\" +\r\n startDate.getTime() +\r\n \",\" +\r\n endDate.getTime();\r\n setFieldRequestUrl(fetchUrl);\r\n console.log(fetchUrl);\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setFieldResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setFieldResponseJson(data);\r\n // dispatch({\r\n // type: setFeature,\r\n // payload: {\r\n // feature: data,\r\n // },\r\n // });\r\n setTimeout(() => {\r\n step2ResponseRef.current &&\r\n step2ResponseRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n });\r\n };\r\n\r\n const downloadPbf = () => {\r\n const blob = new Blob([mvtResponse]);\r\n saveAs(\r\n blob,\r\n `${tileCoordinates[0]}_${tileCoordinates[1]}_${tileCoordinates[2]}.pbf`\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n setFieldIdInput(fieldId);\r\n }, [fieldId]);\r\n\r\n const clearFieldData = () => {\r\n setFieldResponseStatus(null);\r\n setFieldResponseJson(null);\r\n // setFieldIdInput(\"\");\r\n // dispatch({\r\n // type: setFieldId,\r\n // payload: {\r\n // fieldId: null,\r\n // },\r\n // });\r\n setTimeout(() => {\r\n step2DivRef.current &&\r\n step2DivRef.current.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"nearest\",\r\n });\r\n }, 200);\r\n };\r\n\r\n return (\r\n EVI, NDVI, NDMI,MI
\r\n S2 BANDS
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {render\r\n .filter((band) => band.name === \"EVI\" || band.name === \"NDVI\")\r\n .map((band) => (\r\n
\r\n \r\n {render\r\n .filter((band) => band.name === \"NDMI\" || band.name === \"MI\")\r\n .map((band) => (\r\n
\r\n \r\n {bands.map((band) => (\r\n
\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default TimeSeriesFieldIdDrawer;\r\n","import {\r\n Button,\r\n FilledInput,\r\n makeStyles,\r\n Tabs,\r\n TextField,\r\n Tab,\r\n List,\r\n ListItem,\r\n ListItemText,\r\n ListItemIcon,\r\n FormControlLabel,\r\n Radio,\r\n RadioGroup,\r\n} from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport {\r\n setFeature,\r\n setMode,\r\n setPoint,\r\n setLocation,\r\n dispatch,\r\n} from \"../contexts/actions\";\r\nimport { domain, api_version } from \"../config\";\r\n\r\nimport copyToClipboard from \"../util/copyToClipboard\";\r\nimport { saveAs } from \"file-saver\";\r\nimport turf from \"turf\";\r\n\r\nimport Disclaimer from \"./Disclaimer\";\r\nimport InputField from \"./InputField\";\r\nimport UrlDisplay from \"./UrlDisplay\";\r\nimport ResponseDisplay from \"./ResponseDisplay\";\r\n\r\nconst useStyles = makeStyles({\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n\r\n mt8: {\r\n marginTop: 8,\r\n },\r\n\r\n getInTouch: {\r\n color: \"#1D2023\",\r\n marginBottom: 4,\r\n lineHeight: \"24px\",\r\n fontSize: 16,\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n },\r\n rightContainer: {\r\n flex: 1,\r\n wordWrap: \"anywhere\",\r\n color: \"#1D2023\",\r\n \"& h6\": {\r\n marginBottom: 16,\r\n },\r\n },\r\n responseContainer: {\r\n display: \"flex\",\r\n marginBottom: 16,\r\n fontWeight: 700,\r\n },\r\n responseCode: {\r\n marginRight: 24,\r\n width: 58,\r\n lineHeight: \"20px\",\r\n },\r\n\r\n generateResp: {\r\n marginTop: 16,\r\n minHeight: 48,\r\n borderRadius: 4,\r\n textTransform: \"capitalize\",\r\n fontWeight: 600,\r\n fontSize: 16,\r\n },\r\n\r\n textFields: {\r\n display: \"flex\",\r\n marginTop: 12,\r\n \"@media (max-width: 600px)\": {\r\n flexWrap: \"wrap\",\r\n \"& >div\": {\r\n marginRight: \"0px !important\",\r\n marginBottom: 8,\r\n },\r\n },\r\n },\r\n tabsRoot: {\r\n backgroundColor: \"#fff\",\r\n borderRadius: 8,\r\n minHeight: 36,\r\n // margin: \"0px 16px\",\r\n color: \"#1D2023\",\r\n border: \"1px solid #01B075\",\r\n marginTop: 12,\r\n },\r\n tab: {\r\n paddingBottom: 6,\r\n paddingTop: 6,\r\n minHeight: 36,\r\n minWidth: 120,\r\n },\r\n tabSelected: {\r\n backgroundColor: \"#01B075\",\r\n color: \"#fff\",\r\n },\r\n tabWrapper: {\r\n // paddingTop: 6,\r\n // paddingBottom: 6,\r\n },\r\n tabIndicator: {\r\n backgroundColor: \"#fff\",\r\n height: 0,\r\n },\r\n listItemIconRoot: {\r\n minWidth: 32,\r\n marginTop: 6,\r\n },\r\n listItemText: {\r\n fontWeight: 600,\r\n color: \"#1D2023\",\r\n },\r\n inDevMarker: {\r\n fill: \"#EA891D\",\r\n },\r\n showAllButton: {\r\n fontWeight: \"600\",\r\n marginBottom: \"1em\",\r\n },\r\n listItemRoot: {\r\n alignItems: \"start\",\r\n cursor: \"pointer\",\r\n },\r\n availableTab: {\r\n minWidth: 190,\r\n },\r\n listRoot: {\r\n minHeight: 180,\r\n },\r\n radioGroupRoot: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginTop: 8,\r\n },\r\n typeOfBiling: {\r\n fontSize: 16,\r\n marginRight: 32,\r\n color: \"#1D2023\",\r\n width: 118,\r\n },\r\n});\r\n\r\nfunction TabPanel(props) {\r\n const { children, value, index, ...other } = props;\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n >\r\n
\r\n\r\n {mapDrawMode === \"draw_rectangle\" ? (\r\n <>\r\n Step 1. Area selection
\r\nReturns low resolution fields for the given bbox/tile coordinates
\r\n\r\n {\r\n setFieldResponseJson(null);\r\n setFieldRequestUrl(\"\");\r\n setFieldResponseStatus(null);\r\n setOutputFormat(\"geojson\");\r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"lowResBBOX\",\r\n drawMode: \"draw_rectangle\",\r\n },\r\n });\r\n }}\r\n >\r\n via bounding box\r\n \r\n\r\n {!customLowRes && (\r\n {\r\n setResponseJson(null);\r\n setRequestUrl(\"\");\r\n setResponseStatus(null);\r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"lowResTile\",\r\n drawMode: \"\",\r\n },\r\n });\r\n }}\r\n >\r\n via vector tile\r\n \r\n )}\r\n
\r\n Parameters
\r\n\r\n\r\n \r\n
\r\n Data Version :
\r\n \r\n \r\n Show field boundaries\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n {\r\n setBBoxPoints([\r\n parseFloat(e.target.value),\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n />\r\n\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n parseFloat(e.target.value),\r\n bBoxPoints[2],\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n parseFloat(e.target.value),\r\n bBoxPoints[3],\r\n ]);\r\n }}\r\n >\r\n {\r\n setBBoxPoints([\r\n bBoxPoints[0],\r\n bBoxPoints[1],\r\n bBoxPoints[2],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n \r\n Show field boundaries\r\n \r\n
\r\n \r\n )}\r\n {responseStatus && (\r\n <>\r\n \r\n {\r\n setTileCoordinates([\r\n parseFloat(e.target.value),\r\n tileCoordinates[1],\r\n tileCoordinates[2],\r\n ]);\r\n }}\r\n >\r\n {\r\n setTileCoordinates([\r\n tileCoordinates[0],\r\n parseFloat(e.target.value),\r\n tileCoordinates[2],\r\n ]);\r\n }}\r\n >\r\n {\r\n setTileCoordinates([\r\n tileCoordinates[0],\r\n tileCoordinates[1],\r\n parseFloat(e.target.value),\r\n ]);\r\n }}\r\n >\r\n
\r\n \r\n Type of Output:\r\n \r\n {\r\n setOutputFormat(e.target.value);\r\n }}\r\n >\r\n
\r\n \r\n Use \"digifarm\" as the source layer when using as a vector layer\r\n in mapbox\r\n
\r\n \r\n
\r\n {!fieldresponseStatus && (\r\n Responses
\r\n\r\n
\r\n {responseStatus}
\r\n \r\n {outputFormat === \"mvt\" && responseStatus !== 204 ? (\r\n
\r\n \r\n <>\r\n {\r\n downloadPbf(mvtResponse);\r\n }}\r\n className={classes.downloadButton}\r\n >\r\n Save as file\r\n \r\n \r\n
\r\n ) : (\r\n \r\n Please check the coverage API to see if we have data for the\r\n region you are querying. The test token allows you to query\r\n to the DR API for only a sample area of each region. If you\r\n wish to query outside the sample region shown get in touch\r\n with us at hello@digifarm.io\r\n
\r\n )}\r\n \r\n {\r\n dispatch({\r\n type: setFieldId,\r\n payload: {\r\n fieldId: e.target.value,\r\n },\r\n });\r\n }}\r\n >\r\n\r\n {/* \r\n Fetch Time series data\r\n \r\n
\r\n )}\r\n\r\n {fieldresponseStatus && (\r\n Step 2. Field boundary selection
\r\nClick on the field to select the field id
\r\n\r\n {\r\n setSource(e.target.value);\r\n }}\r\n classes={{\r\n root: classes.select,\r\n icon: classes.selectIcon,\r\n outlined: classes.outlined,\r\n }}\r\n fullWidth\r\n variant=\"outlined\"\r\n className=\"mr-12\"\r\n >\r\n \r\n \r\n \r\n {\r\n setType(e.target.value);\r\n }}\r\n classes={{\r\n root: classes.select,\r\n icon: classes.selectIcon,\r\n outlined: classes.outlined,\r\n }}\r\n fullWidth\r\n variant=\"outlined\"\r\n >\r\n \r\n \r\n \r\n \r\n
*/}\r\n \r\n \r\n {\r\n setStartDate(date);\r\n }}\r\n // views={[\"day\", \"month\", \"year\"]}\r\n KeyboardButtonProps={{\r\n \"aria-label\": \"change date\",\r\n }}\r\n className=\"mr-12\"\r\n fullWidth\r\n />\r\n {/* {\r\n setStartDate(date);\r\n }}\r\n renderInput={(params) => {\r\n setEndDate(date);\r\n }}\r\n KeyboardButtonProps={{\r\n \"aria-label\": \"change date\",\r\n }}\r\n className=\"mr-12\"\r\n fullWidth\r\n />\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n Time Series Data
\r\n\r\n \r\n Close Response\r\n \r\n
\r\n\r\n \r\n
\r\n {responseStatus}
\r\n \r\n
\r\n {children}
}\r\n \r\n );\r\n}\r\n\r\nfunction a11yProps(index) {\r\n return {\r\n id: `simple-tab-${index}`,\r\n \"aria-controls\": `simple-tabpanel-${index}`,\r\n };\r\n}\r\n// dispatch({\r\n// type: setPoint,\r\n// payload: {\r\n// point: e.features[0].geometry.coordinates,\r\n// },\r\n// });\r\n\r\nconst LocationListItem = ({ feature }) => {\r\n const classes = useStyles();\r\n const location =\r\n feature.geometry.type === \"Point\"\r\n ? feature.geometry.coordinates\r\n : turf.center(feature.geometry).geometry.coordinates;\r\n\r\n const { dispatch } = useContext(store);\r\n\r\n const setMapLocation = (location) => {\r\n dispatch({\r\n type: setLocation,\r\n payload: {\r\n location: { center: location, zoom: 6 },\r\n },\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst LocationList = ({ list }) => {\r\n const classes = useStyles();\r\n const [showAll, setShowAll] = useState(false);\r\n\r\n return (\r\n \r\n {\r\n setShowAll(true);\r\n }}\r\n className={classes.showAllButton}\r\n variant=\"outlined\"\r\n color=\"primary\"\r\n fullWidth\r\n >\r\n View all {list.length}\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst TimeSeriesCoverage = (props) => {\r\n const classes = useStyles();\r\n\r\n const {\r\n state: { mode: mapDrawMode },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const baseUrl = `${domain}/${api_version}`;\r\n // \"https://2aqfsaq392.execute-api.eu-central-1.amazonaws.com/production\";\r\n // \"https://api.digifarm.io/v1\";\r\n\r\n const [responseJson, setResponseJson] = useState();\r\n const [responseStatus, setResponseStatus] = useState();\r\n const [requestUrl, setRequestUrl] = useState();\r\n const defaultToken = \"a0731a8c-5259-4c68-af3a-7ad4f6d53faa\";\r\n const [token, setToken] = useState(defaultToken);\r\n const [tabValue, setTabValue] = useState(0);\r\n\r\n const handleClick = () => {\r\n const fetchUrl =\r\n \"https://api.digifarm.io/development/indices-timeseries/coverage\" +\r\n \"?token=\" +\r\n token +\r\n \"&data_version=latest\";\r\n setRequestUrl(fetchUrl);\r\n\r\n fetch(fetchUrl)\r\n .then((response) => {\r\n setResponseStatus(response.status);\r\n return response.json();\r\n })\r\n .then((data) => {\r\n setResponseJson(data);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (responseJson) {\r\n dispatch({\r\n type: setFeature,\r\n payload: {\r\n feature: responseJson,\r\n },\r\n });\r\n }\r\n }, [responseJson]);\r\n\r\n const copyContent = () => {\r\n copyToClipboard(JSON.stringify(responseJson));\r\n };\r\n const downloadGeoJSON = () => {\r\n const blob = new Blob([JSON.stringify(responseJson, null, 2)], {\r\n type: \"application/json\",\r\n });\r\n saveAs(blob, \"coverage-area.json\");\r\n };\r\n\r\n const handleChange = (event, newValue) => {\r\n setTabValue(newValue);\r\n };\r\n\r\n const handleChangeIndex = (index) => {\r\n setTabValue(index);\r\n };\r\n\r\n return (\r\n - \r\n {(list.length <= 4 || showAll) &&\r\n list.map((feature) => {\r\n return
\r\n
\r\n );\r\n};\r\n\r\nexport default TimeSeriesCoverage;\r\n","import { Drawer, makeStyles, Select, MenuItem } from \"@material-ui/core\";\r\nimport React, { useState, useEffect, useRef, useContext } from \"react\";\r\nimport { store } from \"../contexts/store\";\r\nimport { setAPI } from \"../contexts/actions\";\r\nimport PointDrawer from \"./PointDrawer\";\r\nimport BBoxDrawer from \"./BBoxDrawer\";\r\nimport FieldIdDrawer from \"./FieldIdDrawer\";\r\nimport CoverageDrawer from \"./CoverageDrawer\";\r\nimport DRCoverageDrawer from \"./DRCoverageDrawer\";\r\nimport DRTileDrawer from \"./DRTileDrawer\";\r\nimport DRBboxDrawer from \"./DRBboxDrawer\";\r\nimport TimeSeriesFieldIdDrawer from \"./TimeSeriesFieldIdDrawer\";\r\nimport TimeSeriesCoverage from \"./TimeSeriesCoverage\";\r\nconst useStyles = makeStyles({\r\n drawer: {\r\n width: 560,\r\n \"@media (max-width: 600px)\": {\r\n width: \"unset\",\r\n maxHeight: 300,\r\n overflowY: \"scroll\",\r\n },\r\n },\r\n root: {\r\n width: 560,\r\n \"@media (max-width: 600px)\": {\r\n width: \"unset\",\r\n maxHeight: 300,\r\n },\r\n backgroundColor: \"#F8F9FA\",\r\n fontSize: 14,\r\n \"& h3\": {\r\n fontSize: 20,\r\n lineHeight: 1.2,\r\n margin: 0,\r\n },\r\n },\r\n info: {\r\n padding: \"24px 20px\",\r\n boxSizing: \"border-box\",\r\n color: \"#949EA7\",\r\n backgroundColor: \"#fff\",\r\n marginBottom: 8,\r\n \"& h3\": {\r\n lineHeight: \"24px\",\r\n marginBottom: 8,\r\n color: \"#1D2023\",\r\n },\r\n \"& h4\": {\r\n color: \"#1D2023\",\r\n fontSize: 18,\r\n lineHeight: \"24px\",\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n \"& h6\": {\r\n color: \"#1D2023\",\r\n fontSize: 14,\r\n lineHeight: \"20px\",\r\n fontWeight: 700,\r\n margin: 0,\r\n },\r\n },\r\n\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flex1: {\r\n flex: 1,\r\n },\r\n inputRoot: {\r\n borderRadius: 4,\r\n },\r\n dropdownContainer: {\r\n backgroundColor: \"#fff\",\r\n },\r\n select: {\r\n width: \"100%\",\r\n fontSize: 20,\r\n lineHeight: \"24px\",\r\n fontWeight: 700,\r\n paddingTop: \"1em\",\r\n paddingBottom: \"1em\",\r\n paddingLeft: \"1em\",\r\n },\r\n selectInputRoot: {\r\n \"&::before\": {\r\n borderBottomColor: \"#EEEFF1\",\r\n },\r\n },\r\n});\r\n\r\nconst RightDrawer = (props) => {\r\n const classes = useStyles();\r\n const { open, onClose } = props;\r\n\r\n const {\r\n state: { mode, drawMode: mapDrawMode, dataLayer },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n const [windowSize, setWindowSize] = useState(window.innerWidth);\r\n\r\n useEffect(() => {\r\n const handleResize = () => {\r\n setWindowSize(window.innerWidth);\r\n };\r\n\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n return () => window.removeEventListener(\"resize\", handleResize);\r\n }, []);\r\n\r\n return (\r\n \r\n {\r\n setToken(e.target.value);\r\n }}\r\n value={token}\r\n >\r\n \r\n Generate Response\r\n \r\n\r\n
\r\n\r\n {responseStatus && (\r\n /delineated-areas
\r\n\r\n Returns polygons for the areas where delineated fields are available\r\n
\r\nParameters
\r\n\r\n \r\n
\r\n\r\n Data Version :
\r\n \r\n
\r\n )}\r\n Responses
\r\n\r\n\r\n
\r\n {responseStatus}
\r\n \r\n
\r\n \r\n {responseStatus === 200 && \"Successfully fetched\"}{\" \"}\r\n {responseStatus === 404 && \"Field not found at the location\"}\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default RightDrawer;\r\n","import React, { useState, useEffect, useContext, useRef } from \"react\";\r\nimport mapboxgl from \"mapbox-gl\";\r\nimport Map from \"../components/Map\";\r\nimport {\r\n Select,\r\n MenuItem,\r\n makeStyles,\r\n InputLabel,\r\n FormControl,\r\n Button,\r\n Link,\r\n} from \"@material-ui/core\";\r\nimport {\r\n BBoxIcon,\r\n GlobeIcon,\r\n InfoIcon,\r\n PointerIcon,\r\n DocumentationIcon,\r\n CoverageIcon,\r\n} from \"../icons\";\r\nimport LeftDrawer from \"../components/LeftDrawer\";\r\nimport RightDrawer from \"../components/RightDrawer\";\r\nimport {\r\n setLocation,\r\n setDataLayer,\r\n setMode,\r\n setAPI,\r\n} from \"../contexts/actions\";\r\nimport { store } from \"../contexts/store\";\r\nimport { locationObj } from \"../util/mapUtils\";\r\nimport { showDRAPI, showTimeSeries } from \"../config\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n dropdownContainer: {\r\n position: \"absolute\",\r\n top: 16,\r\n left: 16,\r\n zIndex: 1,\r\n display: \"flex\",\r\n \"& >div\": {\r\n marginRight: 8,\r\n marginBottom: 4,\r\n },\r\n \"@media (max-width: 600px)\": {\r\n flexDirection: \"column\",\r\n },\r\n },\r\n select: {\r\n paddingTop: 12,\r\n paddingBottom: 12,\r\n backgroundColor: \"#fff\",\r\n minWidth: 120,\r\n textAlign: \"left\",\r\n //border: \"1px solid #EEEFF1\",\r\n // \"&:hover\": {\r\n // border: \"1px solid #949EA7\",\r\n // },\r\n fontWeight: 600,\r\n \"&:focus\": {\r\n backgroundColor: \"#fff\",\r\n borderRadius: 8,\r\n border: \"none\",\r\n },\r\n },\r\n formControl: {\r\n \"&:hover\": {\r\n border: \"1px solid #949EA7\",\r\n },\r\n // Mui focused seems to be creating a green border. fix that\r\n },\r\n outlined: {},\r\n selectIcon: {\r\n color: theme.palette.primary.main,\r\n },\r\n toggleButtonGroup: {\r\n backgroundColor: \"#fff\",\r\n border: \"none\",\r\n display: \"inline-block\",\r\n borderRadius: 8,\r\n padding: 4,\r\n marginLeft: 16,\r\n },\r\n toggleButton: {\r\n fontWeight: 600,\r\n textTransform: \"capitalize\",\r\n backgroundColor: \"#fff\",\r\n boxShadow: \"none\",\r\n borderRadius: 4,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.primary.light,\r\n boxShadow: \"none\",\r\n },\r\n },\r\n toggleButtonActive: {\r\n backgroundColor: theme.palette.primary.main,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.primary.dark,\r\n },\r\n },\r\n aboutApiQueries: {\r\n position: \"absolute\",\r\n bottom: 16,\r\n left: 16,\r\n zIndex: 4,\r\n lineHeight: \"16px\",\r\n },\r\n aboutApiQueriesButton: {\r\n backgroundColor: \"#fff\",\r\n \"&:hover\": {\r\n backgroundColor: \"#fff\",\r\n },\r\n textTransform: \"capitalize\",\r\n color: \"#01B075\",\r\n fontWeight: 600,\r\n },\r\n infoIcon: {\r\n fill: \"none\",\r\n stroke: \"#01B075\",\r\n marginRight: 4,\r\n },\r\n iconRoot: {\r\n fill: \"none\",\r\n },\r\n apiSelection: {\r\n position: \"absolute\",\r\n left: 16,\r\n top: \"40vh\",\r\n backgroundColor: \"#fff\",\r\n borderRadius: 8,\r\n padding: \"0 6px\",\r\n textAlign: \"center\",\r\n \"@media (max-width: 600px)\": {\r\n top: \"120px\",\r\n },\r\n },\r\n apiButton: {\r\n fontSize: 10,\r\n lineHeight: 1.2,\r\n fontWeight: 500,\r\n padding: \"9px 0\",\r\n \"& svg path\": {\r\n stroke: \"#1D2023\",\r\n },\r\n cursor: \"pointer\",\r\n },\r\n apiButtonActive: {\r\n color: \"#01B075\",\r\n \"& svg path\": {\r\n stroke: \"#01B075\",\r\n },\r\n fontSize: 10,\r\n },\r\n}));\r\nconst params = new URLSearchParams(window.location.search);\r\n\r\nconst isAegro = params.get(\"brazilLowResag\");\r\nconst MapPage = () => {\r\n const classes = useStyles();\r\n const [mapLayer, setMapLayer] = useState(\"ml_fields1\");\r\n const [region, setRegion] = useState(\"norway\");\r\n\r\n const {\r\n state: { mode, drawMode: mapDrawMode, dataLayer, location },\r\n dispatch,\r\n } = useContext(store);\r\n\r\n //Extract zoom from url parameters when the window loads\r\n const initialZoom = window.location.hash\r\n ? window.location.hash.substr(1).split(\"/\")[0]\r\n : 13;\r\n const [zoom, setZoom] = useState(initialZoom);\r\n const [toggleLeftDrawer, setToggleLeftDrawer] = useState(false);\r\n const [isRightDrawerOpen, setIsRightDrawerOpen] = useState(true);\r\n\r\n const toggleRightDrawer = () => {\r\n setIsRightDrawerOpen(!isRightDrawerOpen);\r\n };\r\n\r\n const locationList = dataLayer && [\r\n ...Object.keys(locationObj[dataLayer.type]),\r\n ];\r\n isAegro &&\r\n locationList.push({\r\n center: [-48.16594, -18.24563],\r\n zoom: 14,\r\n name: \"Brazil\",\r\n country_code: \"br\",\r\n });\r\n\r\n console.log(showTimeSeries, \"showTimeSeries\");\r\n return (\r\n \r\n {\r\n console.log(event.target.value, \"setting select\");\r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: event.target.value,\r\n drawMode:\r\n event.target.value === \"lowResBBOX\" ||\r\n event.target.value === \"bbox\"\r\n ? \"draw_rectangle\"\r\n : event.target.value === \"point\"\r\n ? \"draw_point\"\r\n : \"\",\r\n },\r\n });\r\n }}\r\n MenuProps={{\r\n anchorOrigin: {\r\n vertical: \"bottom\",\r\n horizontal: \"left\",\r\n },\r\n transformOrigin: {\r\n vertical: \"top\",\r\n horizontal: \"left\",\r\n },\r\n getContentAnchorEl: null,\r\n }}\r\n fullWidth={true}\r\n >\r\n {/* What to do when the api is lowResTile */}\r\n {dataLayer.type === \"delineatedFields\" && (\r\n \r\n )}\r\n {dataLayer.type === \"delineatedFields\" && (\r\n \r\n )}\r\n {dataLayer.type === \"delineatedFields\" && (\r\n \r\n )}\r\n {dataLayer.type === \"delineatedFields\" && (\r\n \r\n )}\r\n {/* {dataLayer.type === \"delineatedFields\" && ()} */}\r\n\r\n {dataLayer.type === \"deepResImages\" && (\r\n \r\n )}\r\n {dataLayer.type === \"deepResImages\" && (\r\n \r\n )}\r\n {dataLayer.type === \"timeSeries\" && (\r\n \r\n )}\r\n {dataLayer.type === \"timeSeries\" && (\r\n \r\n )}\r\n \r\n \r\n {/* */}\r\n
\r\n {dataLayer.type === \"delineatedFields\" ? (\r\n <>\r\n {dataLayer.api === \"point\" && \r\n setToggleLeftDrawer(false)}\r\n />\r\n\r\n \r\n\r\n {/* Based on the dataLayer value, can display appropriate API selection button set here. And also appropriate mode set, right drawer should be opened\r\n */}\r\n {dataLayer.type === \"delineatedFields\" ? (\r\n \r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"point\",\r\n drawMode: \"draw_single_point\",\r\n },\r\n })\r\n }\r\n >\r\n
\r\n \r\n \r\n \r\n Location\r\n \r\n {\r\n setRegion(event.target.value);\r\n dispatch({\r\n type: setLocation,\r\n payload: {\r\n location: locationObj[dataLayer.type][event.target.value],\r\n },\r\n });\r\n }}\r\n MenuProps={{\r\n anchorOrigin: {\r\n vertical: \"bottom\",\r\n horizontal: \"left\",\r\n },\r\n transformOrigin: {\r\n vertical: \"top\",\r\n horizontal: \"left\",\r\n },\r\n getContentAnchorEl: null,\r\n }}\r\n >\r\n {dataLayer &&\r\n Object.keys(locationObj[dataLayer.type]).map((key) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n Data Layer\r\n \r\n {\r\n const listOfLocationsForTheDatalayer = Object.keys(\r\n locationObj[event.target.value]\r\n );\r\n const newLocation = listOfLocationsForTheDatalayer.find(\r\n (locationCurrent) =>\r\n locationObj[event.target.value][locationCurrent].name ===\r\n location.name\r\n )\r\n ? listOfLocationsForTheDatalayer.find(\r\n (locationCurrent) =>\r\n locationObj[event.target.value][locationCurrent].name ===\r\n location.name\r\n )\r\n : listOfLocationsForTheDatalayer[0];\r\n\r\n setRegion(newLocation);\r\n\r\n const newLocationObj = {\r\n location: locationObj[event.target.value][newLocation],\r\n };\r\n // event.target.value !== \"deepResImages\" && !showDRAPI\r\n // ? { location: locationObj[event.target.value][newLocation] }\r\n // : {};\r\n console.log(\"newLocationObj\", newLocationObj);\r\n const datalayerPayload = {\r\n type: event.target.value,\r\n api:\r\n event.target.value === \"delineatedFields\"\r\n ? \"point\"\r\n : event.target.value === \"deepResImages\"\r\n ? showDRAPI\r\n ? \"xyz\"\r\n : \"coverage\"\r\n : \"lowResBBOX\",\r\n drawMode:\r\n event.target.value == \"delineatedFields\"\r\n ? \"draw_single_point\"\r\n : event.target.value === \"deepResImages\"\r\n ? undefined\r\n : \"draw_rectangle\",\r\n };\r\n\r\n const payload =\r\n event.target.value !== \"timeSeries\"\r\n ? {\r\n dataLayer: datalayerPayload,\r\n ...newLocationObj,\r\n }\r\n : { dataLayer: datalayerPayload };\r\n dispatch({\r\n type: setDataLayer,\r\n payload: payload,\r\n });\r\n }}\r\n MenuProps={{\r\n anchorOrigin: {\r\n vertical: \"bottom\",\r\n horizontal: \"left\",\r\n },\r\n transformOrigin: {\r\n vertical: \"top\",\r\n horizontal: \"left\",\r\n },\r\n getContentAnchorEl: null,\r\n }}\r\n >\r\n \r\n \r\n {showTimeSeries ? (\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n \r\n
\r\n\r\n \r\n \r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"lowResBBOX\",\r\n drawMode: \"draw_rectangle\",\r\n },\r\n })\r\n }\r\n >\r\n
\r\n Field ID
\r\n Point
\r\n Bbox
\r\n \r\n Coverage
\r\n \r\n \r\n ) : dataLayer.type === \"deepResImages\" ? (\r\n \r\n {showDRAPI && (\r\n <>\r\n \r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"xyz\",\r\n // drawMode: \"draw_rectangle\",\r\n },\r\n })\r\n }\r\n >\r\n
\r\n Tile URL
\r\n BBOX
\r\n \r\n \r\n )}\r\n\r\n Coverage
\r\n \r\n \r\n ) : (\r\n \r\n \r\n dispatch({\r\n type: setAPI,\r\n payload: {\r\n api: \"lowResBBOX\",\r\n drawMode: \"draw_rectangle\",\r\n },\r\n })\r\n }\r\n >\r\n
\r\n Field ID
\r\n Coverage
\r\n \r\n \r\n )}\r\n\r\n \r\n setToggleLeftDrawer(true)}\r\n variant=\"contained\"\r\n >\r\n
\r\n
\r\n\r\n
\r\n\r\n \r\n
\r\n
\n
\n