From e09020ed0a737ffa0c48face14f8f3311f028d7e Mon Sep 17 00:00:00 2001
From: Saelmala <sandra.larsson@eyevinn.se>
Date: Fri, 6 Sep 2024 11:29:25 +0200
Subject: [PATCH 1/2] fix: bug fixes on filter

---
 src/components/filter/FilterDropdown.tsx |  56 +++++++---
 src/components/filter/FilterOptions.tsx  | 131 +++++++++++------------
 src/components/inventory/Inventory.tsx   |   2 +-
 3 files changed, 105 insertions(+), 84 deletions(-)

diff --git a/src/components/filter/FilterDropdown.tsx b/src/components/filter/FilterDropdown.tsx
index 85c9eb2..5e76583 100644
--- a/src/components/filter/FilterDropdown.tsx
+++ b/src/components/filter/FilterDropdown.tsx
@@ -15,6 +15,7 @@ function FilterDropdown({
   showNdiType,
   showBmdType,
   showSrtType,
+  showMediaSourceGeneratorType,
   setIsTypeHidden,
   setIsLocationHidden,
   setSelectedTags,
@@ -22,6 +23,7 @@ function FilterDropdown({
   setOnlyShowNdiSources: setOnlyShowNdiSources,
   setOnlyShowBmdSources: setOnlyShowBmdSources,
   setOnlyShowSrtSources: setOnlyShowSrtSources,
+  setOnlyShowMediaSourceGeneratorSources,
   handleSorting
 }: {
   close: () => void;
@@ -35,6 +37,7 @@ function FilterDropdown({
   showNdiType: boolean;
   showSrtType: boolean;
   showBmdType: boolean;
+  showMediaSourceGeneratorType: boolean;
   setIsTypeHidden: React.Dispatch<React.SetStateAction<boolean>>;
   setIsLocationHidden: React.Dispatch<React.SetStateAction<boolean>>;
   setOnlyShowActiveSources: React.Dispatch<React.SetStateAction<boolean>>;
@@ -42,6 +45,9 @@ function FilterDropdown({
   setOnlyShowNdiSources: React.Dispatch<React.SetStateAction<boolean>>;
   setOnlyShowBmdSources: React.Dispatch<React.SetStateAction<boolean>>;
   setOnlyShowSrtSources: React.Dispatch<React.SetStateAction<boolean>>;
+  setOnlyShowMediaSourceGeneratorSources: React.Dispatch<
+    React.SetStateAction<boolean>
+  >;
   handleSorting: (reversedOrder: boolean) => void;
 }) {
   const t = useTranslate();
@@ -75,22 +81,26 @@ function FilterDropdown({
     setIsTypeHidden(true);
   };
 
-  const showSelectedConfigSources = () => {
+  const toggleConfigSources = () => {
     setOnlyShowConfigSources(!showConfigSources);
   };
 
-  const showSelectedNdiType = () => {
+  const toggleNdiType = () => {
     setOnlyShowNdiSources(!showNdiType);
   };
 
-  const showSelectedSrtType = () => {
+  const toggleSrtType = () => {
     setOnlyShowSrtSources(!showSrtType);
   };
 
-  const showSelectedBmdType = () => {
+  const toggleBmdType = () => {
     setOnlyShowBmdSources(!showBmdType);
   };
 
+  const toggleMediaSourceGeneratorType = () => {
+    setOnlyShowMediaSourceGeneratorSources(!showMediaSourceGeneratorType);
+  };
+
   const deleteTag = (value: string) => {
     const temp = selectedTags;
     temp.delete(value);
@@ -148,10 +158,11 @@ function FilterDropdown({
 
   const handleClear = () => {
     setSelectedTags(new Set<string>());
-    setOnlyShowConfigSources(false);
-    setOnlyShowBmdSources(false);
-    setOnlyShowNdiSources(false);
-    setOnlyShowSrtSources(false);
+    setOnlyShowConfigSources(true);
+    setOnlyShowBmdSources(true);
+    setOnlyShowNdiSources(true);
+    setOnlyShowSrtSources(true);
+    setOnlyShowMediaSourceGeneratorSources(false);
   };
 
   const typesSearch = (event: ChangeEvent<HTMLInputElement>) => {
@@ -259,7 +270,7 @@ function FilterDropdown({
               })}
           </div>
           <div
-            className="absolute border w-full z-20 rounded-lg shadow  divide-y bg-zinc-700 divide-gray-600"
+            className="absolute border w-full z-50 rounded-lg shadow  divide-y bg-zinc-700 divide-gray-600"
             hidden={isLocationHidden}
           >
             <ul className="px-3 pb-3 text-sm text-p">
@@ -305,7 +316,7 @@ function FilterDropdown({
                 type="checkbox"
                 className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
                 checked={showConfigSources}
-                onChange={showSelectedConfigSources}
+                onChange={toggleConfigSources}
               />
               <label
                 className="ml-2 mt-1 text-left text-zinc-300"
@@ -320,7 +331,7 @@ function FilterDropdown({
                 type="checkbox"
                 className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
                 checked={showNdiType}
-                onChange={showSelectedNdiType}
+                onChange={toggleNdiType}
               />
               <label
                 className="ml-2 mt-1 text-left text-zinc-300"
@@ -335,7 +346,7 @@ function FilterDropdown({
                 type="checkbox"
                 className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
                 checked={showSrtType}
-                onChange={showSelectedSrtType}
+                onChange={toggleSrtType}
               />
               <label
                 className="ml-2 mt-1 text-left text-zinc-300"
@@ -350,7 +361,7 @@ function FilterDropdown({
                 type="checkbox"
                 className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
                 checked={showBmdType}
-                onChange={showSelectedBmdType}
+                onChange={toggleBmdType}
               />
               <label
                 className="ml-2 mt-1 text-left text-zinc-300"
@@ -359,19 +370,34 @@ function FilterDropdown({
                 SDI/HDMI
               </label>
             </div>
+            <div className="flex flex-row">
+              <input
+                id="showMediaSourceCheckbox"
+                type="checkbox"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
+                checked={showMediaSourceGeneratorType}
+                onChange={toggleMediaSourceGeneratorType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showMediaSourceCheckbox"
+              >
+                Test pattern
+              </label>
+            </div>
           </div>
           <div className="flex self-end justify-end mt-4">
             <button
               onClick={handleClear}
               id="dropdownCheckboxButton"
-              className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 bg-zinc-800  hover:ring-2 focus:outline-none bg-zink-800 hover:bg-zinc-700 opacity-70"
+              className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 hover:ring-2 focus:outline-none bg-zinc-800 hover:bg-zinc-700 opacity-70"
               type="button"
             >
               {t('clear')}
             </button>
             <button
               onClick={() => close()}
-              className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 bg-zinc-800  hover:ring-2 focus:outline-none bg-zink-800 hover:bg-zinc-700"
+              className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 hover:ring-2 focus:outline-none bg-zinc-800 hover:bg-zinc-700"
               type="button"
             >
               {t('apply')}
diff --git a/src/components/filter/FilterOptions.tsx b/src/components/filter/FilterOptions.tsx
index 67574c0..cc4d216 100644
--- a/src/components/filter/FilterOptions.tsx
+++ b/src/components/filter/FilterOptions.tsx
@@ -14,9 +14,11 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
   const { locations, types, sources } = useContext(FilterContext);
 
   const [onlyShowActiveSources, setOnlyShowActiveSources] = useState(false);
-  const [onlyShowNdiSources, setOnlyShowNdiSources] = useState(false);
-  const [onlyShowBmdSources, setOnlyShowBmdSources] = useState(false);
-  const [onlyShowSrtSources, setOnlyShowSrtSources] = useState(false);
+  const [showNdiType, setShowNdiType] = useState(true);
+  const [showBmdType, setShowBmdType] = useState(true);
+  const [showSrtType, setShowSrtType] = useState(true);
+  const [showMediaSourceGeneratorType, setShowMediaGeneratorSourceType] =
+    useState(false);
   const [isFilterHidden, setIsFilterHidden] = useState(true);
   const [isTypeHidden, setIsTypeHidden] = useState(true);
   const [isLocationHidden, setIsLocationHidden] = useState(true);
@@ -24,46 +26,37 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
   const [selectedTags, setSelectedTags] = useState<Set<string>>(
     new Set<string>()
   );
-  let tempSet = new Map<string, SourceWithId>(sources);
+  const [filteredSources, setFilteredSources] = useState<
+    Map<string, SourceWithId>
+  >(new Map<string, SourceWithId>());
+
+  useEffect(() => {}, [showMediaSourceGeneratorType]);
 
   useEffect(() => {
-    if (
-      selectedTags.size === 0 &&
-      searchString.length === 0 &&
-      !onlyShowActiveSources &&
-      !onlyShowNdiSources &&
-      !onlyShowBmdSources &&
-      !onlyShowSrtSources
-    ) {
-      resetFilter();
-      return;
+    const tempSet = new Map<string, SourceWithId>(sources);
+
+    if (searchString.length > 0 || selectedTags.size > 0) {
+      handleSearch(tempSet);
+      handleTags(tempSet);
     }
 
-    handleSearch();
-    handleTags();
-    filterSources();
+    filterSources(tempSet);
 
+    setFilteredSources(tempSet);
     onFilteredSources(tempSet);
-    tempSet.clear();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     searchString,
     selectedTags,
     onlyShowActiveSources,
-    onlyShowNdiSources,
-    onlyShowBmdSources,
-    onlyShowSrtSources
+    showNdiType,
+    showBmdType,
+    showSrtType,
+    showMediaSourceGeneratorType,
+    sources
   ]);
 
-  const resetFilter = () => {
-    tempSet = new Map<string, SourceWithId>(sources);
-    onFilteredSources(sources);
-  };
-
-  const handleSearch = () => {
-    if (searchString.length === 0) {
-      tempSet = new Map<string, SourceWithId>(sources);
-    } else {
+  const handleSearch = (tempSet: Map<string, SourceWithId>) => {
+    if (searchString.length > 0) {
       for (const source of tempSet.values()) {
         const searchValues = [
           source.name,
@@ -82,8 +75,8 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
     }
   };
 
-  const handleTags = () => {
-    if (selectedTags.size !== 0) {
+  const handleTags = (tempSet: Map<string, SourceWithId>) => {
+    if (selectedTags.size > 0) {
       const typeTags = new Set<string>();
       const locationTags = new Set<string>();
       selectedTags.forEach((tag) => {
@@ -103,30 +96,26 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
     }
   };
 
-  const filterSources = async () => {
-    for (const source of tempSet.values()) {
-      let shouldDelete = false;
-
-      const isFilteringByType =
-        onlyShowNdiSources || onlyShowBmdSources || onlyShowSrtSources;
-
-      if (isFilteringByType && !source.ingest_type) {
-        shouldDelete = true;
-      } else if (source.ingest_type) {
-        const ingestType = source.ingest_type.toUpperCase();
+  const filterSources = (tempSet: Map<string, SourceWithId>) => {
+    const isFilteringByType =
+      showNdiType || showBmdType || showSrtType || showMediaSourceGeneratorType;
 
-        const isNdiSelected = onlyShowNdiSources && ingestType === 'NDI';
-        const isBmdSelected = onlyShowBmdSources && ingestType === 'BMD';
-        const isSrtSelected = onlyShowSrtSources && ingestType === 'SRT';
+    if (!isFilteringByType) {
+      tempSet.clear();
+      return;
+    }
 
-        if (
-          isFilteringByType &&
-          !isNdiSelected &&
-          !isBmdSelected &&
-          !isSrtSelected
-        ) {
-          shouldDelete = true;
-        }
+    for (const source of tempSet.values()) {
+      const ingestType = source.ingest_type?.toUpperCase() || '';
+      let shouldDelete = true;
+
+      if (
+        (showNdiType && ingestType === 'NDI') ||
+        (showBmdType && ingestType === 'BMD') ||
+        (showSrtType && ingestType === 'SRT') ||
+        (showMediaSourceGeneratorType && ingestType === 'MEDIASOURCEGENERATOR')
+      ) {
+        shouldDelete = false;
       }
 
       if (onlyShowActiveSources && source.status === 'gone') {
@@ -140,15 +129,17 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
   };
 
   const handleSorting = (reversedOrder: boolean) => {
-    const sortedSourcesArray = Array.from(tempSet.values()).sort((a, b) => {
-      const dateA = new Date(a.lastConnected).getTime();
-      const dateB = new Date(b.lastConnected).getTime();
-      return reversedOrder ? dateA - dateB : dateB - dateA;
-    });
-    tempSet = new Map(
+    const sortedSourcesArray = Array.from(filteredSources.values()).sort(
+      (a, b) => {
+        const dateA = new Date(a.lastConnected).getTime();
+        const dateB = new Date(b.lastConnected).getTime();
+        return reversedOrder ? dateA - dateB : dateB - dateA;
+      }
+    );
+    const sortedMap = new Map(
       sortedSourcesArray.map((source) => [source._id.toString(), source])
     );
-    onFilteredSources(tempSet);
+    onFilteredSources(sortedMap);
   };
 
   return (
@@ -178,12 +169,16 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
           setIsLocationHidden={setIsLocationHidden}
           setSelectedTags={setSelectedTags}
           setOnlyShowActiveSources={setOnlyShowActiveSources}
-          setOnlyShowNdiSources={setOnlyShowNdiSources}
-          setOnlyShowBmdSources={setOnlyShowBmdSources}
-          setOnlyShowSrtSources={setOnlyShowSrtSources}
-          showBmdType={onlyShowBmdSources}
-          showNdiType={onlyShowNdiSources}
-          showSrtType={onlyShowSrtSources}
+          setOnlyShowNdiSources={setShowNdiType}
+          setOnlyShowBmdSources={setShowBmdType}
+          setOnlyShowSrtSources={setShowSrtType}
+          setOnlyShowMediaSourceGeneratorSources={
+            setShowMediaGeneratorSourceType
+          }
+          showBmdType={showBmdType}
+          showNdiType={showNdiType}
+          showSrtType={showSrtType}
+          showMediaSourceGeneratorType={showMediaSourceGeneratorType}
           handleSorting={handleSorting}
         />
       </div>
diff --git a/src/components/inventory/Inventory.tsx b/src/components/inventory/Inventory.tsx
index 7603616..8a46c43 100644
--- a/src/components/inventory/Inventory.tsx
+++ b/src/components/inventory/Inventory.tsx
@@ -42,7 +42,7 @@ export default function Inventory() {
     filteredSources: Map<string, SourceWithId>
   ): React.ReactNode {
     return Array.from(
-      filteredSources.size > 0 ? filteredSources.values() : sources.values()
+      filteredSources.size >= 0 ? filteredSources.values() : sources.values()
     ).map((source, index) => {
       if (source.status !== 'purge') {
         return (

From 665641ca0af3824001346282e6c59e9e7f145e7b Mon Sep 17 00:00:00 2001
From: Saelmala <sandra.larsson@eyevinn.se>
Date: Fri, 6 Sep 2024 11:43:44 +0200
Subject: [PATCH 2/2] fix: test fail

---
 src/components/filter/FilterOptions.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/filter/FilterOptions.tsx b/src/components/filter/FilterOptions.tsx
index cc4d216..23b2bd7 100644
--- a/src/components/filter/FilterOptions.tsx
+++ b/src/components/filter/FilterOptions.tsx
@@ -30,8 +30,6 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
     Map<string, SourceWithId>
   >(new Map<string, SourceWithId>());
 
-  useEffect(() => {}, [showMediaSourceGeneratorType]);
-
   useEffect(() => {
     const tempSet = new Map<string, SourceWithId>(sources);