feat(ui): refactor informational popover

- Change translations to use arrays of paragraphs instead of a single paragraph.
- Change component to accept a `feature` prop to identify the feature which the popover describes.
- Add optional `wrapperProps`: passed to the wrapper element, allowing more flexibility when using the popover
- Add optional `popoverProps`: passed to the `<Popover />` component, allowing for overriding individual instances of the popover's props
- Move definitions of features and popover settings to `invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts`
  - Add some type safety to the `feature` prop
  - Edit `POPOVER_DATA` to provide `image`, `href`, `buttonLabel`, and any popover props. The popover props are applied to all instances of the popover for the given feature. Note that the component prop `popoverProps` will override settings here.
- Remove the popover's arrow. Because the popover is wrapping groups of components, sometimes the error ends up pointing to nothing, which looks kinda janky. I've just removed the arrow entirely, but feel free to add it back if you think it looks better.
- Use a `link` variant button with external link icon to better communicate that clicking the button will open a new tab.
- Default the link button label to "Learn More" (if a label is provided, that will be used instead)
- Make default position `top`, but set manually set some to `right` - namely, anything with a dropdown. This prevents the popovers from obscuring or being obscured by the dropdowns.
- Do a bit more restructuring of the Popover component itself, and how it is integrated with other components
- More ref forwarding
- Make the open delay 1s
- Set the popovers to use lazy mounting (eg do not mount until the user opens the thing)
- Update the verbiage for many popover items and add missing dynamic prompts stuff

invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx

@@ -1,124 +0,0 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  Image,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverProps,
-  PopoverTrigger,
-  Portal,
-  Text,
-} from '@chakra-ui/react';
-import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppSelector } from '../../app/store/storeHooks';
-
-const OPEN_DELAY = 1500;
-
-type Props = Omit<PopoverProps, 'children'> & {
-  details: string;
-  children: ReactNode;
-  image?: string;
-  buttonLabel?: string;
-  buttonHref?: string;
-  placement?: PopoverProps['placement'];
-};
-
-const IAIInformationalPopover = ({
-  details,
-  image,
-  buttonLabel,
-  buttonHref,
-  children,
-  placement,
-}: Props) => {
-  const shouldEnableInformationalPopovers = useAppSelector(
-    (state) => state.system.shouldEnableInformationalPopovers
-  );
-  const { t } = useTranslation();
-
-  const heading = t(`popovers.${details}.heading`);
-  const paragraph = t(`popovers.${details}.paragraph`);
-
-  if (!shouldEnableInformationalPopovers) {
-    return <>{children}</>;
-  }
-
-  return (
-    <Popover
-      placement={placement || 'top'}
-      closeOnBlur={false}
-      trigger="hover"
-      variant="informational"
-      openDelay={OPEN_DELAY}
-    >
-      <PopoverTrigger>
-        <Box w="full">{children}</Box>
-      </PopoverTrigger>
-      <Portal>
-        <PopoverContent>
-          <PopoverArrow />
-          <PopoverCloseButton />
-
-          <PopoverBody>
-            <Flex
-              sx={{
-                gap: 3,
-                flexDirection: 'column',
-                width: '100%',
-                alignItems: 'center',
-              }}
-            >
-              {image && (
-                <Image
-                  sx={{
-                    objectFit: 'contain',
-                    maxW: '60%',
-                    maxH: '60%',
-                    backgroundColor: 'white',
-                  }}
-                  src={image}
-                  alt="Optional Image"
-                />
-              )}
-              <Flex
-                sx={{
-                  gap: 3,
-                  flexDirection: 'column',
-                  width: '100%',
-                }}
-              >
-                {heading && (
-                  <>
-                    <Heading size="sm">{heading}</Heading>
-                    <Divider />
-                  </>
-                )}
-                <Text>{paragraph}</Text>
-                {buttonLabel && (
-                  <Flex justifyContent="flex-end">
-                    <Button
-                      onClick={() => window.open(buttonHref)}
-                      size="sm"
-                      variant="invokeAIOutline"
-                    >
-                      {buttonLabel}
-                    </Button>
-                  </Flex>
-                )}
-              </Flex>
-            </Flex>
-          </PopoverBody>
-        </PopoverContent>
-      </Portal>
-    </Popover>
-  );
-};
-
-export default memo(IAIInformationalPopover);

invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx

