Skip to content

Commit

Permalink
Configurable facets (#1465)
Browse files Browse the repository at this point in the history 
* Full width search bar (#1426)

* First steps

* Beautify

* Use shared search bar component

* Remove search bar from facets

* Some clean ups

* Some clean ups

* Some clean ups

* Code formatting

* Separating full text search from shared search bar

* Add search and clear buttons; some clean ups

* Fix lint issue

* Fix lint issue

* Fix lint issue

* Explicit action button search facets (#1457)

* Change label

* Add button

* Add button

* Full width search bar (#1426)

* First steps

* Beautify

* Use shared search bar component

* Remove search bar from facets

* Some clean ups

* Some clean ups

* Some clean ups

* Code formatting

* Fix layout

* Add functionality to the button

* Fix lint issue, finally?!

* Fix lint issue, finally!

* Extract PID filter, WIP

* Fix css; some cleanups

* Further progress

* Remove search icon

* Add edit mode

* Add/remove filter

* Extract ClearableInputComponent

* Add location-filter.component.ts

* Add group-filter.component.ts

* Add type-filter.component.ts

* Add keyword-filter.component.ts

* Add date-range-filter.component.ts

* Add text-filter.component.ts

* Show addable entities by default

* Show default filters

* Remove edit mode; some cleanups

* Cleanup

* Fix tests

* build(deps-dev): bump the eslint group with 2 updates

Bumps the eslint group with 2 updates: [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) and [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser).


Updates `@typescript-eslint/eslint-plugin` from 7.7.0 to 7.7.1
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v7.7.1/packages/eslint-plugin)

Updates `@typescript-eslint/parser` from 7.7.0 to 7.7.1
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v7.7.1/packages/parser)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: eslint
- dependency-name: "@typescript-eslint/parser"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: eslint
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps-dev): bump cypress from 13.7.3 to 13.8.0

Bumps [cypress](https://github.com/cypress-io/cypress) from 13.7.3 to 13.8.0.
- [Release notes](https://github.com/cypress-io/cypress/releases)
- [Changelog](https://github.com/cypress-io/cypress/blob/develop/CHANGELOG.md)
- [Commits](cypress-io/cypress@v13.7.3...v13.8.0)

---
updated-dependencies:
- dependency-name: cypress
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

* feat: Updated logo configuration (#1459)

* added configuration for site logos and updated default images

* fixed linting, added documentation and named images correctly

* Fix tests

* Introduce dialog

* Click Search button after typing search query

* Refactor full text search

* Apply prettier

* Convert onChange to reactive stream

* Post merge

* Fix elastic search test

* Implementing Filter Settings dialog concept

* Implementing Filter Settings dialog concept

* Resolve post merge issues

* Prettify

* Prettify

* Fix undefined input

* Fix tests compilation

* Resolve TODO: improve readability

* Fix tests

* Clean up unused imports

* Prettify scientific conditions

* Prettify scientific conditions

* Prettify scientific conditions

* Resolve #1466

* Remove redundant behavior

* fix tests

* fix tests

* Fix tests

* Add tests

* Progress: move filters into a dedicated module; store filters state in User state

* Progress: move filters into a dedicated module; store filters state in User state

* Fix eslint

* fix tests

* make sonar happy(ier)

* Replace Filter by... with Filters and Conditions

* Extract filter html templates and css into separate files

* Fix tests

* Fix tests

* Do not call fixture.destroy manually

* Fix tests

* Remove inheritance as it makes Angular testing unhappy

* Revert "Do not call fixture.destroy manually"

This reverts commit fb201ff.

* Add fixture.destroy

* Replace static label with external function call

* Remove trivial tests to avoid code duplications in case inheritance has to be removed

* Fix eslint

* Fix tests

* Avoid @ViewChild

* Try to fix test as per [SO](https://stackoverflow.com/a/66695890)

* Try to fix test as per [SO](https://stackoverflow.com/a/66695890)

* Revert "Remove trivial tests to avoid code duplications in case inheritance has to be removed"

This reverts commit 04666e4.

* Try to fix test as per [SO](https://stackoverflow.com/a/66695890)

* Revert "Remove inheritance as it makes Angular testing unhappy"

This reverts commit d75db60

* Revert "Remove inheritance as it makes Angular testing unhappy"

This reverts commit d75db60

* Change Labels

* Separate Filters and Conditions sections in the filter settings dialog

* Remove text filter

* Auto enable new condition

* Allow condition editing in the filter settings dialog

* Fix clear function

* Fix tests

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Max Novelli <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
@Ingvord @nitrosx @dependabot
3 people authored Aug 21, 2024
1 parent 5180f91 commit 267cab9
Show file tree
Hide file tree
Showing 70 changed files with 2,898 additions and 944 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,9 @@ jobs:
- name: Run docker-compose
run: |
cp CI/ESS/e2e/docker-compose.e2e.yaml docker-compose.yaml
docker-compose pull
docker-compose build --no-cache
docker-compose up -d
docker compose pull
docker compose build --no-cache
docker compose up -d
- name: Wait for Backend
run: |
Expand All @@ -136,13 +136,13 @@ jobs:
- name: docker logs
if: ${{ failure() }}
run: |
docker-compose logs es01
docker-compose logs backend
docker compose logs es01
docker compose logs backend
- name: Stop docker-compose
if: ${{ !cancelled() }}
run: |
docker-compose down -v
docker compose down -v
- uses: actions/upload-artifact@v4
if: ${{ failure() }}
Expand Down
10 changes: 5 additions & 5 deletions src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@
<mat-icon>search</mat-icon>
Search
</button>
<button
mat-raised-button
<button
mat-raised-button
color="primary"
class="full-text-clear-button"
data-cy="search-clear-button"
data-cy="search-clear-button"
(click)="onClear()"
>
<mat-icon>clear</mat-icon>
Clear Text
<mat-icon>undo</mat-icon>
Reset Search
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/datasets/dashboard/full-text-search/full-text-search-bar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export class FullTextSearchBarComponent implements OnInit, OnDestroy {
onClear(): void {
this.searchTerm = "";
this.searchTermSubject.next(undefined);
//this.searchClickSubject.next();
this.searchClickSubject.next();
}

ngOnDestroy(): void {
Expand Down
215 changes: 25 additions & 190 deletions src/app/datasets/datasets-filter/datasets-filter.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,218 +1,53 @@
<mat-card>
<mat-card-header class="section-container">
<mat-card-title>Filter by...</mat-card-title>
<mat-card-title>Filters and Conditions</mat-card-title>
</mat-card-header>

<mat-card-content>
<app-search-bar
#pidBar
[prefilledValue]="pidTerms$ | async"
[placeholder]="'PID'"
[clear]="clearSearchBar"
(search)="pidSearchChanged($event)"
(searchBarFocus)="pidSearchChanged($event)"
>
</app-search-bar>
<ng-container *ngIf="filterConfigs$ | async as filterConfigs">
<ng-container *ngFor="let filterConfig of filterConfigs">
<ng-container *ngIf="filterConfig.visible">
<ng-container *ngComponentOutlet="resolveComponentType(filterConfig.type); inputs: { 'clear': clearSearchBar}"></ng-container>
</ng-container>
</ng-container>
</ng-container>

<mat-form-field>
<mat-label>Location</mat-label>
<mat-chip-grid #locationChipList>
<mat-chip-row
*ngFor="let location of locationFilter$ | async"
[removable]="true"
(removed)="locationRemoved(location)"
>{{ location || "No Location" }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>
</mat-chip-grid>
<input
(input)="onLocationInput($event)"
[value]="locationInput$ | async"
matInput
class="location-input"
[matChipInputFor]="locationChipList"
[matAutocomplete]="loc"
/>

<mat-autocomplete #loc="matAutocomplete">
<mat-option
(onSelectionChange)="locationSelected(getFacetId(fc))"
*ngFor="let fc of locationSuggestions$ | async"
>
<span>{{ getFacetId(fc, "No Location") }} | </span>
<small>{{ getFacetCount(fc) }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>

<mat-form-field>
<mat-label>Group</mat-label>
<mat-chip-grid #groupChipList>
<mat-chip-row
*ngFor="let group of groupFilter$ | async"
[removable]="true"
(removed)="groupRemoved(group)"
>{{ group }}<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>
</mat-chip-grid>
<input
(input)="onGroupInput($event)"
[value]="groupInput$ | async"
matInput
class="group-input"
[matChipInputFor]="groupChipList"
[matAutocomplete]="grp"
/>

<mat-autocomplete #grp="matAutocomplete">
<mat-option
(onSelectionChange)="groupSelected(getFacetId(fc))"
*ngFor="let fc of groupSuggestions$ | async"
>
<span>{{ getFacetId(fc, "No Group") }}</span> |
<small>{{ getFacetCount(fc) }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>

<mat-form-field>
<mat-label>Type</mat-label>
<mat-chip-grid #typeChipList>
<mat-chip-row
*ngFor="let type of typeFilter$ | async"
[removable]="true"
(removed)="typeRemoved(type)"
>{{ type }}<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>
</mat-chip-grid>
<input
(input)="onKeywordInput($event)"
[value]="typeInput$ | async"
matInput
class="type-input"
[matChipInputFor]="typeChipList"
[matAutocomplete]="type"
/>

<mat-autocomplete #type="matAutocomplete">
<mat-option
(onSelectionChange)="typeSelected(getFacetId(fc))"
*ngFor="let fc of typeSuggestions$ | async"
>
<span>{{ getFacetId(fc, "No Type") }}</span> |
<small>{{ getFacetCount(fc) }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>

<mat-form-field>
<mat-label>Keywords</mat-label>
<mat-chip-grid #keywordChipList>
<mat-chip-row
*ngFor="let keyword of keywordsFilter$ | async"
[removable]="true"
(removed)="keywordRemoved(keyword)"
>{{ keyword }}<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>
</mat-chip-grid>
<input
(input)="onKeywordInput($event)"
[value]="keywordsInput$ | async"
matInput
class="keyword-input"
[matChipInputFor]="keywordChipList"
[matAutocomplete]="kw"
/>
<mat-autocomplete #kw="matAutocomplete">
<mat-option
(onSelectionChange)="keywordSelected(getFacetId(fc))"
*ngFor="let fc of keywordsSuggestions$ | async"
>
<span>{{ getFacetId(fc, "No Keywords") }}</span>
<small>: {{ getFacetCount(fc) }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>

<mat-form-field>
<mat-label>Start Date - End Date</mat-label>
<mat-date-range-input class="date-input" [rangePicker]="picker">
<input
matStartDate
name="begin"
[value]="(creationTimeFilter$ | async)?.begin"
(dateChange)="dateChanged($event)"
/>
<input
matEndDate
name="end"
[value]="(creationTimeFilter$ | async)?.end"
(dateChange)="dateChanged($event)"
/>
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

<div class="section-container" *ngIf="appConfig.scienceSearchEnabled">
<button mat-button color="primary" (click)="showAddConditionDialog()">
<mat-icon>add</mat-icon> Add Condition
</button>

<mat-chip-listbox class="scientific-chips" aria-orientation="vertical">
<mat-chip-option
class="scientific-chip"
*ngFor="let condition of scientificConditions$ | async; index as i"
>
<span class="scientific-chip-text">
{{ condition.lhs }}
<ng-container [ngSwitch]="condition.relation">
<ng-container *ngSwitchCase="'EQUAL_TO_NUMERIC'">
&nbsp;=&nbsp;
</ng-container>
<ng-container *ngSwitchCase="'EQUAL_TO_STRING'">
&nbsp;=&nbsp;
</ng-container>
<ng-container *ngSwitchCase="'LESS_THAN'">
&nbsp;&lt;&nbsp;
</ng-container>
<ng-container *ngSwitchCase="'GREATER_THAN'">
&nbsp;&gt;&nbsp;
</ng-container>
</ng-container>
{{
condition.relation === "EQUAL_TO_STRING"
? '"' + condition.rhs + '"'
: condition.rhs
}}
{{ condition.unit | prettyUnit }}
</span>
<mat-icon matChipRemove (click)="removeCondition(condition, i)"
>cancel</mat-icon
>
</mat-chip-option>
</mat-chip-listbox>
<ng-container *ngFor="let condition of scientificConditions$ | async">
<ng-container *ngComponentOutlet="ConditionFilterComponent; inputs: { condition }"></ng-container>
</ng-container>
</div>

<div class="section-container">
<button
mat-button
class="full-width-button"
(click)="showDatasetsFilterSettingsDialog()"
>
<mat-icon>tune</mat-icon>More Filters...
</button>
</div>

<div class="section-container">
<button
mat-raised-button
color="primary"
class="datasets-filters-search-button"
(click)="applyFilters()"
>
<mat-icon>search</mat-icon>
Search
Apply
</button>
<button
[disabled]="(hasAppliedFilters$ | async) === false"
mat-raised-button
color="primary"
class="datasets-filters-clear-all-button"
(click)="clearFacets()"
(click)="reset()"
>
<mat-icon>clear_all</mat-icon>
Clear All Filters
<mat-icon>undo</mat-icon>
Reset Filters
</button>
</div>
</mat-card-content>
Expand Down
21 changes: 21 additions & 0 deletions src/app/datasets/datasets-filter/datasets-filter.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@ mat-card {
width: 100%;
}

.filter-container {
display: flex;
align-items: center;

:first-child {
flex-grow: 1;
}
}

.section-container {
font-size: 1.25rem;
font-weight: 425;
Expand All @@ -20,6 +29,18 @@ mat-card {
margin-left: auto;
}

.full-width-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;

mat-icon {
margin-right: 8px;
}
}

.scientific-chips {
::ng-deep .mat-mdc-chip-list-wrapper {
margin: 0;
Expand Down
Loading

0 comments on commit 267cab9

Please sign in to comment.