v1.17.0

components/AdminMessages.tsx

@@ -13,7 +13,7 @@ export default function AdminMessages(props: AdminMessagesProps) {
         props.setActiveAdminMessages(adminMessagesCopy);
     }
 
-    return (<div className={`pointer-events-none font-dm-sans flex-col right-0 absolute z-30 inset-y-0 sm:flex sm:justify-end sm:px-6 sm:pb-5 lg:px-8 ${isOnLabelingPage ? 'bottom-8' : 'bottom-0'}`}>
+    return (<div className={`pointer-events-none font-dm-sans flex-col right-0 fixed z-30 inset-y-0 sm:flex sm:justify-end sm:px-6 sm:pb-5 lg:px-8 ${isOnLabelingPage ? 'bottom-8' : 'bottom-0'}`}>
         {props.adminMessages && props.adminMessages.map((activeMessage, index) => (
             <div key={activeMessage.id} className={`pointer-events-auto items-center justify-between gap-x-6 py-2.5 mt-2 border px-6 sm:rounded-xl sm:py-3 sm:pr-3.5 sm:pl-4 ${activeMessage.borderColor} ${activeMessage.backgroundColor} ${activeMessage.visible ? 'flex' : 'hidden'}`}
                 style={{ maxWidth: props.maxWidth ?? 'calc(100vw - 200px)' }}>

components/KernDropdown.tsx

@@ -4,11 +4,11 @@ import { KernDropdownProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
 import { SELECT_ALL, checkDropdownProps, getActiveNegateGroupColor, getDropdownDisplayText, prepareDropdownOptionsToArray, reduceColorProperty, setOptionsWithSearchBar } from '../helpers/dropdown-helper';
 import { Tooltip } from '@nextui-org/react';
-import { IconChevronDown, IconDotsVertical, IconExternalLink, IconLoader } from '@tabler/icons-react';
+import { IconChevronDown, IconDotsVertical, IconExternalLink } from '@tabler/icons-react';
 import { IconTrashXFilled } from '@tabler/icons-react';
 import useOnClickOutside from '../hooks/useHooks/useOnClickOutside';
-import * as TablerIcons from '@tabler/icons-react';
 import { useDefaults } from '../hooks/useDefaults';
+import SVGIcon from './SVGIcon';
 
 const DEFAULTS = { fontSizeClass: 'text-xs' };
 
@@ -18,7 +18,7 @@ export default function KernDropdown(props: KernDropdownProps) {
     const [dropdownCaptions, setDropdownCaptions] = useState<any[]>([]);
     const [disabledOptions, setDisabledOptions] = useState<boolean[]>([]);
     const [backgroundColors, setBackgroundColors] = useState<string[]>([]);
-    const [searchText, setSearchText] = useState(props.searchDefaultValue ?? '');
+    const [searchText, setSearchText] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [selectedCheckboxes, setSelectedCheckboxes] = useState<any[]>([]);
     const [position, setPosition] = useState(null);
@@ -38,6 +38,10 @@ export default function KernDropdown(props: KernDropdownProps) {
         props.onSearchChange(searchText)
     }, [props.onSearchChange, searchText]);
 
+    useEffect(() => {
+        setSearchText(props.searchDefaultValue ?? '');
+    }, [props.searchDefaultValue]);
+
     useEffect(() => {
         const prepareOptions = prepareDropdownOptionsToArray(props.options, props.hasSearchBar, props.valuePropertyPath);
         if (props.hasSearchBar) {
@@ -279,18 +283,3 @@ function HoverBox(props: { position: any, hoverBox: any }) {
         </div>}
     </>)
 }
-
-function SVGIcon({ icon, size, strokeWidth, useFillForIcons }) {
-    const Icon = TablerIcons[icon];
-    if (Icon) {
-        return (
-            <Icon
-                size={size}
-                strokeWidth={strokeWidth}
-                className={`${useFillForIcons ? 'fill-gray-800' : ''}`}
-            />
-        )
-    } else {
-        return <IconLoader size={size} strokeWidth={strokeWidth} />
-    }
-}

components/SVGIcon.tsx

@@ -0,0 +1,43 @@
+import { IconBolt, IconChevronDown, IconCode, IconDotsVertical, IconExternalLink, IconFileInfo, IconFilePencil, IconLoader, IconPlayerPlayFilled, IconSquare, IconSquareCheck, IconTrash } from '@tabler/icons-react';
+
+export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
+    'IconLoader', 'IconFilePencil', 'IconFileInfo'
+]
+
+type SVGIconProps = {
+    icon: string,
+    size?: number,
+    strokeWidth?: number,
+    useFillForIcons?: boolean
+}
+
+export default function SVGIcon(props: SVGIconProps) {
+    switch (props.icon) {
+        case 'IconCode':
+            return <IconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconBolt':
+            return <IconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconSquareCheck':
+            return <IconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconSquare':
+            return <IconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconPlayerPlayFilled':
+            return <IconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconTrash':
+            return <IconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconExternalLink':
+            return <IconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconChevronDown':
+            return <IconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconDotsVertical':
+            return <IconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconLoader':
+            return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconFilePencil':
+            return <IconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        case 'IconFileInfo':
+            return <IconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        default: return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+    }
+
+}

helpers/dropdown-helper.ts

@@ -1,3 +1,4 @@
+import { SUPPORTED_ICONS } from "../components/SVGIcon";
 import { KernDropdownProps } from "../types/dropdown";
 
 export const SELECT_ALL = 'Select all';
@@ -67,8 +68,12 @@ export function checkDropdownProps(props: KernDropdownProps) {
         throw new Error('Dropdown: linkList should be used with optionsHaveLink');
     } else if (props.hoverBoxList && !props.optionsHaveHoverBox) {
         throw new Error('Dropdown: hoverBoxList should be used with optionsHaveHoverBox');
-    } else if (props.iconsArray && (props.iconsArray.length != props.options.length)) {
-        throw new Error('Dropdown: iconsArray length must be equal to options length');
+    } else if (props.iconsArray) {
+        if (props.iconsArray.length != props.options.length) {
+            throw new Error('Dropdown: iconsArray length must be equal to options length');
+        } else if (props.iconsArray.some((icon: string) => !SUPPORTED_ICONS.includes(icon))) {
+            throw new Error('Dropdown: icon not yet supported');
+        }
     } else if (props.useFillForIcons && (props.useFillForIcons.length != props.options.length)) {
         throw new Error('Dropdown: useFillForIcons length must be equal to options length');
     }
@@ -135,4 +140,4 @@ export function getActiveNegateGroupColor(group: any) {
     }
     return '#4e46e5';
 
-}
+}

hooks/web-socket/constants.ts

@@ -91,7 +91,7 @@ export const WHITELIST_LOOKUP_REFINERY = {
         [CurrentPageSubKey.NONE]: ['labeling_task_updated', 'labeling_task_created', 'label_created', 'label_deleted', 'labeling_task_deleted', 'information_source_deleted', 'information_source_updated', 'model_callback_update_statistics', 'embedding_deleted', 'embedding', 'payload_finished', 'payload_failed', 'payload_created', 'payload_update_statistics']
     },
     [CurrentPage.HEURISTICS]: {
-        [CurrentPageSubKey.NONE]: ['labeling_task_updated', 'labeling_task_created', 'labeling_task_deleted', 'information_source_created', 'information_source_updated', 'information_source_deleted', 'payload_finished', 'payload_failed', 'payload_created', 'payload_update_statistics', 'embedding_deleted', 'weak_supervision_started', 'weak_supervision_finished'],
+        [CurrentPageSubKey.NONE]: ['labeling_task_updated', 'labeling_task_created', 'labeling_task_deleted', 'information_source_created', 'information_source_updated', 'information_source_deleted', 'payload_finished', 'payload_failed', 'payload_created', 'payload_update_statistics', 'embedding_deleted', 'weak_supervision_started', 'weak_supervision_finished', 'tokenization'],
 
     },
     [CurrentPage.EDIT_RECORDS]: {