setOpenModal(false)}\n style={{\n position: 'absolute',\n bgcolor: 'white',\n top: '0%',\n left: '0%'\n }}\n >\n {body}\n \n \n )}\n \n );\n};\nTableComponent.defaultProps = {\n rowsInitial: 5,\n isMapProp: false,\n ViewHtml: false\n};\nTableComponent.propTypes = {\n isMapProp: PropTypes.bool,\n layer: PropTypes.object.isRequired,\n rowsInitial: PropTypes.number,\n ViewHtml: PropTypes.bool\n};\n\nexport default TableComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport EmptyTableAlert from '../EmptyTableAlert';\nimport List from '../List';\n\nconst TableContent = ({ isTableEmpty, itemName, numberOfColumns, ...listProps }) => {\n if (!isTableEmpty) return
;\n return ;\n};\nTableContent.propTypes = {\n isTableEmpty: PropTypes.bool.isRequired,\n itemName: PropTypes.string.isRequired,\n numberOfColumns: PropTypes.number.isRequired\n};\n\nexport default TableContent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport uuid from 'uuid/v1';\nimport { Button } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport TableHeaderCell from '../../atoms/TableHeaderCell';\nimport { useStyles } from '../../../styles/mapStylesCustom';\n\nconst TableHeaderRow = ({\n tableHeaders,\n allSelected,\n hasSelectAllButton,\n hasTrash,\n openTrash,\n selectAll,\n sort,\n handleSort\n}) => {\n const classes = useStyles();\n return (\n \n \n {hasSelectAllButton && (\n | \n \n \n \n | \n )}\n {tableHeaders.map(cell => (\n \n ))}\n \n \n \n \n | \n
\n \n );\n};\n\nTableHeaderRow.defaultProps = {\n allSelected: false,\n hasSelectAllButton: false,\n hasTrash: false,\n openTrash: () => console.error('no trash to open'),\n selectAll: () => console.error('nothing to select'),\n sort: { name: 1 },\n handleSort: () => console.error('no sorting function'),\n isFree: false\n};\n\nTableHeaderRow.propTypes = {\n tableHeaders: PropTypes.array.isRequired,\n allSelected: PropTypes.bool,\n hasSelectAllButton: PropTypes.bool,\n hasTrash: PropTypes.bool,\n openTrash: PropTypes.func,\n selectAll: PropTypes.func,\n sort: PropTypes.object,\n handleSort: PropTypes.func,\n isFree: PropTypes.bool\n};\n\nexport default TableHeaderRow;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Table, Alert } from 'react-bootstrap';\n\nimport ItemList from '../ItemList';\nimport Trash from '../Trash';\nimport TableHeaderRow from '../TableHeaderRow';\nimport TableContent from '../TableContent';\nimport TablePagination from '../TablePagination';\nimport TablePageHeader from '../TablePageHeader';\n\nconst TableList = ({ childProps, isFreeUserAtLimit, isPaginationOn, isFree }) => {\n return (\n <>\n \n \n \n \n {isFreeUserAtLimit && (\n Upgrade Plan to Add More Items (Check Recycle Bin)\n )}\n \n \n \n );\n};\n\nTableList.defaultProps = {\n isPaginationOn: false,\n isFree: false\n};\n\nTableList.propTypes = {\n childProps: PropTypes.object.isRequired,\n isFreeUserAtLimit: PropTypes.bool.isRequired,\n isPaginationOn: PropTypes.bool,\n isFree: PropTypes.bool\n};\n\nexport default TableList;\n","import React from 'react';\nimport { isEmpty } from 'lodash';\nimport PropTypes from 'prop-types';\n\nimport ButtonFilter from '../../atoms/ButtonFilter';\nimport ButtonHideCompleted from '../../atoms/ButtonHideCompleted';\nimport ButtonImport from '../../atoms/ButtonImport';\nimport ButtonNewItem from '../../atoms/ButtonNewItem';\nimport PageHeader from '../../atoms/PageHeader';\nimport SearchInput from '../SearchInput';\nimport ButtonNewItemFromDownload from '../../atoms/ButtonNewItemFromDownload';\n\nconst TablePageHeader = props => {\n const {\n completeItemsCount,\n createdNewItem,\n filterOptions,\n hasFilterButton,\n handleImport,\n hasImportButton,\n handleSearch,\n hasSearchInput,\n hasToggleHideCompletedButton,\n isCompleteItemHidden,\n isPremium,\n isPublic,\n itemName,\n newItems,\n uploadGeojson,\n searching,\n toggleDisplayCompleted\n } = props;\n let finalItemName = '';\n if (newItems.length === 1) {\n finalItemName = newItems[0].itemName;\n } else {\n finalItemName = itemName;\n }\n\n const noHeader = isEmpty(newItems) && !hasImportButton && !hasSearchInput;\n if (noHeader) return '';\n return (\n \n {hasToggleHideCompletedButton && (\n \n )}\n \n {hasFilterButton && }\n {hasImportButton && (\n \n )}\n {!isEmpty(newItems) && !isPublic && (\n <>\n \n {uploadGeojson === true && createdNewItem === true && (\n \n )}\n \n )}\n {hasSearchInput && (\n \n )}\n
\n \n );\n};\n\nTablePageHeader.propTypes = {\n createdNewItem: PropTypes.bool,\n completeItemsCount: PropTypes.number,\n filterOptions: PropTypes.object,\n handleImport: PropTypes.func,\n handleSearch: PropTypes.func,\n hasFilterButton: PropTypes.bool,\n hasImportButton: PropTypes.bool,\n hasSearchInput: PropTypes.bool,\n hasToggleHideCompletedButton: PropTypes.bool,\n isCompleteItemHidden: PropTypes.bool,\n isPremium: PropTypes.bool.isRequired,\n isPublic: PropTypes.bool,\n itemName: PropTypes.string,\n newItems: PropTypes.array.isRequired,\n searching: PropTypes.bool,\n toggleDisplayCompleted: PropTypes.func,\n uploadGeojson: PropTypes.bool,\n layerList: PropTypes.array\n};\n\nTablePageHeader.defaultProps = {\n createdNewItem: true,\n completeItemsCount: 0,\n filterOptions: {},\n handleImport: () => {\n console.error('Unreachable code');\n },\n handleSearch: () => {\n console.error('Unreachable code');\n },\n hasFilterButton: false,\n hasImportButton: false,\n hasSearchInput: false,\n hasToggleHideCompletedButton: false,\n isCompleteItemHidden: false,\n isPublic: false,\n itemName: 'items',\n searching: false,\n toggleDisplayCompleted: () => {\n console.error('Unreachable code');\n },\n uploadGeojson: false,\n layerList: []\n};\n\nexport default TablePageHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Pagination, Row, Col } from 'react-bootstrap';\nimport { filter, map } from 'lodash';\n\nconst isCurrentPageEmpty = (totalCount, itemsPerPage, currentPage) => {\n const totalPages = Math.ceil(totalCount / itemsPerPage);\n return (\n (totalCount && totalCount > itemsPerPage && currentPage > totalPages) ||\n ((!totalCount || totalCount <= itemsPerPage) && currentPage > 1)\n );\n};\n\nconst TablePagination = ({\n currentPage,\n isPaginationOn,\n itemsPerPage,\n stretchView,\n totalCount,\n changePage\n}) => {\n if (!isPaginationOn) return '';\n if (totalCount && totalCount > itemsPerPage) {\n const totalPages = Math.ceil(totalCount / itemsPerPage);\n const pagesToGenerate = map(Array(totalPages), (n, i) => i + 1);\n const pagesToShow = filter(\n pagesToGenerate,\n pagenumber => Math.abs(pagenumber - currentPage) <= 2\n );\n let tempCurrentPage = currentPage;\n if (isCurrentPageEmpty(totalCount, itemsPerPage, currentPage)) {\n while (isCurrentPageEmpty(totalCount, itemsPerPage, tempCurrentPage)) tempCurrentPage -= 1;\n changePage(tempCurrentPage);\n }\n return (\n \n \n \n {!stretchView && (\n changePage(1)}\n onKeyDown={() => changePage(1)}\n />\n )}\n {\n if (currentPage > 1) changePage(currentPage - 1);\n }}\n onKeyDown={() => {\n if (currentPage > 1) changePage(currentPage - 1);\n }}\n />\n {!stretchView &&\n map(pagesToShow, pageNumber => (\n changePage(pageNumber)}\n onKeyDown={() => changePage(pageNumber)}\n >\n {pageNumber}\n \n ))}\n {\n if (currentPage < totalPages) changePage(currentPage + 1);\n }}\n onKeyDown={() => {\n if (currentPage < totalPages) changePage(currentPage + 1);\n }}\n />\n {!stretchView && (\n changePage(totalPages)}\n onKeyDown={() => changePage(totalPages)}\n />\n )}\n \n \n
\n );\n }\n if (currentPage !== 1) changePage(1);\n return '';\n};\n\nTablePagination.defaultProps = {\n currentPage: 1,\n itemsPerPage: 1,\n stretchView: false,\n totalCount: 0,\n changePage: () => {}\n};\n\nTablePagination.propTypes = {\n currentPage: PropTypes.number,\n isPaginationOn: PropTypes.bool.isRequired,\n itemsPerPage: PropTypes.number,\n stretchView: PropTypes.bool,\n totalCount: PropTypes.number,\n changePage: PropTypes.func\n};\n\nexport default TablePagination;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { DataGridPremium, GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid-premium';\nimport { isEmpty, find, isEqual } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { Bert } from 'meteor/themeteorchef:bert';\nimport { Box, FormControl, InputLabel, MenuItem, Select, Stack } from '@mui/material';\nimport handleErrorInClient from '../../../modules/handle-error-in-client';\nimport Connectors from '../../../api/Connectors/Connectors';\nimport Sources from '../../../api/Sources/Sources';\nimport Loading from '../Loading';\nimport { renderButton } from '../MaterialMUIComponent';\n\nimport * as connectorOps from '../../../api/Connectors/connector-operations';\nimport * as sourceOps from '../../../api/Sources/source-operations';\n\nconst LIMIT_SEARCHING_DATA_DEFAULT = 'All';\n\nconst TableSourceComponent = ({\n sourceList,\n connectorList,\n tableSource,\n loading,\n isExternalSources,\n startConnector,\n externalSource,\n externalAttributes,\n sqlQuery,\n limitData\n}) => {\n if (loading) return ;\n const [information, setInformation] = React.useState([]);\n const [sourceSelected, setSourceSelected] = React.useState(tableSource.defaultSource);\n const [columns, setColumns] = React.useState([]);\n const [isFetching, setIsFetching] = React.useState(false);\n\n const CustomToolbar = () => {\n const newSource = sourceList.find(item => item._id === sourceSelected);\n return (\n \n \n \n );\n };\n\n const fetchData = async sourceID => {\n setIsFetching(true);\n try {\n const newSource = !isExternalSources\n ? sourceList.find(item => item._id === sourceID)\n : { layerName: sourceID };\n const newConnector = !isExternalSources\n ? connectorList.find(item => item._id === newSource.connectorId)\n : startConnector;\n\n const serverToConnection = {\n user: newConnector.user,\n ip: newConnector.ip,\n port: newConnector.port,\n databaseName: newConnector.databaseName,\n password: newConnector.password,\n schema: newConnector.schema,\n tableName: newSource.layerName\n };\n\n const arrayToFirstColumn = !isExternalSources ? newSource.attributes : externalAttributes;\n const columnsFirst = arrayToFirstColumn.map(col => ({\n field: col,\n headerName: col.charAt(0).toUpperCase() + col.slice(1),\n width: 150,\n ...(col === 'ID' && { width: 90 })\n }));\n setColumns(columnsFirst);\n // const limitSearching = isExternalSources ? 50 : LIMIT_DATA_DEFAULT;\n const response = await fetch(\n 'https://sd1.ipsgeoprocesing.ipsilum.com/MG/utilities/upload_to_database',\n {\n method: 'POST',\n body: JSON.stringify({\n connection: serverToConnection,\n search: sqlQuery,\n items_limit: limitData\n }),\n headers: { 'Content-Type': 'application/json' }\n }\n );\n const answer = await response.json();\n if (!isEmpty(answer) && typeof answer !== 'string') setInformation(answer);\n } catch (error) {\n console.error('Error fetching data:', error);\n } finally {\n setIsFetching(false);\n }\n };\n\n const exportDataCSV = async () => {\n const source = find(sourceList, item =>\n isExternalSources\n ? isEqual(sourceOps.getId(item), sourceOps.getId(externalSource))\n : isEqual(sourceOps.getId(item), sourceOps.getId(sourceSelected))\n );\n const connector = find(connectorList, item =>\n isEqual(connectorOps.getId(item), sourceOps.getConnectorId(source))\n );\n const { user, ip, port, databaseName, password, schema } = connector;\n const serverToConnection = {\n user,\n ip,\n port,\n databaseName,\n password,\n schema,\n tableName: sourceOps.getLayerName(source)\n };\n try {\n const response = await fetch(\n 'https://sd1.ipsgeoprocesing.ipsilum.com/MG/utilities/upload_to_database',\n {\n method: 'POST',\n body: JSON.stringify({\n connection: serverToConnection,\n search: sourceOps.getSQLQuery(source),\n download: true\n }),\n headers: { 'Content-Type': 'application/json' }\n }\n );\n\n const answer = await response.json();\n if (!isEmpty(answer)) {\n const csvFiles = answer.csv_files;\n if (!isEmpty(csvFiles)) {\n const urlData = csvFiles[0];\n fetch(urlData)\n .then(data => data.blob())\n .then(blob => {\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = urlData;\n link.click();\n })\n .catch(console.error);\n }\n }\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n const importDataCSV = async path => {\n const source = find(sourceList, item =>\n isExternalSources\n ? isEqual(sourceOps.getId(item), sourceOps.getId(externalSource))\n : isEqual(sourceOps.getId(item), sourceOps.getId(sourceSelected))\n );\n const connector = find(connectorList, item =>\n isEqual(connectorOps.getId(item), sourceOps.getConnectorId(source))\n );\n const { user, ip, port, databaseName, password, schema } = connector;\n try {\n const serverToConnection = {\n user,\n ip,\n port,\n databaseName,\n password,\n schema,\n tableName: source\n };\n await fetch('https://sd1.ipsgeoprocesing.ipsilum.com/MG/isl/exec_isl', {\n method: 'POST',\n body: JSON.stringify({\n disk: 'data3',\n get_map: false,\n udf_selected: '/home/data3/master_folder/isl/repositorios/file_to_database',\n variables: {\n connection_postgres: serverToConnection,\n file: path\n },\n output_format: null,\n guid_function: 'e1e9e293-8f8b-4cc',\n alias_process: 'Subir a base de datos Pergamino',\n explanation_process: 'Subida de archivo a la base de datos de Pergamino',\n force_repeat: true\n }),\n headers: { 'Content-Type': 'application/json' }\n });\n Bert.alert('File import successfully', 'success');\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n const handleFileImportCSV = async event => {\n const file = event.target.files[0];\n event.preventDefault();\n\n if (!file) {\n Bert.alert('Select file', 'danger');\n return;\n }\n\n const formData = new FormData();\n formData.append('file', file);\n formData.append('disc', 'data3');\n\n try {\n const response = await fetch('https://sd1.d3.ipsilum.com/upload', {\n method: 'POST',\n body: formData,\n mode: 'cors',\n credentials: 'omit',\n referrerPolicy: 'no-referrer'\n });\n const answer = await response.json();\n if (answer.status === 'OK') {\n const { data } = answer;\n if (!isEmpty(data)) {\n importDataCSV(data.path);\n }\n }\n } catch (error) {\n console.error('Error:', error);\n }\n };\n\n const handleImportFile = () => {\n const inputElement = document.createElement('input');\n inputElement.type = 'file';\n inputElement.onchange = handleFileImportCSV;\n inputElement.click();\n };\n\n React.useEffect(() => {\n const newSourceSelected = !isExternalSources ? sourceSelected : externalSource;\n fetchData(newSourceSelected);\n }, [sourceSelected, externalSource]);\n\n return (\n \n {!isExternalSources && (\n \n Source\n setSourceSelected(event.target.value)}\n label=\"Source\"\n >\n {sourceList.map(item => (\n \n ))}\n \n \n )}\n {isFetching ? (\n \n ) : (\n <>\n {!isEmpty(columns) && !isEmpty(information) ? (\n \n {\n const id = row.ID || row.Id || row.id;\n return `${id}-${index}`;\n }}\n initialState={{\n pagination: {\n paginationModel: {\n pageSize: 5\n }\n }\n }}\n pageSizeOptions={[5, 10, 25]}\n checkboxSelection\n disableRowSelectionOnClick\n components={{\n Toolbar: CustomToolbar\n }}\n />\n \n {renderButton({\n key: 'import-data-db',\n onClick: () => exportDataCSV(),\n contentButton: 'Import data'\n })}\n {renderButton({\n key: 'export-data-db',\n style: { color: '#2A3F90', borderColor: '#2A3F90', marginLeft: '1%' },\n onClick: () => handleImportFile(),\n contentButton: 'Export data'\n })}\n \n \n ) : (\n No data available
\n )}\n \n )}\n \n );\n};\n\nexport default withTracker(({ tableSource, isExternalSources }) => {\n let sourceSub = {};\n let sourceList = [];\n let connectorList = [];\n if (!isExternalSources) {\n sourceSub = Meteor.subscribe('manySources.connectors', tableSource.sources);\n sourceList = Sources.find().fetch();\n connectorList = Connectors.find().fetch();\n }\n\n return {\n loading: !isEmpty(sourceSub) ? !sourceSub.ready() : false,\n sourceList,\n connectorList\n };\n})(TableSourceComponent);\n\nTableSourceComponent.defaultProps = {\n sourceList: [],\n connectorList: [],\n tableSource: {},\n isExternalSources: false,\n startConnector: {},\n externalSource: '',\n externalAttributes: [],\n sqlQuery: '',\n limitData: LIMIT_SEARCHING_DATA_DEFAULT\n};\nTableSourceComponent.propTypes = {\n sourceList: PropTypes.array,\n connectorList: PropTypes.array,\n tableSource: PropTypes.object,\n loading: PropTypes.bool.isRequired,\n isExternalSources: PropTypes.bool,\n startConnector: PropTypes.object,\n externalSource: PropTypes.string,\n externalAttributes: PropTypes.array,\n sqlQuery: PropTypes.string,\n limitData: PropTypes.oneOfType(PropTypes.string, PropTypes.number)\n};\n","import React from 'react';\nimport { Meteor } from 'meteor/meteor';\nimport PropTypes from 'prop-types';\nimport { Alert } from 'react-bootstrap';\nimport { isEmpty } from 'lodash';\nimport { Graph } from 'react-d3-graph';\nimport BlankState from '../BlankState';\nimport * as taskOps from '../../../api/Tasks/task-operations';\n\nconst { isBeta } = Meteor.settings.public;\n\nconst comingSoonProps = {\n icon: { style: 'solid', symbol: 'cogs' },\n title: 'This feature is not ready yet. Coming Soon',\n subtitle: ''\n};\n\nconst TaskerGraph = ({ task, selectNode, myConfig }) => {\n if (isEmpty(task)) {\n return Please select a Task;\n }\n if (!isBeta && !taskOps.isReady(task)) return ;\n\n return (\n \n \n
\n );\n};\n\nTaskerGraph.propTypes = {\n task: PropTypes.object.isRequired,\n selectNode: PropTypes.func.isRequired,\n myConfig: PropTypes.object.isRequired\n};\nexport default TaskerGraph;\n","/* eslint-disable no-use-before-define */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { assign, isNil, isEqual, isEmpty } from 'lodash';\nimport { Table, Button, Form } from 'react-bootstrap';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n// import { getBsProps } from 'react-bootstrap/lib/utils/bootstrapUtils';\nimport { isIAS, isMaps } from '../../../modules/checkDeployEnv';\n\nimport TableButtonCell from '../../atoms/TableButtonCell';\n\nconst TableHeader = ({ deployEnv }) => (\n \n \n | Name | \n {isIAS(deployEnv) && (\n <>\n URL | \n | \n \n )}\n {isMaps(deployEnv) && (\n <>\n Server Type | \n IP | \n Port | \n \n )}\n | \n | \n
\n \n);\nTableHeader.propTypes = {\n deployEnv: PropTypes.string.isRequired\n};\n\n/**\n * Takes in an array of objects from data base and return a\n * table a row for each item with the requested cells to display.\n *\n * @param {object[]} itemList - An array with the objects from the database.\n */\nconst TableBody = ({ itemList, addNew, ...props }) => {\n const TableRows = itemList.map(telCon => {\n let classToAdd = '';\n if (telCon.selected) {\n classToAdd += 'table-info';\n }\n return (\n \n \n
\n );\n });\n if (addNew) {\n return (\n \n {TableRows}\n \n \n
\n \n );\n }\n return {TableRows};\n};\nTableBody.propTypes = {\n itemList: PropTypes.array.isRequired,\n addNew: PropTypes.bool.isRequired\n};\n\nconst DeleteButton = ({ telConId, deleteFunction }) => (\n \n \n \n);\n\nDeleteButton.propTypes = {\n telConId: PropTypes.string.isRequired,\n deleteFunction: PropTypes.func.isRequired\n};\n\nconst RadioButton = ({ telConId, isSelected, toggleCheck }) => (\n \n toggleCheck(telConId, isSelected)}\n >\n {isSelected ? (\n \n ) : (\n \n )}\n \n \n);\n\nRadioButton.propTypes = {\n telConId: PropTypes.string.isRequired,\n isSelected: PropTypes.bool.isRequired,\n toggleCheck: PropTypes.func.isRequired\n};\n\nconst EditButton = ({ telConId, toggleEditor }) => (\n \n {\n toggleEditor(telConId, true);\n }}\n >\n \n \n \n);\n\nEditButton.propTypes = {\n telConId: PropTypes.string.isRequired,\n toggleEditor: PropTypes.func.isRequired\n};\n\nconst CleanIP = newTelCon => {\n if (newTelCon.serverType === 'GMS' && isEmpty(newTelCon.ip)) {\n const updateNewTelConn = newTelCon;\n const { domain } = newTelCon;\n\n const newDomain = domain.split('://');\n if (newDomain.length <= 1) {\n const newValue = newDomain[0];\n updateNewTelConn.domain = newValue;\n } else {\n const newValue = newDomain[1];\n updateNewTelConn.domain = newValue;\n }\n\n return updateNewTelConn;\n }\n return newTelCon;\n};\n\nconst SaveButton = ({ telConId, saveTelCon, newTelCon, toggleEditor }) => (\n \n {\n const updateNewTelConn = CleanIP(newTelCon);\n saveTelCon(updateNewTelConn);\n toggleEditor(telConId, false);\n }}\n >\n \n \n \n);\n\nSaveButton.propTypes = {\n telConId: PropTypes.string.isRequired,\n saveTelCon: PropTypes.func.isRequired,\n toggleEditor: PropTypes.func.isRequired,\n newTelCon: PropTypes.object.isRequired\n};\n\nconst ItemCells = props => {\n const {\n telCon,\n deployEnv,\n itemListState,\n editableTelCon,\n changeName,\n changeURL,\n changeDomain,\n changeIP,\n changePort,\n changeServerType,\n toggleEditor,\n updateTelConn,\n toggleSelected,\n removeTelConn\n } = props;\n const [serverTypeStatus, SetServerTypeStatus] = React.useState(telCon.serverType);\n\n const handleServerType = _serverType => {\n changeServerType(_serverType);\n if (_serverType === 'GMSS') {\n SetServerTypeStatus('GMS');\n } else {\n SetServerTypeStatus(_serverType);\n }\n };\n\n const checkServerType = serverType => {\n if (serverType === 'GMS') {\n if (isEmpty(telCon.ip)) {\n return 'GMSS';\n }\n return serverType;\n }\n return serverType;\n };\n const [isSecure, setIsSecure] = React.useState(checkServerType(telCon.serverType) === 'GMSS');\n\n if (!itemListState[telCon._id]) {\n return (\n <>\n {telCon.name} | \n {isIAS(deployEnv) && (\n <>\n {telCon.url} | \n \n \n )}\n {isMaps(deployEnv) && (\n <>\n {checkServerType(telCon.serverType)} | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `GMS` && isEmpty(telCon.ip) && (\n <>\n {`https://${telCon.domain}`} | \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `GMS` && !isEmpty(telCon.ip) && (\n <>\n {telCon.ip} | \n {telCon.port} | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `DTS` && (\n <>\n {telCon.domain} | \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `DFS` && (\n <>\n {telCon.domain} | \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `IGP` && (\n <>\n {telCon.ip} | \n {telCon.port} | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `IGPS` && (\n <>\n {telCon.domain} | \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `CAT` && (\n <>\n {telCon.ip} | \n {telCon.port} | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `CATS` && (\n <>\n {telCon.domain} | \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `OGC-API-Features` && (\n <>\n {telCon.domain} | \n | \n \n )}\n \n \n \n );\n }\n return (\n <>\n \n changeName(event.target.value.trim())}\n />\n | \n {isIAS(deployEnv) && (\n <>\n \n changeURL(event.target.value.trim())}\n />\n | \n | \n \n )}\n {isMaps(deployEnv) && (\n <>\n \n {\n const value = event.target.value.trim();\n if (value === 'GMSS') {\n setIsSecure(true);\n handleServerType('GMSS');\n } else {\n setIsSecure(false);\n handleServerType(value);\n }\n }}\n >\n \n \n \n \n \n \n \n \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `GMS` && !isSecure && (\n <>\n \n changeIP(event.target.value.trim())}\n />\n | \n \n changePort(Number(event.target.value.trim()))}\n />\n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `GMS` && isSecure && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `DTS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `DFS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `IGP` && (\n <>\n \n changeIP(event.target.value.trim())}\n />\n | \n \n changePort(Number(event.target.value.trim()))}\n />\n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `IGPS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `CAT` && (\n <>\n \n changeIP(event.target.value.trim())}\n />\n | \n \n changePort(Number(event.target.value.trim()))}\n />\n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `CATS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `OGC-API-Features` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n \n \n \n );\n};\n\nItemCells.propTypes = {\n deployEnv: PropTypes.string.isRequired,\n telCon: PropTypes.object.isRequired,\n itemListState: PropTypes.object.isRequired,\n editableTelCon: PropTypes.object.isRequired,\n changeName: PropTypes.func.isRequired,\n changeURL: PropTypes.func.isRequired,\n changeDomain: PropTypes.func.isRequired,\n changeIP: PropTypes.func.isRequired,\n changePort: PropTypes.func.isRequired,\n changeServerType: PropTypes.func.isRequired,\n toggleEditor: PropTypes.func.isRequired,\n updateTelConn: PropTypes.func.isRequired,\n toggleSelected: PropTypes.func.isRequired,\n removeTelConn: PropTypes.func.isRequired\n};\n\nconst AddNewCells = props => {\n const {\n deployEnv,\n editableTelCon,\n changeName,\n changeURL,\n changeDomain,\n changeIP,\n changePort,\n changeServerType,\n addTelConn,\n toggleAddNew\n } = props;\n\n const [serverTypeStatus, SetServerTypeStatus] = React.useState(editableTelCon.serverType);\n const [isSecure, setIsSecure] = React.useState(false);\n const handleServerType = _serverType => {\n changeServerType(_serverType);\n SetServerTypeStatus(_serverType);\n };\n\n return (\n <>\n \n changeName(event.target.value.trim())}\n />\n | \n {isIAS(deployEnv) && (\n <>\n \n changeURL(event.target.value.trim())}\n />\n | \n | \n \n )}\n {isMaps(deployEnv) && (\n <>\n \n {\n const value = event.target.value.trim();\n if (value === 'GMSS') {\n setIsSecure(true);\n handleServerType('GMS');\n } else {\n setIsSecure(false);\n handleServerType(value);\n }\n }}\n >\n \n \n \n \n \n \n \n \n \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `GMS` && !isSecure && (\n <>\n \n changeIP(event.target.value.trim())}\n />\n | \n \n changePort(Number(event.target.value.trim()))}\n />\n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `GMS` && isSecure && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `DTS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `DFS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `IGP` && (\n <>\n \n changeIP(event.target.value.trim())}\n />\n | \n \n changePort(Number(event.target.value.trim()))}\n />\n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `IGPS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `CAT` && (\n <>\n \n changeIP(event.target.value.trim())}\n />\n | \n \n changePort(Number(event.target.value.trim()))}\n />\n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `CATS` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n {isMaps(deployEnv) && serverTypeStatus === `OGC-API-Features` && (\n <>\n \n changeDomain(event.target.value.trim())}\n />\n | \n \n \n | \n \n )}\n \n {\n addTelConn(editableTelCon);\n toggleAddNew();\n }}\n >\n \n \n \n \n \n \n \n );\n};\n\nAddNewCells.propTypes = {\n deployEnv: PropTypes.string.isRequired,\n editableTelCon: PropTypes.object.isRequired,\n changeName: PropTypes.func.isRequired,\n changeURL: PropTypes.func.isRequired,\n changeDomain: PropTypes.func.isRequired,\n changeIP: PropTypes.func.isRequired,\n changePort: PropTypes.func.isRequired,\n changeServerType: PropTypes.func.isRequired,\n addTelConn: PropTypes.func.isRequired,\n toggleAddNew: PropTypes.func.isRequired\n};\n\nclass TelemetryConnEditableTable extends Component {\n state = {\n editableTelCon: {\n name: '',\n url: '',\n domain: '',\n ip: '',\n port: 0\n },\n addNew: false\n };\n\n static getDerivedStateFromProps(nextProps, prevState) {\n // Store prevUserId in state so we can compare when props change.\n // Clear out any previously-loaded user data (so we don't render stale stuff).\n let prevItemList = [];\n const nextItemList = [];\n if (!isNil(prevState.itemListState)) {\n prevItemList = Object.keys(prevState.itemListState);\n prevItemList.sort();\n }\n if (!isNil(nextProps.itemList)) {\n nextProps.itemList.forEach(item => {\n nextItemList.push(item._id);\n });\n nextItemList.sort();\n }\n const areItemsEqual = isEqual(prevItemList, nextItemList);\n if (areItemsEqual && !prevState.addNew) {\n // No state update necessary\n return null;\n }\n const itemListState = {};\n nextProps.itemList.forEach(item => {\n itemListState[item._id] = false;\n });\n return { itemListState };\n }\n\n toggleEditor = (itemId, editOn) => {\n const { itemListState: itemListStateOld } = this.state;\n const { itemList, deployEnv } = this.props;\n const itemListStateCopy = Object.assign({}, itemListStateOld);\n const allItemsIds = Object.keys(itemListStateCopy);\n allItemsIds.forEach(item => {\n itemListStateCopy[item] = false;\n });\n itemListStateCopy[itemId] = editOn;\n this.setState({ itemListState: itemListStateCopy });\n if (editOn) {\n const telToEdit = itemList.find(element => element._id === itemId);\n const editableTelCon = { name: telToEdit.name, _id: telToEdit._id };\n if (isIAS(deployEnv)) assign(editableTelCon, { url: telToEdit.url });\n if (isMaps(deployEnv))\n assign(editableTelCon, {\n ip: telToEdit.ip,\n serverType: telToEdit.serverType,\n port: telToEdit.port,\n domain: telToEdit.domain\n });\n this.setState({ editableTelCon });\n }\n };\n\n changeName = newName => {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n name: newName\n }\n }));\n };\n\n changeURL = newURL => {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n url: newURL\n }\n }));\n };\n\n changeDomain = newDomain => {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n domain: newDomain\n }\n }));\n };\n\n changeIP = newIp => {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n ip: newIp\n }\n }));\n };\n\n changePort = newPort => {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n port: newPort\n }\n }));\n };\n\n changeServerType = newServerType => {\n if (newServerType === 'GMS') {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n serverType: newServerType,\n domain: ''\n }\n }));\n } else if (newServerType === 'GMSS') {\n this.setState(prevState => {\n const newState = prevState.editableTelCon;\n delete newState.ip;\n return {\n editableTelCon: {\n ...newState,\n serverType: 'GMS',\n port: 0\n }\n };\n });\n } else {\n this.setState(prevState => ({\n editableTelCon: {\n ...prevState.editableTelCon,\n serverType: newServerType\n }\n }));\n }\n };\n\n toggleAddNew = () => {\n this.setState(prevState => ({\n editableTelCon: {\n name: '',\n url: '',\n domain: '',\n ip: '',\n port: 0\n },\n addNew: !prevState.addNew\n }));\n };\n\n render() {\n const { backButton } = this.props;\n return (\n <>\n \n \n \n \n );\n }\n}\nTelemetryConnEditableTable.defaultProps = {\n backButton: () => {}\n};\nTelemetryConnEditableTable.propTypes = {\n deployEnv: PropTypes.string.isRequired,\n itemList: PropTypes.array.isRequired,\n addTelConn: PropTypes.func.isRequired,\n updateTelConn: PropTypes.func.isRequired,\n toggleSelected: PropTypes.func.isRequired,\n removeTelConn: PropTypes.func.isRequired,\n backButton: PropTypes.func\n};\n\nexport default TelemetryConnEditableTable;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button } from 'react-bootstrap';\n\nconst TestTelemetryConnection = ({ telemetryConnection }) => {\n const connectionStatus = (\n \n \n ;\n \n );\n // if (connectionWebsocket) { // webSocket comentado\n // connectionStatus = (\n // \n // );\n // }\n const separator = ': ';\n return (\n <>\n \n
Telemetry Connection Test for
\n
\n
{separator}
\n
{connectionStatus}
\n
`;\n properties.map(item => {\n if (item.elementType === 'icon') {\n if (!isEmpty(item.caption)) {\n popup += `\n \n
\n
${item.caption}
\n
\n
\n
\n
\n
\n
\n
\n
\n
${item.caption}
\n
\n
\n
\n
\n
\n
\n
\n {tableTitle.map((cell, index) => (\n changeSortIndex(index)}\n style={{ cursor: 'pointer' }}\n >\n {cell}\n {isEqual(sortIndex.index, index) && (\n \n )}\n \n ))}\n
\n \n \n {pageBody.map(row => (\n {}}>\n {row.map(cell => (\n | \n {Array.isArray(cell) && isAnnotationState === true ? (\n \n ) : (\n <>\n {verHtml ? : `${cell}`}\n \n )}\n | \n ))}\n
\n ))}\n \n \n \n \n );\n }\n if (includes(tableTitle, COMING_SOON)) {\n return (\n \n );\n }\n return (\n {`No está disponible para este tipo de layer ${layerSubtype}`}\n );\n }\n}\n\nThematicLayerTable.defaultProps = {\n height: 0,\n verHtml: false,\n layer: {}\n};\n\nThematicLayerTable.propTypes = {\n layer: PropTypes.object,\n height: PropTypes.number,\n loading: PropTypes.bool.isRequired,\n tableBody: PropTypes.array.isRequired,\n tableTitle: PropTypes.array.isRequired,\n layerSubtype: PropTypes.string.isRequired,\n isShared: PropTypes.bool.isRequired,\n changeSortIndex: PropTypes.func.isRequired,\n sortIndex: PropTypes.object.isRequired,\n verHtml: PropTypes.bool\n};\n\nexport default ThematicLayerTable;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport Styles from './styles';\n\nclass ToggleSwitch extends React.Component {\n toggleSwitch = event => {\n event.stopPropagation();\n const { onToggle, id, toggled } = this.props;\n if (onToggle) onToggle(id, !toggled);\n };\n\n render() {\n const { onLabel, offLabel, toggled } = this.props;\n return (\n \n \n \n {toggled\n ? onLabel || \n : offLabel || }\n \n
\n \n );\n }\n}\n\nToggleSwitch.propTypes = {\n id: PropTypes.string,\n toggled: PropTypes.bool,\n onLabel: PropTypes.string,\n offLabel: PropTypes.string,\n onToggle: PropTypes.func\n};\n// TODO remove id\nToggleSwitch.defaultProps = {\n id: '',\n toggled: false,\n onLabel: '',\n offLabel: '',\n onToggle: () => {}\n};\n\nexport default ToggleSwitch;\n","import styled from 'styled-components';\n\nconst ToggleSwitch = styled.div`\n display: inline-block;\n min-width: 58px;\n background: ${props => (props.toggled ? 'var(--success)' : '#ccc')};\n border-radius: 100px;\n transition: background 200ms ease, padding 200ms ease;\n text-align: left;\n padding: ${props => (props.toggled ? '4px 10px 4px 4px' : '4px 4px 4px 10px')};\n\n &:hover {\n cursor: pointer;\n }\n\n .handle {\n display: inline-block;\n min-width: 45px;\n height: 26px;\n background: #fff;\n border-radius: 100px;\n font-size: 12px;\n text-transform: uppercase;\n color: var(--success);\n text-align: center;\n padding: 0 10px;\n\n .handle-label {\n display: inline-block;\n margin-top: 3px;\n font-size: 16px;\n font-weight: 600;\n white-space: nowrap;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: ${props => (props.toggled ? 'var(--success)' : '#ccc')};\n }\n }\n`;\n\nexport default {\n ToggleSwitch\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { map } from 'lodash';\n\nimport TableDeleteCell from '../../atoms/TableDeleteCell';\nimport TableNameCell from '../../atoms/TableNameCell';\nimport TableRestoreCell from '../../atoms/TableRestoreCell';\nimport ListModal from '../ListModal';\n\nconst Trash = ({\n deletedCount,\n deletedItems,\n isTrashOpen,\n itemList,\n closeTrash,\n deleteItem,\n restoreItem\n}) => {\n const childProps = {\n emptyTableAlertProps: {\n message: 'Your Recycle Bin is empty!',\n numberOfColumns: 3\n },\n tablePaginationProps: {\n isPaginationOn: false\n }\n };\n return (\n \n {map(deletedItems, item => (\n \n \n \n \n
\n ))}\n \n );\n};\n\nTrash.defaultProps = {\n deletedCount: 0,\n deletedItems: [],\n isTrashOpen: false,\n itemList: '',\n closeTrash: () => console.error('no trash to open')\n};\n\nTrash.propTypes = {\n deletedCount: PropTypes.number,\n deletedItems: PropTypes.arrayOf(PropTypes.object),\n isTrashOpen: PropTypes.bool,\n itemList: PropTypes.string,\n closeTrash: PropTypes.func,\n deleteItem: PropTypes.func.isRequired,\n restoreItem: PropTypes.func.isRequired\n};\n\nexport default Trash;\n","/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\nimport { Bert } from 'meteor/themeteorchef:bert';\nimport { Box, Button, Container, Modal, Typography, SvgIcon } from '@mui/material';\n// import CloseIcon from '@mui/icons-material/Close';\nimport PropTypes from 'prop-types';\nimport TreeView from '@mui/lab/TreeView';\nimport TreeItem, { treeItemClasses } from '@mui/lab/TreeItem';\nimport { isEmpty } from 'lodash';\nimport useTimeStore from '../ZustandProvider';\nimport handleErrorInClient from '../../../modules/handle-error-in-client';\nimport methodPromise from '../../../modules/method-promise-wrapper';\nimport { useStyles } from '../../../styles/mapStylesCustom';\n\nfunction MinusSquare(props) {\n return (\n \n {/* tslint:disable-next-line: max-line-length */}\n \n \n );\n}\n\nfunction PlusSquare(props) {\n return (\n \n {/* tslint:disable-next-line: max-line-length */}\n \n \n );\n}\n\nfunction CircleSquare(props) {\n return (\n \n {/* tslint:disable-next-line: max-line-length */}\n \n \n \n );\n}\nfunction CloseSquare(props) {\n return (\n \n {/* tslint:disable-next-line: max-line-length */}\n \n \n );\n}\n\nconst StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({\n color: theme.palette.text.secondary,\n [`& .${treeItemClasses.content}`]: {\n color: theme.palette.text.secondary,\n borderTopRightRadius: theme.spacing(2),\n borderBottomRightRadius: theme.spacing(2),\n paddingRight: theme.spacing(1),\n fontWeight: theme.typography.fontWeightMedium,\n '&.Mui-expanded': {\n fontWeight: theme.typography.fontWeightRegular\n },\n '&:hover': {\n backgroundColor: '#EEEEEE'\n },\n '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': {\n backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,\n color: 'var(--tree-view-color)'\n },\n [`& .${treeItemClasses.label}`]: {\n fontWeight: 'inherit',\n color: 'black'\n }\n },\n [`& .${treeItemClasses.group}`]: {\n marginLeft: 0,\n [`& .${treeItemClasses.content}`]: {\n paddingLeft: theme.spacing(2)\n }\n }\n}));\n\nconst StyledTreeItem = props => {\n const classes = useStyles();\n const {\n bgColor,\n changeLoading,\n color,\n labelText,\n isModal,\n ID,\n idMap,\n template,\n templates,\n ...other\n } = props;\n\n const setElemento = useTimeStore(state => state.setElemento);\n const setData = useTimeStore(state => state.setData);\n const setAdjustMap = useTimeStore(state => state.setAdjustMap);\n\n const [modal, setModal] = React.useState(false);\n const [modalDelete, setModalDelete] = React.useState(false);\n const getModalStyle = () => {\n const top = 50;\n const left = 50;\n\n return {\n top: `${top}%`,\n left: `${left}%`,\n transform: `translate(-${top}%, -${left}%)`\n };\n };\n const [modalStyle] = React.useState(getModalStyle);\n\n const templatesArray = templates.child.findIndex(\n x =>\n x.name === labelText &&\n labelText !== 'baseTemplate' &&\n labelText !== 'baseTemplate1' &&\n labelText !== 'baseTemplate2'\n );\n\n const handleSelectionClick = () => {\n if (isModal && (labelText !== 'Templates' || labelText !== 'Raíz')) {\n setModal(true);\n }\n setElemento(ID);\n };\n\n const changePlantilla = async () => {\n setAdjustMap(false);\n changeLoading(800);\n setData(template);\n setModal(false);\n try {\n await methodPromise('maps.updateMapVar', idMap, template);\n Bert.alert('Saved!', 'success');\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n const deletePlantilla = async () => {\n const B = templates;\n const index = templates.child.findIndex(x => x.name === labelText);\n setModalDelete(false);\n\n B.child.splice(index, 1);\n try {\n await methodPromise('maps.updateMapTemplate', idMap, B);\n Bert.alert('Saved!', 'success');\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n const body = (\n \n
¿Deseas cambiar de plantilla a {labelText}?
\n {\n changePlantilla();\n }}\n >\n Si\n \n \n \n );\n\n const bodyTemplate = (\n \n
¿Deseas eliminar la plantilla {labelText}?
\n \n \n \n );\n\n return (\n <>\n \n \n {labelText}\n \n {templatesArray !== -1 && (\n setModalDelete(true)}\n startIcon={}\n sx={{ justifyContent: 'flex-end' }}\n />\n )}\n \n }\n style={{\n '--tree-view-color': color,\n '--tree-view-bg-color': bgColor\n }}\n {...other}\n />\n setModal(false)}>\n {body}\n \n setModalDelete(false)}>\n {bodyTemplate}\n \n \n );\n};\nStyledTreeItem.defaultProps = {\n bgColor: '',\n changeLoading: () => {},\n color: '',\n labelText: '',\n isModal: false,\n ID: '',\n idMap: '',\n template: {},\n templates: {}\n};\n\nStyledTreeItem.propTypes = {\n bgColor: PropTypes.string,\n changeLoading: PropTypes.func,\n color: PropTypes.string,\n labelText: PropTypes.string,\n isModal: PropTypes.bool,\n ID: PropTypes.string,\n idMap: PropTypes.string,\n template: PropTypes.object,\n templates: PropTypes.object\n};\n\nconst Arbol = props => {\n const classes = useStyles();\n const { idMap } = props;\n\n const renderTree = (nodes, isModal) => {\n return (\n \n {Array.isArray(nodes.child) ? nodes.child.map(node => renderTree(node, isModal)) : null}\n \n );\n };\n return (\n <>\n \n }\n defaultExpandIcon={}\n defaultEndIcon={}\n >\n {renderTree(props.templates, true)}\n \n\n }\n defaultExpandIcon={}\n defaultEndIcon={}\n >\n {renderTree(props.data, false)}\n \n \n \n );\n};\n\nArbol.defaultProps = {\n data: {},\n idMap: '',\n templates: {}\n};\n\nArbol.propTypes = {\n data: PropTypes.object,\n idMap: PropTypes.string,\n templates: PropTypes.object\n};\nexport default Arbol;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Bert } from 'meteor/themeteorchef:bert';\nimport { InputAdornment, IconButton, Box } from '@mui/material';\nimport PlagiarismOutlinedIcon from '@mui/icons-material/PlagiarismOutlined';\n\nimport { renderTextField } from '../MaterialMUIComponent/index';\n\nimport { URL_REGEX, YOUTUBE_URL_REGEX } from '../../../api/Videos/Videos';\nimport Loading from '../Loading';\n\nconst UploadFileComponent = ({ linkValueProp, handleValueLink, labelProp }) => {\n const [linkValue, setLinkValue] = React.useState(linkValueProp);\n const [isValid, setIsValid] = React.useState(true);\n const [isLoading, setIsLoading] = React.useState(false);\n const handleUrl = link => {\n if (link !== '') {\n const isValidLink = YOUTUBE_URL_REGEX.test(link) || URL_REGEX.test(link);\n setIsValid(isValidLink);\n }\n handleValueLink(link);\n setLinkValue(link);\n };\n\n const loadInputFile = () => {\n const handleFileImportCSV = async event => {\n const file = event.target.files[0];\n event.preventDefault();\n\n if (!file) {\n Bert.alert('Selecciona un archivo primero', 'danger');\n return;\n }\n const formData = new FormData();\n formData.append('file', file);\n formData.append('disc', 'data3');\n\n try {\n const response = await fetch('https://sd1.d3.ipsilum.com/upload', {\n method: 'POST',\n body: formData,\n mode: 'cors',\n credentials: 'omit',\n referrerPolicy: 'no-referrer'\n });\n const respuesta = await response.json();\n const urlFile = respuesta.data.link;\n handleUrl(urlFile);\n } catch (error) {\n console.error('Error:', error);\n }\n };\n\n const inputElement = document.createElement('input');\n inputElement.type = 'file';\n inputElement.onchange = handleFileImportCSV;\n inputElement.click();\n setIsLoading(false);\n };\n\n React.useEffect(() => {\n setLinkValue(linkValueProp);\n }, [linkValueProp]);\n\n return (\n <>\n \n {renderTextField({\n label: labelProp,\n moreProps: {\n key: 'textfield-upload-file',\n helperText: isValid ? '' : 'Url not valid',\n disabled: isLoading,\n fullWidth: true,\n onChange: event => handleUrl(event.target.value),\n value: linkValue,\n InputProps: {\n endAdornment: (\n \n {\n setIsLoading(true);\n loadInputFile();\n }}\n >\n {!isLoading ? : }\n \n \n )\n }\n }\n })}\n \n \n );\n};\nUploadFileComponent.defaultProps = {\n linkValueProp: '',\n labelProp: 'File link'\n};\n\nUploadFileComponent.propTypes = {\n linkValueProp: PropTypes.string,\n labelProp: PropTypes.string,\n handleValueLink: PropTypes.func.isRequired\n};\n\nexport default UploadFileComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Col, Row } from 'react-bootstrap';\nimport { isIAS, isMaps } from '../../../modules/checkDeployEnv';\n\nimport TelemetryConfigurationContainer from '../../containers/TelemetryConfigurationContainer';\nimport TelemetryContainer from '../../containers/TelemetryContainer';\nimport TestTelemetryConnection from '../TestTelemetryConnection';\nimport PageHeader from '../../atoms/PageHeader';\n\nconst UserConfiguration = ({ deployEnv }) => (\n \n \n \n User Configuration
\n \n {isMaps(deployEnv) ? 'Server Connection' : 'Telemetry'} Configuration
\n \n {isIAS(deployEnv) && (\n } />\n )}\n \n
\n);\n\nUserConfiguration.propTypes = {\n deployEnv: PropTypes.string.isRequired\n};\n\nexport default UserConfiguration;\n","/* eslint-disable no-plusplus */\nimport React from 'react';\n\nimport {\n Box,\n Button,\n Chip,\n Divider,\n FormControl,\n Grid,\n IconButton,\n InputLabel,\n MenuItem,\n Modal,\n OutlinedInput,\n Paper,\n Select,\n Stack,\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow,\n TextField,\n Typography\n} from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { tableCellClasses } from '@mui/material/TableCell';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Meteor } from 'meteor/meteor';\nimport { Roles } from 'meteor/alanning:roles';\nimport { isEmpty, map } from 'lodash';\nimport PropTypes from 'prop-types';\nimport AddIcon from '@mui/icons-material/Add';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport EditIcon from '@mui/icons-material/Edit';\n// import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport methodPromise from '../../../modules/method-promise-wrapper';\nimport handleErrorInClient from '../../../modules/handle-error-in-client';\n\nconst UserControlEditor = ({ initialSetting }) => {\n const [settings, setSettings] = React.useState(initialSetting);\n const [openModal, setOpenModal] = React.useState(false);\n const [prevSettings, setPrevSettings] = React.useState(initialSetting);\n const [editmode, setEditmode] = React.useState(false);\n const [openTutorial, setOpenTutorial] = React.useState(false);\n const userId = Meteor.userId();\n const isAdmin = Roles.userIsInRole(userId, 'admin');\n const allRoles = ['free-user', 'basic-user', 'premium-user', 'admin'];\n const allTypes = ['imagen', 'url', 'pdf'];\n const allComponents = [\n 'AnnotationDirectButtons',\n 'CatastroComponent',\n 'DownloadLinksComponent',\n 'FileToolsComponent',\n 'InfoLayerSelection',\n 'ISLComponent',\n 'IntroductionMapComponent',\n 'LayersControl',\n 'LocationComponent',\n 'NotesComponent',\n 'PointMapComponent',\n 'PythonComponent',\n 'SentinelComponent',\n 'SharedComponent',\n 'ShowMapDeckLidarComponent',\n 'TableAnnotationsComponent',\n 'TableSourceComponent',\n 'ViewLinksComponent'\n ];\n // teide cambiar y renderizar directamente todos los componentes que existen\n const handleSubmit = async () => {\n try {\n const method = settings.value === true ? 'admin.addUserControl' : 'admin.updateUserControl';\n await methodPromise(method, prevSettings);\n setSettings(prevSettings);\n setEditmode(!editmode);\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n const handleEditToggle = () => {\n setEditmode(!editmode);\n };\n\n const handleCancel = () => {\n setEditmode(false);\n setPrevSettings(settings);\n };\n\n const handleNumber = (value, variable, usuario) => {\n const updatedSetting = {\n ...prevSettings,\n [variable]: {\n ...prevSettings[variable],\n [usuario]: value\n },\n value: false\n };\n setPrevSettings(updatedSetting);\n };\n\n const StyledTableCell = styled(TableCell)(({ theme }) => ({\n [`&.${tableCellClasses.head}`]: {\n backgroundColor: '#757575',\n color: theme.palette.common.white\n },\n [`&.${tableCellClasses.body}`]: {\n fontSize: 14\n }\n }));\n\n const StyledTableRow = styled(TableRow)(({ theme }) => ({\n '&:nth-of-type(odd)': {\n backgroundColor: theme.palette.action.hover\n },\n // hide last border\n '&:last-child td, &:last-child th': {\n border: 0\n }\n }));\n\n const addTutorial = () => {\n const updatedSettings = { ...prevSettings };\n const idValue = Array.from({ length: 18 }, () => Math.random().toString(36)[2]).join('');\n const object = { description: '', title: 'title', _id: idValue, imagen: '', properties: [] };\n updatedSettings.tutorial.push(object);\n setPrevSettings(updatedSettings);\n };\n\n const handleChangeValue = (event, item, secondItem) => {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(element => element._id === item._id);\n updatedSettings.tutorial[idx].properties[secondItem.index].value = event.target.value;\n setPrevSettings(updatedSettings);\n };\n\n const handleChangeTitle = (event, item, secondItem) => {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(element => element._id === item._id);\n updatedSettings.tutorial[idx].properties[secondItem.index].title = event.target.value;\n setPrevSettings(updatedSettings);\n };\n\n const deleteTutorial = id => {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(element => element._id === id);\n updatedSettings.tutorial.splice(idx, 1);\n setPrevSettings(updatedSettings);\n };\n\n const deleteProperties = (tutorialIndex, indice) => {\n const updatedSettings = { ...prevSettings };\n\n const { properties } = updatedSettings.tutorial[tutorialIndex];\n\n for (let i = 0; i < properties.length; i++) {\n const item = properties[i];\n if (item.index === indice) {\n properties.splice(i, 1);\n i--;\n } else if (item.index > indice) {\n properties[i].index--;\n }\n }\n setPrevSettings(updatedSettings);\n };\n\n const renderSelect = (label, name, value, onChange) => (\n \n \n {label}\n }\n renderValue={selected => (\n \n {selected.map(item => (\n \n ))}\n \n )}\n >\n {allRoles.map(item => (\n \n ))}\n \n \n \n );\n\n return (\n {\n e.preventDefault();\n handleSubmit();\n }}\n >\n \n \n {renderSelect(\n 'Add layer by uploading geojson',\n 'uploadLayer',\n prevSettings.uploadLayer,\n event => {\n const setting = {\n ...prevSettings,\n uploadLayer: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n }\n )}\n {renderSelect(\n 'Add map by uploading geojson',\n 'uploadMap',\n prevSettings.uploadMap,\n event => {\n const setting = {\n ...prevSettings,\n uploadMap: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n }\n )}\n {renderSelect(\n 'Download geojson of layer',\n 'downloadLayer',\n prevSettings.downloadLayer,\n event => {\n const setting = {\n ...prevSettings,\n downloadLayer: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n }\n )}\n {renderSelect(\n 'Download geojson of map',\n 'downloadMap',\n prevSettings.downloadMap,\n event => {\n const setting = {\n ...prevSettings,\n downloadMap: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n }\n )}\n {renderSelect('Has Trash', 'hasTrash', prevSettings.hasTrash, event => {\n const setting = {\n ...prevSettings,\n hasTrash: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n })}\n \n \n Components\n {\n const setting = {\n ...prevSettings,\n advancedComponents: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n }}\n input={}\n renderValue={selected => (\n \n {selected.map(item => (\n \n ))}\n \n )}\n >\n {allComponents.map(item => (\n \n ))}\n \n \n \n \n \n Rol por defecto\n {\n const setting = {\n ...prevSettings,\n defaultUserRole: event.target.value,\n value: false\n };\n setPrevSettings(setting);\n }}\n input={}\n >\n {allRoles.map(item => (\n \n ))}\n \n \n \n \n Número de layers:\n {\n const number = isEmpty(event.target.value) ? '' : parseInt(event.target.value, 10);\n handleNumber(number, 'numberLayersCreated', 'free');\n }}\n size=\"small\"\n value={\n prevSettings &&\n prevSettings.numberLayersCreated &&\n prevSettings.numberLayersCreated.free !== undefined &&\n prevSettings.numberLayersCreated.free\n }\n />\n {\n const number = isEmpty(event.target.value) ? '' : parseInt(event.target.value, 10);\n handleNumber(number, 'numberLayersCreated', 'basic');\n }}\n size=\"small\"\n value={\n prevSettings &&\n prevSettings.numberLayersCreated &&\n prevSettings.numberLayersCreated.basic !== undefined &&\n prevSettings.numberLayersCreated.basic\n }\n />\n \n \n Número de mapas:\n {\n const number = isEmpty(event.target.value) ? '' : parseInt(event.target.value, 10);\n handleNumber(number, 'numberMapsCreated', 'free');\n }}\n size=\"small\"\n value={\n prevSettings &&\n prevSettings.numberMapsCreated &&\n prevSettings.numberMapsCreated.free !== undefined &&\n prevSettings.numberMapsCreated.free\n }\n />\n {\n const number = isEmpty(event.target.value) ? '' : parseInt(event.target.value, 10);\n handleNumber(number, 'numberMapsCreated', 'basic');\n }}\n size=\"small\"\n value={\n prevSettings &&\n prevSettings.numberMapsCreated &&\n prevSettings.numberMapsCreated.basic !== undefined &&\n prevSettings.numberMapsCreated.basic\n }\n />\n \n \n \n \n \n \n {\n setOpenTutorial(!openTutorial);\n }}\n >\n {openTutorial === true ? : }\n \n \n \n Página de inicio\n \n \n \n \n \n \n {!isEmpty(prevSettings.tutorial) && openTutorial === true && (\n <>\n {map(prevSettings.tutorial, item => {\n return (\n \n \n \n \n \n \n {item.title}\n \n \n \n {\n const idx = prevSettings.tutorial.findIndex(\n element => element._id === item._id\n );\n const updatedSettings = { ...prevSettings };\n const newObject = {\n value: '',\n type: 'url',\n index: prevSettings.tutorial[idx].properties.length\n };\n updatedSettings.tutorial[idx].properties.push(newObject);\n setPrevSettings(updatedSettings);\n }}\n sx={{\n color: '#2A3F90'\n }}\n >\n \n \n {\n setOpenModal(true);\n }}\n sx={{\n color: '#2A3F90'\n }}\n >\n \n \n {\n deleteTutorial(item._id);\n }}\n sx={{\n color: '#2A3F90'\n }}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n setOpenModal(false)}\n >\n Close\n \n \n \n \n \n {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(\n element => element._id === item._id\n );\n updatedSettings.tutorial[idx].title = event.target.value;\n setPrevSettings(updatedSettings);\n }}\n value={isEmpty(item.title) ? '' : item.title}\n />\n {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(\n element => element._id === item._id\n );\n updatedSettings.tutorial[idx].imagen = event.target.value;\n setPrevSettings(updatedSettings);\n }}\n value={isEmpty(item.imagen) ? '' : item.imagen}\n />\n {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(\n element => element._id === item._id\n );\n updatedSettings.tutorial[idx].description =\n event.target.value;\n setPrevSettings(updatedSettings);\n }}\n value={isEmpty(item.description) ? '' : item.description}\n />\n \n \n \n {map(item.properties, secondItem => {\n return (\n \n \n {editmode === true ? (\n {\n const updatedSettings = { ...prevSettings };\n const idx = updatedSettings.tutorial.findIndex(\n element => element._id === item._id\n );\n updatedSettings.tutorial[idx].properties[\n secondItem.index\n ].type = event.target.value;\n\n setPrevSettings(updatedSettings);\n }}\n disabled={!editmode}\n >\n {allTypes.map(option => (\n \n ))}\n \n ) : (\n secondItem.type\n )}\n \n \n {editmode === true ? (\n \n handleChangeValue(event, item, secondItem)\n }\n value={isEmpty(secondItem.value) ? '' : secondItem.value}\n />\n ) : (\n secondItem.value\n )}\n \n \n {editmode === true ? (\n \n handleChangeTitle(event, item, secondItem)\n }\n value={isEmpty(secondItem.title) ? '' : secondItem.title}\n />\n ) : (\n secondItem.title\n )}\n \n\n \n \n {\n const idx = prevSettings.tutorial.findIndex(\n element => element._id === item._id\n );\n deleteProperties(idx, secondItem.index);\n }}\n sx={{\n color: '#2A3F90'\n }}\n >\n \n \n\n {/* moveLayerUpFirst(_id)}\n aria-label=\"comments\"\n >\n \n */}\n {/* moveLayerUp(_id)}\n aria-label=\"comments\"\n >\n \n \n moveLayerDown(_id)}\n aria-label=\"comments\"\n >\n \n */}\n \n \n \n );\n })}\n \n
\n \n \n \n );\n })}\n \n )}\n \n \n \n {isAdmin && (\n \n \n \n {' '}\n {settings.value ? 'Add Setting' : 'Edit Setting'}\n \n \n \n \n \n )}\n\n
\n \n );\n};\nUserControlEditor.propTypes = {\n initialSetting: PropTypes.object.isRequired\n};\n\nexport default UserControlEditor;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Col, Form, Button, InputGroup } from 'react-bootstrap';\nimport { capitalize, isEqual } from 'lodash';\nimport { Roles } from 'meteor/alanning:roles';\nimport { Bert } from 'meteor/themeteorchef:bert';\n\nimport * as userOps from '../../../api/Users/user-operations';\n\nimport methodPromise from '../../../modules/method-promise-wrapper';\n\nimport Validation from '../../containers/Validation';\n\nimport Styles from './styles';\n\nconst OAuthUser = ({ user }) => {\n const userService = userOps.getOauthService(user);\n const existingUser = userOps.getId(user);\n if (existingUser && userOps.isOauthUser(user)) {\n return (\n \n \n
\n
{`This user is logged in with ${capitalize(\n userService\n )} using the email address ${userOps.getEmailAddress(user)}.`}
\n
\n \n );\n }\n return '';\n};\n\nPasswordUser.propTypes = {\n user: PropTypes.object.isRequired,\n handleResetPassword: PropTypes.func.isRequired,\n updateUserState: PropTypes.func.isRequired\n};\n\nconst RoleAndStorage = ({ user, userCuota, userRoles, handleChangeUserRole, setStorageSize }) => {\n const existingUser = userOps.getId(user);\n const sizeLimitMB = userCuota.sizeLimit / 10 ** 6;\n const storageUsedMB = userCuota.usedStorage / 10 ** 6;\n if (existingUser) {\n return (\n \n \n User Type\n
\n handleChangeUserRole(e, 'free-user')}\n label=\" Free User\"\n />\n handleChangeUserRole(e, 'basic-user')}\n label=\"Basic\"\n />\n\n handleChangeUserRole(e, 'premium-user')}\n label=\"Premium\"\n />\n\n handleChangeUserRole(e, 'admin')}\n label={Is Admin?}\n />\n \n \n Storage Cuota (Used: {storageUsedMB} MB)\n \n \n \n MB\n \n \n \n \n );\n }\n return '';\n};\n\nRoleAndStorage.propTypes = {\n user: PropTypes.object.isRequired,\n userCuota: PropTypes.object.isRequired,\n userRoles: PropTypes.object.isRequired,\n handleChangeUserRole: PropTypes.func.isRequired,\n setStorageSize: PropTypes.func.isRequired\n};\n\nclass UserEditor extends Component {\n constructor(props) {\n super(props);\n this.state = {\n userRoles: {\n freeUser: Roles.userIsInRole(userOps.getId(props.user), ['free-user']),\n basicUser: Roles.userIsInRole(userOps.getId(props.user), ['basic-user']),\n premiumUser: Roles.userIsInRole(userOps.getId(props.user), ['premium-user']),\n isAdmin: Roles.userIsInRole(userOps.getId(props.user), ['admin'])\n },\n userCuota: {\n sizeLimit: userOps.getSizeLimit(props.user),\n usedStorage: userOps.getUsedStorage(props.user)\n }\n };\n }\n\n componentDidUpdate(prevProps) {\n const { user } = this.props;\n const { user: prevUser } = prevProps;\n if (!isEqual(user, prevUser)) {\n this.updateUserState();\n }\n }\n\n updateUserState = () => {\n const { user } = this.props;\n this.setState({\n userRoles: {\n freeUser: Roles.userIsInRole(userOps.getId(user), ['free-user']),\n premiumUser: Roles.userIsInRole(userOps.getId(user), ['premium-user']),\n isAdmin: Roles.userIsInRole(userOps.getId(user), ['admin'])\n },\n userCuota: {\n sizeLimit: userOps.getSizeLimit(user),\n usedStorage: userOps.getUsedStorage(user)\n }\n });\n };\n\n setStorageSize = async event => {\n const { user } = this.props;\n const newStorage = Number(event.target.value.trim());\n const storageInBytes = newStorage * 10 ** 6;\n try {\n await methodPromise('users.changeStorageLimit', userOps.getId(user), storageInBytes);\n Bert.alert('User Storage Updated', 'success');\n } catch (error) {\n Bert.alert(`Something went wrong ${error.message}`, 'danger');\n }\n };\n\n handleResetPassword = async userId => {\n try {\n await methodPromise('users.setPassword', userId);\n Bert.alert('User password reset to (password)', 'success');\n } catch (error) {\n Bert.alert(error.message, 'danger');\n }\n };\n\n handleSubmit = async form => {\n const { history, user, deployConfig } = this.props;\n const existingUser = userOps.getId(user);\n const methodToCall = existingUser ? 'users.update' : 'users.insert';\n const newUser = {\n email: form.emailAddress.value,\n role: deployConfig.DefaultConfig.DefaultRole,\n profile: {\n name: {\n first: form.firstName.value,\n last: form.lastName.value\n }\n }\n };\n if (existingUser) {\n newUser._id = existingUser;\n } else {\n newUser.password = 'password';\n newUser.role = deployConfig.DefaultConfig.DefaultRole;\n }\n try {\n await methodPromise(methodToCall, newUser);\n const confirmation = existingUser ? 'User updated!' : 'User added!';\n form.reset();\n Bert.alert(confirmation, 'success');\n history.push('/users');\n } catch (error) {\n Bert.alert(error.message, 'danger');\n }\n };\n\n handleChangeUserRole = async (event, userRole) => {\n const { user } = this.props;\n const isChecked = event.target.checked;\n try {\n await methodPromise('users.changeRole', userOps.getId(user), userRole, isChecked);\n Bert.alert('User Role Updated', 'success');\n } catch (error) {\n Bert.alert(error.message, 'danger');\n }\n };\n\n render() {\n const { user } = this.props;\n const { userCuota, userRoles } = this.state;\n const validationProps = {\n rules: {\n firstName: {\n required: true\n },\n lastName: {\n required: true\n },\n emailAddress: {\n required: true,\n email: true\n }\n },\n messages: {\n firstName: {\n required: 'What\\u0027s your first name?'\n },\n lastName: {\n required: 'What\\u0027s your last name?'\n },\n emailAddress: {\n required: 'Need an email address here.',\n email: 'Is this email address correct?'\n }\n },\n submitHandler: form => {\n this.handleSubmit(form);\n }\n };\n return (\n <>\n \n \n \n
\n \n \n );\n }\n}\n\nUserEditor.defaultProps = {\n user: {\n email: '',\n profile: {\n name: {\n first: '',\n last: ''\n }\n }\n }\n};\n\nUserEditor.propTypes = {\n history: PropTypes.object.isRequired,\n deployConfig: PropTypes.object.isRequired,\n user: PropTypes.object\n};\n\nexport default UserEditor;\n","import styled from 'styled-components';\n\nconst Profile = styled.div`\n padding: 20px;\n border-radius: 3px;\n color: #fff;\n border: 1px solid var(--gray-lighter);\n text-align: center;\n\n img {\n width: 80px;\n }\n\n p {\n margin: 20px 0 0 0;\n color: var(--gray-light);\n }\n`;\n\nexport default {\n Profile\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ListGroup, Form } from 'react-bootstrap';\nimport { isEmpty, map } from 'lodash';\n\nimport { isMaps } from '../../../modules/checkDeployEnv';\nimport methodPromise from '../../../modules/method-promise-wrapper';\nimport handleErrorInClient from '../../../modules/handle-error-in-client';\n\nimport ToggleSwitch from '../ToggleSwitch';\nimport BlankState from '../BlankState';\nimport MapsProfileSettings from '../MapsProfileSettings';\nimport Styles from './styles';\n\nconst SettingValue = ({ type, keyName, value, onChange }) => {\n let componentToRender = '';\n switch (type) {\n case 'boolean':\n componentToRender = (\n onChange({ key: keyName, value: toggled })}\n />\n );\n break;\n case 'number':\n componentToRender = (\n onChange({ key: keyName, value: parseInt(event.target.value, 10) })}\n />\n );\n break;\n case 'string':\n componentToRender = (\n onChange({ key: keyName, value: event.target.value })}\n />\n );\n break;\n\n default:\n break;\n }\n\n return componentToRender;\n};\n\nSettingValue.propTypes = {\n type: PropTypes.string.isRequired,\n keyName: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,\n onChange: PropTypes.func.isRequired\n};\n\nclass UserSettings extends React.Component {\n state = { loading: true, settings: [] };\n\n componentDidMount() {\n this.fetchSettings();\n }\n\n componentWillUnmount() {\n // TODO: cancel fetch in promise\n }\n\n handleUpdateSetting = async setting => {\n const { userId } = this.props;\n try {\n await methodPromise('users.updateSetting', { userId, ...setting });\n this.fetchSettings();\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n fetchSettings = async () => {\n try {\n const settings = await methodPromise('users.fetchSettings', this.props);\n this.setState({ settings, loading: false });\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n render() {\n const { loading, settings } = this.state;\n const { isAdmin, layerList, profile, deployEnv, userControlSetting } = this.props;\n\n if (loading) {\n return ;\n }\n if (isEmpty(settings) && (isEmpty(profile) || !isMaps(deployEnv))) {\n return (\n \n \n \n );\n }\n return (\n \n {map(settings, ({ _id, key, label, type, value }) => (\n \n {label}
\n \n this.handleUpdateSetting({ ...update, _id })}\n />\n
\n \n ))}\n \n \n );\n }\n}\n\nUserSettings.defaultProps = {\n deployEnv: '',\n isAdmin: false,\n layerList: [],\n profile: {},\n userControlSetting: {},\n userId: null\n};\n\nUserSettings.propTypes = {\n deployEnv: PropTypes.string,\n isAdmin: PropTypes.bool,\n layerList: PropTypes.array,\n profile: PropTypes.object,\n userControlSetting: PropTypes.object,\n userId: PropTypes.string\n};\n\nexport default UserSettings;\n","import styled from 'styled-components';\nimport { ListGroupItem as BListGroupItem } from 'react-bootstrap';\n\nconst Setting = styled(BListGroupItem)`\n display: flexbox;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n p {\n flex-grow: 1;\n margin: 0 5px 0 0;\n }\n\n > div {\n flex-grow: 0;\n }\n`;\n\nexport default {\n Setting\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Box, Modal, Typography, TextField, Button } from '@mui/material';\nimport { Bert } from 'meteor/themeteorchef:bert';\n\nconst UserSharedModal = ({\n nameToEnter,\n setNameToEnter,\n userToSecondEnter,\n setUserToSecondEnter,\n openModal,\n setOpenModal,\n sharedUser\n}) => {\n const [password, setPassword] = React.useState('');\n const [username, setUsername] = React.useState('');\n\n const modalStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '80%',\n maxWidth: 600,\n bgcolor: 'background.paper',\n boxShadow: 24,\n p: 4,\n borderRadius: 2,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center'\n };\n\n const handleLogin = () => {\n if (!isEmpty(nameToEnter)) {\n setUserToSecondEnter({\n ...userToSecondEnter,\n name: nameToEnter\n });\n setOpenModal(false);\n } else {\n Bert.alert('Introduzca su nombre', 'info');\n }\n };\n\n return (\n setOpenModal(false)}>\n \n \n Ingresar\n \n setNameToEnter(e.target.value)} // Actualizar nameToEnter al escribir\n fullWidth\n />\n {sharedUser && (\n <>\n setUsername(e.target.value)}\n fullWidth\n />\n setPassword(e.target.value)}\n fullWidth\n />\n \n )}\n \n \n \n );\n};\n\nexport default UserSharedModal;\n\nUserSharedModal.defaultProps = {\n nameToEnter: '',\n setNameToEnter: () => {},\n openModal: false,\n setOpenModal: () => {},\n sharedUser: false\n};\n\nUserSharedModal.propTypes = {\n nameToEnter: PropTypes.string,\n setNameToEnter: PropTypes.func,\n userToSecondEnter: PropTypes.object.isRequired,\n openModal: PropTypes.bool,\n setOpenModal: PropTypes.func,\n setUserToSecondEnter: PropTypes.func.isRequired,\n sharedUser: PropTypes.bool\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Bert } from 'meteor/themeteorchef:bert';\nimport { Row, Col, Button } from 'react-bootstrap';\nimport { isEmpty } from 'lodash';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport * as annotationOps from '../../../api/Annotations/annotation-operations';\nimport * as mapOps from '../../../api/Maps/map-operations';\nimport handleErrorInClient from '../../../modules/handle-error-in-client';\nimport methodPromise from '../../../modules/method-promise-wrapper';\n\nimport ColBreak from '../../atoms/ColBreak';\nimport AnnotationTemplatePreview from '../AnnotationTemplatePreview';\n\nimport Styles from './styles';\n\nconst handleHardRemove = async ({ annotation, changeVideoContainerStateProperty, MapProps }) => {\n const isValid =\n MapProps && !isEmpty(mapOps.getSharedConfiguration(MapProps.map))\n ? mapOps.getSharedConfiguration(MapProps.map).deleteAnnotations\n : false;\n // eslint-disable-next-line no-alert\n if (window.confirm('Are you sure? This is permanent!')) {\n try {\n await methodPromise('annotations.hardDelete', annotationOps.getId(annotation), isValid);\n changeVideoContainerStateProperty('selectedAnnotation', {});\n Bert.alert(`Annotation deleted!`, 'danger');\n } catch (error) {\n handleErrorInClient(error);\n }\n }\n};\n\nconst ViewAnnotation = ({\n annotation,\n changeVideoContainerStateProperty,\n isPreviewMapEditor,\n isPublic,\n MapProps,\n showCloseButton,\n marginRightButtons,\n ...rest\n}) => {\n return (\n \n \n {showCloseButton && (\n \n changeVideoContainerStateProperty('selectedAnnotation', {})}\n >\n ×\n \n \n )}\n \n {/* teide doble scroll */}\n \n \n {!isPublic && (\n <>\n \n \n changeVideoContainerStateProperty('readOnly', false)}\n >\n Edit\n \n handleHardRemove({ annotation, changeVideoContainerStateProperty })}\n >\n \n \n \n \n )}\n
\n \n );\n};\n\nViewAnnotation.defaultProps = {\n isPreviewMapEditor: false,\n MapProps: {},\n showCloseButton: true,\n marginRightButtons: '0%'\n};\n\nViewAnnotation.propTypes = {\n annotation: PropTypes.object.isRequired,\n changeVideoContainerStateProperty: PropTypes.func.isRequired,\n isPreviewMapEditor: PropTypes.bool,\n isPublic: PropTypes.bool.isRequired,\n MapProps: PropTypes.object,\n showCloseButton: PropTypes.bool,\n marginRightButtons: PropTypes.string\n};\n\nexport default ViewAnnotation;\n","import styled from 'styled-components';\n\nconst ViewAnnotation = styled.div`\n .carousel-control svg {\n position: relative;\n top: 50%;\n }\n`;\n\nexport default {\n ViewAnnotation\n};\n","import React from 'react';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { Box, Typography, Stack, CircularProgress, Paper } from '@mui/material';\nimport { map, isEqual, isEmpty } from 'lodash';\nimport KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\nimport KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';\nimport { renderIconButton } from '../MaterialMUIComponent';\n\nimport Annotations from '../../../api/Annotations/Annotations';\nimport * as annotationsOps from '../../../api/Annotations/annotation-operations';\nimport * as templateOps from '../../../api/AnnotationTemplates/annotation-template-operations';\nimport { LIBRARY_ICON_TYPES } from '../../../api/AnnotationTemplates/AnnotationTemplates';\n\nimport ViewAnnotation from '../ViewAnnotation';\n\nconst ViewAnnotationOneByOne = ({\n loading,\n totalDocuments,\n element,\n index,\n onIndexChange,\n ...rest\n}) => {\n const textTable = !isEqual(totalDocuments, 0)\n ? `${index + 1}/${totalDocuments}`\n : `${0}/${totalDocuments}`;\n\n const handlePrevious = () => {\n if (index > 0) {\n onIndexChange(index - 1);\n }\n };\n\n const handleNext = () => {\n if (index < totalDocuments - 1) {\n onIndexChange(index + 1);\n }\n };\n\n const renderManyIconButtons = array =>\n map(\n array,\n item =>\n item.isShow &&\n renderIconButton({\n key: item.key,\n onClick: item.onClick,\n icon: item.icon,\n titleTooltip: item.title,\n disabled: totalDocuments <= 0 || item.disabled,\n style: { padding: 0 }\n })\n );\n const renderIconAnnotation = () => {\n const template = annotationsOps.getTemplate(element);\n const library = templateOps.getLibraryIcon(template);\n const icon = templateOps.getIcon(template);\n const svgIcon = templateOps.getIconSvg(template);\n if (library === LIBRARY_ICON_TYPES.FONTAWESOME)\n return ;\n if (library === LIBRARY_ICON_TYPES.SVG)\n return (\n \n );\n return ;\n };\n\n if (loading) {\n return (\n \n \n Cargando anotaciones...\n \n );\n }\n\n return (\n \n {!isEmpty(element) && (\n \n \n {templateOps.getName(annotationsOps.getTemplate(element))}\n \n \n )}\n \n \n {renderManyIconButtons([\n {\n isShow: !isEmpty(element),\n key: 'boton-goStart-annotation',\n onClick: () => onIndexChange(0),\n icon: ,\n titleTooltip: 'Start Annotation'\n },\n {\n isShow: !isEmpty(element),\n key: 'boton-previous-annotation',\n onClick: () => handlePrevious(),\n icon: ,\n titleTooltip: 'Previous Annotation'\n }\n ])}\n \n\n \n \n {textTable}\n \n {renderManyIconButtons([\n {\n isShow: !isEmpty(element),\n key: 'annotation-icon',\n onClick: () => {},\n icon: !isEmpty(element) ? renderIconAnnotation() : <>,\n titleTooltip: '',\n disabled: true\n }\n ])}\n \n \n {renderManyIconButtons([\n {\n isShow: !isEmpty(element),\n key: 'boton-next-annotation',\n onClick: () => handleNext(),\n icon: ,\n titleTooltip: 'Next Annotation'\n },\n {\n isShow: !isEmpty(element),\n key: 'boton-goLast-annotation',\n onClick: () => onIndexChange(totalDocuments - 1),\n icon: ,\n titleTooltip: 'Last Annotation'\n }\n ])}\n \n \n \n {element && (\n {}}\n isPublic\n showCloseButton={false}\n {...rest}\n />\n )}\n \n \n );\n};\n\nViewAnnotationOneByOne.defaultProps = {\n element: null\n};\n\nViewAnnotationOneByOne.propTypes = {\n loading: PropTypes.bool.isRequired,\n totalDocuments: PropTypes.number.isRequired,\n element: PropTypes.object,\n index: PropTypes.number.isRequired,\n onIndexChange: PropTypes.func.isRequired\n};\n\nexport default withTracker(({ index, order = 1, videoId, sortField = 'videoTime' }) => {\n const annotationSub = Meteor.subscribe('annotations.video', videoId);\n const isReady = annotationSub.ready();\n\n let totalDocuments = 0;\n let element = null;\n\n if (isReady) {\n const filters = { 'geoJSON.properties.video': videoId };\n totalDocuments = Annotations.find(filters).count();\n element =\n Annotations.find(filters, {\n sort: { [sortField]: order },\n skip: index,\n limit: 1\n }).fetch()[0] || null;\n }\n\n return {\n loading: !isReady,\n totalDocuments,\n element\n };\n})(ViewAnnotationOneByOne);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { map, filter, isEqual, find } from 'lodash';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { Meteor } from 'meteor/meteor';\n\nimport LocationOnIcon from '@mui/icons-material/LocationOn';\nimport LocationOffIcon from '@mui/icons-material/LocationOff';\nimport VisibilityIcon from '@mui/icons-material/Visibility';\nimport VisibilityOffIcon from '@mui/icons-material/VisibilityOff';\nimport Loading from '../Loading';\nimport { renderIconButton } from '../MaterialMUIComponent';\nimport useTimeStore from '../ZustandProvider';\n\nimport Annotations from '../../../api/Annotations/Annotations';\nimport Videos from '../../../api/Videos/Videos';\nimport * as videoOps from '../../../api/Videos/video-operations';\nimport * as annotationsOps from '../../../api/Annotations/annotation-operations';\n\nlet indexRender = 0;\nconst MIN_RENDER_INICIALIZE = 0;\nconst ViewGeometriesOnMap = ({\n loading,\n videos,\n annotations,\n viewButtonGeometry,\n viewButtonCenter,\n startShowGeometries,\n startCenterGeometries,\n videoSelected,\n selectedAnnotation,\n handleAnnotation\n}) => {\n if (loading) return ;\n const setShowNotesOnMap = useTimeStore(state => state.setShowNotesOnMap);\n const showNotesOnMap = useTimeStore(state => state.showNotesOnMap);\n const { showEnable, updateMap, enableCenter } = showNotesOnMap;\n const [isStart, setIsStart] = React.useState(true);\n const searchIndexAnnotationOnMap = (newAnnot, vid) => {\n const annotationsVideo = filter(annotations, item =>\n isEqual(annotationsOps.getVideo(item), videoOps.getId(vid))\n );\n const indexAnnot = annotationsVideo.indexOf(\n find(annotationsVideo, annot =>\n isEqual(annotationsOps.getId(annot), annotationsOps.getId(newAnnot))\n )\n );\n handleAnnotation(newAnnot, indexAnnot);\n };\n const renderManyIconButtons = array =>\n map(\n array,\n item =>\n item.isShow &&\n renderIconButton({\n key: item.key,\n onClick: item.onClick,\n icon: item.icon,\n titleTooltip: item.title,\n disabled: item.disabled,\n moreProps: { ...item.moreProps }\n })\n );\n React.useEffect(() => {\n setShowNotesOnMap({\n ...showNotesOnMap,\n updateMap: !updateMap,\n videos,\n annotations,\n selectVideo: videoSelected,\n selectAnnotation: selectedAnnotation,\n showEnable: startShowGeometries,\n enableCenter: startCenterGeometries,\n handleAnnotation: searchIndexAnnotationOnMap\n });\n }, []);\n\n React.useEffect(() => {\n if (!isStart)\n setShowNotesOnMap({\n ...showNotesOnMap,\n updateMap: !updateMap,\n videos,\n annotations,\n selectVideo: videoSelected,\n selectAnnotation: selectedAnnotation\n });\n if (isStart && indexRender >= MIN_RENDER_INICIALIZE) setIsStart(false);\n if (isStart) indexRender += 1;\n }, [videoSelected, selectedAnnotation]);\n\n return (\n <>\n {renderManyIconButtons([\n {\n isShow: viewButtonGeometry && !showEnable,\n key: 'boton-show-geometries',\n onClick: () =>\n setShowNotesOnMap({\n ...showNotesOnMap,\n showEnable: true,\n updateMap: !updateMap\n }),\n icon: (\n \n ),\n titleTooltip: 'Show Geometries',\n disabled: false\n },\n {\n isShow: viewButtonGeometry && showEnable,\n key: 'boton-show-geometries',\n onClick: () =>\n setShowNotesOnMap({\n ...showNotesOnMap,\n showEnable: false,\n updateMap: !updateMap\n }),\n icon: (\n \n ),\n titleTooltip: 'Hidden Geometries',\n disabled: false\n },\n {\n isShow: viewButtonCenter && enableCenter,\n key: 'boton-center-geometries',\n onClick: () =>\n setShowNotesOnMap({\n ...showNotesOnMap,\n enableCenter: !enableCenter,\n updateMap: !updateMap\n }),\n icon: (\n \n ),\n titleTooltip: 'Center Geometries',\n disabled: false\n },\n {\n isShow: viewButtonCenter && !enableCenter,\n key: 'boton-center-geometries',\n onClick: () =>\n setShowNotesOnMap({\n ...showNotesOnMap,\n enableCenter: !enableCenter,\n updateMap: !updateMap\n }),\n icon: (\n \n ),\n titleTooltip: 'Center Geometries',\n disabled: false\n }\n ])}\n \n );\n};\n\nViewGeometriesOnMap.defaultProps = {\n loading: false,\n videos: [],\n annotations: [],\n viewButtonGeometry: true,\n viewButtonCenter: true,\n startShowGeometries: false,\n startCenterGeometries: false,\n videoSelected: {},\n selectedAnnotation: {},\n handleAnnotation: () => {}\n};\nViewGeometriesOnMap.propTypes = {\n loading: PropTypes.bool,\n videos: PropTypes.array,\n annotations: PropTypes.array,\n viewButtonGeometry: PropTypes.bool,\n viewButtonCenter: PropTypes.bool,\n startShowGeometries: PropTypes.bool,\n startCenterGeometries: PropTypes.bool,\n videoSelected: PropTypes.object,\n selectedAnnotation: PropTypes.object,\n handleAnnotation: PropTypes.func\n};\n\nexport default withTracker(\n ({ videosId, showAnnotations, showTrack, showAllAnnotations, showAllTracks, videoSelected }) => {\n const videosSub = Meteor.subscribe('manyvideos.annotations', videosId);\n const isReady = videosSub.ready();\n let videos = null;\n let annotations = null;\n\n const videosToSearch = showAllTracks ? videosId : [videoOps.getId(videoSelected)];\n const annotationsToSearch = showAllAnnotations ? videosId : [videoOps.getId(videoSelected)];\n if (isReady) {\n videos = Videos.find(\n {\n _id: { $in: videosToSearch },\n deleted: { $eq: 'no' }\n },\n { fields: { track: 1, coordinatesDataType: 1, latLng0: 1 } }\n ).fetch();\n annotations = Annotations.find(\n { 'geoJSON.properties.video': { $in: annotationsToSearch } },\n { sort: { videoTime: 1 } }\n ).fetch();\n }\n\n return {\n loading: !isReady,\n videos: showAllTracks || showTrack ? videos : [],\n annotations: showAnnotations || showAllAnnotations ? annotations : []\n };\n }\n)(ViewGeometriesOnMap);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { Bert } from 'meteor/themeteorchef:bert';\nimport { isEmpty } from 'lodash';\nimport { Col, Row } from 'react-bootstrap';\nimport { getType } from '../../../api/Graphics/graphic-operations';\n\nimport Layers from '../../../api/Layers/Layers';\nimport Graphics from '../../../api/Graphics/Graphics';\n\nimport loadTableLayer from '../../../modules/load-table-layer';\nimport { GRAPH_ELEMENTS } from '../../../modules/graphic-elements';\nimport getGraphicProps from '../../../modules/get-graphic-props';\nimport Loading from '../Loading';\n\nconst ViewGraphicsComponent = props => {\n const { aspectRatio, layer, graphic, modal } = props;\n const [height, setHeight] = React.useState(window.innerHeight / 2);\n const [width, setWidth] = React.useState(window.innerWidth);\n const [attributes, setAttributes] = React.useState();\n const [values, setValues] = React.useState([]);\n\n const loadAttributes = async () => {\n try {\n const { tableBody, tableTitle } = await loadTableLayer(layer);\n setAttributes(tableTitle);\n setValues(tableBody);\n } catch (error) {\n Bert.alert(error.message, 'danger');\n }\n };\n\n const updateDimensions = () => {\n const heightAux = modal ? window.innerHeight * 0.75 : window.innerHeight / 2;\n const widthAux = modal ? window.innerWidth / 2 : window.innerWidth / 4;\n setHeight(heightAux);\n setWidth(widthAux);\n };\n React.useEffect(() => {\n loadAttributes();\n updateDimensions();\n }, [graphic, layer]);\n const graphicProps = getGraphicProps({\n width,\n height,\n graphic,\n attributes,\n values,\n verticalPadding: false,\n aspectRatio\n });\n const { value } = GRAPH_ELEMENTS.properties[getType(graphic)];\n const previewWithProps = React.cloneElement(value, { ...graphicProps });\n\n if (isEmpty(graphic)) return ;\n\n return (\n <>\n \n {previewWithProps}\n
\n \n );\n};\n\nViewGraphicsComponent.defaultProps = {\n aspectRatio: 1 / 3,\n graphic: {},\n layer: {},\n modal: false\n};\n\nViewGraphicsComponent.propTypes = {\n aspectRatio: PropTypes.number,\n graphic: PropTypes.object,\n layer: PropTypes.object,\n modal: PropTypes.bool\n};\n\nexport default withTracker(({ layerId, graphicId }) => {\n const A = Graphics.findOne(graphicId);\n const B = Layers.findOne(layerId);\n\n return {\n graphic: A,\n layer: B\n };\n})(ViewGraphicsComponent);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport {\n Box,\n IconButton,\n Paper,\n Stack,\n styled,\n Table,\n TableHead,\n TableCell,\n tableCellClasses,\n TableContainer,\n TableRow\n} from '@mui/material';\n\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\nimport KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';\nimport KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';\nimport KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';\n\nconst StyledTableRow = styled(TableRow)(({ theme }) => ({\n '&:nth-of-type(odd)': {\n backgroundColor: theme.palette.action.hover,\n width: '100%'\n },\n // hide last border\n '&:last-child td, &:last-child th': {\n border: 0\n }\n}));\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n [`&.${tableCellClasses.head}`]: {\n backgroundColor: '#757575',\n color: theme.palette.common.white\n },\n [`&.${tableCellClasses.body}`]: {\n fontSize: 14\n }\n}));\n\nconst ViewLinksComponent = props => {\n const { MapProps } = props;\n const heightIframe = window.innerHeight - window.innerHeight / 5;\n const { viewLinks } = MapProps.map.settingsAdvancedMap;\n const defaultValues = [\n {\n type: 'url',\n value: 'https://srmconsulting.es/',\n name: 'SRM Consulting'\n }\n ];\n const startLink = !isEmpty(viewLinks) ? viewLinks[0] : defaultValues[0];\n\n const [count, setCount] = React.useState(0);\n const [link, setLink] = React.useState(startLink);\n const totalCount = !isEmpty(viewLinks) ? viewLinks.length : defaultValues.length;\n\n const handleEndValue = () => {\n const lenghtValues = totalCount - 1;\n const element = viewLinks[lenghtValues];\n setLink(element);\n setCount(lenghtValues);\n };\n const handleStartValue = () => {\n const element = viewLinks[0];\n setLink(element);\n setCount(0);\n };\n\n const handleLeftValue = () => {\n if (count > 0) {\n const newCont = count - 1;\n const element = viewLinks[newCont];\n setCount(newCont);\n setLink(element);\n }\n };\n const handleRightValue = () => {\n const lenghtValues = viewLinks.length - 1;\n if (count < lenghtValues) {\n const newCont = count + 1;\n const element = viewLinks[newCont];\n setCount(newCont);\n setLink(element);\n }\n };\n\n const adjustURL = url => {\n let adjustedURL = url;\n if (!/^https?:\\/\\//i.test(url)) {\n adjustedURL = `https://${url}`;\n }\n return adjustedURL;\n };\n\n return (\n <>\n \n \n \n \n \n \n \n {count !== 0 && totalCount !== 0 && (\n <>\n \n \n \n \n \n \n \n )}\n \n \n\n \n {`${link.name} ${count + 1}/${totalCount}`}\n \n\n \n \n {count !== totalCount - 1 && totalCount !== 0 && (\n <>\n \n \n \n \n \n \n \n )}\n \n \n \n \n
\n \n \n \n {link.type === 'html' ? (\n // eslint-disable-next-line react/no-danger\n \n ) : (\n \n )}\n \n \n );\n};\n\nViewLinksComponent.defaultProps = {};\nViewLinksComponent.propTypes = {\n MapProps: PropTypes.object.isRequired\n};\n\nexport default ViewLinksComponent;\n","import { create } from 'zustand';\n\nconst useTimeStore = create(set => ({\n drawerWidth: 100 / 3,\n setDrawerWidth: drawerWidth => set({ drawerWidth }),\n boton1: false,\n setBoton1: boton1 => set({ boton1 }),\n boton2: false,\n setBoton2: boton2 => set({ boton2 }),\n casos: ['Map', 'LayersControl', 'Nada', 'NavBar', 'BotonMenu', 'BotonEditor', 'LocationMenu'],\n setCasos: casos => set({ casos }),\n centerMap: {},\n setCenterMap: centerMap => set({ centerMap }),\n adjustMap: true,\n setAdjustMap: adjustMap => set({ adjustMap }),\n coordsAnnotationTemplate: {},\n setCoordsAnnotationTemplate: coordsAnnotationTemplate => set({ coordsAnnotationTemplate }),\n dataToSend: {},\n setDataToSend: dataToSend => set({ dataToSend }),\n coordOnMap: {},\n setCoordOnMap: coordOnMap => set({ coordOnMap }),\n data: {},\n setData: data => set({ data }),\n drawRoute: {},\n setDrawRoute: drawRoute => set({ drawRoute }),\n edicion: false,\n setEdicion: edicion => set({ edicion }),\n elemento: 0,\n setElemento: elemento => set({ elemento }),\n goToCoordinates: [0, 0],\n setGoToCoordinates: goToCoordinates => set({ goToCoordinates }),\n isMapLoaded: false,\n setIsMapLoaded: isMapLoaded => set({ isMapLoaded }),\n layers: [],\n setLayers: layers => set({ layers }),\n layersTrans: [],\n setLayersTrans: layersTrans => set({ layersTrans }),\n mapTypeView: 'map',\n setMapTypeView: mapTypeView => set({ mapTypeView }),\n pointsRoute: [],\n setPointsRoute: pointsRoute => set({ pointsRoute }),\n geometryConfig: 'none',\n setGeometryConfig: geometryConfig => set({ geometryConfig }),\n save: false,\n setSave: save => set({ save }),\n isSideBySide: false,\n setIsSideBySide: isSideBySide => set({ isSideBySide }),\n layerSide: { left: [], right: [] },\n setLayerSide: layerSide => set({ layerSide }),\n showNotesOnMap: {\n updateMap: false,\n showEnable: false,\n enableCenter: false,\n annotations: [],\n selectAnnotation: {},\n videos: [],\n selectVideo: {},\n methodEditor: 'close',\n proyectedPoint: {},\n handleAnnotation: () => {}\n },\n setShowNotesOnMap: showNotesOnMap => set({ showNotesOnMap })\n}));\n\nexport default useTimeStore;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { get, isEmpty, isNil } from 'lodash';\nimport turf from '@turf/turf';\n\nimport * as atlasOps from '../../../api/Atlas/atlas-operations';\nimport * as taskOps from '../../../api/Tasks/task-operations';\nimport TelemetryConnections from '../../../api/TelemetryConnections/TelemetryConnections';\n\nimport aiTask from '../../../modules/tasks/aiTask';\n\nimport AITaskConfiguration from '../../components/AITaskConfiguration';\nimport Loading from '../../components/Loading';\nimport MapContainerAIAtlas from '../../containers/MapContainerAIAtlas';\nimport TaskMonitorContainer from '../../containers/TaskMonitorContainer';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridBottomRightChild,\n GridTaskMonitorContainer\n} from './styles';\n\nconst PER_PAGE = 5;\nconst HEADER_HEIGHT = 57; // When it is all in the same line\nconst PAGINATION_HEIGHT = 46;\nconst CELL_HEIGHT = 62;\nconst BBOX_PATH = ['nodes', '0', 'paramList', '3', 'value'];\nconst ENTITIES_PATH = ['nodes', '2', 'paramList', '0', 'value'];\n\nclass AIAtlas extends Component {\n tableElement = React.createRef();\n\n state = {\n aiInterestArea: {},\n isTableListLoaded: false,\n itemsPerPage: PER_PAGE,\n selectedTaskEntities: []\n };\n\n componentDidMount() {\n window.addEventListener('resize', this.updateDimensions);\n }\n\n componentDidUpdate() {\n const { isTableListLoaded } = this.state;\n if (!isTableListLoaded && !isNil(this.tableElement.current)) this.updateDimensions();\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateDimensions);\n }\n\n setAIInterestArea = newAIInterestArea => this.setState({ aiInterestArea: newAIInterestArea });\n\n selectTask = task => {\n const bbox = get(task, BBOX_PATH, '');\n const selectedTaskEntities = get(task, ENTITIES_PATH, []);\n\n let newAIInterestArea = {};\n if (!isEmpty(bbox)) newAIInterestArea = turf.bboxPolygon(JSON.parse(bbox));\n\n this.setState({ aiInterestArea: newAIInterestArea, selectedTaskEntities });\n };\n\n updateDimensions = () => {\n const height =\n get(this, 'tableElement.current.offsetHeight', 0) - (PAGINATION_HEIGHT + HEADER_HEIGHT);\n\n let itemsPerPage = Math.floor(height / CELL_HEIGHT);\n if (itemsPerPage < 1) itemsPerPage = 1;\n\n this.setState({ isTableListLoaded: true, itemsPerPage });\n };\n\n render() {\n const {\n atlas,\n deployEnv,\n gmsConnection,\n gridBackgroundColor,\n isPreview,\n isPublic,\n loading\n } = this.props;\n const { aiInterestArea, itemsPerPage, selectedTaskEntities } = this.state;\n\n if (loading) return ;\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nAIAtlas.defaultProps = {\n atlas: {},\n deployEnv: '',\n gmsConnection: {},\n gridBackgroundColor: '#98c1de',\n isPreview: false,\n isPublic: false\n};\n\nAIAtlas.propTypes = {\n atlas: PropTypes.object,\n deployEnv: PropTypes.string,\n gmsConnection: PropTypes.object,\n gridBackgroundColor: PropTypes.string,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool,\n loading: PropTypes.bool.isRequired\n};\n\nexport default withTracker(({ atlas }) => {\n let gmsConnectionId = '';\n let subscription = {};\n if (!isNil(atlas)) {\n gmsConnectionId = atlasOps.getGMSConnection(atlas);\n subscription = Meteor.subscribe('gmsConnections.public', gmsConnectionId);\n }\n return {\n loading: !isNil(atlas) && !subscription.ready(),\n gmsConnection: TelemetryConnections.findOne(gmsConnectionId)\n };\n})(AIAtlas);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { filter, find, get, isEmpty, isEqual, isNil, map } from 'lodash';\nimport { Table } from 'react-bootstrap';\n\nimport * as templateOps from '../../../api/AnnotationTemplates/annotation-template-operations';\nimport * as annotationOps from '../../../api/Annotations/annotation-operations';\nimport Annotations from '../../../api/Annotations/Annotations';\n\nimport Loading from '../../components/Loading';\nimport TableContent from '../../components/TableContent';\nimport TablePagination from '../../components/TablePagination';\nimport ViewAnnotation from '../../components/ViewAnnotation';\n\nimport { GridContainer, Grid, GridLeftChild, GridRightChild } from './styles';\n\nconst HEADER_HEIGHT = 74; // When it is all in the same line\nconst PAGINATION_HEIGHT = 46;\nconst CELL_HEIGHT = 49;\n\nclass AnnotationsAtlas extends Component {\n annotationDiv = React.createRef();\n\n tableElement = React.createRef();\n\n state = {\n currentPage: 1,\n itemsPerPage: 1,\n selectedAnnotation: {}\n };\n\n componentDidMount() {\n window.addEventListener('resize', this.updateDimensions);\n this.updateDimensions();\n }\n\n componentDidUpdate(prevProps) {\n const { annotations, loading, video } = this.props;\n const { loading: prevLoading, video: prevVideo } = prevProps;\n\n if (!isEqual(loading, prevLoading) && !isEmpty(annotations))\n this.selectAnnotation(annotationOps.getId(annotations[0]));\n\n if (!isEqual(video, prevVideo)) this.selectAnnotation();\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateDimensions);\n }\n\n changePage = pageNumber => this.setState({ currentPage: pageNumber });\n\n changeStateProperty = (property, value) => this.setState({ [property]: value });\n\n selectAnnotation = annotationId => {\n const { annotations } = this.props;\n const selectedAnnotation = find(annotations, ['_id', annotationId]) || {};\n this.setState({ selectedAnnotation });\n if (!isNil(this.annotationDiv.current)) this.annotationDiv.current.scrollTop = 0;\n };\n\n updateDimensions = () => {\n const height =\n get(this, 'tableElement.current.offsetHeight', 500) - (PAGINATION_HEIGHT + HEADER_HEIGHT);\n\n let itemsPerPage = Math.floor(height / CELL_HEIGHT);\n if (itemsPerPage < 1) itemsPerPage = 1;\n\n this.setState({ itemsPerPage });\n };\n\n render() {\n const {\n annotations,\n gridBackgroundColor,\n isPreview,\n loading,\n totalCount,\n isPreviewMapEditor\n } = this.props;\n const { currentPage, itemsPerPage, selectedAnnotation } = this.state;\n\n const skip = currentPage * itemsPerPage - itemsPerPage;\n const annotationsForTable = map(annotations, annotation => ({\n _id: annotationOps.getId(annotation),\n name: templateOps.getName(annotationOps.getTemplate(annotation)),\n icon: templateOps.getIcon(annotationOps.getTemplate(annotation)),\n iconSvg: templateOps.getIconSvg(annotationOps.getTemplate(annotation)),\n libraryIcon: templateOps.getLibraryIcon(annotationOps.getTemplate(annotation))\n }));\n const annotationsToShow = filter(\n annotationsForTable,\n (annotation, index) => index >= skip && index < skip + itemsPerPage\n );\n\n const listProps = {\n clickAction: 'select',\n datesColumns: false,\n deleteButton: false,\n iconColumn: true,\n iconTooltip: true,\n itemIdentifier: 'id',\n items: annotationsToShow,\n loading: false,\n selectedRow: annotationOps.getId(selectedAnnotation),\n stretchView: isPreview,\n handleSelectRow: this.selectAnnotation\n };\n\n if (loading) return ;\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nAnnotationsAtlas.defaultProps = {\n annotations: [],\n gridBackgroundColor: '#98c1de',\n isPreview: false,\n totalCount: 0,\n video: '',\n isPreviewMapEditor: false\n};\n\nAnnotationsAtlas.propTypes = {\n annotations: PropTypes.array,\n gridBackgroundColor: PropTypes.string,\n isPreview: PropTypes.bool,\n loading: PropTypes.bool.isRequired,\n totalCount: PropTypes.number,\n video: PropTypes.string,\n isPreviewMapEditor: PropTypes.bool\n};\n\nexport default withTracker(({ video }) => {\n let annotationSub = {};\n let annotations = [];\n let totalCount = 0;\n if (!isEmpty(video)) {\n annotationSub = Meteor.isClient && Meteor.subscribe('annotations.video', video);\n annotations = Annotations.find({}, { sort: { videoTime: 1 } }).fetch();\n totalCount = Annotations.find({}, { sort: { videoTime: 1 } }).count();\n }\n return {\n annotations,\n loading: !isEmpty(video) && !annotationSub.ready(),\n totalCount\n };\n})(AnnotationsAtlas);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport TextNavbar from './TextNavbar';\n\nimport { ChildContainer } from './styles';\n\nconst { defaultAtlasSource } = Meteor.settings.public;\n\nconst AtlasIframe = ({\n atlasSource,\n atlasTitle,\n atlasTitleColor,\n atlasTitleSize,\n atlasTitleTextSize\n}) => {\n return (\n <>\n {!isEmpty(atlasTitle) && (\n \n )}\n \n \n \n \n );\n};\n\nAtlasIframe.defaultProps = {\n atlasSource: defaultAtlasSource,\n atlasTitle: '',\n atlasTitleColor: 'black',\n atlasTitleSize: '15px',\n atlasTitleTextSize: '15px'\n};\n\nAtlasIframe.propTypes = {\n atlasSource: PropTypes.string,\n atlasTitle: PropTypes.string,\n atlasTitleColor: PropTypes.string,\n atlasTitleSize: PropTypes.string,\n atlasTitleTextSize: PropTypes.string\n};\n\nexport default AtlasIframe;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Carousel } from 'react-bootstrap';\n\nimport GraphicIframe from './GraphicIframe';\nimport MapIframe from './MapIframe';\nimport TableIframe from './TableIframe';\n\nimport { StyledCarousel } from './styles';\n\nconst VERTICAL_HEIGHT = 100;\n\nconst CarouselFive = ({\n firstCarouselItem,\n secondCarouselItem,\n thirdCarouselItem,\n fourthCarouselItem,\n fifthCarouselItem,\n isPreview,\n isPublic\n}) => {\n const [index, setIndex] = useState(0);\n const handleSelect = selectedIndex => setIndex(selectedIndex);\n\n return (\n \n \n \n {React.cloneElement(firstCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(secondCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(thirdCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(fourthCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(fifthCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n );\n};\nCarouselFive.defaultProps = {\n firstCarouselItem: ,\n secondCarouselItem: ,\n thirdCarouselItem: ,\n fourthCarouselItem: ,\n fifthCarouselItem: ,\n isPreview: false,\n isPublic: false\n};\n\nCarouselFive.propTypes = {\n firstCarouselItem: PropTypes.node,\n secondCarouselItem: PropTypes.node,\n thirdCarouselItem: PropTypes.node,\n fourthCarouselItem: PropTypes.node,\n fifthCarouselItem: PropTypes.node,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool\n};\n\nexport default CarouselFive;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Carousel } from 'react-bootstrap';\n\nimport GraphicIframe from './GraphicIframe';\nimport MapIframe from './MapIframe';\nimport TableIframe from './TableIframe';\n\nimport { StyledCarousel } from './styles';\n\nconst VERTICAL_HEIGHT = 100;\n\nconst CarouselFour = ({\n firstCarouselItem,\n secondCarouselItem,\n thirdCarouselItem,\n fourthCarouselItem,\n isPreview,\n isPublic\n}) => {\n const [index, setIndex] = useState(0);\n const handleSelect = selectedIndex => setIndex(selectedIndex);\n\n return (\n \n \n \n {React.cloneElement(firstCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(secondCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(thirdCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(fourthCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n );\n};\nCarouselFour.defaultProps = {\n firstCarouselItem: ,\n secondCarouselItem: ,\n thirdCarouselItem: ,\n fourthCarouselItem: ,\n isPreview: false,\n isPublic: false\n};\n\nCarouselFour.propTypes = {\n firstCarouselItem: PropTypes.node,\n secondCarouselItem: PropTypes.node,\n thirdCarouselItem: PropTypes.node,\n fourthCarouselItem: PropTypes.node,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool\n};\n\nexport default CarouselFour;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Carousel } from 'react-bootstrap';\n\nimport GraphicIframe from './GraphicIframe';\nimport MapIframe from './MapIframe';\nimport TableIframe from './TableIframe';\n\nimport { StyledCarousel } from './styles';\n\nconst VERTICAL_HEIGHT = 100;\n\nconst CarouselThree = ({\n firstCarouselItem,\n secondCarouselItem,\n thirdCarouselItem,\n isPreview,\n isPublic\n}) => {\n const [index, setIndex] = useState(0);\n const handleSelect = selectedIndex => setIndex(selectedIndex);\n\n return (\n \n \n \n {React.cloneElement(firstCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(secondCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n \n {React.cloneElement(thirdCarouselItem, { isCarousel: true, isPreview })}\n
\n \n \n );\n};\n\nCarouselThree.defaultProps = {\n firstCarouselItem: ,\n secondCarouselItem: ,\n thirdCarouselItem: ,\n isPreview: false,\n isPublic: false\n};\n\nCarouselThree.propTypes = {\n firstCarouselItem: PropTypes.node,\n secondCarouselItem: PropTypes.node,\n thirdCarouselItem: PropTypes.node,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool\n};\n\nexport default CarouselThree;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { isNil } from 'lodash';\nimport * as atlasOps from '../../../api/Atlas/atlas-operations';\nimport TelemetryConnections from '../../../api/TelemetryConnections/TelemetryConnections';\nimport Loading from '../../components/Loading';\nimport MapContainerAIAtlas from '../../containers/MapContainerAIAtlas';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridBottomRightChild\n} from './styles';\n\nimport DatasetStepOne from '../../components/DatasetStepOne';\nimport DatasetStepTwo from '../../components/DatasetStepTwo';\n\nclass CreateDataset extends Component {\n tableElement = React.createRef();\n\n state = {\n aiInterestArea: {}\n };\n\n setAIInterestArea = newAIInterestArea => {\n this.setState({ aiInterestArea: newAIInterestArea });\n };\n\n render() {\n const {\n atlas,\n deployEnv,\n gridBackgroundColor,\n isPreview,\n isPublic,\n loading,\n gmsConnection,\n gmsConnection2\n } = this.props;\n const { aiInterestArea } = this.state;\n if (loading) return ;\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nCreateDataset.defaultProps = {\n atlas: {},\n deployEnv: '',\n gmsConnection: {},\n gmsConnection2: {},\n gridBackgroundColor: '#98c1de',\n isPreview: false,\n isPublic: false\n};\n\nCreateDataset.propTypes = {\n atlas: PropTypes.object,\n deployEnv: PropTypes.string,\n gmsConnection: PropTypes.object,\n gmsConnection2: PropTypes.object,\n gridBackgroundColor: PropTypes.string,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool,\n loading: PropTypes.bool.isRequired\n};\n\nexport default withTracker(({ atlas }) => {\n let gmsConnectionId = '';\n let gmsConnection2Id = '';\n let subscription = {};\n let subscription2 = {};\n if (!isNil(atlas)) {\n gmsConnectionId = atlasOps.getGMSConnection(atlas);\n gmsConnection2Id = atlasOps.getGMSConnection2(atlas);\n subscription = Meteor.subscribe('gmsConnections.public', gmsConnectionId);\n subscription2 = Meteor.subscribe('gmsConnections.public', gmsConnection2Id);\n }\n return {\n loading: !isNil(atlas) && !subscription.ready() && !subscription2.ready(),\n gmsConnection: TelemetryConnections.findOne(gmsConnectionId),\n gmsConnection2: TelemetryConnections.findOne(gmsConnection2Id)\n };\n})(CreateDataset);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ExpandButtonContainer, AtlasButtonImg } from './styles';\n\nconst ExpandModalButton = ({ showButton, handleShow }) => (\n {}}\n tabIndex={0}\n >\n \n \n);\nExpandModalButton.defaultProps = {\n showButton: true,\n handleShow: () => console.error('Show function not found')\n};\n\nExpandModalButton.propTypes = {\n showButton: PropTypes.bool,\n handleShow: PropTypes.func\n};\n\nexport default ExpandModalButton;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { findIndex, get, isNil } from 'lodash';\nimport turf from '@turf/turf';\n\nimport * as atlasOps from '../../../api/Atlas/atlas-operations';\nimport Layers, { LAYER_SUBTYPES } from '../../../api/Layers/Layers';\nimport * as taskOps from '../../../api/Tasks/task-operations';\nimport TelemetryConnections from '../../../api/TelemetryConnections/TelemetryConnections';\n\nimport focusedTrainTask from '../../../modules/tasks/focusedTrainTask';\n\nimport FocusedTrainTaskConfiguration from '../../components/FocusedTrainTaskConfiguration';\nimport Loading from '../../components/Loading';\nimport MapContainerFocusedTrainAtlas from '../../containers/MapContainerFocusedTrainAtlas';\nimport TaskMonitorContainer from '../../containers/TaskMonitorContainer';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridBottomRightChild,\n GridTaskMonitorContainer\n} from './styles';\n\nconst PER_PAGE = 5;\nconst HEADER_HEIGHT = 57; // When it is all in the same line\nconst PAGINATION_HEIGHT = 46;\nconst CELL_HEIGHT = 62;\n\nclass FocusedTrainAtlas extends Component {\n tableElement = React.createRef();\n\n state = {\n aois: {\n type: 'FeatureCollection',\n features: []\n },\n entities: {\n type: 'FeatureCollection',\n features: []\n },\n isEntities: true,\n isTableListLoaded: false,\n itemsPerPage: PER_PAGE,\n selectedLayer: '',\n selectedTaskEntities: []\n };\n\n componentDidMount() {\n window.addEventListener('resize', this.updateDimensions);\n }\n\n componentDidUpdate() {\n const { isTableListLoaded } = this.state;\n if (!isTableListLoaded && !isNil(this.tableElement.current)) this.updateDimensions();\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateDimensions);\n }\n\n setAIInterestArea = newAIInterestArea => {\n const { isEntities, entities, aois } = this.state;\n\n if (!isEntities) {\n let newFeatures = aois.features;\n if (\n turf.getType(newAIInterestArea) === 'Polygon' ||\n turf.getType(newAIInterestArea) === 'MultiPolygon'\n ) {\n newFeatures.push(newAIInterestArea);\n } else {\n newFeatures = aois.features.concat(newAIInterestArea.features);\n }\n const newAOIS = turf.featureCollection(newFeatures);\n\n this.setState({ aois: newAOIS });\n } else {\n let newFeatures = entities.features;\n if (\n turf.getType(newAIInterestArea) === 'Polygon' ||\n turf.getType(newAIInterestArea) === 'MultiPolygon'\n ) {\n newFeatures.push(newAIInterestArea);\n } else {\n newFeatures = entities.features.concat(newAIInterestArea.features);\n }\n const newEntities = turf.featureCollection(newFeatures);\n this.setState({ entities: newEntities });\n }\n };\n\n updateDimensions = () => {\n const height =\n get(this, 'tableElement.current.offsetHeight', 0) - (PAGINATION_HEIGHT + HEADER_HEIGHT);\n\n let itemsPerPage = Math.floor(height / CELL_HEIGHT);\n if (itemsPerPage < 1) itemsPerPage = 1;\n\n this.setState({ isTableListLoaded: true, itemsPerPage });\n };\n\n updateFlag = newIsEntities => this.setState({ isEntities: newIsEntities });\n\n updateSelectedLayer = layerId => this.setState({ selectedLayer: layerId });\n\n render() {\n const {\n atlas,\n deployEnv,\n gmsConnection,\n gridBackgroundColor,\n layers,\n isPreview,\n isPublic,\n loading\n } = this.props;\n const {\n aois,\n entities,\n isEntities,\n itemsPerPage,\n selectedTaskEntities,\n selectedLayer\n } = this.state;\n\n const outputNodeIndex = findIndex(taskOps.getNodes(focusedTrainTask({})), ['id', 'output']);\n const pathToConnector = `nodes[${outputNodeIndex}].connectionParams.connector`;\n\n if (loading) return ;\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nFocusedTrainAtlas.defaultProps = {\n atlas: {},\n deployEnv: '',\n gmsConnection: {},\n gridBackgroundColor: '#98c1de',\n layers: [],\n isPreview: false,\n isPublic: false\n};\n\nFocusedTrainAtlas.propTypes = {\n atlas: PropTypes.object,\n deployEnv: PropTypes.string,\n gmsConnection: PropTypes.object,\n gridBackgroundColor: PropTypes.string,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool,\n layers: PropTypes.array,\n loading: PropTypes.bool.isRequired\n};\n\nexport default withTracker(({ atlas }) => {\n let gmsConnectionId = '';\n let subscription = {};\n let layersSub = {};\n\n if (!isNil(atlas)) {\n gmsConnectionId = atlasOps.getGMSConnection(atlas);\n subscription = Meteor.subscribe('gmsConnections.public', gmsConnectionId);\n layersSub = Meteor.isClient && Meteor.subscribe('layers');\n }\n return {\n loading: !isNil(atlas) && !subscription.ready() && !layersSub.ready(),\n gmsConnection: TelemetryConnections.findOne(gmsConnectionId),\n layers: Layers.find({ layerSubType: LAYER_SUBTYPES.WMS }).fetch()\n };\n})(FocusedTrainAtlas);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { includes, isEmpty } from 'lodash';\nimport uuid from 'uuid/v1';\n\nimport TextNavbar from './TextNavbar';\nimport PublicGraphic from '../../pages/PublicGraphic';\n\nimport { ChildContainer } from './styles';\n\nconst { defaultGraphicSource } = Meteor.settings.public;\n\nconst GraphicIframe = ({\n graphicSource,\n graphicTitle,\n graphicTitleColor,\n graphicTitleSize,\n graphicTitleTextSize\n}) => {\n const absoluteUrl = Meteor.absoluteUrl('shared/graphics/');\n if (includes(graphicSource, absoluteUrl)) {\n const graphicPublicId = graphicSource.split('/').pop();\n const matchProp = { params: { public_graphic_id: graphicPublicId } };\n let atlasID = uuid();\n atlasID = atlasID.replace(/[0-9]/g, '');\n return (\n <>\n {!isEmpty(graphicTitle) && (\n \n )}\n \n \n \n \n );\n }\n return (\n <>\n {!isEmpty(graphicTitle) && (\n \n )}\n \n \n \n \n );\n};\n\nGraphicIframe.defaultProps = {\n graphicSource: defaultGraphicSource,\n graphicTitle: '',\n graphicTitleColor: 'black',\n graphicTitleSize: '15px',\n graphicTitleTextSize: '15px'\n};\n\nGraphicIframe.propTypes = {\n graphicSource: PropTypes.string,\n graphicTitle: PropTypes.string,\n graphicTitleColor: PropTypes.string,\n graphicTitleSize: PropTypes.string,\n graphicTitleTextSize: PropTypes.string\n};\n\nexport default GraphicIframe;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridChildrenContainer,\n GridTopChild,\n GridTopLeftChild,\n GridTopRightChild,\n GridMiddleChild,\n GridBottomChild,\n GridBottomLeftChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n TOPRIGHT: 'topRight',\n MIDDLE: 'middle',\n BOTTOMLEFT: 'bottomLeft',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultTableSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridDiceHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topRightGridChild,\n middleGridChild,\n bottomLeftGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n topRightGridChildURL,\n middleGridChildURL,\n bottomLeftGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n middleGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setTopLeftButton] = useState(false);\n const [showTopRight, setTopRightButton] = useState(false);\n const [showMiddle, setMiddleButton] = useState(false);\n const [showBottomLeftButton, setBottomLeftButton] = useState(false);\n const [showBottomRightButton, setBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setTopLeftButton(true)}\n onMouseLeave={() => setTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setTopRightButton(true)}\n onMouseLeave={() => setTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n setMiddleButton(true)}\n onMouseLeave={() => setMiddleButton(false)}\n >\n {React.cloneElement(middleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLE)}\n />\n \n \n \n )}\n \n \n \n setBottomLeftButton(true)}\n onMouseLeave={() => setBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setBottomRightButton(true)}\n onMouseLeave={() => setBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.MIDDLE && middleGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n \n \n \n );\n};\nGridDiceHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n topRightGridChild: ,\n middleGridChild: ,\n bottomLeftGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultGraphicSource,\n topRightGridChildURL: defaultTableSource,\n middleGridChildURL: defaultTableSource,\n bottomLeftGridChildURL: '',\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n middleGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: false\n};\n\nGridDiceHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n middleGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n middleGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n middleGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridDiceHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridTopLeftChild,\n GridBottomLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridMiddleChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n BOTTOMLEFT: 'bottomLeft',\n TOPRIGHT: 'topRight',\n MIDDLE: 'middle',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultTableSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridDiceVertical = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n bottomLeftGridChild,\n topRightGridChild,\n middleGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n bottomLeftGridChildURL,\n topRightGridChildURL,\n middleGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n middleGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setTopLeftButton] = useState(false);\n const [showBottomLeftButton, setBottomLeftButton] = useState(false);\n const [showTopRightButton, setTopRightButton] = useState(false);\n const [showMiddleButton, setMiddleButton] = useState(false);\n const [showBottomRightButton, setBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n setTopLeftButton(true)}\n onMouseLeave={() => setTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setBottomLeftButton(true)}\n onMouseLeave={() => setBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n \n setMiddleButton(true)}\n onMouseLeave={() => setMiddleButton(false)}\n >\n {React.cloneElement(middleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLE)}\n />\n \n \n \n )}\n \n \n setTopRightButton(true)}\n onMouseLeave={() => setTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n setBottomRightButton(true)}\n onMouseLeave={() => setBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.MIDDLE && middleGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridDiceVertical.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n bottomLeftGridChild: ,\n topRightGridChild: ,\n middleGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultMapSource,\n bottomLeftGridChildURL: '',\n topRightGridChildURL: defaultTableSource,\n middleGridChildURL: defaultGraphicSource,\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n middleGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: false\n};\n\nGridDiceVertical.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n middleGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n middleGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n middleGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridDiceVertical;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridChildrenContainer,\n GridTopChild,\n GridTopLeftChild,\n GridTopRightChild,\n GridBottomChild,\n GridBottomLeftChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPRIGHT: 'topRight',\n BOTTOMRIGHT: 'bottomRight',\n TOPLEFT: 'topLeft',\n BOTTOMLEFT: 'bottomLeft'\n};\n\nconst { defaultMapSource, defaultTableSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridFourQuarters = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topRightGridChild,\n bottomLeftGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n topRightGridChildURL,\n bottomLeftGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showTopRight, setShowTopRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n \n \n \n );\n};\nGridFourQuarters.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n bottomLeftGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChild: ,\n topRightGridChild: ,\n bottomLeftGridChildURL: '',\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildURL: defaultGraphicSource,\n topRightGridChildURL: defaultTableSource,\n bottomLeftGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n topLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: false\n};\n\nGridFourQuarters.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n bottomLeftGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n bottomLeftGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridFourQuarters;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridBottomChild, GridTopChild, GridMiddleChild } from './styles';\n\nconst MODALS = {\n TOP: 'top',\n MIDDLETOP: 'middleTop',\n MIDDLEBOTTOM: 'middleBottom',\n BOTTOM: 'bottom'\n};\n\nconst { defaultMapSource, defaultTableSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridFourQuartersHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topGridChild,\n middleTopGridChild,\n middleBottomGridChild,\n bottomGridChild,\n topGridChildURL,\n middleTopGridChildURL,\n middleBottomGridChildURL,\n bottomGridChildURL,\n topGridChildExternalURL,\n middleTopGridChildExternalURL,\n middleBottomGridChildExternalURL,\n bottomGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopButton, setTopButton] = useState(false);\n const [showMiddleTopButton, setMiddleTopButton] = useState(false);\n const [showMiddleBottomButton, setMiddleBottomButton] = useState(false);\n const [showBottomButton, setShowBottomButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setTopButton(true)}\n onMouseLeave={() => setTopButton(false)}\n >\n {React.cloneElement(topGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOP)}\n />\n \n \n \n )}\n \n setMiddleTopButton(true)}\n onMouseLeave={() => setMiddleTopButton(false)}\n >\n {React.cloneElement(middleTopGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLETOP)}\n />\n \n \n \n )}\n \n setMiddleBottomButton(true)}\n onMouseLeave={() => setMiddleBottomButton(false)}\n >\n {React.cloneElement(middleBottomGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLEBOTTOM)}\n />\n \n \n \n )}\n \n setShowBottomButton(true)}\n onMouseLeave={() => setShowBottomButton(false)}\n >\n {React.cloneElement(bottomGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOM)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOP && topGridChild}\n {modalToShow === MODALS.MIDDLETOP && middleTopGridChild}\n {modalToShow === MODALS.MIDDLEBOTTOM && middleBottomGridChild}\n {modalToShow === MODALS.BOTTOM && bottomGridChild}\n \n \n \n );\n};\nGridFourQuartersHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topGridChild: ,\n middleTopGridChild: ,\n middleBottomGridChild: ,\n bottomGridChild: ,\n topGridChildURL: defaultMapSource,\n middleTopGridChildURL: defaultTableSource,\n middleBottomGridChildURL: defaultGraphicSource,\n bottomGridChildURL: defaultGraphicSource,\n topGridChildExternalURL: '',\n middleTopGridChildExternalURL: '',\n middleBottomGridChildExternalURL: '',\n bottomGridChildExternalURL: '',\n isPreview: false,\n showButtons: false\n};\n\nGridFourQuartersHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topGridChild: PropTypes.node,\n middleTopGridChild: PropTypes.node,\n middleBottomGridChild: PropTypes.node,\n bottomGridChild: PropTypes.node,\n topGridChildURL: PropTypes.string,\n middleTopGridChildURL: PropTypes.string,\n middleBottomGridChildURL: PropTypes.string,\n bottomGridChildURL: PropTypes.string,\n topGridChildExternalURL: PropTypes.string,\n middleTopGridChildExternalURL: PropTypes.string,\n middleBottomGridChildExternalURL: PropTypes.string,\n bottomGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridFourQuartersHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridLeftChild, GridRightChild, GridMiddleChild } from './styles';\n\nconst MODALS = {\n LEFT: 'left',\n MIDDLELEFT: 'middleLeft',\n MIDDLERIGHT: 'middleRight',\n RIGHT: 'right'\n};\n\nconst { defaultMapSource, defaultTableSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridFourQuartersVertical = ({\n gridBackgroundColor,\n heightToRemove,\n leftGridChild,\n middleLeftGridChild,\n middleRightGridChild,\n rightGridChild,\n leftGridChildURL,\n middleLeftGridChildURL,\n middleRightGridChildURL,\n rightGridChildURL,\n leftGridChildExternalURL,\n middleLeftGridChildExternalURL,\n middleRightGridChildExternalURL,\n rightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showLeftButton, setLeftButton] = useState(false);\n const [showMiddleLeftButton, setMiddleLeftButton] = useState(false);\n const [showMiddleRightButton, setMiddleRightButton] = useState(false);\n const [showRightButton, setRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setLeftButton(true)}\n onMouseLeave={() => setLeftButton(false)}\n >\n {React.cloneElement(leftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.LEFT)}\n />\n \n \n \n )}\n \n setMiddleLeftButton(true)}\n onMouseLeave={() => setMiddleLeftButton(false)}\n >\n {React.cloneElement(middleLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLELEFT)}\n />\n \n \n \n )}\n \n setMiddleRightButton(true)}\n onMouseLeave={() => setMiddleRightButton(false)}\n >\n {React.cloneElement(middleRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLERIGHT)}\n />\n \n \n \n )}\n \n setRightButton(true)}\n onMouseLeave={() => setRightButton(false)}\n >\n {React.cloneElement(rightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.RIGHT)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.LEFT && leftGridChild}\n {modalToShow === MODALS.MIDDLELEFT && middleLeftGridChild}\n {modalToShow === MODALS.MIDDLERIGHT && middleRightGridChild}\n {modalToShow === MODALS.RIGHT && rightGridChild}\n \n \n \n );\n};\nGridFourQuartersVertical.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n leftGridChild: ,\n middleLeftGridChild: ,\n middleRightGridChild: ,\n rightGridChild: ,\n leftGridChildURL: defaultGraphicSource,\n middleLeftGridChildURL: defaultTableSource,\n middleRightGridChildURL: defaultGraphicSource,\n rightGridChildURL: defaultMapSource,\n leftGridChildExternalURL: '',\n middleLeftGridChildExternalURL: '',\n middleRightGridChildExternalURL: '',\n rightGridChildExternalURL: '',\n isPreview: false,\n showButtons: false\n};\n\nGridFourQuartersVertical.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n leftGridChild: PropTypes.node,\n middleLeftGridChild: PropTypes.node,\n middleRightGridChild: PropTypes.node,\n rightGridChild: PropTypes.node,\n leftGridChildURL: PropTypes.string,\n middleLeftGridChildURL: PropTypes.string,\n middleRightGridChildURL: PropTypes.string,\n rightGridChildURL: PropTypes.string,\n leftGridChildExternalURL: PropTypes.string,\n middleLeftGridChildExternalURL: PropTypes.string,\n middleRightGridChildExternalURL: PropTypes.string,\n rightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridFourQuartersVertical;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridOnlyChild } from './styles';\n\nconst { defaultMapSource } = Meteor.settings.public;\n\nconst MODALS = {\n ONE: 'one'\n};\nconst GridOne = ({\n gridBackgroundColor,\n heightToRemove,\n gridChild,\n gridChildURL,\n gridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showOneButton, setOneButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setOneButton(true)}\n onMouseLeave={() => setOneButton(false)}\n >\n {React.cloneElement(gridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.ONE)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.ONE && gridChild}\n \n \n \n );\n};\nGridOne.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n gridChild: ,\n gridChildURL: defaultMapSource,\n gridChildExternalURL: '',\n isPreview: false,\n showButtons: false\n};\n\nGridOne.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n gridChild: PropTypes.node,\n gridChildURL: PropTypes.string,\n gridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridOne;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { isEmpty } from 'lodash';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n LEFT: 'left',\n TOPRIGHT: 'topRight',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultTableSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridOneHalfTwoQuarters = ({\n gridBackgroundColor,\n heightToRemove,\n leftGridChild,\n topRightGridChild,\n bottomRightGridChild,\n leftGridChildURL,\n topRightGridChildURL,\n bottomRightGridChildURL,\n leftGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showLeftButton, setLeftButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showBottomRight, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setLeftButton(true)}\n onMouseLeave={() => setLeftButton(false)}\n >\n {React.cloneElement(leftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.LEFT)}\n />\n \n \n \n )}\n \n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.LEFT && leftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridOneHalfTwoQuarters.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topRightGridChild: ,\n leftGridChild: ,\n bottomRightGridChild: ,\n topRightGridChildURL: defaultGraphicSource,\n leftGridChildURL: defaultMapSource,\n bottomRightGridChildURL: defaultTableSource,\n topRightGridChildExternalURL: '',\n leftGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridOneHalfTwoQuarters.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topRightGridChild: PropTypes.node,\n leftGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topRightGridChildURL: PropTypes.string,\n leftGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n leftGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridOneHalfTwoQuarters;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridTopChild,\n GridBottomChild,\n GridChildrenContainer,\n GridBottomLeftChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n BOTTOMRIGHT: 'bottomRight',\n BOTTOMLEFT: 'bottomLeft',\n TOP: 'top'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridOneHalfTwoQuartersHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topGridChild,\n bottomLeftGridChild,\n bottomRightGridChild,\n topGridChildURL,\n bottomLeftGridChildURL,\n bottomRightGridChildURL,\n topGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopButton, setTopButton] = useState(false);\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setTopButton(true)}\n onMouseLeave={() => setTopButton(false)}\n >\n {React.cloneElement(topGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOP)}\n />\n \n \n \n )}\n \n \n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOP && topGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridOneHalfTwoQuartersHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topGridChild: ,\n bottomLeftGridChild: ,\n bottomRightGridChild: ,\n topGridChildURL: defaultMapSource,\n bottomLeftGridChildURL: defaultGraphicSource,\n bottomRightGridChildURL: defaultTableSource,\n topGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridOneHalfTwoQuartersHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridOneHalfTwoQuartersHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridChildrenContainer,\n GridTopChild,\n GridTopLeftChild,\n GridTopRightChild,\n GridMiddleLeftChild,\n GridMiddleRightChild,\n GridBottomChild,\n GridBottomLeftChild,\n GridBottomRightChild,\n GridMiddleChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n TOPRIGHT: 'topRight',\n BOTTOMLEFT: 'bottomLeft',\n BOTTOMRIGHT: 'bottomRight',\n MIDDLELEFT: 'middleLeft',\n MIDDLERIGHT: 'middleRight'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridSixSixthsHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topRightGridChild,\n middleLeftGridChild,\n middleRightGridChild,\n bottomLeftGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n topRightGridChildURL,\n middleLeftGridChildURL,\n middleRightGridChildURL,\n bottomLeftGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n middleLeftGridChildExternalURL,\n middleRightGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showMiddleLeftButton, setShowMiddleLeftButton] = useState(false);\n const [showMiddleRightButton, setShowMiddleRightButton] = useState(false);\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setShowMiddleLeftButton(true)}\n onMouseLeave={() => setShowMiddleLeftButton(false)}\n >\n {React.cloneElement(middleLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setShowMiddleLeftButton(MODALS.MIDDLELEFT)}\n />\n \n \n \n )}\n \n setShowMiddleRightButton(true)}\n onMouseLeave={() => setShowMiddleRightButton(false)}\n >\n {React.cloneElement(middleRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setShowMiddleRightButton(MODALS.MIDDLERIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.MIDDLERIGHT && middleRightGridChild}\n {modalToShow === MODALS.MIDDLELEFT && middleLeftGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n \n \n \n );\n};\nGridSixSixthsHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n topRightGridChild: ,\n middleLeftGridChild: ,\n middleRightGridChild: ,\n bottomLeftGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultGraphicSource,\n topRightGridChildURL: defaultTableSource,\n middleLeftGridChildURL: defaultMapSource,\n middleRightGridChildURL: defaultTableSource,\n bottomLeftGridChildURL: '',\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n middleLeftGridChildExternalURL: '',\n middleRightGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridSixSixthsHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n middleLeftGridChild: PropTypes.node,\n middleRightGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n middleLeftGridChildURL: PropTypes.string,\n middleRightGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n middleLeftGridChildExternalURL: PropTypes.string,\n middleRightGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridSixSixthsHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridChildrenContainer,\n GridTopChild,\n GridTopLeftChild,\n GridHorizontalMiddleChild,\n GridTopRightChild,\n GridBottomChild,\n GridBottomLeftChild,\n GridBottomRightChild\n} from './styles';\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst MODALS = {\n TOPRIGHT: 'topRight',\n TOPMIDDLE: 'topMiddle',\n TOPLEFT: 'topLeft',\n BOTTOMLEFT: 'bottomLeft',\n BOTTOMMIDDLE: 'bottomMiddle',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst GridSixSixthsVertical = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topMiddleGridChild,\n topRightGridChild,\n bottomLeftGridChild,\n bottomMiddleGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n topMiddleGridChildURL,\n topRightGridChildURL,\n bottomLeftGridChildURL,\n bottomMiddleGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n topMiddleGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomMiddleGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showTopMiddleButton, setShowTopMiddleButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showBottomMiddleButton, setShowBottomMiddleButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowTopMiddleButton(true)}\n onMouseLeave={() => setShowTopMiddleButton(false)}\n >\n {React.cloneElement(topMiddleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPMIDDLE)}\n />\n \n \n \n )}\n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setShowBottomMiddleButton(true)}\n onMouseLeave={() => setShowBottomMiddleButton(false)}\n >\n {React.cloneElement(bottomMiddleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMMIDDLE)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPMIDDLE && topMiddleGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.BOTTOMMIDDLE && bottomMiddleGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridSixSixthsVertical.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n topMiddleGridChild: ,\n topRightGridChild: ,\n bottomLeftGridChild: ,\n bottomMiddleGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultMapSource,\n topMiddleGridChildURL: defaultGraphicSource,\n topRightGridChildURL: defaultTableSource,\n bottomLeftGridChildURL: '',\n bottomMiddleGridChildURL: defaultTableSource,\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n topMiddleGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n bottomMiddleGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridSixSixthsVertical.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n topMiddleGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n bottomMiddleGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n topMiddleGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n bottomMiddleGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topMiddleGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomMiddleGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridSixSixthsVertical;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridChildrenContainer,\n GridTopChild,\n GridTopLeftChild,\n GridHorizontalMiddleChild,\n GridTopRightChild,\n GridBottomChild,\n GridBottomLeftChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n TOPMIDDLE: 'topMiddle',\n TOPRIGHT: 'topRight',\n BOTTOMLEFT: 'bottomLeft',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridThreeSixthsTwoQuartersHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topMiddleGridChild,\n topRightGridChild,\n bottomLeftGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n topMiddleGridChildURL,\n topRightGridChildURL,\n bottomLeftGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n topMiddleGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showTopMiddleButton, setShowTopMiddleButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowTopMiddleButton(true)}\n onMouseLeave={() => setShowTopMiddleButton(false)}\n >\n {React.cloneElement(topMiddleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPMIDDLE)}\n />\n \n \n \n )}\n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPMIDDLE && topMiddleGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridThreeSixthsTwoQuartersHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n topMiddleGridChild: ,\n topRightGridChild: ,\n bottomLeftGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultMapSource,\n topMiddleGridChildURL: defaultGraphicSource,\n topRightGridChildURL: defaultTableSource,\n bottomLeftGridChildURL: '',\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n topMiddleGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridThreeSixthsTwoQuartersHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n topMiddleGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n topMiddleGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topMiddleGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridThreeSixthsTwoQuartersHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridTopLeftChild,\n GridMiddleLeftChild,\n GridBottomLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n MIDDLELEFT: 'middleLeft',\n BOTTOMLEFT: 'bottomLeft',\n TOPRIGHT: 'topRight',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridThreeSixthsTwoQuartersVertical = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n middleLeftGridChild,\n bottomLeftGridChild,\n topRightGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n middleLeftGridChildURL,\n bottomLeftGridChildURL,\n topRightGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n middleLeftGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showMiddleLeftButton, setShowMiddleLeftButton] = useState(false);\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowMiddleLeftButton(true)}\n onMouseLeave={() => setShowMiddleLeftButton(false)}\n >\n {React.cloneElement(middleLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLELEFT)}\n />\n \n \n \n )}\n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n \n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.MIDDLELEFT && middleLeftGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridThreeSixthsTwoQuartersVertical.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n middleLeftGridChild: ,\n bottomLeftGridChild: ,\n topRightGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultMapSource,\n middleLeftGridChildURL: defaultGraphicSource,\n bottomLeftGridChildURL: '',\n topRightGridChildURL: defaultTableSource,\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n middleLeftGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridThreeSixthsTwoQuartersVertical.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n middleLeftGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n middleLeftGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n middleLeftGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridThreeSixthsTwoQuartersVertical;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridBottomChild, GridTopChild, GridMiddleChild } from './styles';\n\nconst MODALS = {\n TOP: 'top',\n MIDDLE: 'middle',\n BOTTOM: 'bottom'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridThreeThirds = ({\n gridBackgroundColor,\n heightToRemove,\n topGridChild,\n bottomGridChild,\n middleGridChild,\n topGridChildURL,\n bottomGridChildURL,\n middleGridChildURL,\n topGridChildExternalURL,\n bottomGridChildExternalURL,\n middleGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopButton, setTopButton] = useState(false);\n const [showMiddleButton, setShowMiddleButton] = useState(false);\n const [showBottomButton, setShowBottomButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setTopButton(true)}\n onMouseLeave={() => setTopButton(false)}\n >\n {React.cloneElement(topGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOP)}\n />\n \n \n \n )}\n \n setShowMiddleButton(true)}\n onMouseLeave={() => setShowMiddleButton(false)}\n >\n {React.cloneElement(middleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLE)}\n />\n \n \n \n )}\n \n setShowBottomButton(true)}\n onMouseLeave={() => setShowBottomButton(false)}\n >\n {React.cloneElement(bottomGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOM)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOP && topGridChild}\n {modalToShow === MODALS.MIDDLE && middleGridChild}\n {modalToShow === MODALS.BOTTOM && bottomGridChild}\n \n \n \n );\n};\nGridThreeThirds.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n bottomGridChild: ,\n middleGridChild: ,\n topGridChild: ,\n topGridChildURL: defaultGraphicSource,\n middleGridChildURL: defaultTableSource,\n bottomGridChildURL: defaultMapSource,\n topGridChildExternalURL: '',\n middleGridChildExternalURL: '',\n bottomGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridThreeThirds.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topGridChild: PropTypes.node,\n middleGridChild: PropTypes.node,\n bottomGridChild: PropTypes.node,\n topGridChildURL: PropTypes.string,\n middleGridChildURL: PropTypes.string,\n bottomGridChildURL: PropTypes.string,\n topGridChildExternalURL: PropTypes.string,\n middleGridChildExternalURL: PropTypes.string,\n bottomGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridThreeThirds;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridLeftChild, GridRightChild, GridMiddleChild } from './styles';\n\nconst MODALS = {\n LEFT: 'left',\n MIDDLE: 'middle',\n RIGHT: 'right'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridThreeThirdsVertical = ({\n gridBackgroundColor,\n heightToRemove,\n leftGridChild,\n rightGridChild,\n middleGridChild,\n leftGridChildURL,\n rightGridChildURL,\n middleGridChildURL,\n leftGridChildExternalURL,\n rightGridChildExternalURL,\n middleGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showLeftButton, setLeftButton] = useState(false);\n const [showMiddleButton, setMiddleButton] = useState(false);\n const [showRightButton, setRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setLeftButton(true)}\n onMouseLeave={() => setLeftButton(false)}\n >\n {React.cloneElement(leftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.LEFT)}\n />\n \n \n \n )}\n \n setMiddleButton(true)}\n onMouseLeave={() => setMiddleButton(false)}\n >\n {React.cloneElement(middleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLE)}\n />\n \n \n \n )}\n \n setRightButton(true)}\n onMouseLeave={() => setRightButton(false)}\n >\n {React.cloneElement(rightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.RIGHT)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.LEFT && leftGridChild}\n {modalToShow === MODALS.MIDDLE && middleGridChild}\n {modalToShow === MODALS.RIGHT && rightGridChild}\n \n \n \n );\n};\nGridThreeThirdsVertical.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n leftGridChild: ,\n middleGridChild: ,\n rightGridChild: ,\n leftGridChildURL: defaultGraphicSource,\n middleGridChildURL: defaultTableSource,\n rightGridChildURL: defaultMapSource,\n leftGridChildExternalURL: '',\n middleGridChildExternalURL: '',\n rightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridThreeThirdsVertical.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n leftGridChild: PropTypes.node,\n middleGridChild: PropTypes.node,\n rightGridChild: PropTypes.node,\n leftGridChildURL: PropTypes.string,\n middleGridChildURL: PropTypes.string,\n rightGridChildURL: PropTypes.string,\n leftGridChildExternalURL: PropTypes.string,\n middleGridChildExternalURL: PropTypes.string,\n rightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridThreeThirdsVertical;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridLeftChild, GridRightChild } from './styles';\n\nconst MODALS = {\n LEFT: 'left',\n RIGHT: 'right'\n};\n\nconst { defaultMapSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridTwoHalves = ({\n gridBackgroundColor,\n heightToRemove,\n leftGridChild,\n rightGridChild,\n leftGridChildURL,\n rightGridChildURL,\n leftGridChildExternalURL,\n rightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showLeftButton, setLeftButton] = useState(false);\n const [showRightButton, setRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setLeftButton(true)}\n onMouseLeave={() => setLeftButton(false)}\n >\n {React.cloneElement(leftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.LEFT)}\n />\n \n \n \n )}\n \n setRightButton(true)}\n onMouseLeave={() => setRightButton(false)}\n >\n {React.cloneElement(rightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.RIGHT)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.LEFT && leftGridChild}\n {modalToShow === MODALS.RIGHT && rightGridChild}\n \n \n \n );\n};\nGridTwoHalves.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n leftGridChild: ,\n rightGridChild: ,\n leftGridChildURL: defaultGraphicSource,\n rightGridChildURL: defaultMapSource,\n leftGridChildExternalURL: '',\n rightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridTwoHalves.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n leftGridChild: PropTypes.node,\n rightGridChild: PropTypes.node,\n leftGridChildURL: PropTypes.string,\n rightGridChildURL: PropTypes.string,\n leftGridChildExternalURL: PropTypes.string,\n rightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridTwoHalves;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { GridContainer, Grid, GridBottomChild, GridTopChild } from './styles';\n\nconst MODALS = {\n TOP: 'top',\n BOTTOM: 'bottom'\n};\n\nconst { defaultMapSource, defaultGraphicSource } = Meteor.settings.public;\n\nconst GridTwoHalvesHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topGridChild,\n bottomGridChild,\n topGridChildURL,\n bottomGridChildURL,\n topGridChildExternalURL,\n bottomGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopButton, setTopButton] = useState(false);\n const [showBottomButton, setShowBottomButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n setTopButton(true)}\n onMouseLeave={() => setTopButton(false)}\n >\n {React.cloneElement(topGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOP)}\n />\n \n \n \n )}\n \n setShowBottomButton(true)}\n onMouseLeave={() => setShowBottomButton(false)}\n >\n {React.cloneElement(bottomGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOM)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOP && topGridChild}\n {modalToShow === MODALS.BOTTOM && bottomGridChild}\n \n \n \n );\n};\nGridTwoHalvesHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n bottomGridChild: ,\n topGridChild: ,\n topGridChildURL: defaultGraphicSource,\n bottomGridChildURL: defaultMapSource,\n topGridChildExternalURL: '',\n bottomGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridTwoHalvesHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topGridChild: PropTypes.node,\n bottomGridChild: PropTypes.node,\n topGridChildURL: PropTypes.string,\n bottomGridChildURL: PropTypes.string,\n topGridChildExternalURL: PropTypes.string,\n bottomGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridTwoHalvesHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridRightChild,\n GridTopLeftChild,\n GridBottomLeftChild\n} from './styles';\n\nconst MODALS = {\n RIGHT: 'right',\n TOPLEFT: 'topLeft',\n BOTTOMLEFT: 'bottomLeft'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridTwoQuartersOneHalf = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n bottomLeftGridChild,\n rightGridChild,\n topLeftGridChildURL,\n bottomLeftGridChildURL,\n rightGridChildURL,\n topLeftGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n rightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showRightButton, setRightButton] = useState(false);\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showBottomLeft, setShowBottomLeftButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n \n setRightButton(true)}\n onMouseLeave={() => setRightButton(false)}\n >\n {React.cloneElement(rightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.RIGHT)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.RIGHT && rightGridChild}\n {modalToShow === MODALS.TOPRLEFT && topLeftGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n \n \n \n );\n};\nGridTwoQuartersOneHalf.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n rightGridChild: ,\n topLeftGridChild: ,\n bottomLeftGridChild: ,\n rightGridChildURL: defaultMapSource,\n topLeftGridChildURL: defaultGraphicSource,\n bottomLeftGridChildURL: defaultTableSource,\n rightGridChildExternalURL: '',\n topLeftGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridTwoQuartersOneHalf.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n rightGridChild: PropTypes.node,\n topLeftGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n rightGridChildURL: PropTypes.string,\n topLeftGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n rightGridChildExternalURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridTwoQuartersOneHalf;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridTopChild,\n GridChildrenContainer,\n GridTopLeftChild,\n GridTopRightChild,\n GridBottomChild\n} from './styles';\n\nconst MODALS = {\n TOPRIGHT: 'topRight',\n TOPLEFT: 'topLeft',\n BOTTOM: 'bottom'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridTwoQuartersOneHalfHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topRightGridChild,\n bottomGridChild,\n topLeftGridChildURL,\n topRightGridChildURL,\n bottomGridChildURL,\n topLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showBottomButton, setBottomButton] = useState(false);\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n setBottomButton(true)}\n onMouseLeave={() => setBottomButton(false)}\n >\n {React.cloneElement(bottomGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOM)}\n />\n \n \n \n )}\n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.BOTTOM && bottomGridChild}\n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n \n \n \n );\n};\nGridTwoQuartersOneHalfHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n bottomGridChild: ,\n topLeftGridChild: ,\n topRightGridChild: ,\n bottomGridChildURL: defaultMapSource,\n topLeftGridChildURL: defaultGraphicSource,\n topRightGridChildURL: defaultTableSource,\n bottomGridChildExternalURL: '',\n topLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridTwoQuartersOneHalfHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n bottomGridChild: PropTypes.node,\n topLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n bottomGridChildURL: PropTypes.string,\n topLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n bottomGridChildExternalURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridTwoQuartersOneHalfHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridChildrenContainer,\n GridTopChild,\n GridTopLeftChild,\n GridTopRightChild,\n GridBottomChild,\n GridBottomLeftChild,\n GridHorizontalMiddleChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n TOPRIGHT: 'topRight',\n BOTTOMLEFT: 'bottomLeft',\n BOTTOMMIDDLE: 'bottomMiddle',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridTwoQuartersThreeSixthsHorizontal = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n topRightGridChild,\n bottomLeftGridChild,\n bottomMiddleGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n topRightGridChildURL,\n bottomLeftGridChildURL,\n bottomMiddleGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n bottomMiddleGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showBottomMiddleButton, setShowBottomMiddleButton] = useState(false);\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n setShowBottomMiddleButton(true)}\n onMouseLeave={() => setShowBottomMiddleButton(false)}\n >\n {React.cloneElement(bottomMiddleGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMMIDLLE)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.BOTTOMMIDLLE && bottomMiddleGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridTwoQuartersThreeSixthsHorizontal.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n topRightGridChild: ,\n bottomLeftGridChild: ,\n bottomMiddleGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultMapSource,\n topRightGridChildURL: defaultTableSource,\n bottomLeftGridChildURL: '',\n bottomMiddleGridChildURL: defaultTableSource,\n bottomRightGridChildURL: defaultGraphicSource,\n topLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n bottomMiddleGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridTwoQuartersThreeSixthsHorizontal.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n bottomMiddleGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n bottomMiddleGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n bottomMiddleGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridTwoQuartersThreeSixthsHorizontal;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport {\n GridContainer,\n Grid,\n GridLeftChild,\n GridTopLeftChild,\n GridBottomLeftChild,\n GridRightChild,\n GridTopRightChild,\n GridMiddleRightChild,\n GridBottomRightChild\n} from './styles';\n\nconst MODALS = {\n TOPLEFT: 'topLeft',\n BOTTOMLEFT: 'bottomLeft',\n TOPRIGHT: 'topRight',\n MIDDLERIGHT: 'middleRight',\n BOTTOMRIGHT: 'bottomRight'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst GridTwoQuartersThreeSixthsVertical = ({\n gridBackgroundColor,\n heightToRemove,\n topLeftGridChild,\n bottomLeftGridChild,\n topRightGridChild,\n middleRightGridChild,\n bottomRightGridChild,\n topLeftGridChildURL,\n bottomLeftGridChildURL,\n topRightGridChildURL,\n middleRightGridChildURL,\n bottomRightGridChildURL,\n topLeftGridChildExternalURL,\n bottomLeftGridChildExternalURL,\n topRightGridChildExternalURL,\n middleRightGridChildExternalURL,\n bottomRightGridChildExternalURL,\n isPreview,\n showButtons\n}) => {\n const [showTopLeftButton, setShowTopLeftButton] = useState(false);\n const [showBottomLeftButton, setShowBottomLeftButton] = useState(false);\n const [showTopRightButton, setShowTopRightButton] = useState(false);\n const [showMiddleRightButton, setShowMiddleRightButton] = useState(false);\n const [showBottomRightButton, setShowBottomRightButton] = useState(false);\n\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n setShowTopLeftButton(true)}\n onMouseLeave={() => setShowTopLeftButton(false)}\n >\n {React.cloneElement(topLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPLEFT)}\n />\n \n \n \n )}\n \n setShowBottomLeftButton(true)}\n onMouseLeave={() => setShowBottomLeftButton(false)}\n >\n {React.cloneElement(bottomLeftGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMLEFT)}\n />\n \n \n \n )}\n \n \n \n setShowTopRightButton(true)}\n onMouseLeave={() => setShowTopRightButton(false)}\n >\n {React.cloneElement(topRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TOPRIGHT)}\n />\n \n \n \n )}\n \n setShowMiddleRightButton(true)}\n onMouseLeave={() => setShowMiddleRightButton(false)}\n >\n {React.cloneElement(middleRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.MIDDLERIGHT)}\n />\n \n \n \n )}\n \n setShowBottomRightButton(true)}\n onMouseLeave={() => setShowBottomRightButton(false)}\n >\n {React.cloneElement(bottomRightGridChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.BOTTOMRIGHT)}\n />\n \n \n \n )}\n \n \n \n \n setModalToShow('')}\n dialogClassName=\"w-75 mw-100 mh-100\"\n >\n \n \n {modalToShow === MODALS.TOPLEFT && topLeftGridChild}\n {modalToShow === MODALS.BOTTOMLEFT && bottomLeftGridChild}\n {modalToShow === MODALS.TOPRIGHT && topRightGridChild}\n {modalToShow === MODALS.MIDDLERIGHT && middleRightGridChild}\n {modalToShow === MODALS.BOTTOMRIGHT && bottomRightGridChild}\n \n \n \n );\n};\nGridTwoQuartersThreeSixthsVertical.defaultProps = {\n gridBackgroundColor: '#545554',\n heightToRemove: '5%',\n topLeftGridChild: ,\n bottomLeftGridChild: ,\n topRightGridChild: ,\n middleRightGridChild: ,\n bottomRightGridChild: ,\n topLeftGridChildURL: defaultMapSource,\n bottomLeftGridChildURL: '',\n topRightGridChildURL: defaultTableSource,\n middleRightGridChildURL: defaultGraphicSource,\n bottomRightGridChildURL: defaultMapSource,\n topLeftGridChildExternalURL: '',\n bottomLeftGridChildExternalURL: '',\n topRightGridChildExternalURL: '',\n middleRightGridChildExternalURL: '',\n bottomRightGridChildExternalURL: '',\n isPreview: false,\n showButtons: true\n};\n\nGridTwoQuartersThreeSixthsVertical.propTypes = {\n gridBackgroundColor: PropTypes.string,\n heightToRemove: PropTypes.string,\n topLeftGridChild: PropTypes.node,\n bottomLeftGridChild: PropTypes.node,\n topRightGridChild: PropTypes.node,\n middleRightGridChild: PropTypes.node,\n bottomRightGridChild: PropTypes.node,\n topLeftGridChildURL: PropTypes.string,\n bottomLeftGridChildURL: PropTypes.string,\n topRightGridChildURL: PropTypes.string,\n middleRightGridChildURL: PropTypes.string,\n bottomRightGridChildURL: PropTypes.string,\n topLeftGridChildExternalURL: PropTypes.string,\n bottomLeftGridChildExternalURL: PropTypes.string,\n topRightGridChildExternalURL: PropTypes.string,\n middleRightGridChildExternalURL: PropTypes.string,\n bottomRightGridChildExternalURL: PropTypes.string,\n isPreview: PropTypes.bool,\n showButtons: PropTypes.bool\n};\n\nexport default GridTwoQuartersThreeSixthsVertical;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { Image } from 'react-bootstrap';\nimport { isEmpty } from 'lodash';\n\nimport TextNavbar from './TextNavbar';\n\nimport { ChildContainer } from './styles';\n\nconst { defaultImageSource } = Meteor.settings.public;\n\nconst ImageElement = ({\n imageSource,\n imageTitle,\n imageTitleColor,\n imageTitleSize,\n imageTitleTextSize\n}) => (\n <>\n {!isEmpty(imageTitle) && (\n \n )}\n \n \n \n \n);\n\nImageElement.defaultProps = {\n imageSource: defaultImageSource,\n imageTitle: '',\n imageTitleColor: 'black',\n imageTitleSize: '15px',\n imageTitleTextSize: '15px'\n};\n\nImageElement.propTypes = {\n imageSource: PropTypes.string,\n imageTitle: PropTypes.string,\n imageTitleColor: PropTypes.string,\n imageTitleSize: PropTypes.string,\n imageTitleTextSize: PropTypes.string\n};\n\nexport default ImageElement;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { includes, isEmpty } from 'lodash';\n\nimport TextNavbar from './TextNavbar';\nimport PublicMap from '../../pages/PublicMap';\n\nimport { ChildContainer, IframeNoBorder } from './styles';\n\nconst { defaultMapSource } = Meteor.settings.public;\n\nconst MapIframe = ({\n isCarousel,\n mapSource,\n mapTitle,\n mapTitleColor,\n mapTitleSize,\n mapTitleTextSize\n}) => {\n const absoluteUrl = Meteor.absoluteUrl('shared/maps/');\n if (includes(mapSource, absoluteUrl) && !isCarousel) {\n const mapPublicId = mapSource.split('/').pop();\n const matchProp = { params: { public_map_id: mapPublicId } };\n return (\n <>\n {!isEmpty(mapTitle) && (\n \n )}\n \n \n \n \n );\n }\n return (\n <>\n {!isEmpty(mapTitle) && (\n \n )}\n \n \n \n \n );\n};\n\nMapIframe.defaultProps = {\n isCarousel: false,\n mapSource: defaultMapSource,\n mapTitle: '',\n mapTitleColor: 'black',\n mapTitleSize: '15px',\n mapTitleTextSize: '15px'\n};\n\nMapIframe.propTypes = {\n isCarousel: PropTypes.bool,\n mapSource: PropTypes.string,\n mapTitle: PropTypes.string,\n mapTitleColor: PropTypes.string,\n mapTitleSize: PropTypes.string,\n mapTitleTextSize: PropTypes.string\n};\n\nexport default MapIframe;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Meteor } from 'meteor/meteor';\nimport { withTracker } from 'meteor/react-meteor-data';\nimport { Button, Row, Col, Form, InputGroup } from 'react-bootstrap';\nimport { filter, find, get, head, isEmpty, isNil, keys, last, map, toString } from 'lodash';\nimport { Bert } from 'meteor/themeteorchef:bert';\nimport shp from 'shpjs';\nimport * as topojson from 'topojson-client';\nimport * as atlasOps from '../../../api/Atlas/atlas-operations';\nimport { FILE_TYPES } from '../../../api/Connectors/Connectors';\nimport * as taskOps from '../../../api/Tasks/task-operations';\nimport { STATUS_TYPES } from '../../../api/Tasks/taskConstants';\nimport TelemetryConnections from '../../../api/TelemetryConnections/TelemetryConnections';\n\nimport { readUploadedFileAsText } from '../../../modules/export-import-files';\nimport handleErrorInClient from '../../../modules/handle-error-in-client';\nimport methodPromise from '../../../modules/method-promise-wrapper';\nimport ogr2ogrTask from '../../../modules/tasks/ogr2ogrTask';\n\nimport Loading from '../../components/Loading';\nimport Validation from '../../containers/Validation';\n\nconst GDAL_INFO_URL = 'https://gdal.org/programs/ogr2ogr.html';\n\nclass Ogr2ogrConfiguration extends Component {\n updateInterval = null;\n\n state = {\n disabled: true,\n fileName: '',\n geometry: {},\n isTaskRunning: false,\n showAdvancedOptions: false,\n taskId: ''\n };\n\n componentWillUnmount() {\n clearInterval(this.updateInterval);\n }\n\n changeShowAdvancedOptions = event => this.setState({ showAdvancedOptions: event.target.checked });\n\n downloadResultFile = event => {\n const { fileName } = this.state;\n const outputFileName = head(fileName.split('.'));\n const fileType = event.target.form.fileType.value.trim();\n const { extension } = find(FILE_TYPES.properties, ['value', fileType]) || {};\n if (!isNil(extension))\n window.open(\n `https://video.ipsilum.com/demos_user/public/ogr2ogrAtlas/${outputFileName}.${extension}`,\n `_blank`\n );\n };\n\n getTaskStatus = async () => {\n const { atlas, gmsConnection } = this.props;\n const { taskId } = this.state;\n try {\n const getTaskMonitorParams = {\n debugIP: isEmpty(gmsConnection) ? '' : atlasOps.getGMSDirection(gmsConnection),\n authenticate: false,\n isTasker: false,\n itemForOwner: { id: atlasOps.getId(atlas), collectionName: 'atlas' }\n };\n\n const validatedTasks = await methodPromise('tasks.getTaskMonitor', getTaskMonitorParams);\n const task = find(validatedTasks, ['_id', taskId]) || {};\n\n if (taskOps.getStatus(task) === STATUS_TYPES.ERROR) throw new Error('Server error');\n\n if (taskOps.getStatus(task) === STATUS_TYPES.DONE) {\n clearInterval(this.updateInterval);\n this.setState({ disabled: false, isTaskRunning: false });\n }\n } catch (error) {\n handleErrorInClient(error);\n clearInterval(this.updateInterval);\n this.setState({ isTaskRunning: false });\n }\n };\n\n handleSubmit = async form => {\n try {\n const { atlas, gmsConnection, isPublic } = this.props;\n const { geometry, fileName } = this.state;\n\n const name = form.name.value.trim();\n const parameters = get(form, 'parameters.value', '').trim();\n const fileType = form.fileType.value.trim();\n const { extension } = find(FILE_TYPES.properties, ['value', fileType]) || {};\n\n const existingTasks = await methodPromise('tasks.checkAtlasTaskName', {\n atlas,\n isPublic,\n label: taskOps.getLabel(ogr2ogrTask({})),\n name\n });\n const nameForTask = `${name} ${existingTasks > 0 ? toString(existingTasks) : ''}`;\n const taskToRun = ogr2ogrTask({\n extension,\n geometry,\n fileName: head(fileName.split('.')),\n fileType,\n owner: atlasOps.getOwner(atlas),\n parameters,\n taskName: nameForTask.trim()\n });\n const taskId = await methodPromise('tasks.runTask', {\n authenticate: false,\n debugIP: isEmpty(gmsConnection) ? '' : atlasOps.getGMSDirection(gmsConnection),\n isTasker: false,\n itemForOwner: { id: atlasOps.getId(atlas), collectionName: 'atlas' },\n taskToRun\n });\n\n Bert.alert(`Task launched with alias ${nameForTask}`, 'info');\n this.setState({ taskId, isTaskRunning: true });\n this.updateInterval = setInterval(this.getTaskStatus, 500);\n } catch (error) {\n handleErrorInClient(error);\n }\n };\n\n loadInputFile = async event => {\n let geometryFile = {};\n let key = '';\n let arrayBuffer = {};\n\n const file = event.target.files[0];\n try {\n const fileInput = event.target;\n const stringResult = await readUploadedFileAsText(file);\n\n if (!isNil(file)) this.setState({ fileName: file.name });\n\n const extension = last(file.name.split('.'));\n switch (extension) {\n case 'geojson':\n geometryFile = JSON.parse(stringResult);\n break;\n case 'topoJSON':\n geometryFile = JSON.parse(stringResult);\n [key] = keys(geometryFile.objects);\n geometryFile = topojson.feature(geometryFile, geometryFile.objects[key]);\n break;\n case 'zip':\n arrayBuffer = await file.arrayBuffer();\n geometryFile = await shp(arrayBuffer);\n break;\n default:\n throw new Error('File extension is not supported');\n }\n Bert.alert('File loaded', 'success');\n fileInput.value = '';\n this.setState({ geometry: JSON.stringify(geometryFile) });\n } catch (exception) {\n this.setState({ fileName: '' });\n handleErrorInClient(exception);\n }\n };\n\n render() {\n const { isPreview, loading } = this.props;\n const { disabled, fileName, isTaskRunning, showAdvancedOptions } = this.state;\n\n const validationProps = {\n rules: {\n name: {\n required: true\n },\n fileType: {\n required: true\n }\n },\n messages: {\n name: {\n required: 'This needs an alias.'\n },\n fileType: {\n required: 'Select an output extension.'\n }\n },\n submitHandler: form => this.handleSubmit(form)\n };\n\n if (loading) return ;\n\n return (\n \n event.preventDefault()}\n >\n \n \n \n Task Name\n \n \n \n Input File\n \n \n {!isEmpty(fileName) ? fileName : 'Upload File'}\n \n \n \n \n \n Output extension\n \n \n {map(\n filter(FILE_TYPES.properties, ({ extension }) => !isNil(extension)),\n ({ name, value, humanValue }) => (\n \n )\n )}\n \n \n \n \n \n {showAdvancedOptions && (\n \n Parameters\n \n \n Further info:{' '}\n \n {GDAL_INFO_URL}\n \n \n \n )}\n \n \n {isTaskRunning ? (\n \n ) : (\n \n Download results\n \n )}\n \n \n
\n \n \n );\n }\n}\n\nOgr2ogrConfiguration.defaultProps = {\n atlas: {},\n gmsConnection: {},\n isPreview: false,\n isPublic: false\n};\n\nOgr2ogrConfiguration.propTypes = {\n atlas: PropTypes.object,\n gmsConnection: PropTypes.object,\n isPreview: PropTypes.bool,\n isPublic: PropTypes.bool,\n loading: PropTypes.bool.isRequired\n};\n\nexport default withTracker(({ atlas }) => {\n let gmsConnectionId = '';\n let subscription = {};\n if (!isNil(atlas)) {\n gmsConnectionId = atlasOps.getGMSConnection(atlas);\n subscription = Meteor.subscribe('gmsConnections.public', gmsConnectionId);\n }\n return {\n loading: !isNil(atlas) && !subscription.ready(),\n gmsConnection: TelemetryConnections.findOne(gmsConnectionId)\n };\n})(Ogr2ogrConfiguration);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\n\nimport { LinkButtonContainer, AtlasButtonImg } from './styles';\n\nconst OpenLinkInNewWindowButton = ({ linkURL, showButton, isExternal }) => {\n if (isEmpty(linkURL)) return '';\n const title = isExternal ? 'External Link' : 'Open New Window';\n const src = isExternal\n ? '/maps-buttons/enlaceredirigido.svg'\n : '/maps-buttons/abrirnuevapestana.svg';\n const numberOfButtonsLeft = isExternal ? 2 : 1;\n return (\n \n \n \n );\n};\nOpenLinkInNewWindowButton.defaultProps = {\n showButton: true,\n isExternal: false\n};\n\nOpenLinkInNewWindowButton.propTypes = {\n linkURL: PropTypes.string.isRequired,\n showButton: PropTypes.bool,\n isExternal: PropTypes.bool\n};\n\nexport default OpenLinkInNewWindowButton;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isEmpty } from 'lodash';\nimport { Meteor } from 'meteor/meteor';\n\nimport { Modal, Nav } from 'react-bootstrap';\n\nimport MapIframe from './MapIframe';\nimport GraphicIframe from './GraphicIframe';\nimport TableIframe from './TableIframe';\nimport Text from './Text';\nimport ExpandModalButton from './ExpandModalButton';\nimport OpenLinkInNewWindowButton from './OpenLinkInNewWindowButton';\n\nimport { Section, Nav as StyledNav } from './styles';\n\nconst MODALS = {\n ONE: 'one',\n TWO: 'two',\n THREE: 'three',\n FOUR: 'four',\n FIVE: 'five'\n};\n\nconst { defaultMapSource, defaultGraphicSource, defaultTableSource } = Meteor.settings.public;\n\nconst SectionsFive = ({\n firstSectionChild,\n secondSectionChild,\n thirdSectionChild,\n fourthSectionChild,\n fifthSectionChild,\n firstSectionChildURL,\n secondSectionChildURL,\n thirdSectionChildURL,\n fourthSectionChildURL,\n fifthSectionChildURL,\n firstSectionChildExternalURL,\n secondSectionChildExternalURL,\n thirdSectionChildExternalURL,\n fourthSectionChildExternalURL,\n fifthSectionChildExternalURL,\n navBackgroundColor,\n navColor,\n navPadding,\n navBorder,\n firstSection,\n secondSection,\n thirdSection,\n fourthSection,\n fifthSection,\n firstSectionHeight,\n secondSectionHeight,\n thirdSectionHeight,\n fourthSectionHeight,\n fifthSectionHeight,\n isPreview,\n showButtons\n}) => {\n const [showOneButton, setOneButton] = useState(false);\n const [showTwoButton, setTwoButton] = useState(false);\n const [showThreeButton, setThreeButton] = useState(false);\n const [showFourButton, setFourButton] = useState(false);\n const [showFiveButton, setFiveButton] = useState(false);\n const [modalToShow, setModalToShow] = useState('');\n return (\n <>\n \n \n \n {firstSection}\n \n \n \n \n {secondSection}\n \n \n \n \n {thirdSection}\n \n \n \n \n {fourthSection}\n \n \n \n \n {fifthSection}\n \n \n \n setOneButton(true)}\n onMouseLeave={() => setOneButton(false)}\n >\n {React.cloneElement(firstSectionChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.ONE)}\n />\n \n \n \n )}\n \n setTwoButton(true)}\n onMouseLeave={() => setTwoButton(false)}\n >\n {React.cloneElement(secondSectionChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.TWO)}\n />\n \n \n \n )}\n \n setThreeButton(true)}\n onMouseLeave={() => setThreeButton(false)}\n >\n {React.cloneElement(thirdSectionChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.THREE)}\n />\n \n \n \n )}\n \n setFourButton(true)}\n onMouseLeave={() => setFourButton(false)}\n >\n {React.cloneElement(fourthSectionChild, { isPreview })}\n {showButtons && (\n <>\n setModalToShow(MODALS.FOUR)}\n />\n \n \n \n )}\n \n setFiveButton(true)}\n onMouseLeave={() => setFiveButton(false)}\n >\n {React.cloneElement(fifthSectionChild, { isPreview })}\n {showButtons && (\n <>\n