<commit_before>import { Heading, themeSpacing } from '@amsterdam/asc-ui'
import { useEffect, useMemo } from 'react'
import { matchPath, Route, Switch, useLocation } from 'react-router-dom'
import styled from 'styled-components'
import type { FunctionComponent } from 'react'
import { useDataSelection } from '../../../../components/DataSelection/DataSelectionContext'
import { routing } from '../../../../routes'
import useParam from '../../../../utils/useParam'
import DetailPanel from '../../detail/DetailPanel'
import MapSearchResults from '../MapSearchResults/MapSearchResults'
import { useMapContext } from '../../MapContext'
import { locationParam, polygonParam } from '../../query-params'
import DrawerOverlay, { DeviceMode, DrawerState } from '../DrawerOverlay'
import { DrawerPanelHeader, LargeDrawerPanel, SmallDrawerPanel } from '../DrawerPanel'
import DrawResults from '../DrawTool/DrawResults'
import LegendPanel from '../LegendPanel/LegendPanel'
import useMapControls from './useMapControls'

const TitleHeading = styled(Heading)`
  margin: 0;
`

const SubtitleHeading = styled(Heading)`
  color: red;
  margin: 0;
`

const DrawerContainer = styled.div`
  padding: ${themeSpacing(0, 4)};
`

const StyledLargeDrawerPanel = styled(LargeDrawerPanel)<{ show: boolean }>`
  display: ${({ show }) => (show ? 'block' : 'none')};
`

const MapPanel: FunctionComponent = () => {
  const { panelHeader, legendActive, drawerState, setLegendActive, setDrawerState } =
    useMapContext()
  const [locationParameter] = useParam(locationParam)
  const [polygon] = useParam(polygonParam)
  const location = useLocation()
  const { activeFilters } = useDataSelection()
  // TODO: Replace this logic with 'useRouteMatch()' when the following PR has been released:
  // https://github.com/ReactTraining/react-router/pull/7822
  const dataDetailMatch = useMemo(
    () => matchPath(location.pathname, routing.dataDetail.path),
    [location.pathname, routing.dataDetail.path],
  )

  const dataSearchGeoMatch = useMemo(
    () => matchPath(location.pathname, routing.dataSearchGeo.path),
    [location.pathname, routing.dataSearchGeo.path],
  )

  const onCloseLegend = () => {
    setLegendActive(false)
  }

  useEffect(() => {
    if (
      locationParameter ||
      polygon ||
      activeFilters.length ||
      matchPath(location.pathname, {
        path: routing.dataDetail.path,
        exact: true,
      })
    ) {
      setDrawerState(DrawerState.Open)
    }
  }, [locationParameter, polygon, location])

  // Hide the legend when any of the following events occur:
  // - The user selects an item on the map, navigating to a detail panel.
  // - The user selects a point on the map, navigating to a geo search panel.
  // - The users moves the point on the map, whilst already having the geo search panel open.
  useEffect(() => {
    if (dataDetailMatch || dataSearchGeoMatch) {
      setLegendActive(false)
    }
  }, [dataDetailMatch, dataSearchGeoMatch, locationParameter])

  const controls = useMapControls()

  const showContentPanel = useMemo(() => {
    if (
      // Also geosearch-page always needs a location parameter
      matchPath(location.pathname, {
        path: routing.data.path,
        exact: true,
      }) ||
      (dataSearchGeoMatch && !locationParameter)
    ) {
      return false<commit_msg>Prevent automatically open the MapPanel when panorama is fullscreen<commit_after>import { Heading, themeSpacing } from '@amsterdam/asc-ui'
import { useEffect, useMemo } from 'react'
import { matchPath, Route, Switch, useLocation } from 'react-router-dom'
import styled from 'styled-components'
import type { FunctionComponent } from 'react'
import { useDataSelection } from '../../../../components/DataSelection/DataSelectionContext'
import { routing } from '../../../../routes'
import useParam from '../../../../utils/useParam'
import DetailPanel from '../../detail/DetailPanel'
import MapSearchResults from '../MapSearchResults/MapSearchResults'
import { useMapContext } from '../../MapContext'
import { locationParam, panoFullScreenParam, polygonParam } from '../../query-params'
import DrawerOverlay, { DeviceMode, DrawerState } from '../DrawerOverlay'
import { DrawerPanelHeader, LargeDrawerPanel, SmallDrawerPanel } from '../DrawerPanel'
import DrawResults from '../DrawTool/DrawResults'
import LegendPanel from '../LegendPanel/LegendPanel'
import useMapControls from './useMapControls'

const TitleHeading = styled(Heading)`
  margin: 0;
`

const SubtitleHeading = styled(Heading)`
  color: red;
  margin: 0;
`

const DrawerContainer = styled.div`
  padding: ${themeSpacing(0, 4)};
`

const StyledLargeDrawerPanel = styled(LargeDrawerPanel)<{ show: boolean }>`
  display: ${({ show }) => (show ? 'block' : 'none')};
`

const MapPanel: FunctionComponent = () => {
  const { panelHeader, legendActive, drawerState, setLegendActive, setDrawerState } =
    useMapContext()
  const [locationParameter] = useParam(locationParam)
  const [polygon] = useParam(polygonParam)
  const [panoFullScreen] = useParam(panoFullScreenParam)
  const location = useLocation()
  const { activeFilters } = useDataSelection()
  // TODO: Replace this logic with 'useRouteMatch()' when the following PR has been released:
  // https://github.com/ReactTraining/react-router/pull/7822
  const dataDetailMatch = useMemo(
    () => matchPath(location.pathname, routing.dataDetail.path),
    [location.pathname, routing.dataDetail.path],
  )

  const dataSearchGeoMatch = useMemo(
    () => matchPath(location.pathname, routing.dataSearchGeo.path),
    [location.pathname, routing.dataSearchGeo.path],
  )

  const onCloseLegend = () => {
    setLegendActive(false)
  }

  useEffect(() => {
    if (
      !panoFullScreen &&
      (locationParameter ||
        polygon ||
        activeFilters.length ||
        matchPath(location.pathname, {
          path: routing.dataDetail.path,
          exact: true,
        }))
    ) {
      setDrawerState(DrawerState.Open)
    }
  }, [locationParameter, polygon, location, panoFullScreen])

  // Hide the legend when any of the following events occur:
  // - The user selects an item on the map, navigating to a detail panel.
  // - The user selects a point on the map, navigating to a geo search panel.
  // - The users moves the point on the map, whilst already having the geo search panel open.
  useEffect(() => {
    if (dataDetailMatch || dataSearchGeoMatch) {
      setLegendActive(false)
    }
  }, [dataDetailMatch, dataSearchGeoMatch, locationParameter])

  const controls = useMapControls()

  const showContentPanel = useMemo(() => {
    if (
      // Also geosearch-page always needs a location parameter
      matchPath(location.pathname, {
        path: routing.data.path,
        exact: true,
      }) ||
      (dataSearchGeoMatch && !locationParameter)
    ) {
      return false
{'fraction_non_alphanumeric': 0.12622352081811541, 'fraction_numerical': 0.002337472607742878, 'mean_word_length': 3.6794258373205744, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 21, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5624757', 'n_tokens_mistral': 2010, 'n_tokens_neox': 1969, 'n_words': 529}