Skip to content

Commit

Permalink
[discover] optimize rendering language options (opensearch-project#8685
Browse files Browse the repository at this point in the history
…) (opensearch-project#8688)

* memoization plus not setting the user query language



* clean up commented code



* Changeset file for PR opensearch-project#8685 created/updated

* Changeset file for PR opensearch-project#8685 deleted

---------



(cherry picked from commit 85e0767)

Signed-off-by: Kawika Avilla <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
  • Loading branch information
3 people authored Oct 23, 2024
1 parent 447d787 commit 3cbb65d
Showing 1 changed file with 51 additions and 42 deletions.
93 changes: 51 additions & 42 deletions src/plugins/data/public/ui/query_editor/language_selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
EuiSmallButtonEmpty,
PopoverAnchorPosition,
} from '@elastic/eui';
import React, { useEffect, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Query } from '../..';
import { LanguageConfig } from '../../query';
import { getQueryService } from '../../services';
Expand All @@ -36,12 +36,14 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
const queryString = getQueryService().queryString;
const languageService = queryString.getLanguageService();

const datasetSupportedLanguages = props.query.dataset
? queryString
.getDatasetService()
.getType(props.query.dataset.type)
?.supportedLanguages(props.query.dataset)
: undefined;
const datasetSupportedLanguages = useMemo(() => {
const dataset = props.query.dataset;
if (!dataset) {
return undefined;
}
const datasetType = queryString.getDatasetService().getType(dataset.type);
return datasetType?.supportedLanguages(dataset);
}, [props.query.dataset, queryString]);

useEffect(() => {
const subscription = queryString.getUpdates$().subscribe((query: Query) => {
Expand All @@ -59,51 +61,58 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
setPopover(!isPopoverOpen);
};

const languageOptions: Array<{ label: string; value: string }> = [];

languageService.getLanguages().forEach((language) => {
if (
(language && props.appName && !language.editorSupportedAppNames?.includes(props.appName)) ||
languageService.getUserQueryLanguageBlocklist().includes(language?.id) ||
(datasetSupportedLanguages && !datasetSupportedLanguages.includes(language.id))
)
return;
languageOptions.unshift(mapExternalLanguageToOptions(language));
});

const selectedLanguage = {
label:
(languageOptions.find(
(option) => (option.value as string).toLowerCase() === currentLanguage.toLowerCase()
)?.label as string) ?? languageOptions[0].label,
};
const languageOptions = useMemo(() => {
const options: Array<{ label: string; value: string }> = [];

const handleLanguageChange = (newLanguage: string) => {
setCurrentLanguage(newLanguage);
props.onSelectLanguage(newLanguage);
};
languageService.getLanguages().forEach((language) => {
const isSupported =
!datasetSupportedLanguages || datasetSupportedLanguages.includes(language.id);
const isBlocklisted = languageService.getUserQueryLanguageBlocklist().includes(language?.id);
const isAppSupported =
!props.appName || language?.editorSupportedAppNames?.includes(props.appName);

if (!isSupported || isBlocklisted || !isAppSupported) return;

options.unshift(mapExternalLanguageToOptions(language));
});

languageService.setUserQueryLanguage(currentLanguage);
return options.sort((a, b) => a.label.localeCompare(b.label));
}, [languageService, props.appName, datasetSupportedLanguages]);

const selectedLanguage = useMemo(
() => ({
label:
languageOptions.find(
(option) => option.value.toLowerCase() === currentLanguage.toLowerCase()
)?.label ?? languageOptions[0]?.label,
}),
[languageOptions, currentLanguage]
);

const handleLanguageChange = useCallback(
(newLanguage: string) => {
setCurrentLanguage(newLanguage);
props.onSelectLanguage(newLanguage);
languageService.setUserQueryLanguage(newLanguage);
setPopover(false);
},
[props, languageService]
);

const languageOptionsMenu = languageOptions
.sort((a, b) => {
return a.label.localeCompare(b.label);
})
.map((language) => {
return (
const languageOptionsMenu = useMemo(
() =>
languageOptions.map((language) => (
<EuiContextMenuItem
key={language.label}
className="languageSelector__menuItem"
icon={language.label === selectedLanguage.label ? 'check' : 'empty'}
onClick={() => {
setPopover(false);
handleLanguageChange(language.value);
}}
onClick={() => handleLanguageChange(language.value)}
>
{language.label}
</EuiContextMenuItem>
);
});
)),
[languageOptions, selectedLanguage.label, handleLanguageChange]
);

return (
<EuiPopover
Expand Down

0 comments on commit 3cbb65d

Please sign in to comment.