Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/clin 2989 #539

Merged
merged 3 commits into from
Oct 15, 2024
Merged

Feat/clin 2989 #539

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b7d30e
feat: CLIN-2989 Filter flag dropdown and querybuilder not includes ta…
claudia1296 Oct 11, 2024
ddc4959
feat: CLIN-2989 fix removeIgnoreFieldFromQueryContent
claudia1296 Oct 11, 2024
42e2fd9
feat: CLIN-2989 refactor
claudia1296 Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/ui/Release.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
### 10.10.7 2024-10-11
- feat: CLIN-2989 Filter flag dropdown and querybuilder not includes tablefitler

### 10.10.6 2024-10-02
- fix: CLIN-2673 Allow SelectRange filtering on 0 value

Expand Down
4 changes: 2 additions & 2 deletions packages/ui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ferlab/ui",
"version": "10.10.6",
"version": "10.10.7",
"description": "Core components for scientific research data portals",
"publishConfig": {
"access": "public"
Expand Down
38 changes: 24 additions & 14 deletions packages/ui/src/components/Flag/FlagFilter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,44 @@ import styles from './index.module.css';
export type TFlagFilter = {
dictionary?: IFlagDictionary | Record<string, never>;
confirm?: (param?: FilterConfirmProps) => void;
selectedKeys?: React.Key[];
setSelectedKeys?: (selectedKeys: React.Key[]) => void;
selectedKeys: React.Key[];
setSelectedKeys: (selectedKeys: React.Key[]) => void;
selectedFilter?: string[];
isClear: boolean;
};

const FlagFilter = ({ confirm, dictionary, isClear, selectedKeys, setSelectedKeys }: TFlagFilter): ReactElement => {
const [selectedOption, setSelectedOption] = useState<React.Key[]>(selectedKeys ? selectedKeys : []);
const FlagFilter = ({
confirm,
dictionary,
isClear,
selectedFilter,
selectedKeys,
setSelectedKeys,
}: TFlagFilter): ReactElement => {
const [selectedOption, setSelectedOption] = useState<React.Key[]>(selectedFilter ? selectedFilter : []);
useEffect(() => {
setSelectedOption(selectedFilter ? selectedFilter : []);
}, [selectedFilter]);

useEffect(() => {
if (selectedKeys && setSelectedKeys) {
setSelectedKeys(selectedOption);
}
}, [selectedOption]);

useEffect(() => {
if (isClear) {
setSelectedOption([]);
setSelectedKeys && setSelectedKeys([]);
confirm && confirm();
}
}, [isClear]);

const handleSelect = (value: string) => {
if (selectedKeys && setSelectedKeys) {
selectedKeys.includes(value)
? setSelectedKeys(selectedKeys.filter((item: React.Key) => item !== value))
: setSelectedKeys([value, ...selectedKeys]);
if (selectedOption?.includes(value)) {
setSelectedOption(selectedOption.filter((item: React.Key) => item !== value));
} else {
setSelectedOption([value, ...selectedOption]);
}
};

return (
<>
<div className={styles.flagContainer}>
Expand Down Expand Up @@ -109,16 +117,18 @@ const FlagFilter = ({ confirm, dictionary, isClear, selectedKeys, setSelectedKey
<StackLayout className={styles.filterFooter} horizontal>
<Button
className={styles.resetButton}
disabled={selectedOption.length === 0 ? true : false}
onClick={() => setSelectedOption([])}
disabled={selectedOption?.length === 0 ? true : false}
emmanuelnau marked this conversation as resolved.
Show resolved Hide resolved
onClick={() => {
setSelectedOption([]);
}}
size="small"
type="link"
>
{dictionary?.filter?.actions?.reset || 'Reset'}
</Button>
<Button
onClick={() => {
confirm;
confirm && confirm();
}}
size="small"
type="primary"
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/ProTable/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ const TableHeader = ({
<Button
className={styles.clearFilterLink}
icon={<CloseOutlined />}
onClick={clearFilter}
emmanuelnau marked this conversation as resolved.
Show resolved Hide resolved
onClick={() => {
clearFilter();
}}
size="small"
type="link"
>
Expand Down
55 changes: 33 additions & 22 deletions packages/ui/src/components/QueryBuilder/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from '../../data/sqon/utils';
import ConditionalWrapper from '../utils/ConditionalWrapper';

import { isQueryStateEqual } from './utils/helper';
import { isQueryStateEqual, removeIgnoreFieldFromQueryContent } from './utils/helper';
import useQueryBuilderState, { setQueryBuilderState } from './utils/useQueryBuilderState';
import {
defaultCustomPillConfig,
Expand Down Expand Up @@ -61,6 +61,7 @@ export interface IQueryBuilderProps {
fetchQueryCount: IFetchQueryCount;
getResolvedQueryForCount: IGetResolvedQueryForCount;
remoteComponentMapping?: (props: IRemoteComponent) => void;
filterQueryToIgnore?: string[];
}

const QueryBuilder = ({
Expand All @@ -73,6 +74,7 @@ const QueryBuilder = ({
enableSingleQuery = false,
facetFilterConfig = defaultFacetFilterConfig,
fetchQueryCount,
filterQueryToIgnore,
getResolvedQueryForCount,
headerConfig = defaultHeaderConfig,
IconTotal = null,
Expand All @@ -82,32 +84,41 @@ const QueryBuilder = ({
remoteComponentMapping,
total = 0,
}: IQueryBuilderProps): JSX.Element => {
const removeIgnoreFieldFromQueryList = (sqon: ISyntheticSqon[]) => {
const queries = cloneDeep(sqon);
const newQuery: ISyntheticSqon[] = [];
queries.map((q) => {
newQuery.push(removeIgnoreFieldFromQueryContent(q, filterQueryToIgnore));
});
return newQuery;
};
const [selectedSavedFilter, setSelectedSavedFilter] = useState(headerConfig?.selectedSavedFilter || null);
const { state: queryBuilderState } = useQueryBuilderState(id);
const [queriesState, setQueriesState] = useState<IQueriesState>({
activeId: queryBuilderState?.active || v4(),
queries: queryBuilderState?.state || [],
});
const queryStateQueriesWithoutFilter = removeIgnoreFieldFromQueryList(queriesState.queries);
const [showLabels, setShowLabels] = useState(initialShowLabelState);
const [selectedQueryIndices, setSelectedQueryIndices] = useState<number[]>([]);
const emptyQueries = queriesState.queries.filter((sqon) => isEmptySqon(sqon));
const noQueries = queriesState.queries.length === emptyQueries.length;
const queryCount = queriesState.queries.length - emptyQueries.length;
const emptyQueries = queryStateQueriesWithoutFilter.filter((sqon) => isEmptySqon(sqon));
const noQueries = queryStateQueriesWithoutFilter.length === emptyQueries.length;
const queryCount = queryStateQueriesWithoutFilter.length - emptyQueries.length;
const hasEmptyQuery = emptyQueries.length >= 1;
const getQueryIndexById = (id: string) => queriesState.queries.findIndex((obj) => obj.id === id);
const getQueryIndexById = (id: string) => queryStateQueriesWithoutFilter.findIndex((obj) => obj.id === id);
const canCombine =
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je sais pas si queryStateQueriesWithoutFilter est un gros tableau, mais c'est dommage de le parcourir 2 fois pour setter emptyQueries et canCombine. Je pense qu'il est possible de le parcourir une seule fois et setter les deux ;)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je pense même qu'il est possible de profiter de son iteration pour créé le query bar à la fin et éviter le map ^^

queriesState.queries.filter((sqon) => isNotEmptySqon(sqon)).length >= 2 && selectedQueryIndices.length >= 2;
queryStateQueriesWithoutFilter.filter((sqon) => isNotEmptySqon(sqon)).length >= 2 &&
selectedQueryIndices.length >= 2;
const currentActiveSqonIndex = getQueryIndexById(queriesState.activeId);
const selectedSyntheticSqon = queriesState.queries[currentActiveSqonIndex];
const selectedSyntheticSqon = queryStateQueriesWithoutFilter[currentActiveSqonIndex];
const getColorForReference = (refIndex: number) => referenceColors[refIndex % referenceColors.length];

const updateQueryById = (id: string, newQuery: ISyntheticSqon) => {
if (!id) return;
if (isEmpty(newQuery.content)) {
deleteQueryAndSetNext(id);
} else {
const currentQueryIndex = getQueryIndexById(id);
const updatedQueries = cloneDeep(queriesState.queries);
const updatedQueries = cloneDeep(queryStateQueriesWithoutFilter);
updatedQueries[currentQueryIndex] = {
...newQuery,
content: newQuery.content,
Expand Down Expand Up @@ -144,11 +155,11 @@ const QueryBuilder = ({
};

const deleteQueryAndSetNext = (id: string) => {
if (queriesState.queries.length === 1) {
if (queryStateQueriesWithoutFilter.length === 1) {
resetQueries(id);
} else {
const currentQueryIndex = getQueryIndexById(id);
const updatedQueries = cleanUpQueries(removeSqonAtIndex(currentQueryIndex, queriesState.queries));
const updatedQueries = cleanUpQueries(removeSqonAtIndex(currentQueryIndex, queryStateQueriesWithoutFilter));

if (updatedQueries.length) {
const nextSelectedIndex = findNextSelectedQuery(updatedQueries, currentQueryIndex);
Expand Down Expand Up @@ -178,7 +189,7 @@ const QueryBuilder = ({
const newQuery = { content: content, id: id, op: op };
setQueriesState({
activeId: id,
queries: cleanUpQueries(cloneDeep([...queriesState.queries, newQuery])),
queries: cleanUpQueries(cloneDeep([...queryStateQueriesWithoutFilter, newQuery])),
});
};

Expand Down Expand Up @@ -225,7 +236,7 @@ const QueryBuilder = ({

useEffect(() => {
if (
isEmpty(queriesState.queries) &&
isEmpty(queryStateQueriesWithoutFilter) &&
isEmptySqon(currentQuery) &&
total === 0 &&
!headerConfig.savedFilters?.length
Expand All @@ -237,7 +248,7 @@ const QueryBuilder = ({
useEffect(() => {
if (isEmptySqon(currentQuery) && total === 0) return;

if (queriesState.queries.length === 0) {
if (queryStateQueriesWithoutFilter.length === 0) {
setQueriesState({
...queriesState,
queries: [
Expand All @@ -249,13 +260,13 @@ const QueryBuilder = ({
],
});
} else {
const index = queriesState.queries.findIndex((obj) => obj.id == queriesState.activeId);
const current = queriesState.queries[index];
const index = queryStateQueriesWithoutFilter.findIndex((obj) => obj.id == queriesState.activeId);
const current = queryStateQueriesWithoutFilter[index];

if (current.content && current.content.length > 0 && isEmpty(currentQuery)) {
deleteQueryAndSetNext(queriesState.activeId);
} else {
const tmpQuery = queriesState.queries.map((obj) => {
const tmpQuery = queryStateQueriesWithoutFilter.map((obj) => {
// Ensure there is always a op and content
if (obj.id === queriesState.activeId) {
return {
Expand Down Expand Up @@ -295,7 +306,7 @@ const QueryBuilder = ({
if (!isQueryStateEqual(queryBuilderState, queriesState)) {
setQueryBuilderState(id, {
active: queriesState.activeId,
state: queriesState.queries,
state: queryStateQueriesWithoutFilter,
});
}
}
Expand Down Expand Up @@ -335,7 +346,7 @@ const QueryBuilder = ({
>
<div className={`${styles.queryBuilderContainer} ${className}`}>
<div className={styles.queryBars}>
{queriesState.queries.map((sqon, i) => (
{queryStateQueriesWithoutFilter.map((sqon, i) => (
<QueryBar
Icon={IconTotal}
actionDisabled={isEmptySqon(sqon)}
Expand All @@ -358,7 +369,7 @@ const QueryBuilder = ({
}));
}}
onCombineChange={(id, combinator) => {
const updatedQueries = cloneDeep(queriesState.queries);
const updatedQueries = cloneDeep(queryStateQueriesWithoutFilter);
const currentQueryIndex = getQueryIndexById(id);
const currentQuery = updatedQueries[currentQueryIndex];
const newQuery = changeCombineOperator(combinator, currentQuery);
Expand Down Expand Up @@ -399,9 +410,9 @@ const QueryBuilder = ({
query={sqon}
remoteComponentMapping={remoteComponentMapping}
selectionDisabled={
queriesState.queries.length === 1 ||
queryStateQueriesWithoutFilter.length === 1 ||
!enableCombine ||
queriesState.queries[i].content.length === 0
queryStateQueriesWithoutFilter[i].content.length === 0
}
updateQueryById={updateQueryById}
/>
Expand Down
29 changes: 28 additions & 1 deletion packages/ui/src/components/QueryBuilder/utils/helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { cloneDeep, isEqual } from 'lodash';

import { ISyntheticSqon } from '../../../data/sqon/types';
import { ISyntheticSqon, IValueContent, IValueFilter } from '../../../data/sqon/types';
import { IQueriesState, IQueryBuilderState } from '../types';

const removeTotal = (sqonList: ISyntheticSqon[]) =>
Expand All @@ -21,3 +21,30 @@ export const isQueryStateEqual = (queryBuilderState: IQueryBuilderState, queries

return isEqual(cleanedQueryBuilderState, cleanedQueriesState);
};

export const removeIgnoreFieldFromQueryContent = (
query: ISyntheticSqon,
filterQueryToIgnore?: string[],
): ISyntheticSqon => {
const queryToRemove = query.content.filter((c) => {
let toRemove = false;
if (((c as IValueFilter).content as unknown as IValueContent[]).length !== 0) {
if (!filterQueryToIgnore?.includes(((c as IValueFilter).content as IValueContent).field)) {
toRemove = true;
}
if (Array.isArray((c as IValueFilter).content)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ici le toRemove = false est utile que si toRemove = true non ?
Du coup je pense qu'il peut être mis dans la condition

const { field } = ((c as IValueFilter).content as unknown as IValueFilter[])[0]
.content as IValueContent;
if (filterQueryToIgnore?.includes(field)) {
toRemove = false;
}
}
}
return toRemove;
});
return {
content: queryToRemove,
id: query.id,
op: query.op,
};
};
2 changes: 1 addition & 1 deletion packages/ui/src/components/QueryBuilder/utils/useQueryBuilderState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const updateActiveQueryField = ({
queryBuilderId,
});

const updateQuery = ({ query, queryBuilderId }: { queryBuilderId: string; query: ISyntheticSqon }) => {
export const updateQuery = ({ query, queryBuilderId }: { queryBuilderId: string; query: ISyntheticSqon }) => {
const qbState = getQueryBuilderState(queryBuilderId);
const queryToUpdate = qbState?.state?.find(({ id }) => id === query.id);
if (queryToUpdate) {
Expand Down
Loading