-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add RankingRules & StopWords components.
add moveable property into ArrayInput component. fix config edit type switch tabs height.
- Loading branch information
Showing
5 changed files
with
218 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { useMutation, useQuery } from '@tanstack/react-query'; | ||
| import clsx from 'clsx'; | ||
| import { RankingRules as TRankingRules } from 'meilisearch'; | ||
| import { FC, useEffect, useMemo } from 'react'; | ||
| import { IndexSettingConfigComponentProps } from '../..'; | ||
| import { ArrayInput } from './arrayInput'; | ||
| import _ from 'lodash'; | ||
|
|
||
| export const RankingRules: FC<IndexSettingConfigComponentProps> = ({ client, className, host, toggleLoading }) => { | ||
| const query = useQuery({ | ||
| queryKey: ['getRankingRules', host, client.uid], | ||
| refetchInterval: 4500, | ||
| async queryFn(ctx) { | ||
| return await client.getRankingRules(); | ||
| }, | ||
| }); | ||
|
|
||
| const mutation = useMutation({ | ||
| mutationKey: ['updateRankingRules', host, client.uid], | ||
| async mutationFn(variables: TRankingRules) { | ||
| console.debug('🚀 ~ file: rankingRules.tsx:19 ~ mutationFn ~ variables:', variables); | ||
| if (_.isEmpty(variables)) { | ||
| // empty to reset | ||
| return await client.resetRankingRules(); | ||
| } | ||
| return await client.updateRankingRules(variables); | ||
| }, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| const isLoading = query.isLoading || query.isFetching || mutation.isLoading; | ||
| toggleLoading(isLoading); | ||
| }, [mutation.isLoading, query.isFetching, query.isLoading, toggleLoading]); | ||
|
|
||
| return useMemo( | ||
| () => ( | ||
| <div className={clsx(className)}> | ||
| <h2 className="font-semibold">Ranking Rules</h2> | ||
| <span className="text-sm flex gap-2"> | ||
| <p> | ||
| Ranking rules are built-in rules that rank search results according to certain criteria. They are applied in | ||
| the same order in which they appear in the rankingRules array. | ||
| </p> | ||
| <a | ||
| className="link info text-info-800" | ||
| href="https://docs.meilisearch.com/learn/core_concepts/relevancy.html" | ||
| target={'_blank'} | ||
| rel="noreferrer" | ||
| > | ||
| Learn more | ||
| </a> | ||
| </span> | ||
| <ArrayInput | ||
| className="py-2" | ||
| defaultValue={query.data || []} | ||
| onMutation={(value) => { | ||
| mutation.mutate(value); | ||
| }} | ||
| moveable | ||
| /> | ||
| </div> | ||
| ), | ||
| [className, mutation, query.data] | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { useMutation, useQuery } from '@tanstack/react-query'; | ||
| import clsx from 'clsx'; | ||
| import { StopWords as TStopWords } from 'meilisearch'; | ||
| import { FC, useEffect, useMemo } from 'react'; | ||
| import { IndexSettingConfigComponentProps } from '../..'; | ||
| import { ArrayInput } from './arrayInput'; | ||
| import _ from 'lodash'; | ||
| import { IconAlertTriangleFilled, IconInfoCircleFilled } from '@tabler/icons-react'; | ||
|
|
||
| export const StopWords: FC<IndexSettingConfigComponentProps> = ({ client, className, host, toggleLoading }) => { | ||
| const query = useQuery({ | ||
| queryKey: ['getStopWords', host, client.uid], | ||
| refetchInterval: 4500, | ||
| async queryFn(ctx) { | ||
| return await client.getStopWords(); | ||
| }, | ||
| }); | ||
|
|
||
| const mutation = useMutation({ | ||
| mutationKey: ['updateStopWords', host, client.uid], | ||
| async mutationFn(variables: TStopWords) { | ||
| console.debug('🚀 ~ file: stopWords.tsx:19 ~ mutationFn ~ variables:', variables); | ||
| if (_.isEmpty(variables)) { | ||
| // empty to reset | ||
| return await client.resetStopWords(); | ||
| } | ||
| return await client.updateStopWords(variables); | ||
| }, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| const isLoading = query.isLoading || query.isFetching || mutation.isLoading; | ||
| toggleLoading(isLoading); | ||
| }, [mutation.isLoading, query.isFetching, query.isLoading, toggleLoading]); | ||
|
|
||
| return useMemo( | ||
| () => ( | ||
| <div className={clsx(className)}> | ||
| <h2 className="font-semibold">Displayed Attributes</h2> | ||
| <span className="text-sm flex gap-2"> | ||
| <p>Words added to the stopWords list are ignored in future search queries.</p> | ||
| </span> | ||
| <span className="prompt justify-start warn sm"> | ||
| <span className="icon"> | ||
| <IconAlertTriangleFilled /> | ||
| </span> | ||
| <p className="content"> | ||
| Updating stop words will re-index all documents in the index, which can take some time. We recommend | ||
| updating your index settings first and then adding documents as this reduces RAM consumption. | ||
| </p> | ||
| </span> | ||
| <span className="prompt info sm"> | ||
| <span className="icon"> | ||
| <IconInfoCircleFilled /> | ||
| </span> | ||
| <p className="content"> | ||
| Stop words are strongly related to the language used in your dataset. For example, most datasets containing | ||
| English documents will have countless occurrences of 'the' and 'of'. Italian datasets, instead, will benefit | ||
| from ignoring words like 'a', 'la', or 'il'. | ||
| </p> | ||
| </span> | ||
| <ArrayInput | ||
| className="py-2" | ||
| defaultValue={query.data || []} | ||
| onMutation={(value) => { | ||
| mutation.mutate(value); | ||
| }} | ||
| /> | ||
| </div> | ||
| ), | ||
| [className, mutation, query.data] | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export const arrayMove = <T = unknown>(arr: T[], old_index: number, new_index: number): T[] => { | ||
| while (old_index < 0) { | ||
| old_index += arr.length; | ||
| } | ||
| while (new_index < 0) { | ||
| new_index += arr.length; | ||
| } | ||
| if (new_index >= arr.length) { | ||
| var k = new_index - arr.length + 1; | ||
| while (k--) { | ||
| // @ts-ignore | ||
| arr.push(undefined); | ||
| } | ||
| } | ||
| arr.splice(new_index, 0, arr.splice(old_index, 1)[0]); | ||
| return arr; | ||
| }; |