@@ -0,0 +1,155 @@
+import {
+  Box,
+  BoxProps,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  Image,
+  Popover,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverProps,
+  PopoverTrigger,
+  Portal,
+  Text,
+  forwardRef,
+} from '@chakra-ui/react';
+import { merge, omit } from 'lodash-es';
+import { PropsWithChildren, memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaExternalLinkAlt } from 'react-icons/fa';
+import { useAppSelector } from '../../../app/store/storeHooks';
+import {
+  Feature,
+  OPEN_DELAY,
+  POPOVER_DATA,
+  POPPER_MODIFIERS,
+} from './constants';
+
+type Props = PropsWithChildren & {
+  feature: Feature;
+  wrapperProps?: BoxProps;
+  popoverProps?: PopoverProps;
+};
+
+const IAIInformationalPopover = forwardRef(
+  ({ feature, children, wrapperProps, ...rest }: Props, ref) => {
+    const { t } = useTranslation();
+    const shouldEnableInformationalPopovers = useAppSelector(
+      (state) => state.system.shouldEnableInformationalPopovers
+    );
+
+    const data = useMemo(() => POPOVER_DATA[feature], [feature]);
+
+    const popoverProps = useMemo(
+      () => merge(omit(data, ['image', 'href', 'buttonLabel']), rest),
+      [data, rest]
+    );
+
+    const heading = useMemo<string | undefined>(
+      () => t(`popovers.${feature}.heading`),
+      [feature, t]
+    );
+
+    const paragraphs = useMemo<string[]>(
+      () =>
+        t(`popovers.${feature}.paragraphs`, {
+          returnObjects: true,
+        }) ?? [],
+      [feature, t]
+    );
+
+    const handleClick = useCallback(() => {
+      if (!data?.href) {
+        return;
+      }
+      window.open(data.href);
+    }, [data?.href]);
+
+    if (!shouldEnableInformationalPopovers) {
+      return (
+        <Box ref={ref} w="full" {...wrapperProps}>
+          {children}
+        </Box>
+      );
+    }
+
+    return (
+      <Popover
+        isLazy
+        closeOnBlur={false}
+        trigger="hover"
+        variant="informational"
+        openDelay={OPEN_DELAY}
+        modifiers={POPPER_MODIFIERS}
+        placement="top"
+        {...popoverProps}
+      >
+        <PopoverTrigger>
+          <Box ref={ref} w="full" {...wrapperProps}>
+            {children}
+          </Box>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent w={96}>
+            <PopoverCloseButton />
+            <PopoverBody>
+              <Flex
+                sx={{
+                  gap: 2,
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                }}
+              >
+                {heading && (
+                  <>
+                    <Heading size="sm">{heading}</Heading>
+                    <Divider />
+                  </>
+                )}
+                {data?.image && (
+                  <>
+                    <Image
+                      sx={{
+                        objectFit: 'contain',
+                        maxW: '60%',
+                        maxH: '60%',
+                        backgroundColor: 'white',
+                      }}
+                      src={data.image}
+                      alt="Optional Image"
+                    />
+                    <Divider />
+                  </>
+                )}
+                {paragraphs.map((p) => (
+                  <Text key={p}>{p}</Text>
+                ))}
+                {data?.href && (
+                  <>
+                    <Divider />
+                    <Button
+                      pt={1}
+                      onClick={handleClick}
+                      leftIcon={<FaExternalLinkAlt />}
+                      alignSelf="flex-end"
+                      variant="link"
+                    >
+                      {t('common.learnMore') ?? heading}
+                    </Button>
+                  </>
+                )}
+              </Flex>
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    );
+  }
+);
+
+IAIInformationalPopover.displayName = 'IAIInformationalPopover';
+
+export default memo(IAIInformationalPopover);

invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts

