\r\n setUploadState(UPLOAD_IDLE)}\r\n >\r\n
\r\n \r\n );\r\n});\r\n\r\nFileUpload.propTypes = propTypes;\r\nexport default FileUpload;\r\n\r\nconst query = graphql`\r\n {\r\n contentfulMapPage {\r\n uploadSuccess {\r\n raw\r\n }\r\n uploadFailure {\r\n raw\r\n }\r\n }\r\n }\r\n`;\r\n","export const createInputId = (label) => {\r\n return label\r\n ? label.replace(/[.,\\/#!$%\\^&\\*;:{}=\\-_`~() ]/g, \"\").toLowerCase()\r\n : `id${Math.round(Math.random() * 10)}`;\r\n};\r\n\r\nexport const createErrorId = (label) => {\r\n const inputId = createInputId(label);\r\n return `${inputId}Error`;\r\n};\r\n\r\nexport const createDescriptionId = (label) => {\r\n const inputId = createInputId(label);\r\n return `${inputId}Description`;\r\n};\r\n","import React from \"react\";\r\nimport { string, bool, func } from \"prop-types\";\r\nimport { createInputId, createErrorId } from \"../../common/id-helpers.js\";\r\n\r\nconst propTypes = {\r\n hasError: bool,\r\n required: bool,\r\n label: string,\r\n placeholder: string,\r\n errorMsg: string,\r\n type: string,\r\n handleBlur: func,\r\n};\r\n\r\nconst TextInput = React.forwardRef((props, ref) => {\r\n const { handleBlur, hasError, required, label, placeholder, errorMsg, type } =\r\n props;\r\n\r\n return (\r\n \r\n {\" \"}\r\n {uploadState !== UPLOAD_FILE_SUCCESS && (\r\n \r\n File*\r\n \r\n )}\r\n {uploadState === UPLOAD_IDLE || uploadState === UPLOAD_BAD_EXTENSION ? (\r\n <>\r\n \r\n
\r\n \r\n \r\n or select a file from your device\r\n \r\n
\r\n \r\n ) : uploadState === UPLOAD_INPROGRESS ? (\r\n \r\n Drag a file here\r\n
({validExtensionsString})\r\n
\r\n {\r\n setUploadState(UPLOAD_IDLE);\r\n setSelectedFile(null);\r\n }}\r\n >\r\n \r\n
\r\n ) : uploadState === UPLOAD_UPLOADING ||\r\n uploadState === UPLOAD_RECAPTCHA_FAILED ? (\r\n \r\n {/* TODO: get updated copy */}\r\n Your file {selectedFile && selectedFile.name} is ready! To submit,\r\n please click the Upload Data below.\r\n
\r\n\r\n
\r\n ) : uploadState === UPLOAD_FILE_SUCCESS ? (\r\n \r\n
{uploadSuccess}
\r\n ) : uploadState === UPLOAD_FILE_DENIED ? (\r\n \r\n setUploadState(UPLOAD_IDLE)}\r\n >\r\n Try again\r\n \r\n
\r\n ) : uploadState === UPLOAD_FILE_ERROR ? (\r\n Oh no!
\r\nReCAPTCHA thinks you're a robot!
\r\n\r\n setUploadState(UPLOAD_IDLE)}\r\n >\r\n Try again\r\n \r\n
\r\n ) : null}\r\n {uploadFailure}
\r\n \r\n {hasError &&\r\n \" Please include a file. Only files of type .csv, .xls, .xlsx, .pdf, .doc are accepted.\"}\r\n
\r\n \r\n
\r\n \r\n setUploadState(UPLOAD_IDLE)}\r\n >\r\n Try again\r\n \r\n
\r\n \r\n Oh no!
\r\n\r\n Please upload one of these file formats:\r\n
\r\n {validExtensionsString}\r\n
\r\n \r\n {label}\r\n \r\n
\r\n );\r\n});\r\n\r\nTextInput.propTypes = propTypes;\r\nexport default TextInput;\r\n","import React from \"react\";\r\nimport { string, array, bool, func } from \"prop-types\";\r\nimport { createInputId, createErrorId } from \"../../common/id-helpers.js\";\r\n\r\nconst propTypes = {\r\n hasError: bool,\r\n required: bool,\r\n label: string,\r\n errorMsg: string,\r\n options: array,\r\n handleOnChange: func,\r\n};\r\n\r\nconst SelectInput = React.forwardRef((props, ref) => {\r\n const { hasError, required, label, errorMsg, options, handleOnChange } =\r\n props;\r\n\r\n return (\r\n \r\n {hasError && errorMsg}\r\n
\r\n \r\n \r\n {label}\r\n \r\n \r\n {options &&\r\n options.map((option, i) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n});\r\n\r\nSelectInput.propTypes = propTypes;\r\nexport default SelectInput;\r\n","function _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\nimport React from \"react\";\n\nvar ReCAPTCHA = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(ReCAPTCHA, _React$Component);\n\n function ReCAPTCHA() {\n var _this;\n\n _this = _React$Component.call(this) || this;\n _this.handleExpired = _this.handleExpired.bind(_assertThisInitialized(_this));\n _this.handleErrored = _this.handleErrored.bind(_assertThisInitialized(_this));\n _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));\n _this.handleRecaptchaRef = _this.handleRecaptchaRef.bind(_assertThisInitialized(_this));\n return _this;\n }\n\n var _proto = ReCAPTCHA.prototype;\n\n _proto.getValue = function getValue() {\n if (this.props.grecaptcha && this._widgetId !== undefined) {\n return this.props.grecaptcha.getResponse(this._widgetId);\n }\n\n return null;\n };\n\n _proto.getWidgetId = function getWidgetId() {\n if (this.props.grecaptcha && this._widgetId !== undefined) {\n return this._widgetId;\n }\n\n return null;\n };\n\n _proto.execute = function execute() {\n var grecaptcha = this.props.grecaptcha;\n\n if (grecaptcha && this._widgetId !== undefined) {\n return grecaptcha.execute(this._widgetId);\n } else {\n this._executeRequested = true;\n }\n };\n\n _proto.executeAsync = function executeAsync() {\n var _this2 = this;\n\n return new Promise(function (resolve, reject) {\n _this2.executionResolve = resolve;\n _this2.executionReject = reject;\n\n _this2.execute();\n });\n };\n\n _proto.reset = function reset() {\n if (this.props.grecaptcha && this._widgetId !== undefined) {\n this.props.grecaptcha.reset(this._widgetId);\n }\n };\n\n _proto.handleExpired = function handleExpired() {\n if (this.props.onExpired) {\n this.props.onExpired();\n } else {\n this.handleChange(null);\n }\n };\n\n _proto.handleErrored = function handleErrored() {\n if (this.props.onErrored) {\n this.props.onErrored();\n }\n\n if (this.executionReject) {\n this.executionReject();\n delete this.executionResolve;\n delete this.executionReject;\n }\n };\n\n _proto.handleChange = function handleChange(token) {\n if (this.props.onChange) {\n this.props.onChange(token);\n }\n\n if (this.executionResolve) {\n this.executionResolve(token);\n delete this.executionReject;\n delete this.executionResolve;\n }\n };\n\n _proto.explicitRender = function explicitRender() {\n if (this.props.grecaptcha && this.props.grecaptcha.render && this._widgetId === undefined) {\n var wrapper = document.createElement(\"div\");\n this._widgetId = this.props.grecaptcha.render(wrapper, {\n sitekey: this.props.sitekey,\n callback: this.handleChange,\n theme: this.props.theme,\n type: this.props.type,\n tabindex: this.props.tabindex,\n \"expired-callback\": this.handleExpired,\n \"error-callback\": this.handleErrored,\n size: this.props.size,\n stoken: this.props.stoken,\n hl: this.props.hl,\n badge: this.props.badge\n });\n this.captcha.appendChild(wrapper);\n }\n\n if (this._executeRequested && this.props.grecaptcha && this._widgetId !== undefined) {\n this._executeRequested = false;\n this.execute();\n }\n };\n\n _proto.componentDidMount = function componentDidMount() {\n this.explicitRender();\n };\n\n _proto.componentDidUpdate = function componentDidUpdate() {\n this.explicitRender();\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n if (this._widgetId !== undefined) {\n this.delayOfCaptchaIframeRemoving();\n this.reset();\n }\n };\n\n _proto.delayOfCaptchaIframeRemoving = function delayOfCaptchaIframeRemoving() {\n var temporaryNode = document.createElement(\"div\");\n document.body.appendChild(temporaryNode);\n temporaryNode.style.display = \"none\"; // move of the recaptcha to a temporary node\n\n while (this.captcha.firstChild) {\n temporaryNode.appendChild(this.captcha.firstChild);\n } // delete the temporary node after reset will be done\n\n\n setTimeout(function () {\n document.body.removeChild(temporaryNode);\n }, 5000);\n };\n\n _proto.handleRecaptchaRef = function handleRecaptchaRef(elem) {\n this.captcha = elem;\n };\n\n _proto.render = function render() {\n // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.\n\n /* eslint-disable no-unused-vars */\n var _this$props = this.props,\n sitekey = _this$props.sitekey,\n onChange = _this$props.onChange,\n theme = _this$props.theme,\n type = _this$props.type,\n tabindex = _this$props.tabindex,\n onExpired = _this$props.onExpired,\n onErrored = _this$props.onErrored,\n size = _this$props.size,\n stoken = _this$props.stoken,\n grecaptcha = _this$props.grecaptcha,\n badge = _this$props.badge,\n hl = _this$props.hl,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"sitekey\", \"onChange\", \"theme\", \"type\", \"tabindex\", \"onExpired\", \"onErrored\", \"size\", \"stoken\", \"grecaptcha\", \"badge\", \"hl\"]);\n /* eslint-enable no-unused-vars */\n\n\n return React.createElement(\"div\", _extends({}, childProps, {\n ref: this.handleRecaptchaRef\n }));\n };\n\n return ReCAPTCHA;\n}(React.Component);\n\nexport { ReCAPTCHA as default };\nReCAPTCHA.displayName = \"ReCAPTCHA\";\nReCAPTCHA.defaultProps = {\n onChange: function onChange() {},\n theme: \"light\",\n type: \"image\",\n tabindex: 0,\n size: \"normal\",\n badge: \"bottomright\"\n};","function _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\nimport { Component, createElement, forwardRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport hoistStatics from \"hoist-non-react-statics\";\nvar SCRIPT_MAP = {}; // A counter used to generate a unique id for each component that uses the function\n\nvar idCount = 0;\nexport default function makeAsyncScript(getScriptURL, options) {\n options = options || {};\n return function wrapWithAsyncScript(WrappedComponent) {\n var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || \"Component\";\n\n var AsyncScriptLoader = /*#__PURE__*/function (_Component) {\n _inheritsLoose(AsyncScriptLoader, _Component);\n\n function AsyncScriptLoader(props, context) {\n var _this;\n\n _this = _Component.call(this, props, context) || this;\n _this.state = {};\n _this.__scriptURL = \"\";\n return _this;\n }\n\n var _proto = AsyncScriptLoader.prototype;\n\n _proto.asyncScriptLoaderGetScriptLoaderID = function asyncScriptLoaderGetScriptLoaderID() {\n if (!this.__scriptLoaderID) {\n this.__scriptLoaderID = \"async-script-loader-\" + idCount++;\n }\n\n return this.__scriptLoaderID;\n };\n\n _proto.setupScriptURL = function setupScriptURL() {\n this.__scriptURL = typeof getScriptURL === \"function\" ? getScriptURL() : getScriptURL;\n return this.__scriptURL;\n };\n\n _proto.asyncScriptLoaderHandleLoad = function asyncScriptLoaderHandleLoad(state) {\n var _this2 = this; // use reacts setState callback to fire props.asyncScriptOnLoad with new state/entry\n\n\n this.setState(state, function () {\n return _this2.props.asyncScriptOnLoad && _this2.props.asyncScriptOnLoad(_this2.state);\n });\n };\n\n _proto.asyncScriptLoaderTriggerOnScriptLoaded = function asyncScriptLoaderTriggerOnScriptLoaded() {\n var mapEntry = SCRIPT_MAP[this.__scriptURL];\n\n if (!mapEntry || !mapEntry.loaded) {\n throw new Error(\"Script is not loaded.\");\n }\n\n for (var obsKey in mapEntry.observers) {\n mapEntry.observers[obsKey](mapEntry);\n }\n\n delete window[options.callbackName];\n };\n\n _proto.componentDidMount = function componentDidMount() {\n var _this3 = this;\n\n var scriptURL = this.setupScriptURL();\n var key = this.asyncScriptLoaderGetScriptLoaderID();\n var _options = options,\n globalName = _options.globalName,\n callbackName = _options.callbackName,\n scriptId = _options.scriptId; // check if global object already attached to window\n\n if (globalName && typeof window[globalName] !== \"undefined\") {\n SCRIPT_MAP[scriptURL] = {\n loaded: true,\n observers: {}\n };\n } // check if script loading already\n\n\n if (SCRIPT_MAP[scriptURL]) {\n var entry = SCRIPT_MAP[scriptURL]; // if loaded or errored then \"finish\"\n\n if (entry && (entry.loaded || entry.errored)) {\n this.asyncScriptLoaderHandleLoad(entry);\n return;\n } // if still loading then callback to observer queue\n\n\n entry.observers[key] = function (entry) {\n return _this3.asyncScriptLoaderHandleLoad(entry);\n };\n\n return;\n }\n /*\n * hasn't started loading\n * start the \"magic\"\n * setup script to load and observers\n */\n\n\n var observers = {};\n\n observers[key] = function (entry) {\n return _this3.asyncScriptLoaderHandleLoad(entry);\n };\n\n SCRIPT_MAP[scriptURL] = {\n loaded: false,\n observers: observers\n };\n var script = document.createElement(\"script\");\n script.src = scriptURL;\n script.async = true;\n\n for (var attribute in options.attributes) {\n script.setAttribute(attribute, options.attributes[attribute]);\n }\n\n if (scriptId) {\n script.id = scriptId;\n }\n\n var callObserverFuncAndRemoveObserver = function callObserverFuncAndRemoveObserver(func) {\n if (SCRIPT_MAP[scriptURL]) {\n var mapEntry = SCRIPT_MAP[scriptURL];\n var observersMap = mapEntry.observers;\n\n for (var obsKey in observersMap) {\n if (func(observersMap[obsKey])) {\n delete observersMap[obsKey];\n }\n }\n }\n };\n\n if (callbackName && typeof window !== \"undefined\") {\n window[callbackName] = function () {\n return _this3.asyncScriptLoaderTriggerOnScriptLoaded();\n };\n }\n\n script.onload = function () {\n var mapEntry = SCRIPT_MAP[scriptURL];\n\n if (mapEntry) {\n mapEntry.loaded = true;\n callObserverFuncAndRemoveObserver(function (observer) {\n if (callbackName) {\n return false;\n }\n\n observer(mapEntry);\n return true;\n });\n }\n };\n\n script.onerror = function () {\n var mapEntry = SCRIPT_MAP[scriptURL];\n\n if (mapEntry) {\n mapEntry.errored = true;\n callObserverFuncAndRemoveObserver(function (observer) {\n observer(mapEntry);\n return true;\n });\n }\n };\n\n document.body.appendChild(script);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n // Remove tag script\n var scriptURL = this.__scriptURL;\n\n if (options.removeOnUnmount === true) {\n var allScripts = document.getElementsByTagName(\"script\");\n\n for (var i = 0; i < allScripts.length; i += 1) {\n if (allScripts[i].src.indexOf(scriptURL) > -1) {\n if (allScripts[i].parentNode) {\n allScripts[i].parentNode.removeChild(allScripts[i]);\n }\n }\n }\n } // Clean the observer entry\n\n\n var mapEntry = SCRIPT_MAP[scriptURL];\n\n if (mapEntry) {\n delete mapEntry.observers[this.asyncScriptLoaderGetScriptLoaderID()];\n\n if (options.removeOnUnmount === true) {\n delete SCRIPT_MAP[scriptURL];\n }\n }\n };\n\n _proto.render = function render() {\n var globalName = options.globalName; // remove asyncScriptOnLoad from childProps\n\n var _this$props = this.props,\n asyncScriptOnLoad = _this$props.asyncScriptOnLoad,\n forwardedRef = _this$props.forwardedRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"asyncScriptOnLoad\", \"forwardedRef\"]); // eslint-disable-line no-unused-vars\n\n\n if (globalName && typeof window !== \"undefined\") {\n childProps[globalName] = typeof window[globalName] !== \"undefined\" ? window[globalName] : undefined;\n }\n\n childProps.ref = forwardedRef;\n return createElement(WrappedComponent, childProps);\n };\n\n return AsyncScriptLoader;\n }(Component); // Note the second param \"ref\" provided by React.forwardRef.\n // We can pass it along to AsyncScriptLoader as a regular prop, e.g. \"forwardedRef\"\n // And it can then be attached to the Component.\n\n\n var ForwardedComponent = forwardRef(function (props, ref) {\n return createElement(AsyncScriptLoader, _extends({}, props, {\n forwardedRef: ref\n }));\n });\n ForwardedComponent.displayName = \"AsyncScriptLoader(\" + wrappedComponentName + \")\";\n ForwardedComponent.propTypes = {\n asyncScriptOnLoad: PropTypes.func\n };\n return hoistStatics(ForwardedComponent, WrappedComponent);\n };\n}","import ReCAPTCHA from \"./recaptcha\";\nimport makeAsyncScriptLoader from \"react-async-script\";\nvar callbackName = \"onloadcallback\";\nvar globalName = \"grecaptcha\";\n\nfunction getOptions() {\n return typeof window !== \"undefined\" && window.recaptchaOptions || {};\n}\n\nfunction getURL() {\n var dynamicOptions = getOptions();\n var hostname = dynamicOptions.useRecaptchaNet ? \"recaptcha.net\" : \"www.google.com\";\n return \"https://\" + hostname + \"/recaptcha/api.js?onload=\" + callbackName + \"&render=explicit\";\n}\n\nexport default makeAsyncScriptLoader(getURL, {\n callbackName: callbackName,\n globalName: globalName\n})(ReCAPTCHA);","import RecaptchaWrapper from \"./recaptcha-wrapper\";\nimport ReCAPTCHA from \"./recaptcha\";\nexport default RecaptchaWrapper;\nexport { ReCAPTCHA };","import * as R from \"ramda\";\r\n\r\n/**\r\n * uploadFileForDepartment\r\n * will upload the file and link it to the department\r\n * value for this department in contentful\r\n * @param {File} file https://developer.mozilla.org/en-US/docs/Web/API/File\r\n * @param {String} filename the new filename (not the filename the user uploaded it as)\r\n * @param {String} ori Department ORI id\r\n * @param {String} recaptchaToken token from recaptcha to test on server\r\n * @return {Promise}\r\n */\r\nexport const uploadFileForDepartment = (props) => {\r\n const { file, ori, recaptchaToken, recaptchaClientKey, filename } = props;\r\n\r\n // const url =\r\n // \"https://use-of-force-fa.azurewebsites.net/api/contentful-upload-dept-file?code=pKEm4C7iE7fO1UK/qs0f3ocAavHd0GQaoBL445pLb4wWrjP5lVsCYg==\";\r\n\r\n const url =\r\n \"https://accountable-now.azurewebsites.net/api/contentful-upload-dept-file?code=exVC/hMKu5x54w7CnHwomCHSy82r5YnIzZ9anLuC0dfblsMGQlHOaw==\";\r\n\r\n // for testing locally with vscode https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/tutorial-vscode-serverless-node-test-local\r\n // const url = \"http://localhost:7071/api/contentful-upload-dept-file\";\r\n // const url = \"http://192.168.1.161:7071/api/contentful-upload-dept-file\";\r\n\r\n const formData = new FormData();\r\n formData.append(\"file\", file);\r\n formData.append(\"ori\", ori);\r\n formData.append(\"recaptchaToken\", recaptchaToken);\r\n formData.append(\"recaptchaClientKey\", recaptchaClientKey);\r\n formData.append(\"filename\", filename);\r\n // do not include headers! https://muffinman.io/uploading-files-using-fetch-multipart-form-data/\r\n return fetch(url, {\r\n method: \"POST\",\r\n body: formData,\r\n }).then((response) => {\r\n if (!response.ok) {\r\n response.json().then((json) => {\r\n // parse the message if there is one so it shows up nicely in the browser console\r\n const parsed = R.over(\r\n R.lensPath([\"error\", \"message\"]),\r\n safeParse,\r\n json,\r\n );\r\n console.error(`Error posting to ${url}`, parsed);\r\n });\r\n throw new Error(`Error posting to ${url}`);\r\n }\r\n\r\n return response.json();\r\n });\r\n};\r\n\r\nconst safeParse = (string) => {\r\n try {\r\n return JSON.parse(string);\r\n } catch (e) {\r\n return string;\r\n }\r\n};\r\n","import React, {\r\n useCallback,\r\n useState,\r\n useEffect,\r\n useRef,\r\n useReducer,\r\n} from \"react\";\r\nimport { string } from \"prop-types\";\r\nimport FileUpload from \"./FileUpload\";\r\nimport \"./form.scss\";\r\nimport TextInput from \"../Forms/TextInput\";\r\nimport SelectInput from \"../Forms/SelectInput\";\r\nimport Modal from \"../Modal/Modal.jsx\";\r\nimport { scrollToCenter } from \"../../common/scrollHelpers.js\";\r\nimport * as R from \"ramda\";\r\nimport { graphql, useStaticQuery } from \"gatsby\";\r\nimport { format } from \"date-fns\";\r\n\r\nimport {\r\n DRAG_IDLE,\r\n DRAG_HOVERED,\r\n UPLOAD_INPROGRESS,\r\n UPLOAD_IDLE,\r\n UPLOAD_UPLOADING,\r\n UPLOAD_BAD_EXTENSION,\r\n validExtensions,\r\n} from \"./upload-helpers.js\";\r\n\r\nimport {\r\n UPLOAD_RECAPTCHA_FAILED,\r\n UPLOAD_FILE_DENIED,\r\n UPLOAD_FILE_SUCCESS,\r\n UPLOAD_FILE_ERROR,\r\n} from \"../../../azure-functions/contentful-upload-dept-file/uploadStatus.js\";\r\n\r\nimport {\r\n RECAPTCHA_CLIENT_KEY_V3,\r\n RECAPTCHA_CLIENT_KEY_V2,\r\n} from \"../../../azure-functions/contentful-upload-dept-file/recaptcha-client.js\";\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\nimport { uploadFileForDepartment } from \"../../common/azureFunctions.js\";\r\nimport { extractRichText } from \"../../common/contentful-extract.jsx\";\r\n\r\nconst propTypes = {\r\n ori: string,\r\n deptName: string,\r\n};\r\n\r\nconst InfoForm = (props) => {\r\n const { ori, deptName } = props;\r\n\r\n const reducer = (prevState, updatedProperty) => ({\r\n ...prevState,\r\n ...updatedProperty,\r\n });\r\n\r\n const [buttonDisabled, setButtonDisabled] = useState(true);\r\n const [token, setToken] = useState(null);\r\n\r\n const formRef = useRef();\r\n const firstNameRef = useRef();\r\n const lastNameRef = useRef();\r\n const emailRef = useRef();\r\n const cellPhoneRef = useRef();\r\n const selectRef = useRef();\r\n const dropZoneRef = useRef();\r\n\r\n const initialErrorState = {\r\n firstNameError: false,\r\n lastNameError: false,\r\n emailError: false,\r\n cellPhoneError: false,\r\n selectedFileError: false,\r\n selectSourceError: false,\r\n };\r\n const [errorData, setErrorData] = useReducer(reducer, initialErrorState);\r\n\r\n // file states\r\n const [uploadState, setUploadState] = useState(UPLOAD_IDLE);\r\n const [dragState, setDragState] = useState(DRAG_IDLE);\r\n const [selectedFile, setSelectedFile] = useState(null); // we're storing the file here for both drag and select\r\n const uploadedDate = Date.now();\r\n const timeStamp = format(uploadedDate, \"yyyy-MM-dd--HH-mm-ss\");\r\n const getExtension = (fileName) => R.compose(R.last, R.split(\".\"))(fileName);\r\n\r\n // useEffect(() => {\r\n // const requestOptions = {\r\n // method: \"GET\",\r\n // headers: new Headers(),\r\n // redirect: \"follow\",\r\n // };\r\n // fetch(\r\n // \"https://connect.civilrights.org/site/CRConsAPI?method=getLoginUrl&v=1.0&response_format=json&api_key=lcchr\",\r\n // requestOptions,\r\n // )\r\n // .then((response) => response.json())\r\n // .then((result) => {\r\n // setToken(result.getLoginUrlResponse);\r\n // })\r\n // .catch((error) => console.log(\"error\", error));\r\n // }, []);\r\n\r\n useEffect(() => {\r\n if (errorData && selectedFile) {\r\n const allErrors = R.values(R.map((x) => x, errorData));\r\n const requiredInputArray = [\r\n firstNameRef.current.value,\r\n lastNameRef.current.value,\r\n emailRef.current.value,\r\n selectRef.current.value,\r\n ];\r\n\r\n const evaluateValues = R.filter(\r\n (x) => x.length === 0,\r\n requiredInputArray,\r\n );\r\n\r\n //we don't want to keep flagging errors when people tab through fields, so checking if value is populated and if errors exist before enabling/disabling\r\n evaluateValues.length > 0 ||\r\n selectedFile === null ||\r\n allErrors.filter((x) => x === true).length > 0\r\n ? setButtonDisabled(true)\r\n : setButtonDisabled(false);\r\n }\r\n }, [errorData, selectedFile]);\r\n\r\n useEffect(() => {\r\n if (uploadState === UPLOAD_IDLE && buttonDisabled === false) {\r\n setButtonDisabled(true);\r\n }\r\n }, [uploadState, buttonDisabled]);\r\n\r\n const uploadFileToApi = useCallback(\r\n (recaptchaToken, recaptchaClientKey, formData) => {\r\n const { file } = formData;\r\n\r\n // this shouldn't happen, but it can!\r\n if (!file) {\r\n setUploadState(UPLOAD_IDLE);\r\n return;\r\n }\r\n\r\n setUploadState(UPLOAD_UPLOADING);\r\n const filename = formData.filename;\r\n return uploadFileForDepartment({\r\n file,\r\n ori,\r\n recaptchaToken,\r\n recaptchaClientKey,\r\n filename,\r\n })\r\n .then((result) => {\r\n // default to error if uploadstatus not defined in result\r\n const { uploadStatus = UPLOAD_FILE_ERROR } = result;\r\n setUploadState(uploadStatus);\r\n submitData(formData);\r\n })\r\n .catch((error) => {\r\n console.error(\"Error uploading file\", error);\r\n setUploadState(UPLOAD_FILE_ERROR);\r\n });\r\n },\r\n [ori],\r\n );\r\n\r\n const initiateFileUpload = useCallback(\r\n (formData) => {\r\n if (!window.grecaptcha) {\r\n console.error(\"window.grecaptcha not found!\");\r\n setUploadState(UPLOAD_FILE_ERROR);\r\n return;\r\n }\r\n\r\n window.grecaptcha.ready(() => {\r\n window.grecaptcha\r\n .execute(RECAPTCHA_CLIENT_KEY_V3, {\r\n action: \"uploadFileForDepartment\",\r\n })\r\n .then((recaptchaToken) => {\r\n return uploadFileToApi(\r\n recaptchaToken,\r\n RECAPTCHA_CLIENT_KEY_V3,\r\n formData,\r\n );\r\n })\r\n .catch((error) => {\r\n console.error(\r\n \"Error executing recaptcha, is this domain in the allow list in the recaptcha admin?\",\r\n error,\r\n );\r\n setUploadState(UPLOAD_FILE_ERROR);\r\n });\r\n });\r\n },\r\n [uploadFileToApi],\r\n );\r\n\r\n useEffect(() => {\r\n // scroll to the form\r\n if (\r\n formRef.current &&\r\n (uploadState === UPLOAD_UPLOADING ||\r\n uploadState === UPLOAD_FILE_SUCCESS ||\r\n uploadState === UPLOAD_FILE_ERROR ||\r\n uploadState === UPLOAD_FILE_DENIED)\r\n ) {\r\n scrollToCenter(formRef.current);\r\n }\r\n }, [uploadState]);\r\n\r\n const handleFileChosen = useCallback(\r\n (e) => {\r\n e.preventDefault();\r\n const file = e.target.files[0];\r\n\r\n if (!file) {\r\n console.error(\"error uploading file\");\r\n return;\r\n }\r\n const extension = getExtension(file.name);\r\n\r\n // show an error if there is a bad extension\r\n if (!R.includes(extension, validExtensions)) {\r\n setUploadState(UPLOAD_BAD_EXTENSION);\r\n setErrorData({ selectedFileError: true });\r\n\r\n return;\r\n } else {\r\n setUploadState(UPLOAD_INPROGRESS);\r\n setErrorData({ selectedFileError: false });\r\n setSelectedFile(file);\r\n }\r\n },\r\n [setSelectedFile],\r\n );\r\n\r\n useEffect(() => {\r\n /**\r\n * https://codepen.io/nekobog/pen/JjoZvBm?editors=0010\r\n *\r\n * https://stackoverflow.com/questions/19841859/full-page-drag-and-drop-files-website/33917000#33917000\r\n * The basic idea is this:\r\n * * Keep the drop zone hidden by default.\r\n * * Attach a handler to the html element that will show the zone when something is being dragged over the page.\r\n * * When the zone is visible, tap into its events to handle drag and drop.\r\n * * When the mouse leaves the zone, hide it.\r\n * * Here is the code that worked for me: https://jsfiddle.net/oL2akhtz/.\r\n *\r\n * This part of HTML5 spec is a little bit strange. The most important things to keep in mind are these:\r\n *\r\n * * There are four interesting events: dragenter fires when we drag something and enter the bounds of an element; dragover fires every few ms while we are dragging something over the element; dragleave is the opposite of dragenter; drop fires when something is actually dropped.\r\n * * You must listen to both dragenter and dragover on any element that is a valid drop target. That is, the element is turned into a valid drop target by listening to those events and cancelling their default actions. In our case this applies to the drop-zone overlay.\r\n *\r\n * Now I’ll try to explain my code.\r\n *\r\n * 1. First we add a listener that handles dragenter for the whole page. It just shows the overlay (and there is no need to prevent the default action as we actually do not intend to drop anything on the page, we will be dropping only on the overlay).\r\n * 2. Setup handlers for dragenter and dragover for the overlay. They prevent the default actions (which are to disallow dropping there) and also set dropEffect to give the user some nice feedback (although this seems to do nothing right now in modern browsers). This is a good place to test whether the item being dragged is valid.\r\n * 3. If the mouse leaves the drop zone (which is the same as the whole window, since the div covers everything) we hide it.\r\n * 4. Setup the actual drop handler.\r\n *\r\n * That’s it, pretty straightforward. Here is what happens when someone drops a file:\r\n *\r\n * 1. dragenter for the html element fires. It shows the dropzone.\r\n * 2. Since the mouse is now over the dropzone, dragleave for the html element fires, but we ignore it.\r\n * 3. dragenter for the dropzone fires and then dragover keeps firing. We just jeep saying that, yes, this is a valid drop target.\r\n * 4. Either drop fires, in which case we hide the dropzone and process the file, or dragleave for the dropzone fires in which case we just hide it.\r\n */\r\n if (dropZoneRef.current) {\r\n const dropZone = dropZoneRef.current;\r\n\r\n const preventDefaults = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n\r\n const handleDrag = (e) => {\r\n preventDefaults(e);\r\n setDragState(DRAG_HOVERED);\r\n };\r\n\r\n const handleLeave = (e) => {\r\n preventDefaults(e);\r\n setDragState(DRAG_IDLE);\r\n };\r\n\r\n const handleDrop = (e) => {\r\n preventDefaults(e);\r\n setDragState(DRAG_IDLE);\r\n\r\n const file = e.dataTransfer.files[0];\r\n const extension = getExtension(file.name);\r\n\r\n // show an error if there is a bad extension\r\n if (!R.includes(extension, validExtensions)) {\r\n setUploadState(UPLOAD_BAD_EXTENSION);\r\n setErrorData({ selectedFileError: true });\r\n return;\r\n } else {\r\n setUploadState(UPLOAD_INPROGRESS);\r\n setErrorData({ selectedFileError: false });\r\n setSelectedFile(file);\r\n }\r\n };\r\n\r\n document.addEventListener(\"dragenter\", handleDrag);\r\n\r\n // allow the drop to happen (the default is to disallow dropping)\r\n dropZone.addEventListener(\"dragenter\", preventDefaults);\r\n dropZone.addEventListener(\"dragover\", preventDefaults);\r\n\r\n dropZone.addEventListener(\"dragleave\", handleLeave);\r\n dropZone.addEventListener(\"drop\", handleDrop);\r\n\r\n return () => {\r\n document.removeEventListener(\"dragenter\", handleDrag);\r\n\r\n dropZone.removeEventListener(\"dragenter\", preventDefaults);\r\n dropZone.removeEventListener(\"dragover\", preventDefaults);\r\n\r\n dropZone.removeEventListener(\"dragleave\", handleLeave);\r\n dropZone.removeEventListener(\"drop\", handleDrop);\r\n };\r\n }\r\n }, [initiateFileUpload]);\r\n // });\r\n\r\n const checkHasError = (fieldRef, errorProperty) => {\r\n const value = fieldRef.value;\r\n const type = fieldRef.getAttribute(\"type\");\r\n const required = fieldRef.getAttribute(\"required\");\r\n let hasError = false;\r\n switch (type) {\r\n case \"email\":\r\n hasError = !value.match(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]+/i);\r\n break;\r\n case \"tel\":\r\n hasError =\r\n !value.match(/^\\(?(\\d{3})\\)?[- ]?(\\d{3})[- ]?(\\d{4})$/) &&\r\n value.trim() !== \"\";\r\n break;\r\n case \"checkbox\":\r\n case \"select\":\r\n case \"text\":\r\n default:\r\n if (\r\n required !== null &&\r\n (value.trim().length === 0 || !value.match(/^[a-zA-Z\\s-'\"]*$/g))\r\n ) {\r\n hasError = true;\r\n }\r\n\r\n break;\r\n }\r\n setErrorData({ [errorProperty]: hasError });\r\n return hasError;\r\n };\r\n\r\n const handleBlur = (fieldRef, setErrorProperty) => {\r\n const value = fieldRef.value;\r\n if (value.length > 0) {\r\n checkHasError(fieldRef, setErrorProperty)\r\n ? setButtonDisabled(true)\r\n : null;\r\n } else if (fieldRef.getAttribute(\"required\") === null) {\r\n checkHasError(fieldRef, setErrorProperty)\r\n ? setButtonDisabled(true)\r\n : null;\r\n }\r\n };\r\n\r\n const onFormSubmit = (e) => {\r\n e.preventDefault();\r\n\r\n //shouldn't but let's double check just in case\r\n const extension = getExtension(selectedFile.name);\r\n const fileHasError =\r\n selectedFile &&\r\n !R.includes(extension, validExtensions) &&\r\n uploadState !== UPLOAD_INPROGRESS;\r\n const errorArray = R.values(errorData);\r\n const filename = `${ori}--${timeStamp}.${extension}`;\r\n setButtonDisabled(true);\r\n\r\n if (errorArray.filter((x) => x === true).length === 0) {\r\n const formData = {\r\n firstName: firstNameRef.current.value,\r\n lastName: lastNameRef.current.value,\r\n email: emailRef.current.value,\r\n phone: cellPhoneRef.current.value,\r\n source: selectRef.current.value,\r\n filename: filename,\r\n file: selectedFile,\r\n token: token,\r\n };\r\n\r\n initiateFileUpload(formData);\r\n } else {\r\n fileHasError && setErrorData({ selectedFileError: true });\r\n return;\r\n }\r\n };\r\n\r\n const submitData = (formData) => {\r\n const requestOptions = {\r\n method: \"GET\",\r\n headers: new Headers(),\r\n redirect: \"follow\",\r\n };\r\n fetch(\r\n \"https://connect.civilrights.org/site/CRConsAPI?method=getLoginUrl&v=1.0&response_format=json&api_key=lcchr\",\r\n requestOptions,\r\n )\r\n .then((response) => response.json())\r\n .then((result) => {\r\n setToken(result.getLoginUrlResponse);\r\n const { firstName, lastName, email, phone, source, filename } =\r\n formData;\r\n const token = result.getLoginUrlResponse;\r\n const bodyParams = new URLSearchParams();\r\n bodyParams.append(\"method\", \"submitSurvey\");\r\n bodyParams.append(\"v\", \"1.0\");\r\n bodyParams.append(\"response_format\", \"json\");\r\n bodyParams.append(\"api_key\", \"lcchr\");\r\n bodyParams.append(\"auth\", token.token);\r\n bodyParams.append(\"survey_id\", \"1461\");\r\n bodyParams.append(\"question_1382\", firstName);\r\n bodyParams.append(\"question_1383\", lastName);\r\n bodyParams.append(\"question_1385\", email);\r\n bodyParams.append(\"question_1384\", phone);\r\n bodyParams.append(\"question_1381\", source);\r\n bodyParams.append(\"question_1386\", filename);\r\n fetch(token.url.replace(\"CRConsAPI\", \"CRSurveyAPI\"), {\r\n method: \"POST\",\r\n headers: new Headers().append(\"Content-Type\", \"application/json\"),\r\n redirect: \"follow\",\r\n body: bodyParams,\r\n })\r\n .then((response) => response.json())\r\n .catch((e) => console.warn(e));\r\n })\r\n .catch((error) => console.log(\"error\", error));\r\n };\r\n\r\n const backupOptions = [\"FOIA request\", \"Online\", \"Other\"];\r\n\r\n const contentfulData = useStaticQuery(query);\r\n\r\n const legalText =\r\n contentfulData.contentfulMapPage.formLegalText &&\r\n extractRichText(contentfulData.contentfulMapPage.formLegalText);\r\n\r\n const options = contentfulData\r\n ? contentfulData.contentfulMapPage.uploadDataSourceOptions\r\n : backupOptions;\r\n\r\n const dataSourceOptions = options.map((x) => x);\r\n dataSourceOptions.unshift(\"\");\r\n return (\r\n \r\n );\r\n};\r\n\r\nInfoForm.propTypes = propTypes;\r\nexport default InfoForm;\r\n\r\nconst query = graphql`\r\n {\r\n contentfulMapPage {\r\n uploadDataSourceOptions\r\n formLegalText {\r\n raw\r\n }\r\n }\r\n }\r\n`;\r\n","import * as R from \"ramda\";\r\nimport { useStaticQuery, graphql } from \"gatsby\";\r\n\r\nimport \"./info-panel.scss\";\r\nimport \"./file-upload.scss\";\r\n\r\nimport { extractRichText } from \"../../common/contentful-extract.jsx\";\r\n\r\nimport {\r\n deptShape,\r\n getDeptStatus,\r\n getDataIconImg,\r\n HAS_DATA,\r\n HAS_FOIA_REJECTION,\r\n NO_DATA,\r\n} from \"../../common/dept.jsx\";\r\nimport { getMapEntityUrl } from \"../../common/mapUrl.js\";\r\nimport { useGoogleMapContext } from \"../GoogleMap/googleMapContext.jsx\";\r\n\r\nimport FileDownload from \"./FileDownload.jsx\";\r\nimport FileUpload from \"./FileUpload.jsx\";\r\nimport { Link } from \"@reach/router\";\r\nimport InfoForm from \"./InfoForm.jsx\";\r\n\r\nconst propTypes = {\r\n deptData: deptShape.isRequired,\r\n};\r\n\r\nconst DeptInfo = (props) => {\r\n const { deptData } = props;\r\n\r\n const contentfulData = useStaticQuery(graphql`\r\n {\r\n contentfulMapPage {\r\n uploadHelpNoData {\r\n raw\r\n references {\r\n ...Link\r\n }\r\n }\r\n uploadHelpFoiaRejection {\r\n raw\r\n references {\r\n ...Link\r\n }\r\n }\r\n uploadHelpHasData {\r\n raw\r\n references {\r\n ...Link\r\n }\r\n }\r\n }\r\n }\r\n `);\r\n\r\n const data = R.compose(\r\n R.evolve({\r\n uploadHelpNoData: extractRichText,\r\n uploadHelpFoiaRejection: extractRichText,\r\n uploadHelpHasData: extractRichText,\r\n }),\r\n R.defaultTo({}),\r\n R.prop(\"contentfulMapPage\"),\r\n )(contentfulData);\r\n\r\n const { panToState } = useGoogleMapContext();\r\n\r\n const {\r\n content,\r\n dataFiles,\r\n foiaRejections,\r\n name,\r\n ori,\r\n stateAbbreviation,\r\n stateName,\r\n phone,\r\n email,\r\n } = deptData;\r\n\r\n const deptStatus = getDeptStatus(deptData);\r\n\r\n const { uploadHelpNoData, uploadHelpFoiaRejection, uploadHelpHasData } = data;\r\n\r\n const uploadHelpText = R.cond([\r\n [R.equals(HAS_DATA), () => uploadHelpHasData],\r\n [R.equals(HAS_FOIA_REJECTION), () => uploadHelpFoiaRejection],\r\n [R.equals(NO_DATA), () => uploadHelpNoData],\r\n ])(deptStatus);\r\n\r\n return deptData ? (\r\n \r\n {hasError && errorMsg}\r\n
\r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nDeptInfo.propTypes = propTypes;\r\nexport default DeptInfo;\r\n","import { useState } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport { arrayOf, bool, oneOf, shape, string } from \"prop-types\";\r\n\r\nimport { HAS_DATA, HAS_FOIA_REJECTION, NO_DATA } from \"../../common/dept.jsx\";\r\n\r\nconst initialState = [\r\n {\r\n id: NO_DATA,\r\n label: \"No Data Available\",\r\n isActive: true,\r\n },\r\n {\r\n id: HAS_DATA,\r\n label: \"Data Available\",\r\n isActive: true,\r\n },\r\n];\r\n\r\nexport const legendStateType = arrayOf(\r\n shape({\r\n id: oneOf(R.pluck(\"id\", initialState)).isRequired,\r\n label: string.isRequired,\r\n isActive: bool.isRequired,\r\n }),\r\n);\r\n\r\nexport function isStatusActive(status, legendState) {\r\n if (!legendState) {\r\n return true;\r\n }\r\n\r\n // group NO_DATA and HAS_FOIA_REJECTION\r\n const derrivedStatus = status === HAS_FOIA_REJECTION ? NO_DATA : status;\r\n\r\n return R.compose(\r\n R.propOr(false, \"isActive\"),\r\n R.defaultTo({}),\r\n R.find(R.propEq(\"id\", derrivedStatus)),\r\n )(legendState);\r\n}\r\n\r\nexport function useLegendState() {\r\n const [legendState, setLegendState] = useState(initialState);\r\n\r\n const toggleLegendItem = (id) => {\r\n setLegendState((prevState) => {\r\n return R.map(\r\n R.when(\r\n R.propEq(\"id\", id),\r\n R.over(R.lensProp(\"isActive\"), (v) => !v),\r\n ),\r\n )(prevState);\r\n });\r\n };\r\n\r\n return [legendState, toggleLegendItem];\r\n}\r\n","// This class was based on the example:\r\n// https://developers.google.com/maps/documentation/javascript/examples/overlay-simple\r\n\r\nimport * as R from \"ramda\";\r\n\r\nimport { HAS_DATA, getDataIconSrc, getDeptStatus } from \"../../common/dept.jsx\";\r\nimport { isStatusActive } from \"./legendState.js\";\r\n\r\nconst DEBUG = false;\r\n\r\nexport default function createDotsOverlay(...args) {\r\n /** @constructor */\r\n function DotsOverlay({ map, onAddCallback }) {\r\n // Initialize all properties.\r\n this.map = map;\r\n this.onAddCallback = onAddCallback;\r\n\r\n // this will update on every drawDots\r\n this.bounds = this.map.getBounds();\r\n\r\n // Explicitly call setMap on this overlay.\r\n this.setMap(map);\r\n }\r\n\r\n DotsOverlay.prototype = new window.google.maps.OverlayView();\r\n\r\n /**\r\n * onAdd is called when the map's panes are ready and the overlay has been\r\n * added to the map.\r\n */\r\n DotsOverlay.prototype.onAdd = function () {\r\n const div = document.createElement(\"div\");\r\n div.style.borderStyle = \"none\";\r\n div.style.borderWidth = \"0px\";\r\n div.style.position = \"absolute\";\r\n div.className = \"dots-overlay__container\";\r\n this.div = div;\r\n\r\n // Create the img element and attach it to the div.\r\n const img = document.createElement(\"img\");\r\n img.style.width = \"100%\";\r\n img.style.height = \"100%\";\r\n img.style.position = \"absolute\";\r\n img.className = \"dots-overlay__canvas\";\r\n img.alt = \"\"; // for a11y\r\n this.img = img;\r\n div.appendChild(img);\r\n\r\n this.canvas = document.createElement(\"canvas\");\r\n\r\n // Add the element to the \"overlayLayer\" pane.\r\n // https://developers.google.com/maps/documentation/javascript/customoverlays#initialize\r\n const panes = this.getPanes();\r\n panes.overlayLayer.appendChild(div);\r\n\r\n // fire consumer's callback and pass `this` so they can do stuff with it\r\n // (eg, call DotsOverlay.drawDots)\r\n this.onAddCallback && this.onAddCallback(this);\r\n };\r\n\r\n DotsOverlay.prototype.drawDots = function (props) {\r\n /* eslint-disable-next-line no-console */\r\n DEBUG && console.time(\"drawDots\");\r\n\r\n const { allDepartments, dotRadius, onDrawFinished, legendState, zoom } =\r\n props;\r\n\r\n this.bounds = this.map.getBounds();\r\n\r\n const positions = this.getPositions(this.bounds);\r\n\r\n if (!positions) {\r\n DEBUG && console.warn(\"DotsOverlay.drawDots: no positions\");\r\n return;\r\n }\r\n\r\n const { left, top, width, height } = positions;\r\n\r\n // Resize the image's div to fit the indicated dimensions.\r\n const div = this.div;\r\n div.style.left = left + \"px\";\r\n div.style.top = top + \"px\";\r\n div.style.width = width + \"px\";\r\n div.style.height = height + \"px\";\r\n\r\n const canvas = this.canvas;\r\n const context = canvas.getContext(\"2d\");\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n canvas.width = width;\r\n canvas.height = height;\r\n\r\n // only draw the dots that are visible (for performance)\r\n // also, some depts won't have lat/lon\r\n const deptsInBounds = allDepartments.filter((dept) => {\r\n return (\r\n !R.isNil(dept.latitude) &&\r\n !R.isNil(dept.longitude) &&\r\n this.bounds.contains({ lat: dept.latitude, lng: dept.longitude })\r\n );\r\n });\r\n\r\n deptsInBounds.forEach((dept) => {\r\n const [x, y] = this.coordinatesToPoint([dept.longitude, dept.latitude]);\r\n\r\n const deptStatus = getDeptStatus(dept);\r\n\r\n drawIcon(context, {\r\n deptStatus,\r\n cx: x,\r\n cy: y,\r\n // make triangles a bit bigger (because the teal is hard to see...)\r\n r: deptStatus === HAS_DATA ? dotRadius * 1.5 : dotRadius,\r\n isActive: isStatusActive(deptStatus, legendState),\r\n zoom,\r\n });\r\n });\r\n\r\n this.img.src = canvas.toDataURL();\r\n\r\n // alert the consumer that we're done (so they can calc quadtree, eg)\r\n // and pass along the dots that we drew\r\n onDrawFinished(deptsInBounds);\r\n\r\n /* eslint-disable-next-line no-console */\r\n DEBUG && console.timeEnd(\"drawDots\");\r\n };\r\n\r\n DotsOverlay.prototype.draw = function () {\r\n if (!this.bounds) {\r\n DEBUG && console.warn(\"DotsOverlay.draw: no bounds\");\r\n return;\r\n }\r\n\r\n // Resize the image's div to fit the indicated dimensions.\r\n const div = this.div;\r\n\r\n const { left, top, width, height } = this.getPositions(this.bounds);\r\n\r\n div.style.left = left + \"px\";\r\n div.style.top = top + \"px\";\r\n div.style.width = width + \"px\";\r\n div.style.height = height + \"px\";\r\n };\r\n\r\n DotsOverlay.prototype.getPositions = function (bounds) {\r\n // We use the south-west and north-east\r\n // coordinates of the overlay to peg it to the correct position and size.\r\n // To do this, we need to retrieve the projection from the overlay.\r\n const overlayProjection = this.getProjection();\r\n\r\n if (!overlayProjection) {\r\n console.warn(\"DotsOverlay.getPositions: no overlayProjection\");\r\n return;\r\n }\r\n\r\n // Retrieve the south-west and north-east coordinates of this overlay\r\n // in LatLngs and convert them to pixel coordinates.\r\n // We'll use these coordinates to resize the div.\r\n const sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest());\r\n const ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());\r\n\r\n return {\r\n left: sw.x,\r\n top: ne.y,\r\n width: ne.x - sw.x,\r\n height: sw.y - ne.y,\r\n };\r\n };\r\n\r\n /** The onRemove() method will be called automatically from the API if\r\n * we ever set the overlay's map property to 'null'.\r\n */\r\n DotsOverlay.prototype.onRemove = function () {\r\n this.div_.parentNode.removeChild(this.div_);\r\n this.div_ = null;\r\n };\r\n\r\n // this api matches d3-geo projection\r\n // this method is used in GoogleMap.jsx\r\n DotsOverlay.prototype.coordinatesToPoint = function (coordinates) {\r\n const projection = this.getProjection();\r\n\r\n if (!projection) {\r\n return [0, 0];\r\n }\r\n\r\n const [longitude, latitude] = coordinates;\r\n\r\n const point = projection.fromLatLngToContainerPixel(\r\n new window.google.maps.LatLng(latitude, longitude),\r\n );\r\n\r\n return [point.x, point.y];\r\n };\r\n\r\n return new DotsOverlay(...args);\r\n}\r\n\r\n// memoize this so it only has to create these Image's once per icon\r\n// (instead of 18k times for each icon)\r\nconst getIconImg = R.memoizeWith(\r\n (status, zoom) => `${status}${zoom}`,\r\n (status, zoom) => {\r\n const icon = new Image();\r\n icon.src = getDataIconSrc(status, zoom);\r\n return icon;\r\n },\r\n);\r\n\r\nfunction drawIcon(context, props) {\r\n const { deptStatus, cx, cy, r, isActive = true, zoom } = props;\r\n\r\n const icon = getIconImg(deptStatus, zoom);\r\n\r\n const width = r * 2;\r\n const height = (icon.height / icon.width) * width;\r\n const x = cx - width / 2;\r\n const y = cy - height / 2;\r\n\r\n context.imageSmoothingEnabled = true; // apply anti-aliasing for scaled down images\r\n context.globalAlpha = isActive ? 1 : 0;\r\n context.drawImage(icon, x, y, width, height);\r\n}\r\n","import \"core-js/modules/es.typed-array.sort.js\";\n// https://github.com/python/cpython/blob/a74eea238f5baba15797e2e8b570d153bc8690a7/Modules/mathmodule.c#L1423\nexport class Adder {\n constructor() {\n this._partials = new Float64Array(32);\n this._n = 0;\n }\n\n add(x) {\n const p = this._partials;\n let i = 0;\n\n for (let j = 0; j < this._n && j < 32; j++) {\n const y = p[j],\n hi = x + y,\n lo = Math.abs(x) < Math.abs(y) ? x - (hi - y) : y - (hi - x);\n if (lo) p[i++] = lo;\n x = hi;\n }\n\n p[i] = x;\n this._n = i + 1;\n return this;\n }\n\n valueOf() {\n const p = this._partials;\n let n = this._n,\n x,\n y,\n lo,\n hi = 0;\n\n if (n > 0) {\n hi = p[--n];\n\n while (n > 0) {\n x = hi;\n y = p[--n];\n hi = x + y;\n lo = y - (hi - x);\n if (lo) break;\n }\n\n if (n > 0 && (lo < 0 && p[n - 1] < 0 || lo > 0 && p[n - 1] > 0)) {\n y = lo * 2;\n x = hi + y;\n if (y == x - hi) hi = x;\n }\n }\n\n return hi;\n }\n\n}\nexport function fsum(values, valueof) {\n const adder = new Adder();\n\n if (valueof === undefined) {\n for (let value of values) {\n if (value = +value) {\n adder.add(value);\n }\n }\n } else {\n let index = -1;\n\n for (let value of values) {\n if (value = +valueof(value, ++index, values)) {\n adder.add(value);\n }\n }\n }\n\n return +adder;\n}\nexport function fcumsum(values, valueof) {\n const adder = new Adder();\n let index = -1;\n return Float64Array.from(values, valueof === undefined ? v => adder.add(+v || 0) : v => adder.add(+valueof(v, ++index, values) || 0));\n}","export var epsilon = 1e-6;\nexport var epsilon2 = 1e-12;\nexport var pi = Math.PI;\nexport var halfPi = pi / 2;\nexport var quarterPi = pi / 4;\nexport var tau = pi * 2;\nexport var degrees = 180 / pi;\nexport var radians = pi / 180;\nexport var abs = Math.abs;\nexport var atan = Math.atan;\nexport var atan2 = Math.atan2;\nexport var cos = Math.cos;\nexport var ceil = Math.ceil;\nexport var exp = Math.exp;\nexport var floor = Math.floor;\nexport var hypot = Math.hypot;\nexport var log = Math.log;\nexport var pow = Math.pow;\nexport var sin = Math.sin;\nexport var sign = Math.sign || function (x) {\n return x > 0 ? 1 : x < 0 ? -1 : 0;\n};\nexport var sqrt = Math.sqrt;\nexport var tan = Math.tan;\nexport function acos(x) {\n return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\nexport function asin(x) {\n return x > 1 ? halfPi : x < -1 ? -halfPi : Math.asin(x);\n}\nexport function haversin(x) {\n return (x = sin(x / 2)) * x;\n}","function streamGeometry(geometry, stream) {\n if (geometry && streamGeometryType.hasOwnProperty(geometry.type)) {\n streamGeometryType[geometry.type](geometry, stream);\n }\n}\n\nvar streamObjectType = {\n Feature: function (object, stream) {\n streamGeometry(object.geometry, stream);\n },\n FeatureCollection: function (object, stream) {\n var features = object.features,\n i = -1,\n n = features.length;\n\n while (++i < n) streamGeometry(features[i].geometry, stream);\n }\n};\nvar streamGeometryType = {\n Sphere: function (object, stream) {\n stream.sphere();\n },\n Point: function (object, stream) {\n object = object.coordinates;\n stream.point(object[0], object[1], object[2]);\n },\n MultiPoint: function (object, stream) {\n var coordinates = object.coordinates,\n i = -1,\n n = coordinates.length;\n\n while (++i < n) object = coordinates[i], stream.point(object[0], object[1], object[2]);\n },\n LineString: function (object, stream) {\n streamLine(object.coordinates, stream, 0);\n },\n MultiLineString: function (object, stream) {\n var coordinates = object.coordinates,\n i = -1,\n n = coordinates.length;\n\n while (++i < n) streamLine(coordinates[i], stream, 0);\n },\n Polygon: function (object, stream) {\n streamPolygon(object.coordinates, stream);\n },\n MultiPolygon: function (object, stream) {\n var coordinates = object.coordinates,\n i = -1,\n n = coordinates.length;\n\n while (++i < n) streamPolygon(coordinates[i], stream);\n },\n GeometryCollection: function (object, stream) {\n var geometries = object.geometries,\n i = -1,\n n = geometries.length;\n\n while (++i < n) streamGeometry(geometries[i], stream);\n }\n};\n\nfunction streamLine(coordinates, stream, closed) {\n var i = -1,\n n = coordinates.length - closed,\n coordinate;\n stream.lineStart();\n\n while (++i < n) coordinate = coordinates[i], stream.point(coordinate[0], coordinate[1], coordinate[2]);\n\n stream.lineEnd();\n}\n\nfunction streamPolygon(coordinates, stream) {\n var i = -1,\n n = coordinates.length;\n stream.polygonStart();\n\n while (++i < n) streamLine(coordinates[i], stream, 1);\n\n stream.polygonEnd();\n}\n\nexport default function (object, stream) {\n if (object && streamObjectType.hasOwnProperty(object.type)) {\n streamObjectType[object.type](object, stream);\n } else {\n streamGeometry(object, stream);\n }\n}","import { Adder } from \"d3-array\";\nimport { asin, atan2, cos, degrees, epsilon, epsilon2, hypot, radians, sin, sqrt } from \"./math.js\";\nimport noop from \"./noop.js\";\nimport stream from \"./stream.js\";\nvar W0, W1, X0, Y0, Z0, X1, Y1, Z1, X2, Y2, Z2, lambda00, phi00, // first point\nx0, y0, z0; // previous point\n\nvar centroidStream = {\n sphere: noop,\n point: centroidPoint,\n lineStart: centroidLineStart,\n lineEnd: centroidLineEnd,\n polygonStart: function () {\n centroidStream.lineStart = centroidRingStart;\n centroidStream.lineEnd = centroidRingEnd;\n },\n polygonEnd: function () {\n centroidStream.lineStart = centroidLineStart;\n centroidStream.lineEnd = centroidLineEnd;\n }\n}; // Arithmetic mean of Cartesian vectors.\n\nfunction centroidPoint(lambda, phi) {\n lambda *= radians, phi *= radians;\n var cosPhi = cos(phi);\n centroidPointCartesian(cosPhi * cos(lambda), cosPhi * sin(lambda), sin(phi));\n}\n\nfunction centroidPointCartesian(x, y, z) {\n ++W0;\n X0 += (x - X0) / W0;\n Y0 += (y - Y0) / W0;\n Z0 += (z - Z0) / W0;\n}\n\nfunction centroidLineStart() {\n centroidStream.point = centroidLinePointFirst;\n}\n\nfunction centroidLinePointFirst(lambda, phi) {\n lambda *= radians, phi *= radians;\n var cosPhi = cos(phi);\n x0 = cosPhi * cos(lambda);\n y0 = cosPhi * sin(lambda);\n z0 = sin(phi);\n centroidStream.point = centroidLinePoint;\n centroidPointCartesian(x0, y0, z0);\n}\n\nfunction centroidLinePoint(lambda, phi) {\n lambda *= radians, phi *= radians;\n var cosPhi = cos(phi),\n x = cosPhi * cos(lambda),\n y = cosPhi * sin(lambda),\n z = sin(phi),\n w = atan2(sqrt((w = y0 * z - z0 * y) * w + (w = z0 * x - x0 * z) * w + (w = x0 * y - y0 * x) * w), x0 * x + y0 * y + z0 * z);\n W1 += w;\n X1 += w * (x0 + (x0 = x));\n Y1 += w * (y0 + (y0 = y));\n Z1 += w * (z0 + (z0 = z));\n centroidPointCartesian(x0, y0, z0);\n}\n\nfunction centroidLineEnd() {\n centroidStream.point = centroidPoint;\n} // See J. E. Brock, The Inertia Tensor for a Spherical Triangle,\n// J. Applied Mechanics 42, 239 (1975).\n\n\nfunction centroidRingStart() {\n centroidStream.point = centroidRingPointFirst;\n}\n\nfunction centroidRingEnd() {\n centroidRingPoint(lambda00, phi00);\n centroidStream.point = centroidPoint;\n}\n\nfunction centroidRingPointFirst(lambda, phi) {\n lambda00 = lambda, phi00 = phi;\n lambda *= radians, phi *= radians;\n centroidStream.point = centroidRingPoint;\n var cosPhi = cos(phi);\n x0 = cosPhi * cos(lambda);\n y0 = cosPhi * sin(lambda);\n z0 = sin(phi);\n centroidPointCartesian(x0, y0, z0);\n}\n\nfunction centroidRingPoint(lambda, phi) {\n lambda *= radians, phi *= radians;\n var cosPhi = cos(phi),\n x = cosPhi * cos(lambda),\n y = cosPhi * sin(lambda),\n z = sin(phi),\n cx = y0 * z - z0 * y,\n cy = z0 * x - x0 * z,\n cz = x0 * y - y0 * x,\n m = hypot(cx, cy, cz),\n w = asin(m),\n // line weight = angle\n v = m && -w / m; // area weight multiplier\n\n X2.add(v * cx);\n Y2.add(v * cy);\n Z2.add(v * cz);\n W1 += w;\n X1 += w * (x0 + (x0 = x));\n Y1 += w * (y0 + (y0 = y));\n Z1 += w * (z0 + (z0 = z));\n centroidPointCartesian(x0, y0, z0);\n}\n\nexport default function (object) {\n W0 = W1 = X0 = Y0 = Z0 = X1 = Y1 = Z1 = 0;\n X2 = new Adder();\n Y2 = new Adder();\n Z2 = new Adder();\n stream(object, centroidStream);\n var x = +X2,\n y = +Y2,\n z = +Z2,\n m = hypot(x, y, z); // If the area-weighted ccentroid is undefined, fall back to length-weighted ccentroid.\n\n if (m < epsilon2) {\n x = X1, y = Y1, z = Z1; // If the feature has zero length, fall back to arithmetic mean of point vectors.\n\n if (W1 < epsilon) x = X0, y = Y0, z = Z0;\n m = hypot(x, y, z); // If the feature still has an undefined ccentroid, then return.\n\n if (m < epsilon2) return [NaN, NaN];\n }\n\n return [atan2(y, x) * degrees, asin(z / m) * degrees];\n}","export default function noop() {}","/* this code came from Nate's snazzy map https://snazzymaps.com/ */\r\n\r\nexport const labelColor = \"#b5d4e3\";\r\n\r\nexport default [\r\n {\r\n featureType: \"all\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"all\",\r\n elementType: \"geometry.fill\",\r\n stylers: [\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"all\",\r\n elementType: \"geometry.stroke\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"all\",\r\n elementType: \"labels.text.fill\",\r\n stylers: [\r\n {\r\n gamma: 0.01,\r\n },\r\n {\r\n lightness: 20,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"all\",\r\n elementType: \"labels.text.stroke\",\r\n stylers: [\r\n {\r\n saturation: -31,\r\n },\r\n {\r\n lightness: -33,\r\n },\r\n {\r\n weight: 2,\r\n },\r\n {\r\n gamma: 0.8,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"all\",\r\n elementType: \"labels.icon\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: \"#09304B\",\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative\",\r\n elementType: \"labels\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative\",\r\n elementType: \"labels.text\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative\",\r\n elementType: \"labels.text.fill\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: labelColor,\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative\",\r\n elementType: \"labels.text.stroke\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.country\",\r\n elementType: \"labels.text.fill\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: labelColor,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.province\",\r\n elementType: \"labels\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: labelColor,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.province\",\r\n elementType: \"labels.text.fill\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.province\",\r\n elementType: \"labels.text.stroke\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"geometry.fill\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"geometry.stroke\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"labels\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"labels.text\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"labels.text.fill\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: labelColor,\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"labels.text.stroke\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.locality\",\r\n elementType: \"labels.icon\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.neighborhood\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"administrative.land_parcel\",\r\n elementType: \"labels\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"landscape\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n lightness: 30,\r\n },\r\n {\r\n saturation: 30,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"landscape.man_made\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: \"#09304B\",\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"landscape.natural\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: \"#09304B\",\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"poi\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"poi\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n saturation: 20,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"poi\",\r\n elementType: \"labels\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"poi.park\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"poi.park\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n lightness: 20,\r\n },\r\n {\r\n saturation: \"-20\",\r\n },\r\n {\r\n color: \"#09304B\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"poi.park\",\r\n elementType: \"labels\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"road\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n visibility: \"off\",\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"road\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n lightness: 10,\r\n },\r\n {\r\n saturation: -30,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"road\",\r\n elementType: \"geometry.stroke\",\r\n stylers: [\r\n {\r\n saturation: 25,\r\n },\r\n {\r\n lightness: 25,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"water\",\r\n elementType: \"all\",\r\n stylers: [\r\n {\r\n lightness: -20,\r\n },\r\n ],\r\n },\r\n {\r\n featureType: \"water\",\r\n elementType: \"geometry\",\r\n stylers: [\r\n {\r\n visibility: \"on\",\r\n },\r\n {\r\n color: \"#021019\",\r\n },\r\n {\r\n saturation: \"0\",\r\n },\r\n ],\r\n },\r\n];\r\n","var ClusterIcon = /*#__PURE__*/function () {\n function ClusterIcon(cluster, styles) {\n cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView);\n this.cluster = cluster;\n this.className = this.cluster.getClusterer().getClusterClass();\n this.styles = styles;\n this.center = undefined;\n this.div = null;\n this.sums = null;\n this.visible = false;\n this.boundsChangedListener = null;\n this.url = '';\n this.height = 0;\n this.width = 0;\n this.anchorText = [0, 0];\n this.anchorIcon = [0, 0];\n this.textColor = 'black';\n this.textSize = 11;\n this.textDecoration = 'none';\n this.fontWeight = 'bold';\n this.fontStyle = 'normal';\n this.fontFamily = 'Arial,sans-serif';\n this.backgroundPosition = '0 0'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n this.setMap(cluster.getMap()); // Note: this causes onAdd to be called\n }\n\n var _proto = ClusterIcon.prototype;\n\n _proto.onAdd = function onAdd() {\n var _this = this;\n\n var cMouseDownInCluster;\n var cDraggingMapByCluster;\n this.div = document.createElement('div');\n this.div.className = this.className;\n\n if (this.visible) {\n this.show();\n } // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n\n this.getPanes().overlayMouseTarget.appendChild(this.div); // Fix for Issue 157\n\n this.boundsChangedListener = google.maps.event.addListener( // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.getMap(), 'boundschanged', function boundsChanged() {\n cDraggingMapByCluster = cMouseDownInCluster;\n });\n google.maps.event.addDomListener(this.div, 'mousedown', function onMouseDown() {\n cMouseDownInCluster = true;\n cDraggingMapByCluster = false;\n }); // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n\n google.maps.event.addDomListener(this.div, 'click', // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function (event) {\n cMouseDownInCluster = false;\n\n if (!cDraggingMapByCluster) {\n var markerClusterer = _this.cluster.getClusterer();\n /**\r\n * This event is fired when a cluster marker is clicked.\r\n * @name MarkerClusterer#click\r\n * @param {Cluster} c The cluster that was clicked.\r\n * @event\r\n */\n\n\n google.maps.event.trigger(markerClusterer, 'click', _this.cluster);\n google.maps.event.trigger(markerClusterer, 'clusterclick', _this.cluster); // deprecated name\n // The default click handler follows. Disable it by setting\n // the zoomOnClick property to false.\n\n if (markerClusterer.getZoomOnClick()) {\n // Zoom into the cluster.\n var maxZoom = markerClusterer.getMaxZoom();\n\n var bounds = _this.cluster.getBounds(); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n\n markerClusterer.getMap().fitBounds(bounds); // There is a fix for Issue 170 here:\n\n setTimeout(function timeout() {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n markerClusterer.getMap().fitBounds(bounds); // Don't zoom beyond the max zoom level\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n if (maxZoom !== null && markerClusterer.getMap().getZoom() > maxZoom) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n markerClusterer.getMap().setZoom(maxZoom + 1);\n }\n }, 100);\n } // Prevent event propagation to the map:\n\n\n event.cancelBubble = true;\n\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n }\n });\n google.maps.event.addDomListener(this.div, 'mouseover', // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function () {\n /**\r\n * This event is fired when the mouse moves over a cluster marker.\r\n * @name MarkerClusterer#mouseover\r\n * @param {Cluster} c The cluster that the mouse moved over.\r\n * @event\r\n */\n google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseover', _this.cluster);\n }); // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n\n google.maps.event.addDomListener(this.div, 'mouseout', // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function () {\n /**\r\n * This event is fired when the mouse moves out of a cluster marker.\r\n * @name MarkerClusterer#mouseout\r\n * @param {Cluster} c The cluster that the mouse moved out of.\r\n * @event\r\n */\n google.maps.event.trigger(_this.cluster.getClusterer(), 'mouseout', _this.cluster);\n });\n };\n\n _proto.onRemove = function onRemove() {\n if (this.div && this.div.parentNode) {\n this.hide();\n\n if (this.boundsChangedListener !== null) {\n google.maps.event.removeListener(this.boundsChangedListener);\n }\n\n google.maps.event.clearInstanceListeners(this.div);\n this.div.parentNode.removeChild(this.div);\n this.div = null;\n }\n };\n\n _proto.draw = function draw() {\n if (this.visible && this.div !== null && this.center) {\n var _this$getPosFromLatLn = this.getPosFromLatLng(this.center),\n x = _this$getPosFromLatLn.x,\n y = _this$getPosFromLatLn.y;\n\n this.div.style.top = y + 'px';\n this.div.style.left = x + 'px';\n }\n };\n\n _proto.hide = function hide() {\n if (this.div) {\n this.div.style.display = 'none';\n }\n\n this.visible = false;\n };\n\n _proto.show = function show() {\n if (this.div && this.center) {\n var img = '',\n divTitle = ''; // NOTE: values must be specified in px units\n\n var bp = this.backgroundPosition.split(' ');\n var spriteH = parseInt(bp[0].replace(/^\\s+|\\s+$/g, ''), 10);\n var spriteV = parseInt(bp[1].replace(/^\\s+|\\s+$/g, ''), 10);\n var pos = this.getPosFromLatLng(this.center);\n\n if (this.sums === null || typeof this.sums.title === 'undefined' || this.sums.title === '') {\n divTitle = this.cluster.getClusterer().getTitle();\n } else {\n divTitle = this.sums.title;\n }\n\n this.div.style.cssText = this.createCss(pos);\n img = \"\r\n United States /{\" \"}\r\n {\r\n // always pan to the state if this link is clicked\r\n // (logic in GoogleMaps.jsx) won't always\r\n panToState(stateName);\r\n }}\r\n >\r\n {stateName}\r\n {\" \"}\r\n / {name}\r\n
\r\n {name}
\r\n\r\n
\r\n\r\n {content && {getDataIconImg(deptStatus)}
{\" \"}\r\n {R.cond([\r\n [R.equals(HAS_DATA), () => \"Data Available\"],\r\n [R.equals(HAS_FOIA_REJECTION), () => \"No Data Available\"],\r\n [R.equals(NO_DATA), () => \"No Data Available\"],\r\n ])(deptStatus)}\r\n {content}
}\r\n\r\n {(dataFiles.length > 0 || foiaRejections.length > 0) && (\r\n \r\n {dataFiles.map((dataFile) => {\r\n return
\r\n )}\r\n\r\n {uploadHelpText && (\r\n {uploadHelpText}
\r\n )}\r\n\r\n \r\n
\r\n\r\n {(!R.isNil(phone) || !R.isNil(email)) && (\r\n \r\n )}\r\n Upload Data
\r\n {/* unique key so it resets when the user changes depts */}\r\n {name &&\" + // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.sums.text + '
';\n this.div.title = divTitle;\n this.div.style.display = '';\n }\n\n this.visible = true;\n };\n\n _proto.useStyle = function useStyle(sums) {\n this.sums = sums;\n var style = this.styles[Math.min(this.styles.length - 1, Math.max(0, sums.index - 1))];\n this.url = style.url;\n this.height = style.height;\n this.width = style.width;\n this.anchorText = style.anchorText || [0, 0];\n this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2];\n this.textColor = style.textColor || 'black';\n this.textSize = style.textSize || 11;\n this.textDecoration = style.textDecoration || 'none';\n this.fontWeight = style.fontWeight || 'bold';\n this.fontStyle = style.fontStyle || 'normal';\n this.fontFamily = style.fontFamily || 'Arial,sans-serif';\n this.backgroundPosition = style.backgroundPosition || '0 0';\n };\n\n _proto.setCenter = function setCenter(center) {\n this.center = center;\n };\n\n _proto.createCss = function createCss(pos) {\n var style = [];\n style.push('cursor: pointer;');\n style.push('position: absolute; top: ' + pos.y + 'px; left: ' + pos.x + 'px;');\n style.push('width: ' + this.width + 'px; height: ' + this.height + 'px;');\n return style.join('');\n };\n\n _proto.getPosFromLatLng = function getPosFromLatLng(latlng) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n var pos = this.getProjection().fromLatLngToDivPixel(latlng);\n pos.x -= this.anchorIcon[1];\n pos.y -= this.anchorIcon[0]; // pos.x = pos.x\n // pos.y = pos.y\n\n return pos;\n };\n\n return ClusterIcon;\n}();\n\nvar Cluster = /*#__PURE__*/function () {\n function Cluster(markerClusterer) {\n this.markerClusterer = markerClusterer; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n this.map = this.markerClusterer.getMap();\n this.gridSize = this.markerClusterer.getGridSize();\n this.minClusterSize = this.markerClusterer.getMinimumClusterSize();\n this.averageCenter = this.markerClusterer.getAverageCenter();\n this.markers = [];\n this.center = undefined;\n this.bounds = null;\n this.clusterIcon = new ClusterIcon(this, this.markerClusterer.getStyles());\n }\n\n var _proto = Cluster.prototype;\n\n _proto.getSize = function getSize() {\n return this.markers.length;\n };\n\n _proto.getMarkers = function getMarkers() {\n return this.markers;\n };\n\n _proto.getCenter = function getCenter() {\n return this.center;\n };\n\n _proto.getMap = function getMap() {\n return this.map;\n };\n\n _proto.getClusterer = function getClusterer() {\n return this.markerClusterer;\n };\n\n _proto.getBounds = function getBounds() {\n var bounds = new google.maps.LatLngBounds(this.center, this.center);\n var markers = this.getMarkers();\n\n for (var i = 0; i < markers.length; i++) {\n var position = markers[i].getPosition();\n\n if (position) {\n bounds.extend(position);\n }\n }\n\n return bounds;\n };\n\n _proto.remove = function remove() {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.clusterIcon.setMap(null);\n this.markers = [];\n delete this.markers;\n };\n\n _proto.addMarker = function addMarker(marker) {\n if (this.isMarkerAlreadyAdded(marker)) {\n return false;\n }\n\n if (!this.center) {\n var position = marker.getPosition();\n\n if (position) {\n this.center = position;\n this.calculateBounds();\n }\n } else {\n if (this.averageCenter) {\n var _position = marker.getPosition();\n\n if (_position) {\n var length = this.markers.length + 1;\n this.center = new google.maps.LatLng((this.center.lat() * (length - 1) + _position.lat()) / length, (this.center.lng() * (length - 1) + _position.lng()) / length);\n this.calculateBounds();\n }\n }\n }\n\n marker.isAdded = true;\n this.markers.push(marker);\n var mCount = this.markers.length;\n var maxZoom = this.markerClusterer.getMaxZoom();\n\n if (maxZoom !== null && this.map.getZoom() > maxZoom) {\n // Zoomed in past max zoom, so show the marker.\n if (marker.getMap() !== this.map) {\n marker.setMap(this.map);\n }\n } else if (mCount < this.minClusterSize) {\n // Min cluster size not reached so show the marker.\n if (marker.getMap() !== this.map) {\n marker.setMap(this.map);\n }\n } else if (mCount === this.minClusterSize) {\n // Hide the markers that were showing.\n for (var i = 0; i < mCount; i++) {\n this.markers[i].setMap(null);\n }\n } else {\n marker.setMap(null);\n }\n\n return true;\n };\n\n _proto.isMarkerInClusterBounds = function isMarkerInClusterBounds(marker) {\n if (this.bounds !== null) {\n var position = marker.getPosition();\n\n if (position) {\n return this.bounds.contains(position);\n }\n }\n\n return false;\n };\n\n _proto.calculateBounds = function calculateBounds() {\n this.bounds = this.markerClusterer.getExtendedBounds(new google.maps.LatLngBounds(this.center, this.center));\n };\n\n _proto.updateIcon = function updateIcon() {\n var mCount = this.markers.length;\n var maxZoom = this.markerClusterer.getMaxZoom();\n\n if (maxZoom !== null && this.map.getZoom() > maxZoom) {\n this.clusterIcon.hide();\n return;\n }\n\n if (mCount < this.minClusterSize) {\n // Min cluster size not yet reached.\n this.clusterIcon.hide();\n return;\n }\n\n if (this.center) {\n this.clusterIcon.setCenter(this.center);\n }\n\n this.clusterIcon.useStyle(this.markerClusterer.getCalculator()(this.markers, this.markerClusterer.getStyles().length));\n this.clusterIcon.show();\n };\n\n _proto.isMarkerAlreadyAdded = function isMarkerAlreadyAdded(marker) {\n if (this.markers.includes) {\n return this.markers.includes(marker);\n } else {\n for (var i = 0; i < this.markers.length; i++) {\n if (marker === this.markers[i]) {\n return true;\n }\n }\n }\n\n return false;\n };\n\n return Cluster;\n}();\n/* global google */\n\n\nvar CALCULATOR = function CALCULATOR(markers, numStyles) {\n var index = 0;\n var title = '';\n var count = markers.length.toString();\n var dv = count;\n\n while (dv !== 0) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n dv = parseInt(dv, 10) / 10;\n index++;\n }\n\n index = Math.min(index, numStyles);\n return {\n text: count,\n index: index,\n title: title\n };\n};\n\nvar BATCH_SIZE = 2000;\nvar BATCH_SIZE_IE = 500;\nvar IMAGE_PATH = 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';\nvar IMAGE_EXTENSION = 'png';\nvar IMAGE_SIZES = [53, 56, 66, 78, 90];\nvar CLUSTERER_CLASS = 'cluster';\n\nvar Clusterer = /*#__PURE__*/function () {\n function Clusterer(map, optMarkers, optOptions) {\n if (optMarkers === void 0) {\n optMarkers = [];\n }\n\n if (optOptions === void 0) {\n optOptions = {};\n }\n\n this.extend(Clusterer, google.maps.OverlayView);\n this.markers = [];\n this.clusters = [];\n this.listeners = [];\n this.activeMap = null;\n this.ready = false;\n this.gridSize = optOptions.gridSize || 60;\n this.minClusterSize = optOptions.minimumClusterSize || 2;\n this.maxZoom = optOptions.maxZoom || null;\n this.styles = optOptions.styles || [];\n this.title = optOptions.title || '';\n this.zoomOnClick = true;\n\n if (optOptions.zoomOnClick !== undefined) {\n this.zoomOnClick = optOptions.zoomOnClick;\n }\n\n this.averageCenter = false;\n\n if (optOptions.averageCenter !== undefined) {\n this.averageCenter = optOptions.averageCenter;\n }\n\n this.ignoreHidden = false;\n\n if (optOptions.ignoreHidden !== undefined) {\n this.ignoreHidden = optOptions.ignoreHidden;\n }\n\n this.enableRetinaIcons = false;\n\n if (optOptions.enableRetinaIcons !== undefined) {\n this.enableRetinaIcons = optOptions.enableRetinaIcons;\n }\n\n this.imagePath = optOptions.imagePath || IMAGE_PATH;\n this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;\n this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;\n this.calculator = optOptions.calculator || CALCULATOR;\n this.batchSize = optOptions.batchSize || BATCH_SIZE;\n this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;\n this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;\n\n if (navigator.userAgent.toLowerCase().indexOf('msie') !== -1) {\n // Try to avoid IE timeout when processing a huge number of markers:\n this.batchSize = this.batchSizeIE;\n }\n\n this.timerRefStatic = null;\n this.setupStyles();\n this.addMarkers(optMarkers, true); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n this.setMap(map); // Note: this causes onAdd to be called\n }\n\n var _proto = Clusterer.prototype;\n\n _proto.onAdd = function onAdd() {\n var _this = this; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n\n this.activeMap = this.getMap();\n this.ready = true;\n this.repaint(); // Add the map event listeners\n\n this.listeners = [google.maps.event.addListener( // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.getMap(), 'zoom_changed', // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function () {\n _this.resetViewport(false); // Workaround for this Google bug: when map is at level 0 and \"-\" of\n // zoom slider is clicked, a \"zoom_changed\" event is fired even though\n // the map doesn't zoom out any further. In this situation, no \"idle\"\n // event is triggered so the cluster markers that have been removed\n // do not get redrawn. Same goes for a zoom in at maxZoom.\n\n\n if ( // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n _this.getMap().getZoom() === (_this.get('minZoom') || 0) || // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n _this.getMap().getZoom() === _this.get('maxZoom')) {\n google.maps.event.trigger(_this, 'idle');\n }\n }), google.maps.event.addListener( // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.getMap(), 'idle', // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function () {\n _this.redraw();\n })];\n } // eslint-disable-next-line @getify/proper-arrows/this\n ;\n\n _proto.onRemove = function onRemove() {\n // Put all the managed markers back on the map:\n for (var i = 0; i < this.markers.length; i++) {\n if (this.markers[i].getMap() !== this.activeMap) {\n this.markers[i].setMap(this.activeMap);\n }\n } // Remove all clusters:\n\n\n for (var _i = 0; _i < this.clusters.length; _i++) {\n this.clusters[_i].remove();\n }\n\n this.clusters = []; // Remove map event listeners:\n\n for (var _i2 = 0; _i2 < this.listeners.length; _i2++) {\n google.maps.event.removeListener(this.listeners[_i2]);\n }\n\n this.listeners = [];\n this.activeMap = null;\n this.ready = false;\n } // eslint-disable-next-line @typescript-eslint/no-empty-function\n ;\n\n _proto.draw = function draw() {};\n\n _proto.setupStyles = function setupStyles() {\n if (this.styles.length > 0) {\n return;\n }\n\n for (var i = 0; i < this.imageSizes.length; i++) {\n this.styles.push({\n url: this.imagePath + (i + 1) + '.' + this.imageExtension,\n height: this.imageSizes[i],\n width: this.imageSizes[i]\n });\n }\n };\n\n _proto.fitMapToMarkers = function fitMapToMarkers() {\n var markers = this.getMarkers();\n var bounds = new google.maps.LatLngBounds();\n\n for (var i = 0; i < markers.length; i++) {\n var position = markers[i].getPosition();\n\n if (position) {\n bounds.extend(position);\n }\n } // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n\n this.getMap().fitBounds(bounds);\n };\n\n _proto.getGridSize = function getGridSize() {\n return this.gridSize;\n };\n\n _proto.setGridSize = function setGridSize(gridSize) {\n this.gridSize = gridSize;\n };\n\n _proto.getMinimumClusterSize = function getMinimumClusterSize() {\n return this.minClusterSize;\n };\n\n _proto.setMinimumClusterSize = function setMinimumClusterSize(minimumClusterSize) {\n this.minClusterSize = minimumClusterSize;\n };\n\n _proto.getMaxZoom = function getMaxZoom() {\n return this.maxZoom;\n };\n\n _proto.setMaxZoom = function setMaxZoom(maxZoom) {\n this.maxZoom = maxZoom;\n };\n\n _proto.getStyles = function getStyles() {\n return this.styles;\n };\n\n _proto.setStyles = function setStyles(styles) {\n this.styles = styles;\n };\n\n _proto.getTitle = function getTitle() {\n return this.title;\n };\n\n _proto.setTitle = function setTitle(title) {\n this.title = title;\n };\n\n _proto.getZoomOnClick = function getZoomOnClick() {\n return this.zoomOnClick;\n };\n\n _proto.setZoomOnClick = function setZoomOnClick(zoomOnClick) {\n this.zoomOnClick = zoomOnClick;\n };\n\n _proto.getAverageCenter = function getAverageCenter() {\n return this.averageCenter;\n };\n\n _proto.setAverageCenter = function setAverageCenter(averageCenter) {\n this.averageCenter = averageCenter;\n };\n\n _proto.getIgnoreHidden = function getIgnoreHidden() {\n return this.ignoreHidden;\n };\n\n _proto.setIgnoreHidden = function setIgnoreHidden(ignoreHidden) {\n this.ignoreHidden = ignoreHidden;\n };\n\n _proto.getEnableRetinaIcons = function getEnableRetinaIcons() {\n return this.enableRetinaIcons;\n };\n\n _proto.setEnableRetinaIcons = function setEnableRetinaIcons(enableRetinaIcons) {\n this.enableRetinaIcons = enableRetinaIcons;\n };\n\n _proto.getImageExtension = function getImageExtension() {\n return this.imageExtension;\n };\n\n _proto.setImageExtension = function setImageExtension(imageExtension) {\n this.imageExtension = imageExtension;\n };\n\n _proto.getImagePath = function getImagePath() {\n return this.imagePath;\n };\n\n _proto.setImagePath = function setImagePath(imagePath) {\n this.imagePath = imagePath;\n };\n\n _proto.getImageSizes = function getImageSizes() {\n return this.imageSizes;\n };\n\n _proto.setImageSizes = function setImageSizes(imageSizes) {\n this.imageSizes = imageSizes;\n };\n\n _proto.getCalculator = function getCalculator() {\n return this.calculator;\n };\n\n _proto.setCalculator = function setCalculator(calculator) {\n this.calculator = calculator;\n };\n\n _proto.getBatchSizeIE = function getBatchSizeIE() {\n return this.batchSizeIE;\n };\n\n _proto.setBatchSizeIE = function setBatchSizeIE(batchSizeIE) {\n this.batchSizeIE = batchSizeIE;\n };\n\n _proto.getClusterClass = function getClusterClass() {\n return this.clusterClass;\n };\n\n _proto.setClusterClass = function setClusterClass(clusterClass) {\n this.clusterClass = clusterClass;\n };\n\n _proto.getMarkers = function getMarkers() {\n return this.markers;\n };\n\n _proto.getTotalMarkers = function getTotalMarkers() {\n return this.markers.length;\n };\n\n _proto.getClusters = function getClusters() {\n return this.clusters;\n };\n\n _proto.getTotalClusters = function getTotalClusters() {\n return this.clusters.length;\n };\n\n _proto.addMarker = function addMarker(marker, optNoDraw) {\n this.pushMarkerTo(marker);\n\n if (!optNoDraw) {\n this.redraw();\n }\n };\n\n _proto.addMarkers = function addMarkers(markers, optNoDraw) {\n for (var key in markers) {\n if (markers.hasOwnProperty(key)) {\n this.pushMarkerTo(markers[key]);\n }\n }\n\n if (!optNoDraw) {\n this.redraw();\n }\n };\n\n _proto.pushMarkerTo = function pushMarkerTo(marker) {\n var _this2 = this; // If the marker is draggable add a listener so we can update the clusters on the dragend:\n\n\n if (marker.getDraggable()) {\n // eslint-disable-next-line @getify/proper-arrows/name, @getify/proper-arrows/this\n google.maps.event.addListener(marker, 'dragend', function () {\n if (_this2.ready) {\n marker.isAdded = false;\n\n _this2.repaint();\n }\n });\n }\n\n marker.isAdded = false;\n this.markers.push(marker);\n };\n\n _proto.removeMarker_ = function removeMarker_(marker) {\n var index = -1;\n\n if (this.markers.indexOf) {\n index = this.markers.indexOf(marker);\n } else {\n for (var i = 0; i < this.markers.length; i++) {\n if (marker === this.markers[i]) {\n index = i;\n break;\n }\n }\n }\n\n if (index === -1) {\n // Marker is not in our list of markers, so do nothing:\n return false;\n }\n\n marker.setMap(null);\n this.markers.splice(index, 1); // Remove the marker from the list of managed markers\n\n return true;\n };\n\n _proto.removeMarker = function removeMarker(marker, optNoDraw) {\n var removed = this.removeMarker_(marker);\n\n if (!optNoDraw && removed) {\n this.repaint();\n }\n\n return removed;\n };\n\n _proto.removeMarkers = function removeMarkers(markers, optNoDraw) {\n var removed = false;\n\n for (var i = 0; i < markers.length; i++) {\n removed = removed || this.removeMarker_(markers[i]);\n }\n\n if (!optNoDraw && removed) {\n this.repaint();\n }\n\n return removed;\n };\n\n _proto.clearMarkers = function clearMarkers() {\n this.resetViewport(true);\n this.markers = [];\n };\n\n _proto.repaint = function repaint() {\n var oldClusters = this.clusters.slice();\n this.clusters = [];\n this.resetViewport(false);\n this.redraw(); // Remove the old clusters.\n // Do it in a timeout to prevent blinking effect.\n\n setTimeout(function timeout() {\n for (var i = 0; i < oldClusters.length; i++) {\n oldClusters[i].remove();\n }\n }, 0);\n };\n\n _proto.getExtendedBounds = function getExtendedBounds(bounds) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n var projection = this.getProjection(); // Convert the points to pixels and the extend out by the grid size.\n\n var trPix = projection.fromLatLngToDivPixel( // Turn the bounds into latlng.\n new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));\n trPix.x += this.gridSize;\n trPix.y -= this.gridSize;\n var blPix = projection.fromLatLngToDivPixel( // Turn the bounds into latlng.\n new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));\n blPix.x -= this.gridSize;\n blPix.y += this.gridSize; // Extend the bounds to contain the new bounds.\n\n bounds.extend( // Convert the pixel points back to LatLng nw\n projection.fromDivPixelToLatLng(trPix));\n bounds.extend( // Convert the pixel points back to LatLng sw\n projection.fromDivPixelToLatLng(blPix));\n return bounds;\n };\n\n _proto.redraw = function redraw() {\n // Redraws all the clusters.\n this.createClusters(0);\n };\n\n _proto.resetViewport = function resetViewport(optHide) {\n // Remove all the clusters\n for (var i = 0; i < this.clusters.length; i++) {\n this.clusters[i].remove();\n }\n\n this.clusters = []; // Reset the markers to not be added and to be removed from the map.\n\n for (var _i3 = 0; _i3 < this.markers.length; _i3++) {\n var marker = this.markers[_i3];\n marker.isAdded = false;\n\n if (optHide) {\n marker.setMap(null);\n }\n }\n };\n\n _proto.distanceBetweenPoints = function distanceBetweenPoints(p1, p2) {\n var R = 6371; // Radius of the Earth in km\n\n var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;\n var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;\n var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);\n return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));\n };\n\n _proto.isMarkerInBounds = function isMarkerInBounds(marker, bounds) {\n var position = marker.getPosition();\n\n if (position) {\n return bounds.contains(position);\n }\n\n return false;\n };\n\n _proto.addToClosestCluster = function addToClosestCluster(marker) {\n var cluster;\n var distance = 40000; // Some large number\n\n var clusterToAddTo = null;\n\n for (var i = 0; i < this.clusters.length; i++) {\n cluster = this.clusters[i];\n var center = cluster.getCenter();\n var position = marker.getPosition();\n\n if (center && position) {\n var d = this.distanceBetweenPoints(center, position);\n\n if (d < distance) {\n distance = d;\n clusterToAddTo = cluster;\n }\n }\n }\n\n if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {\n clusterToAddTo.addMarker(marker);\n } else {\n cluster = new Cluster(this);\n cluster.addMarker(marker);\n this.clusters.push(cluster);\n }\n };\n\n _proto.createClusters = function createClusters(iFirst) {\n var _this3 = this;\n\n if (!this.ready) {\n return;\n } // Cancel previous batch processing if we're working on the first batch:\n\n\n if (iFirst === 0) {\n /**\r\n * This event is fired when the Clusterer begins\r\n * clustering markers.\r\n * @name Clusterer#clusteringbegin\r\n * @param {Clusterer} mc The Clusterer whose markers are being clustered.\r\n * @event\r\n */\n google.maps.event.trigger(this, 'clusteringbegin', this);\n\n if (this.timerRefStatic !== null) {\n window.clearTimeout(this.timerRefStatic);\n delete this.timerRefStatic;\n }\n } // Get our current map view bounds.\n // Create a new bounds object so we don't affect the map.\n //\n // See Comments 9 & 11 on Issue 3651 relating to this workaround for a Google Maps bug:\n\n\n var mapBounds = // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.getMap().getZoom() > 3 ? new google.maps.LatLngBounds( // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.getMap().getBounds().getSouthWest(), // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.getMap().getBounds().getNorthEast()) : new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472, -178.48388434375), new google.maps.LatLng(-85.08136444384544, 178.00048865625));\n var bounds = this.getExtendedBounds(mapBounds);\n var iLast = Math.min(iFirst + this.batchSize, this.markers.length);\n\n for (var i = iFirst; i < iLast; i++) {\n var marker = this.markers[i];\n\n if (!marker.isAdded && this.isMarkerInBounds(marker, bounds)) {\n if (!this.ignoreHidden || this.ignoreHidden && marker.getVisible()) {\n this.addToClosestCluster(marker);\n }\n }\n }\n\n if (iLast < this.markers.length) {\n this.timerRefStatic = window.setTimeout( // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function () {\n _this3.createClusters(iLast);\n }, 0);\n } else {\n this.timerRefStatic = null;\n /**\r\n * This event is fired when the Clusterer stops\r\n * clustering markers.\r\n * @name Clusterer#clusteringend\r\n * @param {Clusterer} mc The Clusterer whose markers are being clustered.\r\n * @event\r\n */\n\n google.maps.event.trigger(this, 'clusteringend', this);\n\n for (var _i4 = 0; _i4 < this.clusters.length; _i4++) {\n this.clusters[_i4].updateIcon();\n }\n }\n };\n\n _proto.extend = function extend(obj1, obj2) {\n return function applyExtend(object) {\n // eslint-disable-next-line guard-for-in\n for (var property in object.prototype) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n this.prototype[property] = object.prototype[property];\n } // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n\n return this;\n }.apply(obj1, [obj2]);\n };\n\n return Clusterer;\n}();\n\nexport { Cluster, ClusterIcon, Clusterer };","/**\r\n * Copyright 2019 Google LLC. All Rights Reserved.\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at.\r\n *\r\n * Http://www.apache.org/licenses/LICENSE-2.0.\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\n\n/**\r\n * [[Loader]] makes it easier to add Google Maps JavaScript API to your application\r\n * dynamically using\r\n * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).\r\n * It works by dynamically creating and appending a script node to the the\r\n * document head and wrapping the callback function so as to return a promise.\r\n *\r\n * ```\r\n * const loader = new Loader({\r\n * apiKey: \"\",\r\n * version: \"weekly\",\r\n * libraries: [\"places\"]\r\n * });\r\n *\r\n * loader.load().then(() => {\r\n * const map = new google.maps.Map(...)\r\n * })\r\n * ```\r\n */\nvar Loader =\n/** @class */\nfunction () {\n /**\r\n * Creates an instance of Loader using [[LoaderOptions]]. No defaults are set\r\n * using this library, instead the defaults are set by the Google Maps\r\n * JavaScript API server.\r\n *\r\n * ```\r\n * const loader = Loader({apiKey, version: 'weekly', libraries: ['places']});\r\n * ```\r\n */\n function Loader(_a) {\n var apiKey = _a.apiKey,\n channel = _a.channel,\n _b = _a.id,\n id = _b === void 0 ? \"__googleMapsScriptId\" : _b,\n _c = _a.libraries,\n libraries = _c === void 0 ? [] : _c,\n language = _a.language,\n region = _a.region,\n version = _a.version,\n mapIds = _a.mapIds,\n nonce = _a.nonce,\n _d = _a.url,\n url = _d === void 0 ? \"https://maps.googleapis.com/maps/api/js\" : _d;\n this.CALLBACK = \"__googleMapsCallback\";\n this.callbacks = [];\n this.done = false;\n this.loading = false;\n this.version = version;\n this.apiKey = apiKey;\n this.channel = channel;\n this.id = id;\n this.libraries = libraries;\n this.language = language;\n this.region = region;\n this.mapIds = mapIds;\n this.nonce = nonce;\n this.url = url;\n }\n /**\r\n * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].\r\n *\r\n * @ignore\r\n */\n\n\n Loader.prototype.createUrl = function () {\n var url = this.url;\n url += \"?callback=\" + this.CALLBACK;\n\n if (this.apiKey) {\n url += \"&key=\" + this.apiKey;\n }\n\n if (this.channel) {\n url += \"&channel=\" + this.channel;\n }\n\n if (this.libraries.length > 0) {\n url += \"&libraries=\" + this.libraries.join(\",\");\n }\n\n if (this.language) {\n url += \"&language=\" + this.language;\n }\n\n if (this.region) {\n url += \"®ion=\" + this.region;\n }\n\n if (this.version) {\n url += \"&v=\" + this.version;\n }\n\n if (this.mapIds) {\n url += \"&map_ids=\" + this.mapIds.join(\",\");\n }\n\n return url;\n };\n /**\r\n * Load the Google Maps JavaScript API script and return a Promise.\r\n */\n\n\n Loader.prototype.load = function () {\n return this.loadPromise();\n };\n /**\r\n * Load the Google Maps JavaScript API script and return a Promise.\r\n *\r\n * @ignore\r\n */\n\n\n Loader.prototype.loadPromise = function () {\n var _this = this;\n\n return new Promise(function (resolve, reject) {\n _this.loadCallback(function (err) {\n if (!err) {\n resolve();\n } else {\n reject(err);\n }\n });\n });\n };\n /**\r\n * Load the Google Maps JavaScript API script with a callback.\r\n */\n\n\n Loader.prototype.loadCallback = function (fn) {\n this.callbacks.push(fn);\n this.execute();\n };\n /**\r\n * Set the script on document.\r\n */\n\n\n Loader.prototype.setScript = function () {\n if (this.id && document.getElementById(this.id)) {\n this.callback();\n return;\n }\n\n var url = this.createUrl();\n var script = document.createElement(\"script\");\n script.id = this.id;\n script.type = \"text/javascript\";\n script.src = url;\n script.onerror = this.loadErrorCallback.bind(this);\n script.defer = true;\n script.async = true;\n\n if (this.nonce) {\n script.nonce = this.nonce;\n }\n\n document.head.appendChild(script);\n };\n\n Loader.prototype.loadErrorCallback = function (e) {\n this.onerrorEvent = e;\n this.callback();\n };\n\n Loader.prototype.setCallback = function () {\n window.__googleMapsCallback = this.callback.bind(this);\n };\n\n Loader.prototype.callback = function () {\n var _this = this;\n\n this.done = true;\n this.loading = false;\n this.callbacks.forEach(function (cb) {\n cb(_this.onerrorEvent);\n });\n this.callbacks = [];\n };\n\n Loader.prototype.execute = function () {\n if (this.done) {\n this.callback();\n } else {\n if (this.loading) ;else {\n this.loading = true;\n this.setCallback();\n this.setScript();\n }\n }\n };\n\n return Loader;\n}();\n\nexport { Loader };","var InfoBox = /*#__PURE__*/function () {\n function InfoBox(options) {\n if (options === void 0) {\n options = {};\n }\n\n this.extend(InfoBox, google.maps.OverlayView); // Standard options (in common with google.maps.InfoWindow):\n\n this.content = options.content || '';\n this.disableAutoPan = options.disableAutoPan || false;\n this.maxWidth = options.maxWidth || 0;\n this.pixelOffset = options.pixelOffset || new google.maps.Size(0, 0);\n this.position = options.position || new google.maps.LatLng(0, 0);\n this.zIndex = options.zIndex || null; // Additional options (unique to InfoBox):\n\n this.boxClass = options.boxClass || 'infoBox';\n this.boxStyle = options.boxStyle || {};\n this.closeBoxMargin = options.closeBoxMargin || '2px';\n this.closeBoxURL = options.closeBoxURL || 'http://www.google.com/intl/en_us/mapfiles/close.gif';\n\n if (options.closeBoxURL === '') {\n this.closeBoxURL = '';\n }\n\n this.infoBoxClearance = options.infoBoxClearance || new google.maps.Size(1, 1);\n\n if (typeof options.visible === 'undefined') {\n if (typeof options.isHidden === 'undefined') {\n options.visible = true;\n } else {\n options.visible = !options.isHidden;\n }\n }\n\n this.isHidden = !options.visible;\n this.alignBottom = options.alignBottom || false;\n this.pane = options.pane || 'floatPane';\n this.enableEventPropagation = options.enableEventPropagation || false;\n this.div = null;\n this.closeListener = null;\n this.moveListener = null;\n this.mapListener = null;\n this.contextListener = null;\n this.eventListeners = null;\n this.fixedWidthSet = null;\n }\n\n var _proto = InfoBox.prototype;\n\n _proto.createInfoBoxDiv = function createInfoBoxDiv() {\n var _this = this; // This handler prevents an event in the InfoBox from being passed on to the map.\n\n\n function cancelHandler(event) {\n event.cancelBubble = true;\n\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n } // This handler ignores the current event in the InfoBox and conditionally prevents\n // the event from being passed on to the map. It is used for the contextmenu event.\n // eslint-disable-next-line @getify/proper-arrows/this\n\n\n var ignoreHandler = function ignoreHandler(event) {\n event.returnValue = false;\n\n if (event.preventDefault) {\n event.preventDefault();\n }\n\n if (!_this.enableEventPropagation) {\n cancelHandler(event);\n }\n };\n\n if (!this.div) {\n this.div = document.createElement('div');\n this.setBoxStyle();\n\n if (typeof this.content === 'string') {\n this.div.innerHTML = this.getCloseBoxImg() + this.content;\n } else {\n this.div.innerHTML = this.getCloseBoxImg();\n this.div.appendChild(this.content);\n } // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n // @ts-ignore\n\n\n var panes = this.getPanes();\n panes[this.pane].appendChild(this.div); // Add the InfoBox div to the DOM\n\n this.addClickHandler();\n\n if (this.div.style.width) {\n this.fixedWidthSet = true;\n } else {\n if (this.maxWidth !== 0 && this.div.offsetWidth > this.maxWidth) {\n this.div.style.width = this.maxWidth + 'px';\n this.fixedWidthSet = true;\n } else {\n // The following code is needed to overcome problems with MSIE\n var bw = this.getBoxWidths();\n this.div.style.width = this.div.offsetWidth - bw.left - bw.right + 'px';\n this.fixedWidthSet = false;\n }\n }\n\n this.panBox(this.disableAutoPan);\n\n if (!this.enableEventPropagation) {\n this.eventListeners = []; // Cancel event propagation.\n // Note: mousemove not included (to resolve Issue 152)\n\n var events = ['mousedown', 'mouseover', 'mouseout', 'mouseup', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'];\n\n for (var i = 0; i < events.length; i++) {\n this.eventListeners.push(google.maps.event.addDomListener(this.div, events[i], cancelHandler));\n } // Workaround for Google bug that causes the cursor to change to a pointer\n // when the mouse moves over a marker underneath InfoBox.\n\n\n this.eventListeners.push(google.maps.event.addDomListener(this.div, 'mouseover', // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name\n function () {\n if (_this.div) {\n _this.div.style.cursor = 'default';\n }\n }));\n }\n\n this.contextListener = google.maps.event.addDomListener(this.div, 'contextmenu', ignoreHandler);\n /**\r\n * This event is fired when the DIV containing the InfoBox's content is attached to the DOM.\r\n * @name InfoBox#domready\r\n * @event\r\n */\n\n google.maps.event.trigger(this, 'domready');\n }\n };\n\n _proto.getCloseBoxImg = function getCloseBoxImg() {\n var img = '';\n\n if (this.closeBoxURL !== '') {\n img = '\r\n
\r\n\r\n \r\n {legends.map((legend) => {\r\n const { id, isActive, label } = legend;\r\n\r\n return (\r\n onLegendChange(id)}\r\n >\r\n \r\n {getDataIconImg(id)}\r\n
{\" \"}\r\n {label}\r\n \r\n );\r\n })}\r\n \r\n setZoom((zoom) => zoom + 1)}\r\n disabled={zoom >= MAX_ZOOM}\r\n title=\"Zoom in\"\r\n aria-label=\"Zoom in\"\r\n >\r\n {plus}\r\n \r\n setZoom((zoom) => zoom - 1)}\r\n disabled={zoom <= MIN_ZOOM}\r\n title=\"Zoom out\"\r\n aria-label=\"Zoom out\"\r\n >\r\n {minus}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nMapOverlay.propTypes = propTypes;\r\nexport default MapOverlay;\r\n\r\nconst plus = (\r\n \r\n {getDataIconImg(getDeptStatus(selectedDeptData))}\r\n
\r\n {selectedDeptData.name}
\r\n\r\n Error loading map
\r\n ) : isLoaded ? (\r\n // eslint disable for onMouseOut\r\n /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */\r\n Loading...
\r\n )}\r\n\r\n {hoveredDept.name}
\r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nGoogleMap.propTypes = propTypes;\r\nexport default GoogleMap;\r\n","import { useEffect, useRef } from \"react\";\r\n\r\n// https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state\r\nexport default function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n}\r\n","import { useMemo } from \"react\";\r\nimport cx from \"classnames\";\r\nimport { node } from \"prop-types\";\r\nimport \"./map-panel.scss\";\r\n\r\nimport useBoundingClientRect from \"../../common/useBoundingClientRect.js\";\r\nimport { useMapScroll } from \"../MapScroll/mapScrollContext.jsx\";\r\nimport useWindowSize from \"../../common/useWindowSize.js\";\r\n\r\nimport GoogleMap from \"../GoogleMap/GoogleMap.jsx\";\r\nimport Search from \"../Search/Search.jsx\";\r\n\r\nconst propTypes = {\r\n children: node,\r\n};\r\n\r\nconst MapPanel = (props) => {\r\n const { children } = props;\r\n\r\n const { mapHolderRef, mapPanelRef } = useMapScroll();\r\n\r\n const [{ width: mapHolderWidth }] = useBoundingClientRect(mapHolderRef);\r\n\r\n const { mapHeight, sideBySide } = useResponsiveMap();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {children}\r\n \r\n \r\n {mapHolderWidth && mapHeight && (\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nMapPanel.propTypes = propTypes;\r\nexport default MapPanel;\r\n\r\nfunction useResponsiveMap() {\r\n const [windowWidth, windowHeight] = useWindowSize();\r\n\r\n // 910 matches $bp-large-min\r\n const isLargeScreen = useMemo(() => windowWidth >= 910, [windowWidth]);\r\n\r\n const mapHeight = useMemo(() => {\r\n return isLargeScreen ? windowHeight : 500;\r\n }, [isLargeScreen, windowHeight]);\r\n\r\n return { mapHeight, sideBySide: isLargeScreen };\r\n}\r\n","import * as R from \"ramda\";\r\nimport { node, number } from \"prop-types\";\r\n\r\nimport \"./progress-chart.scss\";\r\n\r\nimport { arc } from \"d3-shape\";\r\nimport { formatPercentageNice } from \"../../common/format.js\";\r\n\r\nimport useBoundingClientRect from \"../../common/useBoundingClientRect.js\";\r\n\r\nconst propTypes = {\r\n children: node,\r\n collected: number, // show this instead of percentage if provided\r\n percentage: number.isRequired, // 0-1\r\n title: node,\r\n};\r\n\r\nconst ProgressChart = (props) => {\r\n const { children, collected, percentage, title } = props;\r\n\r\n const [{ width = 0 }, containerRef] = useBoundingClientRect();\r\n\r\n // max size\r\n const size = R.min(width, 380);\r\n\r\n const arcGenerator = arc();\r\n\r\n const backgroundCircle = arcGenerator({\r\n innerRadius: size / 2 - 32,\r\n outerRadius: size / 2,\r\n startAngle: 0,\r\n endAngle: Math.PI * 2,\r\n });\r\n\r\n const percentageArc = arcGenerator({\r\n innerRadius: size / 2 - 32,\r\n outerRadius: size / 2,\r\n startAngle: 0,\r\n endAngle: Math.PI * 2 * percentage,\r\n });\r\n\r\n return (\r\n \r\n 0 ? { width: size, height: size } : {}}\r\n >\r\n {size > 0 && (\r\n
\r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nProgressChart.propTypes = propTypes;\r\nexport default ProgressChart;\r\n","import { useMemo } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport { useStaticQuery, graphql } from \"gatsby\";\r\n\r\nimport {} from \"prop-types\";\r\nimport \"./progress-section.scss\";\r\nimport \"../../scss/fancy-bold.scss\";\r\n\r\nimport { formatNumber } from \"../../common/format.js\";\r\nimport { useContentfulDepartments } from \"../../common/contentfulDepartments.jsx\";\r\nimport { getDeptStatus, HAS_DATA } from \"../../common/dept.jsx\";\r\nimport { extractRichText } from \"../../common/contentful-extract.jsx\";\r\nimport { useMapScroll } from \"../MapScroll/mapScrollContext.jsx\";\r\n\r\nimport Container5050 from \"../Container/Container5050.jsx\";\r\nimport ProgressChart from \"../ProgressChart/ProgressChart.jsx\";\r\n\r\nconst propTypes = {};\r\n\r\n// the # of depts to collect data for in 2021\r\nconst GOAL = 1000;\r\n\r\nconst Progress = (props) => {\r\n const allDepartments = useContentfulDepartments();\r\n\r\n const { scrollToInfoPanel } = useMapScroll();\r\n\r\n const { collected } = useMemo(() => {\r\n return R.applySpec({\r\n collected: R.compose(\r\n R.length,\r\n R.filter((dept) => getDeptStatus(dept) === HAS_DATA),\r\n ),\r\n total: R.length,\r\n })(allDepartments);\r\n }, [allDepartments]);\r\n\r\n const percentage = Math.min(1, collected / GOAL);\r\n\r\n const contentfulData = useStaticQuery(query);\r\n\r\n const data = R.compose(\r\n R.evolve({\r\n progressSectionTitle: extractRichText,\r\n progressText: extractRichText,\r\n }),\r\n R.defaultTo({}),\r\n R.prop(\"contentfulMapPage\"),\r\n )(contentfulData);\r\n\r\n const { progressSectionTitle, progressText } = data;\r\n\r\n return (\r\n \r\n {title && 350 ? 90 : width > 275 ? 75 : 60 }}\r\n >\r\n {!R.isNil(collected) ? collected : formatPercentageNice(percentage)}\r\n
\r\n\r\n {title}
}\r\n\r\n {children}
\r\n \r\n scrollToInfoPanel()}\r\n >\r\n Start Searching Below\r\n \r\n
\r\n \r\n }\r\n right={\r\n {progressSectionTitle}
\r\n\r\n {progressText}\r\n\r\n\r\n \r\n \r\n\r\n
\r\n }\r\n />\r\n of our goal has been reached for 2021.
\r\n\r\n Our goal is to collect {formatNumber(GOAL)} data sets in 2021.{\" \"}\r\n \r\n {formatNumber(collected)}/{formatNumber(GOAL)}\r\n {\" \"}\r\n data sets have been collected for use of force data across police\r\n departments in the United States so far.\r\n
\r\n {content}
;\r\n};\r\n\r\nGettingStarted.propTypes = propTypes;\r\nexport default GettingStarted;\r\n","import * as R from \"ramda\";\r\nimport { useStaticQuery, graphql } from \"gatsby\";\r\nimport { extractRichText } from \"./contentful-extract.jsx\";\r\n\r\nexport default function useContentfulLocationInfo(locationName) {\r\n // can't use graphql variables in useStaticQuery, so get all the content\r\n // and do the filtering below\r\n // https://www.gatsbyjs.org/docs/use-static-query/\r\n const contentfulData = useStaticQuery(graphql`\r\n {\r\n allContentfulLocation {\r\n edges {\r\n node {\r\n location\r\n content {\r\n raw\r\n references {\r\n ...Link\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n `);\r\n\r\n return R.compose(\r\n R.defaultTo({}),\r\n R.find(R.propEq(\"locationName\", locationName)),\r\n R.map(\r\n R.compose(\r\n R.applySpec({\r\n locationName: R.prop(\"location\"),\r\n content: R.compose(extractRichText, R.prop(\"content\")),\r\n }),\r\n R.prop(\"node\"),\r\n ),\r\n ),\r\n R.path([\"allContentfulLocation\", \"edges\"]),\r\n )(contentfulData);\r\n}\r\n","import { useMemo } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport { string } from \"prop-types\";\r\nimport \"./info-panel.scss\";\r\n\r\nimport { getDeptStatus, HAS_DATA } from \"../../common/dept.jsx\";\r\nimport { formatNumber, formatPercentage } from \"../../common/format.js\";\r\nimport { getMapEntityUrl } from \"../../common/mapUrl.js\";\r\nimport { lookupStateName } from \"../../common/states.js\";\r\n\r\nimport GettingStarted from \"./GettingStarted.jsx\";\r\nimport { Link } from \"@reach/router\";\r\nimport InfoTooltip from \"../InfoTooltip/InfoTooltip.jsx\";\r\nimport ProgressChart from \"../ProgressChart/ProgressChart.jsx\";\r\nimport { useContentfulDepartments } from \"../../common/contentfulDepartments.jsx\";\r\nimport useContentfulLocationInfo from \"../../common/useContentfulLocationInfo.js\";\r\nimport { useGoogleMapContext } from \"../GoogleMap/googleMapContext.jsx\";\r\n\r\nconst propTypes = {\r\n abbreviation: string.isRequired,\r\n};\r\n\r\nconst StateInfo = (props) => {\r\n const { abbreviation } = props;\r\n const stateName = lookupStateName(abbreviation);\r\n\r\n const allDepartments = useContentfulDepartments();\r\n const { content } = useContentfulLocationInfo(stateName);\r\n\r\n const { panToState } = useGoogleMapContext();\r\n\r\n const { collected, total } = useMemo(() => {\r\n return R.compose(\r\n R.applySpec({\r\n collected: R.compose(\r\n R.length,\r\n R.filter((dept) => getDeptStatus(dept) === HAS_DATA),\r\n ),\r\n total: R.length,\r\n }),\r\n R.filter(R.propEq(\"stateAbbreviation\", abbreviation)),\r\n )(allDepartments);\r\n }, [abbreviation, allDepartments]);\r\n\r\n const percentage = collected / total;\r\n\r\n return (\r\n \r\n \r\n of Police Department Data in {stateName} has been collected\r\n \r\n
\r\n );\r\n};\r\n\r\nStateInfo.propTypes = propTypes;\r\nexport default StateInfo;\r\n","import { useMemo } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport {} from \"prop-types\";\r\n\r\nimport \"./info-panel.scss\";\r\n\r\nimport { getDeptStatus, HAS_DATA } from \"../../common/dept.jsx\";\r\nimport { formatNumber, formatPercentage } from \"../../common/format.js\";\r\n\r\n// import ProgressChart from \"../ProgressChart/ProgressChart.jsx\";\r\nimport { useContentfulDepartments } from \"../../common/contentfulDepartments.jsx\";\r\nimport useContentfulLocationInfo from \"../../common/useContentfulLocationInfo.js\";\r\n\r\nconst propTypes = {};\r\n\r\nconst USInfo = (props) => {\r\n const allDepartments = useContentfulDepartments();\r\n const { content } = useContentfulLocationInfo(\"United States\");\r\n\r\n const { collected, total } = useMemo(() => {\r\n return R.applySpec({\r\n collected: R.compose(\r\n R.length,\r\n R.filter((dept) => getDeptStatus(dept) === HAS_DATA),\r\n ),\r\n total: R.length,\r\n })(allDepartments);\r\n }, [allDepartments]);\r\n\r\n const percentage = collected / total;\r\n\r\n return (\r\n \r\n United States /{\" \"}\r\n {\r\n // always pan to the state if this link is clicked\r\n // (logic in GoogleMaps.jsx) won't always\r\n panToState(stateName);\r\n }}\r\n >\r\n {stateName}\r\n \r\n
\r\n {stateName}
\r\n\r\n
\r\n\r\n {stateName} Overview
\r\n\r\n Accountable Now has collected data for{\" \"}\r\n \r\n {formatNumber(collected)} out of {formatNumber(total)}\r\n \r\n
{content}
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nUSInfo.propTypes = propTypes;\r\nexport default USInfo;\r\n","import { useMemo } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport { useStaticQuery, graphql } from \"gatsby\";\r\n\r\nimport \"./map-page.scss\";\r\n\r\nimport {\r\n getMapIdType,\r\n useMapUrlId,\r\n MAP_DEPARTMENT,\r\n MAP_STATE,\r\n MAP_US,\r\n} from \"../../common/mapUrl.js\";\r\n\r\nimport { extractBanner } from \"../../common/contentful-extract.jsx\";\r\nimport { useContentfulDepartments } from \"../../common/contentfulDepartments.jsx\";\r\nimport { navigateToMapEntity } from \"../../common/mapUrl.js\";\r\n\r\nimport DeptInfo from \"../InfoPanel/DeptInfo.jsx\";\r\nimport Banner from \"../Banner/Banner.jsx\";\r\nimport MapPanel from \"../MapPanel/MapPanel.jsx\";\r\nimport Page from \"../Page/Page.jsx\";\r\nimport ProgressSection from \"./ProgressSection.jsx\";\r\nimport StateInfo from \"../InfoPanel/StateInfo.jsx\";\r\nimport USInfo from \"../InfoPanel/USInfo.jsx\";\r\n\r\nconst MapPage = () => {\r\n const mapUrlId = useMapUrlId();\r\n const mapUrlType = getMapIdType(mapUrlId);\r\n\r\n const allDepartments = useContentfulDepartments();\r\n\r\n const panelInfo = useMemo(() => {\r\n // Don't render anything on the server so React doesn't get confused when it\r\n // loads and renders the panel based on the url\r\n // This has happened to me before https://github.com/gatsbyjs/gatsby/issues/14601\r\n if (typeof window === \"undefined\") {\r\n return null;\r\n }\r\n\r\n if (mapUrlType === MAP_US) {\r\n return United States
\r\n\r\n {/*\r\n \r\n of National Police Department Data has been collected\r\n \r\n
*/}\r\n\r\n \r\n
\r\n\r\n {content && See Our Progress
\r\n\r\n Accountable Now has collected data for{\" \"}\r\n \r\n {formatNumber(collected)} out of {formatNumber(total)}\r\n {\" \"}\r\n law enforcement agencies in the United States and its territories.\r\n This accounts for {formatPercentage(percentage)} of\r\n the national data across states, counties, and city police\r\n departments.\r\n
\r\n{content}
}\r\n