\n {view3D && view3D.ready && (\n
\n )}\n\n {\n // no results modal\n showNoResults && (\n
\n
\n
No Results
\n
setShowNoResults(false)} />\n
\n
\n )\n }\n\n
\n\n
setSplitPercentage(size)}\n size={compareToolActive ? splitPercentage || '50%' : '100%'}\n resizerStyle={compareToolActive ? { width: '5px' } : { width: '0px' }}\n >\n \n\n \n \n \n );\n};\n\nexport default MapView;\n","import Tooltip from '@material-ui/core/Tooltip';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst StyledTooltip = withStyles(() => ({\n tooltip: {\n backgroundColor: '#202432',\n color: 'white',\n maxWidth: 220,\n fontSize: 15,\n position: 'relative',\n right: '5px',\n },\n arrow: {\n color: '#202432',\n margin: '50px',\n },\n}))(Tooltip);\n\nexport default StyledTooltip;\n","import { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Tab, Tabs } from '@material-ui/core';\nimport UploadIcon from '@material-ui/icons/CloudUpload';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport ListIcon from '@material-ui/icons/List';\nimport LightIcon from '@material-ui/icons/BrightnessMedium';\nimport CompareIcon from '@material-ui/icons/StarHalf';\nimport LineOfSightIcon from '@material-ui/icons/LinearScale';\nimport SketchIcon from '@material-ui/icons/Create';\nimport ReportIcon from '@material-ui/icons/GetApp';\nimport HelpIcon from '@material-ui/icons/Help';\nimport MeasurementIcon from '@material-ui/icons/SquareFoot';\nimport StyledTooltip from '../shared/StyledTooltip';\nimport {\n ActiveTool,\n activeToolState,\n currentBuildingState,\n setActiveTool,\n setSiteExpanded,\n siteExpandedState,\n} from '../../../store/slices/appSlice';\nimport {\n resetSubmitWorkflow,\n selectedFileState,\n setStep,\n uploadedFilesState,\n uploadingState,\n} from '../../../store/slices/uploadSlice';\nimport { selectedSketchState, sketchesState } from '../../../store/slices/sketchSlice';\nimport sketchController from '../../controllers/SketchController';\nimport './SiteControls.scss';\n\ninterface ITab {\n tool: ActiveTool;\n label: string;\n visible: boolean;\n icon: JSX.Element;\n tooltip?: string;\n className?: string;\n callbackAction?: () => void;\n}\n\nconst SiteControls = () => {\n const dispatch = useDispatch();\n const activeTool = useSelector(activeToolState);\n const uploadedFiles = useSelector(uploadedFilesState);\n const sketches = useSelector(sketchesState);\n const selectedSketch = useSelector(selectedSketchState);\n const currentBuilding = useSelector(currentBuildingState);\n const selectedFile = useSelector(selectedFileState);\n const uploading = useSelector(uploadingState);\n const siteExpanded = useSelector(siteExpandedState);\n const [selectedTab, setSelectedTab] = useState
();\n\n const displayCompare =\n activeTool === 'compare' ||\n (activeTool === 'uploaded-files' && selectedFile?.geometry && selectedFile?.geometry?.hasOwnProperty('type')) ||\n (activeTool === 'sketch' && sketches.length) ||\n (activeTool === 'light' && (!!selectedSketch || !!selectedFile));\n const displaySubmitNewFile = activeTool !== 'submit' && activeTool !== 'default' && Object.keys(uploadedFiles).length;\n const displayDelete =\n activeTool === 'delete' ||\n (!selectedSketch && activeTool !== 'sketch' && currentBuilding && currentBuilding.hasOwnProperty('attributes'));\n const displayReport =\n ((activeTool === 'uploaded-files' || activeTool === 'light') &&\n selectedFile?.geometry &&\n selectedFile?.geometry.hasOwnProperty('type') &&\n !uploading) ||\n selectedSketch ||\n activeTool === 'shadow-report';\n\n const TABS: ITab[] = [\n {\n tool: 'submit',\n label: displaySubmitNewFile ? 'Submit New 3D File' : 'Submit 3D File',\n visible: true,\n icon: ,\n tooltip:\n 'Submit a 3D KMZ file to render on the map to visualize new buildings or features. Once uploaded, edit the position and orientation as needed.',\n callbackAction: () => dispatch(resetSubmitWorkflow()),\n },\n {\n tool: 'uploaded-files',\n label: 'Uploaded Files',\n visible: !!Object.keys(uploadedFiles).length,\n icon: ,\n callbackAction: () => dispatch(setStep(1)),\n },\n {\n tool: 'delete',\n label: 'Delete Building',\n visible: displayDelete,\n icon: ,\n },\n {\n tool: 'light',\n label: 'Light Study',\n visible: true,\n icon: ,\n tooltip:\n 'Select time of year and start time. Click start to progress through the day from selected start time to observe light and shadows for the study area. Click stop to stop cycling through times.',\n },\n {\n tool: 'compare',\n label: 'Before & After',\n visible: displayCompare,\n icon: ,\n },\n {\n tool: 'measurement',\n label: 'Measurement',\n visible: true,\n icon: ,\n },\n {\n tool: 'line-of-sight',\n label: 'Line of Sight',\n visible: true,\n icon: ,\n tooltip: 'Click a point on the map and determine what is visible from that point.',\n },\n {\n tool: 'sketch',\n label: 'Sketch',\n visible: true,\n icon: ,\n tooltip:\n 'Sketch 3D shapes directly on the map and manipulate the object’s height to reflect proposed changes to a building or feature.',\n },\n {\n tool: 'shadow-report',\n label: 'Shadow Report',\n visible: displayReport,\n icon: ,\n },\n ];\n\n useEffect(() => {\n if (activeTool === 'default') {\n setSelectedTab(undefined);\n } else if (selectedTab !== activeTool) {\n setSelectedTab(activeTool);\n }\n }, [activeTool]);\n\n useEffect(() => {\n if (activeTool !== 'sketch' && activeTool !== 'light' && activeTool !== 'shadow-report') {\n sketchController.cancelSketch();\n }\n }, [activeTool]);\n\n const handleChange = (event: React.ChangeEvent<{}>, selectedTool: ActiveTool) => {\n setSelectedTab(selectedTool);\n dispatch(setActiveTool(selectedTool));\n\n if (selectedTool === 'compare') {\n dispatch(setSiteExpanded(false));\n } else if (!siteExpanded) {\n dispatch(setSiteExpanded(true));\n }\n\n const tab = TABS.find((tab) => tab.tool === selectedTool);\n\n if (tab?.callbackAction) {\n tab.callbackAction();\n }\n };\n\n const HELP_TAB: ITab = {\n tool: 'help',\n label: 'Help',\n visible: true,\n icon: ,\n className: 'SiteControls__tab--help',\n };\n\n const currentTabs = TABS.filter((tab) => tab.visible);\n\n return (\n \n
\n \n {currentTabs.map((tab) => (\n (tab.callbackAction ? tab.callbackAction() : undefined)}\n className={`SiteControls__tab ${tab.className ?? ''}`}\n value={tab.tool}\n label={\n \n {tab.label}\n \n }\n icon={{tab.icon}}\n />\n ))}\n\n \n\n \n {HELP_TAB.label}\n \n }\n icon={{HELP_TAB.icon}}\n />\n \n \n {currentBuilding && (currentBuilding?.attributes || !removedBuildings.length) ? (\n
\n \n Delete Building\n \n\n \n
\n ) : (\n
\n
Building Deleted
\n
\n
\n )}\n
{props.icon}
}\n {props.label && `${props.label}`}\n \n );\n});\n\nexport default Button;\n","import shortid from 'shortid';\nimport { useSelector, useDispatch } from 'react-redux';\n\nimport HelpIcon from 'material-ui/svg-icons/action/help';\nimport InfoIcon from 'material-ui/svg-icons/action/info';\nimport Keyboard from 'material-ui/svg-icons/hardware/keyboard';\nimport Comment from 'material-ui/svg-icons/communication/chat-bubble';\nimport Folder from 'material-ui/svg-icons/file/folder-open';\nimport TutorialIcon from '@material-ui/icons/MenuBook';\nimport { red500, fullWhite } from 'material-ui/styles/colors';\nimport Button from '../../shared/Button';\nimport {\n enableHelpState,\n setEnableHelp,\n setDisplayNavigation,\n setDisplayDisclaimer,\n} from '../../../../store/slices/appSlice';\nimport './HelpControl.scss';\n\nconst helpOptions = [\n {\n id: 'keyboard-shortcuts',\n label: 'Navigation',\n icon: ,\n },\n {\n id: 'tutorials',\n label: 'Tutorials',\n icon: ,\n },\n {\n id: 'about',\n label: 'About DCOZ',\n icon: ,\n },\n {\n id: 'disclaimer',\n label: 'Disclaimer',\n icon: ,\n },\n {\n id: 'feedback',\n label: 'Feedback',\n icon: ,\n },\n];\n\nconst HelpControl = () => {\n const dispatch = useDispatch();\n const enableHelp = useSelector(enableHelpState);\n\n const handleHelpOption = (event) => {\n const { id } = event.currentTarget;\n switch (id) {\n case 'interactive-help':\n dispatch(setEnableHelp(!enableHelp));\n break;\n case 'keyboard-shortcuts':\n dispatch(setDisplayNavigation(true));\n break;\n case 'about':\n window.open('http://maps.dcoz.dc.gov', '_blank');\n break;\n case 'disclaimer':\n dispatch(setDisplayDisclaimer(true));\n break;\n case 'feedback':\n window.open('https://app.dcoz.dc.gov/Contact/Home.aspx', '_blank');\n break;\n case 'tutorials':\n window.open('https://maps.dcoz.dc.gov/?page=3D-Zoning-Map-Tutorial', '_blank');\n break;\n default:\n break;\n }\n };\n\n const helpStyle = enableHelp ? red500 : fullWhite;\n\n return (\n \n }\n className='HelpControl-item__button'\n onClick={handleHelpOption}\n />\n {helpOptions.map((option) => (\n \n ))}\n
\n );\n};\n\nexport default HelpControl;\n","import React from 'react';\n\nexport default function Stepper(props) {\n const { step } = props;\n return (\n \n
Submit a File
\n\n
\n
0 ? 'completed-step' : ''}`}>\n
\n
\n
\n\n
\n
\n
0 ? 'active' : ''}`}>
\n
\n\n
1 ? 'completed-step' : ''}`}>\n
\n
\n
\n\n
\n
\n
1 ? 'active' : ''}`}>
\n
\n\n
2 ? 'completed-step' : ''}`}>\n
\n
\n
\n
\n
\n {(file || selectedFile?.file) && getFileIcon(file ?? selectedFile.file)}\n
\n {messageFormatted && messageFormatted.length ? messageFormatted : 'Uploading...'}\n
\n
\n
\n {file && getFileIcon(file)}\n
\n
{file.name || 'Undefined'}
\n
{api.bytesToSize(file.size)}
\n
\n
\n\n \n
\n
Location:
\n {location?.hasOwnProperty('FULLADDRESS') && isSelectedFile && (\n
\n Edit\n
\n )}\n
\n
\n {location?.hasOwnProperty('FULLADDRESS') ? location.FULLADDRESS : 'No location attached to the file'}\n
\n