UI changes and bugfixes (#14669)

* Home/End buttons for search input and max 8 search columns

* Fix lifecycle label

* remove video tab if tracked object has no clip

* hide object lifecycle if there is no clip

* add test for filter value to ensure only fully numeric values are set as numbers

web/src/components/input/InputWithTags.tsx

@@ -523,17 +523,29 @@ export default function InputWithTags({
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
+      const event = e.target as HTMLInputElement;
+
+      if (!currentFilterType && (e.key === "Home" || e.key === "End")) {
+        const position = e.key === "Home" ? 0 : event.value.length;
+        event.setSelectionRange(position, position);
+      }
+
       if (
         e.key === "Enter" &&
         inputValue.trim() !== "" &&
         filterSuggestions(suggestions).length == 0
       ) {
         e.preventDefault();
-
         handleSearch(inputValue);
       }
     },
-    [inputValue, handleSearch, filterSuggestions, suggestions],
+    [
+      inputValue,
+      handleSearch,
+      filterSuggestions,
+      suggestions,
+      currentFilterType,
+    ],
   );
 
   // effects

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -641,7 +641,7 @@ function getLifecycleItemDescription(lifecycleItem: ObjectLifecycleSequence) {
         )} detected for ${label}`;
       } else {
         title = `${
-          lifecycleItem.data.sub_label
+          lifecycleItem.data.label
         } recognized as ${lifecycleItem.data.attribute.replaceAll("_", " ")}`;
       }
       return title;

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -141,7 +141,12 @@ export default function SearchDetailDialog({
       views.splice(index, 1);
     }
 
-    if (search.data.type != "object") {
+    if (!search.has_clip) {
+      const index = views.indexOf("video");
+      views.splice(index, 1);
+    }
+
+    if (search.data.type != "object" || !search.has_clip) {
       const index = views.indexOf("object lifecycle");
       views.splice(index, 1);
     }

web/src/components/settings/SearchSettings.tsx

@@ -99,7 +99,7 @@ export default function SearchSettings({
               <Slider
                 value={[columns]}
                 onValueChange={([value]) => setColumns(value)}
-                max={6}
+                max={8}
                 min={2}
                 step={1}
                 className="flex-grow"

web/src/hooks/use-api-filter.ts

@@ -65,7 +65,11 @@ export function useApiFilterArgs<
     const filter: { [key: string]: unknown } = {};
 
     rawParams.forEach((value, key) => {
-      if (value != "true" && value != "false" && isNaN(parseFloat(value))) {
+      if (
+        value != "true" &&
+        value != "false" &&
+        (/[^0-9,]/.test(value) || isNaN(parseFloat(value)))
+      ) {
         filter[key] = value.includes(",") ? value.split(",") : [value];
       } else {
         if (value != undefined) {

web/src/views/search/SearchView.tsx

@@ -83,6 +83,8 @@ export default function SearchView({
       "sm:grid-cols-4": columns === 4,
       "sm:grid-cols-5": columns === 5,
       "sm:grid-cols-6": columns === 6,
+      "sm:grid-cols-7": columns === 7,
+      "sm:grid-cols-8": columns === 8,
     },
   );