@@ -0,0 +1,98 @@
+import { PopoverProps } from '@chakra-ui/react';
+
+export type Feature =
+  | 'clipSkip'
+  | 'paramNegativeConditioning'
+  | 'paramPositiveConditioning'
+  | 'paramScheduler'
+  | 'compositingBlur'
+  | 'compositingBlurMethod'
+  | 'compositingCoherencePass'
+  | 'compositingCoherenceMode'
+  | 'compositingCoherenceSteps'
+  | 'compositingStrength'
+  | 'compositingMaskAdjustments'
+  | 'controlNetBeginEnd'
+  | 'controlNetControlMode'
+  | 'controlNetResizeMode'
+  | 'controlNet'
+  | 'controlNetWeight'
+  | 'dynamicPrompts'
+  | 'dynamicPromptsMaxPrompts'
+  | 'dynamicPromptsSeedBehaviour'
+  | 'infillMethod'
+  | 'lora'
+  | 'noiseUseCPU'
+  | 'paramCFGScale'
+  | 'paramDenoisingStrength'
+  | 'paramIterations'
+  | 'paramModel'
+  | 'paramRatio'
+  | 'paramSeed'
+  | 'paramSteps'
+  | 'paramVAE'
+  | 'paramVAEPrecision'
+  | 'scaleBeforeProcessing';
+
+export type PopoverData = PopoverProps & {
+  image?: string;
+  href?: string;
+  buttonLabel?: string;
+};
+
+export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
+  paramNegativeConditioning: {
+    placement: 'right',
+  },
+  controlNet: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000105880',
+  },
+  lora: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000159072',
+  },
+  compositingCoherenceMode: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838',
+  },
+  infillMethod: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158841',
+  },
+  scaleBeforeProcessing: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158841',
+  },
+  paramIterations: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000159073',
+  },
+  paramPositiveConditioning: {
+    href: 'https://support.invoke.ai/support/solutions/articles/151000096606-tips-on-crafting-prompts',
+    placement: 'right',
+  },
+  paramScheduler: {
+    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000159073',
+  },
+  paramModel: {
+    placement: 'right',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000096601-what-is-a-model-which-should-i-use-',
+  },
+  paramRatio: {
+    gutter: 16,
+  },
+  controlNetControlMode: {
+    placement: 'right',
+  },
+  controlNetResizeMode: {
+    placement: 'right',
+  },
+  paramVAE: {
+    placement: 'right',
+  },
+  paramVAEPrecision: {
+    placement: 'right',
+  },
+} as const;
+
+export const OPEN_DELAY = 1000; // in milliseconds
+
+export const POPPER_MODIFIERS: PopoverProps['modifiers'] = [
+  { name: 'preventOverflow', options: { padding: 10 } },
+];

invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx

@@ -44,23 +44,19 @@ const IAIMantineMultiSelect = forwardRef((props: IAIMultiSelectProps, ref) => {
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow isOpen={true}>
-      <MultiSelect
-        label={
-          label ? (
-            <FormControl ref={ref} isDisabled={disabled}>
-              <FormLabel>{label}</FormLabel>
-            </FormControl>
-          ) : undefined
-        }
-        ref={inputRef}
-        disabled={disabled}
-        onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
-        searchable={searchable}
-        maxDropdownHeight={300}
-        styles={styles}
-        {...rest}
-      />
+      <FormControl ref={ref} isDisabled={disabled}>
+        {label && <FormLabel>{label}</FormLabel>}
+        <MultiSelect
+          ref={inputRef}
+          disabled={disabled}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          searchable={searchable}
+          maxDropdownHeight={300}
+          styles={styles}
+          {...rest}
+        />
+      </FormControl>
     </Tooltip>
   );
 });

invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx

@@ -70,26 +70,23 @@ const IAIMantineSearchableSelect = forwardRef((props: IAISelectProps, ref) => {
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <Select
-        ref={inputRef}
-        label={
-          label ? (
-            <FormControl ref={ref} isDisabled={disabled}>
-              <FormLabel>{label}</FormLabel>
-            </FormControl>
-          ) : undefined
-        }
-        disabled={disabled}
-        searchValue={searchValue}
-        onSearchChange={setSearchValue}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
-        searchable={searchable}
-        maxDropdownHeight={300}
-        styles={styles}
-        {...rest}
-      />
+      <FormControl ref={ref} isDisabled={disabled}>
+        {label && <FormLabel>{label}</FormLabel>}
+        <Select
+          ref={inputRef}
+          withinPortal
+          disabled={disabled}
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          searchable={searchable}
+          maxDropdownHeight={300}
+          styles={styles}
+          {...rest}
+        />
+      </FormControl>
     </Tooltip>
   );
 });

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -22,19 +22,10 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <Select
-        label={
-          label ? (
-            <FormControl ref={ref} isRequired={required} isDisabled={disabled}>
-              <FormLabel>{label}</FormLabel>
-            </FormControl>
-          ) : undefined
-        }
-        disabled={disabled}
-        ref={inputRef}
-        styles={styles}
-        {...rest}
-      />
+      <FormControl ref={ref} isRequired={required} isDisabled={disabled}>
+        <FormLabel>{label}</FormLabel>
+        <Select disabled={disabled} ref={inputRef} styles={styles} {...rest} />
+      </FormControl>
     </Tooltip>
   );
 });