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(advanced search): adding advanced search filter component & prereqs for it #6055

Merged
merged 6 commits into from
Sep 26, 2022
Merged

feat(advanced search): adding advanced search filter component & prereqs for it #6055

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9deb900
adding select value modal
gabe-lyons Sep 22, 2022
0a07a69
expanding gql model and adding advanced search filter component
gabe-lyons Sep 22, 2022
3a93ca2
Merge branch 'master' into gabe--addingAdvancedSearchFilterComponents
gabe-lyons Sep 26, 2022
f4a8508
remove log
gabe-lyons Sep 26, 2022
d2abf85
nits
gabe-lyons Sep 26, 2022
87951ea
responding to comments
gabe-lyons Sep 26, 2022
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
2 changes: 1 addition & 1 deletion datahub-graphql-core/src/main/resources/search.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ input FacetFilterInput {
negated: Boolean

"""
Condition for the values. How to If unset, assumed to be equality
Condition for the values. If unset, assumed to be equality
"""
condition: SearchCondition
}
Expand Down
34 changes: 3 additions & 31 deletions datahub-web-react/src/app/search/AdvancedSearchFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import styled from 'styled-components';
import { FacetFilterInput, FacetMetadata } from '../../types.generated';
import { ANTD_GRAY } from '../entity/shared/constants';
import { AdvancedSearchFilterConditionSelect } from './AdvancedSearchFilterConditionSelect';
import { SearchFilterLabel } from './SearchFilterLabel';
import { AdvancedFilterSelectValueModal } from './AdvancedFilterSelectValueModal';
import { FIELD_TO_LABEL } from './utils/constants';
import { AdvancedSearchFilterValuesSection } from './AdvancedSearchFilterValuesSection';

type Props = {
facet: FacetMetadata;
Expand Down Expand Up @@ -35,30 +35,17 @@ const FieldFilterSection = styled.span`
justify-content: space-between;
`;

const ValueFilterSection = styled.div`
:hover {
cursor: pointer;
}
border-top: 1px solid ${ANTD_GRAY[3]};
`;

const CloseSpan = styled.span`
:hover {
color: black;
}
`;

const StyledSearchFilterLabel = styled.div`
margin: 4px;
`;

const FilterFieldLabel = styled.span`
font-weight: 600;
margin-right: 2px;
`;

const TEXT_FILTERS = ['fieldPaths'];

export const AdvancedSearchFilter = ({ facet, filter, onClose, onUpdate }: Props) => {
const [isEditing, setIsEditing] = useState(false);
return (
Expand Down Expand Up @@ -86,22 +73,7 @@ export const AdvancedSearchFilter = ({ facet, filter, onClose, onUpdate }: Props
<CloseOutlined />
</CloseSpan>
</FieldFilterSection>
<ValueFilterSection>
{TEXT_FILTERS.indexOf(filter.field) === -1 &&
filter?.values?.map((value) => {
const matchedAggregation = facet?.aggregations?.find(
(aggregation) => aggregation.value === value,
);
if (!matchedAggregation) return null;

return (
<StyledSearchFilterLabel>
<SearchFilterLabel hideCount aggregation={matchedAggregation} field={value} />
</StyledSearchFilterLabel>
);
})}
{TEXT_FILTERS.indexOf(filter.field) !== -1 && filter?.values?.map((value) => <span>{value}</span>)}
</ValueFilterSection>
<AdvancedSearchFilterValuesSection filter={filter} facet={facet} />
</FilterContainer>
{isEditing && (
<AdvancedFilterSelectValueModal
Expand All @@ -114,7 +86,7 @@ export const AdvancedSearchFilter = ({ facet, filter, onClose, onUpdate }: Props
value: '',
values: values as string[],
condition: filter.condition,
negated: filter.negated || false,
negated: filter.negated,
};
onUpdate(newFilter);
}}
Expand Down
6 changes: 3 additions & 3 deletions datahub-web-react/src/app/search/AdvancedSearchFilterConditionSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import styled from 'styled-components/macro';

import { FacetFilterInput } from '../../types.generated';
import { ANTD_GRAY } from '../entity/shared/constants';
import { FIELDS_WHO_USE_CONTAINS_OPERATOR } from './utils/constants';
import { FIELDS_THAT_USE_CONTAINS_OPERATOR } from './utils/constants';

type Props = {
filter: FacetFilterInput;
Expand All @@ -27,13 +27,13 @@ const filtersOnNonCollectionFields = [
];

function getLabelsForField(field: string) {
if (FIELDS_WHO_USE_CONTAINS_OPERATOR.indexOf(field) >= 0) {
if (FIELDS_THAT_USE_CONTAINS_OPERATOR.includes(field)) {
return {
default: 'contains',
negated: 'does not contain',
};
}
if (filtersOnNonCollectionFields.indexOf(field) >= 0) {
if (filtersOnNonCollectionFields.includes(field)) {
return {
default: 'equals',
negated: 'not equal',
Expand Down
39 changes: 39 additions & 0 deletions datahub-web-react/src/app/search/AdvancedSearchFilterValuesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';
import styled from 'styled-components';

import { FacetFilterInput, FacetMetadata } from '../../types.generated';
import { ANTD_GRAY } from '../entity/shared/constants';
import { SearchFilterLabel } from './SearchFilterLabel';

type Props = {
facet: FacetMetadata;
filter: FacetFilterInput;
};

const ValueFilterSection = styled.div`
:hover {
cursor: pointer;
}
border-top: 1px solid ${ANTD_GRAY[3]};
`;

const StyledSearchFilterLabel = styled.div`
margin: 4px;
`;

export const AdvancedSearchFilterValuesSection = ({ facet, filter }: Props) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks, I think this is much more readable!

return (
<ValueFilterSection>
{filter?.values?.map((value) => {
const matchedAggregation = facet?.aggregations?.find((aggregation) => aggregation.value === value);
if (!matchedAggregation) return <span>{value}</span>;

return (
<StyledSearchFilterLabel>
<SearchFilterLabel hideCount aggregation={matchedAggregation} field={value} />
</StyledSearchFilterLabel>
);
})}
</ValueFilterSection>
);
};
2 changes: 1 addition & 1 deletion datahub-web-react/src/app/search/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const FIELD_TO_LABEL = {
origin: 'Environment',
aditya-radhakrishnan marked this conversation as resolved.
Show resolved Hide resolved
};

export const FIELDS_WHO_USE_CONTAINS_OPERATOR = ['description', 'fieldDescriptions'];
export const FIELDS_THAT_USE_CONTAINS_OPERATOR = ['description', 'fieldDescriptions'];

export const ADVANCED_SEARCH_ONLY_FILTERS = [
'fieldGlossaryTerms',
Expand Down