User is able to select species specific search via Togglebutton

user-interface/frontend/themes/datamanager/components/custom.css

@@ -15,6 +15,7 @@
 @import "page-area.css";
 @import "span.css";
 @import "spreadsheet.css";
+@import "toggle-button.css";
 @import "vaadin-custom.css";
 @import "virtuallist.css";
 

user-interface/frontend/themes/datamanager/components/toggle-button.css

@@ -0,0 +1,27 @@
+/*Adapted from example provided in
+https://vaadin.com/forum/t/togglebutton-for-flow-3-0-0-vaadin-24-3-10-problem-with-applying-custom-css/166148/17*/
+
+/*Define checkbox width and height*/
+.toggle-button::part(checkbox) {
+ width: var(--lumo-size-m);
+ border-radius: 1em;
+}
+
+/*Button size and style within checkbox*/
+.toggle-button::part(checkbox)::after {
+ content: "";
+ height: calc(var(--lumo-size-m) / 3);
+ background-color: var(--lumo-secondary-text-color);
+ border-radius: 1em;
+ inset: 0;
+ margin: calc(var(--lumo-size-m) / 12);
+ opacity: 1;
+ transition: transform 0.3s;
+ width: calc(var(--lumo-size-m) / 3);
+}
+
+/*After the checkbox is pressed, move the button to the right and change color*/
+.toggle-button[checked]::part(checkbox)::after {
+ background-color: var(--lumo-primary-contrast-color);
+ transform: translateX(calc(var(--lumo-size-m) / 2));
+}

user-interface/src/main/java/life/qbic/datamanager/views/general/ToggleButton.java

@@ -0,0 +1,77 @@
+package life.qbic.datamanager.views.general;
+
+import com.vaadin.flow.component.checkbox.Checkbox;
+
+/**
+ * Custom Toggle Button adapted via css from the default {@link Checkbox} component
+ */
+public class ToggleButton extends Checkbox {
+
+ private static final Boolean DEFAULT_IS_ENABLED = Boolean.FALSE;
+
+ private ToggleButton() {
+ addClassName("toggle-button");
+ this.setValue(DEFAULT_IS_ENABLED);
+ }
+
+ /**
+ * Creates a plain toggle button with no label and is toggled off by default.
+ *
+ * @return an instance of {@link ToggleButton}
+ * @since 1.4.0
+ */
+ public static ToggleButton create() {
+ return new ToggleButton();
+ }
+
+ /**
+ * Sames as {@link ToggleButton#create()}, but also sets a label for the button directly.
+ *
+ * @param label the label for the toggle button
+ * @return an instance of {@link ToggleButton} with a label
+ * @since 1.0.0
+ */
+ public static ToggleButton createWithLabel(String label) {
+ var toggleButton = create();
+ toggleButton.setLabel(label);
+ return toggleButton;
+ }
+
+ /**
+ * Toggles the button to its <code>ON</code> status.
+ *
+ * @since 1.4.0
+ */
+ public void toggleOn() {
+ setValue(false);
+ }
+
+ /**
+ * Toggles the button to its <code>ON</code> status.
+ *
+ * @since 1.4.0
+ */
+ public void toggleOff() {
+ setValue(true);
+ }
+
+ /**
+ * Indicates, if the toggle button is set to <code>ON</code> position
+ *
+ * @return true, if the button is in <code>ON</code> position, else returns false
+ * @since 1.4.0
+ */
+ public boolean isOn() {
+ return getValue();
+ }
+
+ /**
+ * Indicates, if the toggle button is set to <code>OFF</code> position
+ *
+ * @return true, if the button is in <code>OFF</code> position
+ * @since 1.4.0
+ */
+ public boolean isOff() {
+ return !isEnabled();
+ }
+}

user-interface/src/main/java/life/qbic/datamanager/views/projects/project/ontology/OntologyLookupComponent.java

@@ -1,7 +1,6 @@
 package life.qbic.datamanager.views.projects.project.ontology;
 
 import com.vaadin.flow.component.UI;
-import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.grid.Grid.SelectionMode;
 import com.vaadin.flow.component.grid.GridVariant;
@@ -18,14 +17,14 @@
 import com.vaadin.flow.spring.annotation.SpringComponent;
 import com.vaadin.flow.spring.annotation.UIScope;
 import java.io.Serial;
-import java.util.Arrays;
 import java.util.List;
 import java.util.Objects;
 import life.qbic.application.commons.SortOrder;
 import life.qbic.datamanager.views.general.Card;
 import life.qbic.datamanager.views.general.CopyToClipBoardComponent;
 import life.qbic.datamanager.views.general.PageArea;
 import life.qbic.datamanager.views.general.Tag;
+import life.qbic.datamanager.views.general.ToggleButton;
 import life.qbic.projectmanagement.application.ontology.OntologyClass;
 import life.qbic.projectmanagement.application.ontology.SpeciesLookupService;
 import life.qbic.projectmanagement.application.ontology.TerminologyService;
@@ -56,8 +55,7 @@ public class OntologyLookupComponent extends PageArea {
  private final transient SpeciesLookupService speciesTermLookupService;
  private GridLazyDataView<OntologyTerm> ontologyGridLazyDataView;
  private String searchTerm = "";
- private boolean speciesSearchActive = false;
- private Checkbox speciesSearchCheckbox = new Checkbox("I want to search for species");
+ private final ToggleButton speciesSearchToggleButton = ToggleButton.createWithLabel("I want to search for species");
  private Grid<OntologyTerm> searchGrid;
 
  public OntologyLookupComponent(
@@ -72,26 +70,18 @@ public OntologyLookupComponent(
  Span description = new Span(
  "Here you can search our database for ontology terms from various ontologies.");
  add(description);
- initSearchScope(SPECIES_DISABLED);
- add(speciesSearchCheckbox);
+ add(speciesSearchToggleButton);
  initSearchField();
  add(searchField);
  initGridSection();
  add(ontologyGridSection);
  addClassName("ontology-lookup-component");
- }
-
- private void initSearchScope(boolean speciesSearchActive) {
- this.speciesSearchActive = speciesSearchActive;
- this.speciesSearchCheckbox.addValueChangeListener(event -> {
- this.speciesSearchActive = event.getValue();
- updateGrid();
- });
-
+ updateGrid();
+ speciesSearchToggleButton.addValueChangeListener(ignoredEvent -> updateGrid());
  }
 
  private void updateGrid() {
- if (speciesSearchActive) {
+ if (speciesSearchToggleButton.isOn()) {
  setSpeciesLazyDataProviderForOntologyGrid(searchGrid);
  } else {
  setLazyDataProviderForOntologyGrid(searchGrid);