feat: enhance facet filtering to fetch json and update facet state (#735) (#745)

* feat: enhance facet filtering to fetch json and update facet state (#735)

* chore: update package (#735)

* wip

* wip

* wip

* wip

* wip

---------

Co-authored-by: Fran McDade <18710366+frano-m@users.noreply.github.com>

Author: frano-m

.gitignore

@@ -7,3 +7,5 @@ __pycache__/
 .DS_Store
 .idea
 .env
+
+databiosphere-findable-ui-47.0.2.tgz

package-lock.json

@@ -0,0 +1,5 @@
+export const ADORNMENT_TYPE = {
+  DEFAULT: "default",
+  SUBMITTABLE: "submittable",
+  SUBMITTING: "submitting",
+} as const;

src/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/constants.ts

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { ArrowUpwardRounded } from "@mui/icons-material";
+import { PALETTE } from "../../../../../../../../styles/common/constants/palette";
+import { LoadingIcon } from "../../../../../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
+
+export const StyledLoadingIcon = styled(LoadingIcon)`
+  && {
+    color: ${PALETTE.PRIMARY_MAIN};
+
+    .Mui-focused & {
+      color: ${PALETTE.PRIMARY_MAIN};
+    }
+  }
+`;
+
+export const StyledArrowUpwardRounded = styled(ArrowUpwardRounded)`
+  && {
+    color: ${PALETTE.INK_LIGHT};
+
+    .Mui-focused & {
+      color: ${PALETTE.INK_LIGHT};
+    }
+  }
+`;

src/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/endAdornment.styles.ts

@@ -0,0 +1,39 @@
+import { IconButton } from "@mui/material";
+import React from "react";
+import { ICON_BUTTON_PROPS } from "../../../../../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS } from "../../../../../../../../styles/common/mui/svgIcon";
+import { AiIcon } from "../../../../../../../common/CustomIcon/components/AiIcon/aiIcon";
+import { ADORNMENT_TYPE } from "./constants";
+import {
+  StyledArrowUpwardRounded,
+  StyledLoadingIcon,
+} from "./endAdornment.styles";
+import { EndAdornmentProps } from "./types";
+
+export const EndAdornment = ({
+  adornmentType,
+}: EndAdornmentProps): JSX.Element => {
+  switch (adornmentType) {
+    case ADORNMENT_TYPE.SUBMITTING:
+      return (
+        <StyledLoadingIcon
+          color={SVG_ICON_PROPS.COLOR.PRIMARY}
+          fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL}
+        />
+      );
+    case ADORNMENT_TYPE.SUBMITTABLE:
+      return (
+        <IconButton
+          color={ICON_BUTTON_PROPS.COLOR.SECONDARY}
+          edge={ICON_BUTTON_PROPS.EDGE.END}
+          size={ICON_BUTTON_PROPS.SIZE.XSMALL}
+          type="submit"
+        >
+          <StyledArrowUpwardRounded fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL} />
+        </IconButton>
+      );
+    case ADORNMENT_TYPE.DEFAULT:
+    default:
+      return <AiIcon />;
+  }
+};

src/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/endAdornment.tsx

@@ -0,0 +1,5 @@
+import { ADORNMENT_TYPE } from "./constants";
+
+export interface EndAdornmentProps {
+  adornmentType: (typeof ADORNMENT_TYPE)[keyof typeof ADORNMENT_TYPE];
+}

src/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/types.ts

@@ -0,0 +1,16 @@
+import { ADORNMENT_TYPE } from "./constants";
+
+/**
+ * Returns the end adornment type of the input i.e. "default", "submittable", "submitting".
+ * @param isDirty - Form is dirty.
+ * @param isSubmiting - Form is submitting.
+ * @returns End adornment type.
+ */
+export function getEndAdornmentType(
+  isDirty: boolean,
+  isSubmiting: boolean
+): (typeof ADORNMENT_TYPE)[keyof typeof ADORNMENT_TYPE] {
+  if (isSubmiting) return ADORNMENT_TYPE.SUBMITTING;
+  if (isDirty) return ADORNMENT_TYPE.SUBMITTABLE;
+  return ADORNMENT_TYPE.DEFAULT;
+}

src/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/utils.ts

@@ -0,0 +1,12 @@
+import { OutlinedInputProps } from "@mui/material";
+import { TEXT_FIELD_PROPS as MUI_TEXT_FIELD_PROPS } from "../../../../../../styles/common/mui/textField";
+
+export const OUTLINED_INPUT_PROPS: OutlinedInputProps = {
+  autoComplete: "off",
+  color: MUI_TEXT_FIELD_PROPS.COLOR.SECONDARY,
+  fullWidth: true,
+  id: "query-to-facets",
+  name: "query-to-facets",
+  placeholder: "Search all filters...",
+  size: MUI_TEXT_FIELD_PROPS.SIZE.SMALL,
+};

src/components/Filter/components/ai/components/FacetAssistant/constants.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { OutlinedInput } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+
+export const StyledForm = styled.form`
+  grid-column: 1 / -1;
+`;
+
+export const StyledOutlinedInput = styled(OutlinedInput)`
+  &:not(:placeholder-shown) {
+    .MuiOutlinedInput-input {
+      color: ${PALETTE.INK_MAIN};
+    }
+  }
+`;

src/components/Filter/components/ai/components/FacetAssistant/facetAssistant.styles.ts

@@ -0,0 +1,88 @@
+import React, { FormEvent, useCallback, useState } from "react";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import { ExploreActionKind } from "../../../../../../providers/exploreState";
+import { getFormValue } from "../../../../../../utils/form";
+import { EndAdornment } from "./components/EndAdornment/endAdornment";
+import { getEndAdornmentType } from "./components/EndAdornment/utils";
+import { OUTLINED_INPUT_PROPS } from "./constants";
+import { StyledForm, StyledOutlinedInput } from "./facetAssistant.styles";
+import { mapResponse } from "./utils";
+
+/**
+ * AI-powered facet assistant component.
+ * Converts a user query into facet filters (PoC implementation).
+ */
+
+export const FacetAssistant = (): JSX.Element => {
+  const { exploreDispatch } = useExploreState();
+  const [isDirty, setIsDirty] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const onSubmit = useCallback(
+    async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+      e.preventDefault();
+
+      // Get the form value.
+      const formValue = getFormValue(e, "query-to-facets");
+      if (!formValue) return;
+
+      setIsSubmitting(true);
+      setIsError(false);
+
+      try {
+        const res = await fetch(
+          "http://localhost:8000/api/v0/facets?mode=llm",
+          {
+            body: JSON.stringify({ query: formValue }),
+            headers: {
+              "Content-Type": "application/json",
+            },
+            method: "POST",
+          }
+        );
+
+        if (!res.ok) {
+          setIsError(true);
+          return;
+        }
+
+        const data = await res.json();
+
+        // Map the response data to facet filters.
+        const filters = mapResponse(data);
+
+        // Dispatch the update entity filters action.
+        exploreDispatch({
+          payload: { filters },
+          type: ExploreActionKind.UpdateEntityFilters,
+        });
+
+        // Reset the form.
+        setIsDirty(false);
+        (e.target as HTMLFormElement).reset();
+      } catch (err) {
+        console.error(err);
+        setIsError(true);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [exploreDispatch]
+  );
+
+  return (
+    <StyledForm onSubmit={onSubmit}>
+      <StyledOutlinedInput
+        {...OUTLINED_INPUT_PROPS}
+        endAdornment={
+          <EndAdornment
+            adornmentType={getEndAdornmentType(isDirty, isSubmitting)}
+          />
+        }
+        error={isError}
+        onChange={(): void => setIsDirty(true)}
+      />
+    </StyledForm>
+  );
+};