From 363052324e6e81e3e1fd0ca96794408579eb81b6 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Fri, 8 Sep 2023 16:48:35 +0200
Subject: [PATCH 01/12] add basic filter component for location management

---
 .../location-curating/LocationFilter.tsx      | 100 ++++++++++++++++++
 .../views/location-curating/LocationPanel.tsx |  27 ++++-
 .../location-curating/LocationPanelHeader.tsx |  25 ++++-
 3 files changed, 148 insertions(+), 4 deletions(-)
 create mode 100644 projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
new file mode 100644
index 000000000..8924a1212
--- /dev/null
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
@@ -0,0 +1,100 @@
+import { Close } from '@mui/icons-material';
+import { Autocomplete, MenuItem, Select, TextField } from '@mui/material';
+import { debounce } from 'lodash';
+import { useEffect, useState } from 'react';
+
+export enum LocationFilterType {
+  CONTAINS = 'contains',
+  EQUALS = 'equals',
+  STARTS_WITH = 'starts with',
+  ENDS_WITH = 'ends with',
+  IS_EMPTY = 'is empty',
+  IS_NOT_EMPTY = 'is not empty',
+  IS_ANY_OF = 'is any of',
+}
+
+const LocationFilter = ({
+  filterType,
+  setFilterType,
+  setFilterValue,
+  setOpen,
+}: {
+  filterType: LocationFilterType;
+  setFilterType: (value: LocationFilterType) => void;
+  setFilterValue: (value: string | string[] | undefined) => void;
+  setOpen: (value: boolean) => void;
+}) => {
+  const showTextField = () =>
+    filterType !== LocationFilterType.IS_EMPTY &&
+    filterType !== LocationFilterType.IS_NOT_EMPTY &&
+    filterType !== LocationFilterType.IS_ANY_OF;
+
+  const showAutocomplete = () => filterType === LocationFilterType.IS_ANY_OF;
+
+  const [localFilterValue, setLocalFilterValue] = useState<string | string[]>(
+    filterType === LocationFilterType.IS_ANY_OF ? [] : ''
+  );
+
+  useEffect(() => {
+    setLocalFilterValue(filterType === LocationFilterType.IS_ANY_OF ? [] : '');
+  }, [filterType]);
+
+  const updateFilterValue = debounce(() => {
+    setFilterValue(localFilterValue);
+  }, 1000);
+
+  return (
+    <div className='p-2 fixed top-30 left-0 z-20 bg-white shadow-lg flex'>
+      <Close
+        className='my-auto mr-2 cursor-pointer'
+        onClick={() => {
+          if (localFilterValue) {
+            setLocalFilterValue('');
+            return;
+          }
+          setOpen(false);
+        }}
+      />
+      <Select
+        value={filterType}
+        onChange={value => {
+          setFilterType(value.target.value as LocationFilterType);
+        }}
+        className='mr-1'
+      >
+        <MenuItem value={LocationFilterType.CONTAINS}>{LocationFilterType.CONTAINS}</MenuItem>
+        <MenuItem value={LocationFilterType.EQUALS}>{LocationFilterType.EQUALS}</MenuItem>
+        <MenuItem value={LocationFilterType.STARTS_WITH}>{LocationFilterType.STARTS_WITH}</MenuItem>
+        <MenuItem value={LocationFilterType.ENDS_WITH}>{LocationFilterType.ENDS_WITH}</MenuItem>
+        <MenuItem value={LocationFilterType.IS_EMPTY}>{LocationFilterType.IS_EMPTY}</MenuItem>
+        <MenuItem value={LocationFilterType.IS_NOT_EMPTY}>
+          {LocationFilterType.IS_NOT_EMPTY}
+        </MenuItem>
+        <MenuItem value={LocationFilterType.IS_ANY_OF}>{LocationFilterType.IS_ANY_OF}</MenuItem>
+      </Select>
+      {showTextField() && (
+        <TextField
+          value={localFilterValue}
+          onChange={value => {
+            setLocalFilterValue(value.target.value);
+            updateFilterValue();
+          }}
+        />
+      )}
+      {showAutocomplete() && (
+        <Autocomplete
+          options={[]}
+          multiple
+          freeSolo
+          renderInput={props => <TextField {...props} />}
+          onChange={(_, values) => {
+            setLocalFilterValue(values);
+            updateFilterValue();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LocationFilter;
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index 34af03667..eca8aa339 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSimplifiedQueryResponseData } from '../../../graphql/queryUtils';
 import { useVisit } from '../../../helpers/history';
@@ -10,6 +10,7 @@ import QueryErrorDisplay from '../../common/QueryErrorDisplay';
 import AddLocationEntry from './AddLocationEntry';
 import { useFoldoutStatus } from './FoldoutStatusContext';
 import LocationBranch from './LocationBranch';
+import LocationFilter, { LocationFilterType } from './LocationFilter';
 import LocationPanelHeader from './LocationPanelHeader';
 import { LocationPanelPermissionsProvider } from './LocationPanelPermissionsProvider';
 import { useCreateNewTag } from './location-management-helpers';
@@ -73,6 +74,10 @@ const LocationPanel = () => {
   const { canRun: canUseLocationPanel, loading: canUseLocationPanelLoading } =
     canUseTagTableViewQuery();
 
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [filterType, setFilterType] = useState<LocationFilterType>(LocationFilterType.CONTAINS);
+  const [filterValue, setFilterValue] = useState<string | string[] | undefined>();
+
   return (
     <ProtectedRoute canUse={canUseLocationPanel} canUseLoading={canUseLocationPanelLoading}>
       {() => {
@@ -83,7 +88,25 @@ const LocationPanel = () => {
         } else {
           return (
             <LocationPanelPermissionsProvider>
-              <LocationPanelHeader />
+              <LocationPanelHeader
+                setOpen={(value: boolean) => {
+                  setOpen(value);
+                }}
+              />
+              {isOpen && (
+                <LocationFilter
+                  filterType={filterType}
+                  setFilterType={(value: LocationFilterType) => {
+                    setFilterType(value);
+                  }}
+                  setFilterValue={(value: string | string[] | undefined) => {
+                    setFilterValue(value);
+                  }}
+                  setOpen={(value: boolean) => {
+                    setOpen(value);
+                  }}
+                />
+              )}
               <div className='location-panel-content'>
                 {tagTree?.map(tag => (
                   <LocationBranch key={tag.id} locationTag={tag} refetch={refetch} />
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
index 883c7ddf4..3f62aec08 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
@@ -1,13 +1,34 @@
+import { FilterAlt } from '@mui/icons-material';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './LocationEntry.scss';
 
-const LocationPanelHeader = () => {
+const LocationPanelHeader = ({ setOpen }: { setOpen: (value: boolean) => void }) => {
   const { t } = useTranslation();
 
+  const [isHoveredName, setHoveredName] = useState<boolean>(false);
+
   return (
     <>
       <div className='location-header-container'>
-        <div className='location-header-name'>{t('common.name')}</div>
+        <div
+          className='flex'
+          onMouseEnter={() => {
+            setHoveredName(true);
+          }}
+          onMouseLeave={() => {
+            setHoveredName(false);
+          }}
+        >
+          <div className='location-header-name'>{t('common.name')}</div>
+          <FilterAlt
+            sx={{ color: '#808080' }}
+            className={`my-auto ml-auto ${isHoveredName ? 'visible' : 'invisible'} cursor-pointer`}
+            onClick={() => {
+              setOpen(true);
+            }}
+          />
+        </div>
         <div className='location-header-synonyms'>{t('curator.synonyms')}</div>
       </div>
     </>

From 220a0c8af585b0e9caaf73a4f45452fa8b4f7178 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Sat, 9 Sep 2023 19:36:48 +0200
Subject: [PATCH 02/12] add support for basic contains filter for location tags

---
 .../location-curating/LocationFilter.tsx      | 12 +++++-
 .../views/location-curating/LocationPanel.tsx | 41 +++++++++++++++----
 .../tag-structure-helpers.tsx                 | 21 ++++++++++
 3 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
index 8924a1212..4eb33f06b 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
@@ -1,7 +1,7 @@
 import { Close } from '@mui/icons-material';
 import { Autocomplete, MenuItem, Select, TextField } from '@mui/material';
 import { debounce } from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export enum LocationFilterType {
   CONTAINS = 'contains',
@@ -34,13 +34,17 @@ const LocationFilter = ({
   const [localFilterValue, setLocalFilterValue] = useState<string | string[]>(
     filterType === LocationFilterType.IS_ANY_OF ? [] : ''
   );
+  const localFilterRef = useRef<string | string[] | undefined>(
+    filterType === LocationFilterType.IS_ANY_OF ? [] : ''
+  );
 
   useEffect(() => {
     setLocalFilterValue(filterType === LocationFilterType.IS_ANY_OF ? [] : '');
+    localFilterRef.current = filterType === LocationFilterType.IS_ANY_OF ? [] : '';
   }, [filterType]);
 
   const updateFilterValue = debounce(() => {
-    setFilterValue(localFilterValue);
+    setFilterValue(localFilterRef.current);
   }, 1000);
 
   return (
@@ -49,7 +53,9 @@ const LocationFilter = ({
         className='my-auto mr-2 cursor-pointer'
         onClick={() => {
           if (localFilterValue) {
+            localFilterRef.current = '';
             setLocalFilterValue('');
+            updateFilterValue();
             return;
           }
           setOpen(false);
@@ -76,6 +82,7 @@ const LocationFilter = ({
         <TextField
           value={localFilterValue}
           onChange={value => {
+            localFilterRef.current = value.target.value;
             setLocalFilterValue(value.target.value);
             updateFilterValue();
           }}
@@ -88,6 +95,7 @@ const LocationFilter = ({
           freeSolo
           renderInput={props => <TextField {...props} />}
           onChange={(_, values) => {
+            localFilterRef.current = values;
             setLocalFilterValue(values);
             updateFilterValue();
           }}
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index eca8aa339..1d9bfc8cb 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -14,7 +14,7 @@ import LocationFilter, { LocationFilterType } from './LocationFilter';
 import LocationPanelHeader from './LocationPanelHeader';
 import { LocationPanelPermissionsProvider } from './LocationPanelPermissionsProvider';
 import { useCreateNewTag } from './location-management-helpers';
-import { useGetTagStructures } from './tag-structure-helpers';
+import { useGetSubtags, useGetTagStructures } from './tag-structure-helpers';
 
 const setUnacceptedSubtagsCount = (tag: FlatTag) => {
   let subtagCount = 0;
@@ -36,6 +36,39 @@ const LocationPanel = () => {
   const flattened = useSimplifiedQueryResponseData(data);
   const flattenedTags: FlatTag[] | undefined = flattened ? Object.values(flattened)[0] : undefined;
 
+  const [filteredFlattenedTags, setFilteredFlattenedTags] = useState<FlatTag[] | undefined>(
+    flattenedTags
+  );
+
+  const { tagTree: sortedTagTree } = useGetTagStructures(filteredFlattenedTags);
+  const tagSubtagList = useGetSubtags(flattenedTags);
+
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [filterType, setFilterType] = useState<LocationFilterType>(LocationFilterType.CONTAINS);
+  const [filterValue, setFilterValue] = useState<string | string[] | undefined>();
+
+  useEffect(() => {
+    if (!flattenedTags || !tagSubtagList) {
+      return;
+    }
+    // convert everything to lowercase before matching
+    switch (filterType) {
+      case LocationFilterType.CONTAINS:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              !filterValue?.length ||
+              flattenedTag.name.toLowerCase().includes((filterValue as string).toLowerCase()) ||
+              tagSubtagList[flattenedTag.id].findIndex(subtag =>
+                subtag.name.toLowerCase().includes((filterValue as string).toLowerCase())
+              ) !== -1
+          )
+        );
+        break;
+      default:
+    }
+  }, [filterValue, filterType, flattenedTags, tagSubtagList]);
+
   useEffect(() => {
     if (!foldoutStatus) {
       return;
@@ -59,8 +92,6 @@ const LocationPanel = () => {
 
   const { createNewTag, canCreateNewTag } = useCreateNewTag(refetch);
 
-  const { tagTree: sortedTagTree } = useGetTagStructures(flattenedTags);
-
   const tagTree = useMemo(() => {
     if (!sortedTagTree) return;
 
@@ -74,10 +105,6 @@ const LocationPanel = () => {
   const { canRun: canUseLocationPanel, loading: canUseLocationPanelLoading } =
     canUseTagTableViewQuery();
 
-  const [isOpen, setOpen] = useState<boolean>(false);
-  const [filterType, setFilterType] = useState<LocationFilterType>(LocationFilterType.CONTAINS);
-  const [filterValue, setFilterValue] = useState<string | string[] | undefined>();
-
   return (
     <ProtectedRoute canUse={canUseLocationPanel} canUseLoading={canUseLocationPanelLoading}>
       {() => {
diff --git a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
index 15bd03066..f7d55e12a 100644
--- a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
@@ -168,6 +168,27 @@ export const useGetTagStructures = (
   };
 };
 
+export const useGetSubtags = (flattenedTags?: FlatTag[]) => {
+  const tagsById = useGetTagsById(flattenedTags);
+
+  const tagSubtagList = useMemo(() => {
+    if (!tagsById || !flattenedTags) {
+      return undefined;
+    }
+    const tagSubtags = Object.fromEntries(flattenedTags.map(tag => [tag.id, [] as FlatTag[]]));
+    for (const tag of flattenedTags) {
+      tagsById[tag.id].parent_tags?.forEach(parent => {
+        if (tagSubtags[parent.id].findIndex(subtag => subtag.id === parent.id) === -1) {
+          tagSubtags[parent.id].push(tagsById[tag.id]);
+        }
+      });
+    }
+    return tagSubtags;
+  }, [flattenedTags, tagsById]);
+
+  return tagSubtagList;
+};
+
 export const useGetBreadthFirstOrder = (
   tagTree: FlatTag[] | undefined,
   prioritizedOptions: FlatTag[] | undefined

From bf238c836121d7e78e8584ddbb074c32001b63c2 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 15:34:48 +0200
Subject: [PATCH 03/12] support closing location tag filter, without resetting
 it

---
 .../views/location-curating/LocationFilter.tsx | 18 +++++++++---------
 .../views/location-curating/LocationPanel.tsx  |  3 +++
 .../location-curating/LocationPanelHeader.tsx  | 16 +++++++++++++---
 .../tag-structure-helpers.tsx                  |  4 +++-
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
index 4eb33f06b..c1c09ec49 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
@@ -1,7 +1,7 @@
 import { Close } from '@mui/icons-material';
 import { Autocomplete, MenuItem, Select, TextField } from '@mui/material';
 import { debounce } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 export enum LocationFilterType {
   CONTAINS = 'contains',
@@ -15,11 +15,13 @@ export enum LocationFilterType {
 
 const LocationFilter = ({
   filterType,
+  filterValue,
   setFilterType,
   setFilterValue,
   setOpen,
 }: {
   filterType: LocationFilterType;
+  filterValue?: string | string[];
   setFilterType: (value: LocationFilterType) => void;
   setFilterValue: (value: string | string[] | undefined) => void;
   setOpen: (value: boolean) => void;
@@ -32,23 +34,18 @@ const LocationFilter = ({
   const showAutocomplete = () => filterType === LocationFilterType.IS_ANY_OF;
 
   const [localFilterValue, setLocalFilterValue] = useState<string | string[]>(
-    filterType === LocationFilterType.IS_ANY_OF ? [] : ''
+    filterValue ?? (filterType === LocationFilterType.IS_ANY_OF ? [] : '')
   );
   const localFilterRef = useRef<string | string[] | undefined>(
-    filterType === LocationFilterType.IS_ANY_OF ? [] : ''
+    filterValue ?? (filterType === LocationFilterType.IS_ANY_OF ? [] : '')
   );
 
-  useEffect(() => {
-    setLocalFilterValue(filterType === LocationFilterType.IS_ANY_OF ? [] : '');
-    localFilterRef.current = filterType === LocationFilterType.IS_ANY_OF ? [] : '';
-  }, [filterType]);
-
   const updateFilterValue = debounce(() => {
     setFilterValue(localFilterRef.current);
   }, 1000);
 
   return (
-    <div className='p-2 fixed top-30 left-0 z-20 bg-white shadow-lg flex'>
+    <div className='p-2 fixed top-30 left-0 z-20 bg-white shadow-lg flex rounded-[5px]'>
       <Close
         className='my-auto mr-2 cursor-pointer'
         onClick={() => {
@@ -65,6 +62,9 @@ const LocationFilter = ({
         value={filterType}
         onChange={value => {
           setFilterType(value.target.value as LocationFilterType);
+          setLocalFilterValue(filterType === LocationFilterType.IS_ANY_OF ? [] : '');
+          localFilterRef.current = filterType === LocationFilterType.IS_ANY_OF ? [] : '';
+          updateFilterValue();
         }}
         className='mr-1'
       >
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index 1d9bfc8cb..ab123853e 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -116,13 +116,16 @@ const LocationPanel = () => {
           return (
             <LocationPanelPermissionsProvider>
               <LocationPanelHeader
+                isOpen={isOpen}
                 setOpen={(value: boolean) => {
                   setOpen(value);
                 }}
+                showFilter={filterValue?.length ? true : false}
               />
               {isOpen && (
                 <LocationFilter
                   filterType={filterType}
+                  filterValue={filterValue}
                   setFilterType={(value: LocationFilterType) => {
                     setFilterType(value);
                   }}
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
index 3f62aec08..bd198fc38 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
@@ -3,7 +3,15 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './LocationEntry.scss';
 
-const LocationPanelHeader = ({ setOpen }: { setOpen: (value: boolean) => void }) => {
+const LocationPanelHeader = ({
+  isOpen,
+  setOpen,
+  showFilter,
+}: {
+  isOpen: boolean;
+  setOpen: (value: boolean) => void;
+  showFilter: boolean;
+}) => {
   const { t } = useTranslation();
 
   const [isHoveredName, setHoveredName] = useState<boolean>(false);
@@ -23,9 +31,11 @@ const LocationPanelHeader = ({ setOpen }: { setOpen: (value: boolean) => void })
           <div className='location-header-name'>{t('common.name')}</div>
           <FilterAlt
             sx={{ color: '#808080' }}
-            className={`my-auto ml-auto ${isHoveredName ? 'visible' : 'invisible'} cursor-pointer`}
+            className={`my-auto ml-auto ${
+              isHoveredName || showFilter ? 'visible' : 'invisible'
+            } cursor-pointer`}
             onClick={() => {
-              setOpen(true);
+              setOpen(!isOpen);
             }}
           />
         </div>
diff --git a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
index f7d55e12a..a11d2889f 100644
--- a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
@@ -27,7 +27,9 @@ const useGetTagTree = (
     // set child tags for each tag in tree
     for (const tag of Object.values(tagsById)) {
       tag.parent_tags?.forEach(parentTag => {
-        tagsById[parentTag.id].child_tags?.push(tag);
+        if (parentTag.id in tagsById) {
+          tagsById[parentTag.id].child_tags?.push(tag);
+        }
       });
     }
     for (const tag of Object.values(tagsById)) {

From 97f0f14c58ad06c47e588ea5ed6a189e2307b14e Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 15:59:31 +0200
Subject: [PATCH 04/12] add further filter functionality

---
 .../views/location-curating/LocationPanel.tsx | 73 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index ab123853e..ab9cb977d 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -51,7 +51,6 @@ const LocationPanel = () => {
     if (!flattenedTags || !tagSubtagList) {
       return;
     }
-    // convert everything to lowercase before matching
     switch (filterType) {
       case LocationFilterType.CONTAINS:
         setFilteredFlattenedTags(
@@ -65,7 +64,79 @@ const LocationPanel = () => {
           )
         );
         break;
+      case LocationFilterType.EQUALS:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              !filterValue?.length ||
+              flattenedTag.name.toLowerCase() === (filterValue as string).toLowerCase() ||
+              tagSubtagList[flattenedTag.id].findIndex(
+                subtag => subtag.name.toLowerCase() === (filterValue as string).toLowerCase()
+              ) !== -1
+          )
+        );
+        break;
+      case LocationFilterType.STARTS_WITH:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              !filterValue?.length ||
+              flattenedTag.name.toLowerCase().startsWith((filterValue as string).toLowerCase()) ||
+              tagSubtagList[flattenedTag.id].findIndex(subtag =>
+                subtag.name.toLowerCase().startsWith((filterValue as string).toLowerCase())
+              ) !== -1
+          )
+        );
+        break;
+      case LocationFilterType.ENDS_WITH:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              !filterValue?.length ||
+              flattenedTag.name.toLowerCase().endsWith((filterValue as string).toLowerCase()) ||
+              tagSubtagList[flattenedTag.id].findIndex(subtag =>
+                subtag.name.toLowerCase().endsWith((filterValue as string).toLowerCase())
+              ) !== -1
+          )
+        );
+        break;
+      case LocationFilterType.IS_EMPTY:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              flattenedTag.name === '' ||
+              tagSubtagList[flattenedTag.id].findIndex(subtag => subtag.name === '') !== -1
+          )
+        );
+        break;
+      case LocationFilterType.IS_NOT_EMPTY:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              flattenedTag.name !== '' ||
+              tagSubtagList[flattenedTag.id].findIndex(subtag => subtag.name !== '') !== -1
+          )
+        );
+        break;
+      case LocationFilterType.IS_ANY_OF:
+        setFilteredFlattenedTags(
+          flattenedTags.filter(
+            flattenedTag =>
+              !filterValue?.length ||
+              (filterValue as string[]).findIndex(
+                value => value.toLowerCase() === flattenedTag.name.toLowerCase()
+              ) !== -1 ||
+              tagSubtagList[flattenedTag.id].findIndex(
+                subtag =>
+                  (filterValue as string[]).findIndex(
+                    value => value.toLowerCase() === subtag.name.toLowerCase()
+                  ) !== -1
+              ) !== -1
+          )
+        );
+        break;
       default:
+        setFilteredFlattenedTags(flattenedTags);
     }
   }, [filterValue, filterType, flattenedTags, tagSubtagList]);
 

From 7bb9ce71c0dc8335a5a5615ec8a2566fc38476c5 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 16:38:54 +0200
Subject: [PATCH 05/12] reset location filter on filterType change, type checks

---
 .../views/location-curating/LocationFilter.tsx         | 10 +++++++---
 .../views/location-curating/LocationPanel.tsx          |  7 +++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
index c1c09ec49..1cf43550f 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationFilter.tsx
@@ -61,10 +61,13 @@ const LocationFilter = ({
       <Select
         value={filterType}
         onChange={value => {
-          setFilterType(value.target.value as LocationFilterType);
-          setLocalFilterValue(filterType === LocationFilterType.IS_ANY_OF ? [] : '');
-          localFilterRef.current = filterType === LocationFilterType.IS_ANY_OF ? [] : '';
+          setLocalFilterValue(
+            (value.target.value as LocationFilterType) === LocationFilterType.IS_ANY_OF ? [] : ''
+          );
+          localFilterRef.current =
+            (value.target.value as LocationFilterType) === LocationFilterType.IS_ANY_OF ? [] : '';
           updateFilterValue();
+          setFilterType(value.target.value as LocationFilterType);
         }}
         className='mr-1'
       >
@@ -90,6 +93,7 @@ const LocationFilter = ({
       )}
       {showAutocomplete() && (
         <Autocomplete
+          value={filterValue && Array.isArray(filterValue) ? filterValue : []}
           options={[]}
           multiple
           freeSolo
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index ab9cb977d..6012b569d 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -51,6 +51,13 @@ const LocationPanel = () => {
     if (!flattenedTags || !tagSubtagList) {
       return;
     }
+    // check for correct filterValue type
+    if (typeof filterValue === 'string' && filterType === LocationFilterType.IS_ANY_OF) {
+      return;
+    }
+    if (Array.isArray(filterValue) && filterType !== LocationFilterType.IS_ANY_OF) {
+      return;
+    }
     switch (filterType) {
       case LocationFilterType.CONTAINS:
         setFilteredFlattenedTags(

From 2cb15b92d9b43713ff4dbe2ed56a740bc07126a0 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 20:06:55 +0200
Subject: [PATCH 06/12] fix filtering of child tags

---
 .../views/location-curating/LocationPanel.tsx |  4 +-
 .../tag-structure-helpers.tsx                 | 44 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index 6012b569d..fc7db187b 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -14,7 +14,7 @@ import LocationFilter, { LocationFilterType } from './LocationFilter';
 import LocationPanelHeader from './LocationPanelHeader';
 import { LocationPanelPermissionsProvider } from './LocationPanelPermissionsProvider';
 import { useCreateNewTag } from './location-management-helpers';
-import { useGetSubtags, useGetTagStructures } from './tag-structure-helpers';
+import { useGetTagStructures } from './tag-structure-helpers';
 
 const setUnacceptedSubtagsCount = (tag: FlatTag) => {
   let subtagCount = 0;
@@ -41,7 +41,7 @@ const LocationPanel = () => {
   );
 
   const { tagTree: sortedTagTree } = useGetTagStructures(filteredFlattenedTags);
-  const tagSubtagList = useGetSubtags(flattenedTags);
+  const { tagSubtagList } = useGetTagStructures(flattenedTags);
 
   const [isOpen, setOpen] = useState<boolean>(false);
   const [filterType, setFilterType] = useState<LocationFilterType>(LocationFilterType.CONTAINS);
diff --git a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
index a11d2889f..81aa7d557 100644
--- a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
@@ -161,34 +161,36 @@ export const useGetTagStructures = (
     return paths;
   }, [tagTree, topologicalOrder]);
 
-  return {
-    tagTree,
-    flattenedTagTree: tagsById,
-    tagChildTags,
-    tagSiblingTags,
-    tagSupertagList,
-  };
-};
-
-export const useGetSubtags = (flattenedTags?: FlatTag[]) => {
-  const tagsById = useGetTagsById(flattenedTags);
-
   const tagSubtagList = useMemo(() => {
-    if (!tagsById || !flattenedTags) {
+    if (!tagsById || !flattenedTags || !tagTree) {
       return undefined;
     }
     const tagSubtags = Object.fromEntries(flattenedTags.map(tag => [tag.id, [] as FlatTag[]]));
-    for (const tag of flattenedTags) {
-      tagsById[tag.id].parent_tags?.forEach(parent => {
-        if (tagSubtags[parent.id].findIndex(subtag => subtag.id === parent.id) === -1) {
-          tagSubtags[parent.id].push(tagsById[tag.id]);
-        }
-      });
+
+    const visit = (tag: FlatTag) => {
+      if (!tag.child_tags) {
+        return [];
+      }
+      for (const childTag of tag.child_tags) {
+        tagSubtags[tag.id] = [...tagSubtags[tag.id].concat(visit(childTag)), tag];
+      }
+      return tagSubtags[tag.id];
+    };
+
+    for (const tag of tagTree) {
+      visit(tag);
     }
     return tagSubtags;
-  }, [flattenedTags, tagsById]);
+  }, [flattenedTags, tagsById, tagTree]);
 
-  return tagSubtagList;
+  return {
+    tagTree,
+    flattenedTagTree: tagsById,
+    tagChildTags,
+    tagSiblingTags,
+    tagSupertagList,
+    tagSubtagList,
+  };
 };
 
 export const useGetBreadthFirstOrder = (

From 9ee50cc2b46c0beaf84d3874c672d805d9ccb5cc Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 22:13:19 +0200
Subject: [PATCH 07/12] auto foldout of filtered location branches

---
 .../views/location-curating/LocationBranch.tsx  | 17 +++++++++++++----
 .../views/location-curating/LocationPanel.tsx   |  7 ++++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationBranch.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationBranch.tsx
index cf21d31cb..ccf33952c 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationBranch.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationBranch.tsx
@@ -11,20 +11,27 @@ const LocationBranch = ({
   locationTag,
   parentTag,
   refetch,
+  forceFoldout,
 }: {
   locationTag: FlatTag;
   parentTag?: FlatTag;
   refetch: () => void;
+  forceFoldout?: boolean;
 }) => {
   const foldoutStatus = useFoldoutStatus();
 
   const { t } = useTranslation();
+  const [localForceFoldout, setLocalForceFoldout] = useState<boolean>(forceFoldout ?? false);
   const [showMore, setShowMore] = useState<boolean>(
     foldoutStatus?.current && locationTag.id in foldoutStatus.current
       ? foldoutStatus.current[locationTag.id].isOpen
       : false
   );
 
+  useEffect(() => {
+    setLocalForceFoldout(forceFoldout ?? false);
+  }, [forceFoldout]);
+
   useEffect(() => {
     if (foldoutStatus?.current && locationTag.id in foldoutStatus.current) {
       setShowMore(foldoutStatus.current[locationTag.id].isOpen);
@@ -40,6 +47,7 @@ const LocationBranch = ({
             locationTag={childTag}
             parentTag={locationTag}
             refetch={refetch}
+            forceFoldout={forceFoldout && (childTag.child_tags?.length ? true : false)}
           />
         );
       });
@@ -53,16 +61,17 @@ const LocationBranch = ({
       <LocationEntry
         locationTag={locationTag}
         parentTag={parentTag}
-        showMore={showMore}
+        showMore={showMore || localForceFoldout}
         onToggleShowMore={() => {
           if (foldoutStatus?.current) {
-            foldoutStatus.current[locationTag.id] = { isOpen: !showMore };
+            foldoutStatus.current[locationTag.id] = { isOpen: !(showMore || localForceFoldout) };
           }
-          setShowMore(prev => !prev);
+          setShowMore(prev => !(prev || localForceFoldout));
+          setLocalForceFoldout(false);
         }}
         refetch={refetch}
       />
-      {showMore && (
+      {(showMore || localForceFoldout) && (
         <div className='sub-location-container'>
           {renderSubBranches()}
           {canCreateNewTag && (
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index fc7db187b..359b7fe8f 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -217,7 +217,12 @@ const LocationPanel = () => {
               )}
               <div className='location-panel-content'>
                 {tagTree?.map(tag => (
-                  <LocationBranch key={tag.id} locationTag={tag} refetch={refetch} />
+                  <LocationBranch
+                    key={tag.id}
+                    locationTag={tag}
+                    refetch={refetch}
+                    forceFoldout={filterValue?.length && tag.child_tags?.length ? true : false}
+                  />
                 ))}
                 {canCreateNewTag && (
                   <AddLocationEntry

From a37cda248a6d37228aedd2a289933754882dca25 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 22:37:56 +0200
Subject: [PATCH 08/12] fix location tag filter to also include locations
 without sublocations

---
 .../views/location-curating/tag-structure-helpers.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
index 81aa7d557..323806341 100644
--- a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
@@ -172,7 +172,7 @@ export const useGetTagStructures = (
         return [];
       }
       for (const childTag of tag.child_tags) {
-        tagSubtags[tag.id] = [...tagSubtags[tag.id].concat(visit(childTag)), tag];
+        tagSubtags[tag.id] = [...tagSubtags[tag.id].concat(visit(childTag)), childTag];
       }
       return tagSubtags[tag.id];
     };

From 2b937a0d46c9cc15a63698550616a152ed642a21 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 11 Sep 2023 23:19:52 +0200
Subject: [PATCH 09/12] use IconButtonWithTooltip for location tag filter

---
 .../location-curating/LocationPanelHeader.tsx | 21 +++++++++++--------
 .../bp-gallery/src/shared/locales/de.json     |  3 ++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
index bd198fc38..40b92b808 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
@@ -1,6 +1,7 @@
 import { FilterAlt } from '@mui/icons-material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import IconButtonWithTooltip from '../../common/IconButtonWithTooltip';
 import './LocationEntry.scss';
 
 const LocationPanelHeader = ({
@@ -29,15 +30,17 @@ const LocationPanelHeader = ({
           }}
         >
           <div className='location-header-name'>{t('common.name')}</div>
-          <FilterAlt
-            sx={{ color: '#808080' }}
-            className={`my-auto ml-auto ${
-              isHoveredName || showFilter ? 'visible' : 'invisible'
-            } cursor-pointer`}
-            onClick={() => {
-              setOpen(!isOpen);
-            }}
-          />
+          <div
+            className={`py-auto ml-auto ${isHoveredName || showFilter ? 'visible' : 'invisible'}`}
+          >
+            <IconButtonWithTooltip
+              title={t('tag-panel.apply-filter')}
+              onClick={() => {
+                setOpen(!isOpen);
+              }}
+              icon={<FilterAlt />}
+            />
+          </div>
         </div>
         <div className='location-header-synonyms'>{t('curator.synonyms')}</div>
       </div>
diff --git a/projects/bp-gallery/src/shared/locales/de.json b/projects/bp-gallery/src/shared/locales/de.json
index b3cd0719a..40d9c8db3 100755
--- a/projects/bp-gallery/src/shared/locales/de.json
+++ b/projects/bp-gallery/src/shared/locales/de.json
@@ -688,7 +688,8 @@
     "not-allowed-to-delete_one": "Für diesen Ort existiert {{ count }} Bild. Er kann erst entfernt werden, wenn es keine Bilder für diesen Ort gibt.",
     "not-allowed-to-delete_other": "Für diesen Ort existieren {{ count }} Bilder. Er kann erst entfernt werden, wenn es keine Bilder für diesen Ort gibt.",
     "not-allowed-to-delete-sublocation": "Für einen der Unterorte existieren Bilder. Dieser Ort kann erst entfernt werden, wenn es keine Bilder für seine Unterorte gibt",
-    "delete-coordinate": "Koordinate löschen"
+    "delete-coordinate": "Koordinate löschen",
+    "apply-filter": "Filter anwenden"
   },
   "tooltips": {
     "detach-location": "Ort aus der Hierarchie lösen.",

From c9e9a066d6cbd570b43b1d7f7b9721df2d256e98 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Mon, 18 Sep 2023 16:39:18 +0200
Subject: [PATCH 10/12] allow curators to toggle between flat and hierarchical
 representation of locations

---
 .../location-curating/LocationEntry.scss      |   1 -
 .../views/location-curating/LocationEntry.tsx |   2 +-
 .../views/location-curating/LocationPanel.tsx | 140 +++++++++++-------
 .../location-curating/LocationPanelHeader.tsx |  15 +-
 4 files changed, 98 insertions(+), 60 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationEntry.scss b/projects/bp-gallery/src/components/views/location-curating/LocationEntry.scss
index 6de60d8af..e3fe14418 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationEntry.scss
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationEntry.scss
@@ -14,7 +14,6 @@
     margin-top: auto;
     margin-bottom: auto;
     border-left: 2px solid darkgrey;
-    margin-left: 40px;
     padding-left: 8px;
     padding-right: 8px;
     box-sizing: border-box;
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationEntry.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationEntry.tsx
index 7528c546b..8109cebdd 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationEntry.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationEntry.tsx
@@ -57,7 +57,7 @@ const LocationEntry = ({
             color='info'
             overlap='circular'
             variant='dot'
-            badgeContent={locationTag.unacceptedSubtags}
+            badgeContent={locationTag.unacceptedSubtags ?? 0}
           >
             <IconButton
               className='show-more-button'
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
index 359b7fe8f..eb53578ed 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanel.tsx
@@ -44,6 +44,7 @@ const LocationPanel = () => {
   const { tagSubtagList } = useGetTagStructures(flattenedTags);
 
   const [isOpen, setOpen] = useState<boolean>(false);
+  const [showFlat, setShowFlat] = useState<boolean>(false);
   const [filterType, setFilterType] = useState<LocationFilterType>(LocationFilterType.CONTAINS);
   const [filterValue, setFilterValue] = useState<string | string[] | undefined>();
 
@@ -61,91 +62,112 @@ const LocationPanel = () => {
     switch (filterType) {
       case LocationFilterType.CONTAINS:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              !filterValue?.length ||
-              flattenedTag.name.toLowerCase().includes((filterValue as string).toLowerCase()) ||
-              tagSubtagList[flattenedTag.id].findIndex(subtag =>
-                subtag.name.toLowerCase().includes((filterValue as string).toLowerCase())
-              ) !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                !filterValue?.length ||
+                flattenedTag.name.toLowerCase().includes((filterValue as string).toLowerCase()) ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(subtag =>
+                    subtag.name.toLowerCase().includes((filterValue as string).toLowerCase())
+                  ) !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       case LocationFilterType.EQUALS:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              !filterValue?.length ||
-              flattenedTag.name.toLowerCase() === (filterValue as string).toLowerCase() ||
-              tagSubtagList[flattenedTag.id].findIndex(
-                subtag => subtag.name.toLowerCase() === (filterValue as string).toLowerCase()
-              ) !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                !filterValue?.length ||
+                flattenedTag.name.toLowerCase() === (filterValue as string).toLowerCase() ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(
+                    subtag => subtag.name.toLowerCase() === (filterValue as string).toLowerCase()
+                  ) !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       case LocationFilterType.STARTS_WITH:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              !filterValue?.length ||
-              flattenedTag.name.toLowerCase().startsWith((filterValue as string).toLowerCase()) ||
-              tagSubtagList[flattenedTag.id].findIndex(subtag =>
-                subtag.name.toLowerCase().startsWith((filterValue as string).toLowerCase())
-              ) !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                !filterValue?.length ||
+                flattenedTag.name.toLowerCase().startsWith((filterValue as string).toLowerCase()) ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(subtag =>
+                    subtag.name.toLowerCase().startsWith((filterValue as string).toLowerCase())
+                  ) !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       case LocationFilterType.ENDS_WITH:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              !filterValue?.length ||
-              flattenedTag.name.toLowerCase().endsWith((filterValue as string).toLowerCase()) ||
-              tagSubtagList[flattenedTag.id].findIndex(subtag =>
-                subtag.name.toLowerCase().endsWith((filterValue as string).toLowerCase())
-              ) !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                !filterValue?.length ||
+                flattenedTag.name.toLowerCase().endsWith((filterValue as string).toLowerCase()) ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(subtag =>
+                    subtag.name.toLowerCase().endsWith((filterValue as string).toLowerCase())
+                  ) !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       case LocationFilterType.IS_EMPTY:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              flattenedTag.name === '' ||
-              tagSubtagList[flattenedTag.id].findIndex(subtag => subtag.name === '') !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                flattenedTag.name === '' ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(subtag => subtag.name === '') !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       case LocationFilterType.IS_NOT_EMPTY:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              flattenedTag.name !== '' ||
-              tagSubtagList[flattenedTag.id].findIndex(subtag => subtag.name !== '') !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                flattenedTag.name !== '' ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(subtag => subtag.name !== '') !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       case LocationFilterType.IS_ANY_OF:
         setFilteredFlattenedTags(
-          flattenedTags.filter(
-            flattenedTag =>
-              !filterValue?.length ||
-              (filterValue as string[]).findIndex(
-                value => value.toLowerCase() === flattenedTag.name.toLowerCase()
-              ) !== -1 ||
-              tagSubtagList[flattenedTag.id].findIndex(
-                subtag =>
-                  (filterValue as string[]).findIndex(
-                    value => value.toLowerCase() === subtag.name.toLowerCase()
-                  ) !== -1
-              ) !== -1
-          )
+          flattenedTags
+            .filter(
+              flattenedTag =>
+                !filterValue?.length ||
+                (filterValue as string[]).findIndex(
+                  value => value.toLowerCase() === flattenedTag.name.toLowerCase()
+                ) !== -1 ||
+                (!showFlat &&
+                  tagSubtagList[flattenedTag.id].findIndex(
+                    subtag =>
+                      (filterValue as string[]).findIndex(
+                        value => value.toLowerCase() === subtag.name.toLowerCase()
+                      ) !== -1
+                  ) !== -1)
+            )
+            .sort((a, b) => (a.name < b.name ? -1 : 1))
         );
         break;
       default:
         setFilteredFlattenedTags(flattenedTags);
     }
-  }, [filterValue, filterType, flattenedTags, tagSubtagList]);
+  }, [filterValue, filterType, flattenedTags, tagSubtagList, showFlat]);
 
   useEffect(() => {
     if (!foldoutStatus) {
@@ -198,6 +220,10 @@ const LocationPanel = () => {
                 setOpen={(value: boolean) => {
                   setOpen(value);
                 }}
+                showFlat={showFlat}
+                setShowFlat={(value: boolean) => {
+                  setShowFlat(value);
+                }}
                 showFilter={filterValue?.length ? true : false}
               />
               {isOpen && (
@@ -216,7 +242,7 @@ const LocationPanel = () => {
                 />
               )}
               <div className='location-panel-content'>
-                {tagTree?.map(tag => (
+                {(showFlat ? filteredFlattenedTags : tagTree)?.map(tag => (
                   <LocationBranch
                     key={tag.id}
                     locationTag={tag}
diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
index 40b92b808..8ba9fa5d9 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
@@ -1,4 +1,4 @@
-import { FilterAlt } from '@mui/icons-material';
+import { AccountTree, FilterAlt, TableRows } from '@mui/icons-material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import IconButtonWithTooltip from '../../common/IconButtonWithTooltip';
@@ -7,10 +7,14 @@ import './LocationEntry.scss';
 const LocationPanelHeader = ({
   isOpen,
   setOpen,
+  showFlat,
+  setShowFlat,
   showFilter,
 }: {
   isOpen: boolean;
   setOpen: (value: boolean) => void;
+  showFlat: boolean;
+  setShowFlat: (value: boolean) => void;
   showFilter: boolean;
 }) => {
   const { t } = useTranslation();
@@ -20,6 +24,15 @@ const LocationPanelHeader = ({
   return (
     <>
       <div className='location-header-container'>
+        <div>
+          <IconButtonWithTooltip
+            title={showFlat ? 'Hierarchische Struktur' : 'Flache Struktur'}
+            onClick={() => {
+              setShowFlat(!showFlat);
+            }}
+            icon={showFlat ? <AccountTree /> : <TableRows />}
+          />
+        </div>
         <div
           className='flex'
           onMouseEnter={() => {

From 029b1232b1788fed1e774d87f0f8ca5af8b4f716 Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Tue, 19 Sep 2023 13:01:08 +0200
Subject: [PATCH 11/12] internationalization

---
 .../views/location-curating/LocationPanelHeader.tsx           | 2 +-
 projects/bp-gallery/src/shared/locales/de.json                | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
index 8ba9fa5d9..d4c428c6e 100644
--- a/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/LocationPanelHeader.tsx
@@ -26,7 +26,7 @@ const LocationPanelHeader = ({
       <div className='location-header-container'>
         <div>
           <IconButtonWithTooltip
-            title={showFlat ? 'Hierarchische Struktur' : 'Flache Struktur'}
+            title={showFlat ? t('tag-panel.hierarchical') : t('tag-panel.flat')}
             onClick={() => {
               setShowFlat(!showFlat);
             }}
diff --git a/projects/bp-gallery/src/shared/locales/de.json b/projects/bp-gallery/src/shared/locales/de.json
index 40d9c8db3..6968e170f 100755
--- a/projects/bp-gallery/src/shared/locales/de.json
+++ b/projects/bp-gallery/src/shared/locales/de.json
@@ -689,7 +689,9 @@
     "not-allowed-to-delete_other": "Für diesen Ort existieren {{ count }} Bilder. Er kann erst entfernt werden, wenn es keine Bilder für diesen Ort gibt.",
     "not-allowed-to-delete-sublocation": "Für einen der Unterorte existieren Bilder. Dieser Ort kann erst entfernt werden, wenn es keine Bilder für seine Unterorte gibt",
     "delete-coordinate": "Koordinate löschen",
-    "apply-filter": "Filter anwenden"
+    "apply-filter": "Filter anwenden",
+    "hierarchical": "Hierarchisch",
+    "flat": "Flach"
   },
   "tooltips": {
     "detach-location": "Ort aus der Hierarchie lösen.",

From a2ccac0eec91adb0efac34e03adc2a1492181e7e Mon Sep 17 00:00:00 2001
From: LinoH5 <lino.hellige@student.hpi.uni-potsdam.de>
Date: Tue, 19 Sep 2023 13:23:17 +0200
Subject: [PATCH 12/12] filter tag structure subtags for duplicates

---
 .../views/location-curating/tag-structure-helpers.tsx  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
index 323806341..741f7ba25 100644
--- a/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
+++ b/projects/bp-gallery/src/components/views/location-curating/tag-structure-helpers.tsx
@@ -172,7 +172,15 @@ export const useGetTagStructures = (
         return [];
       }
       for (const childTag of tag.child_tags) {
-        tagSubtags[tag.id] = [...tagSubtags[tag.id].concat(visit(childTag)), childTag];
+        tagSubtags[tag.id] = [
+          ...tagSubtags[tag.id].concat(
+            visit(childTag).filter(
+              filterTag =>
+                tagSubtags[tag.id].findIndex(indexTag => indexTag.id === filterTag.id) === -1
+            )
+          ),
+          childTag,
+        ];
       }
       return tagSubtags[tag.id];
     };