Redesign the project summary page (#859)

Introduces a new user-friendly project summary
page, that lets the user access and update
information faster than before.

Co-authored-by: KochTobi <[email protected]>
Co-authored-by: Steffengreiner <[email protected]>

project-management/src/main/java/life/qbic/projectmanagement/application/ProjectInformationService.java

@@ -153,15 +153,22 @@ public void setResponsibility(ProjectId projectId, Contact contact) {
   }
 
   @PreAuthorize("hasPermission(#projectId, 'life.qbic.projectmanagement.domain.model.project.Project', 'WRITE')")
-  public void stateObjective(ProjectId projectId, String objective) {
+  public void removeResponsibility(ProjectId projectId) {
+    Project project = loadProject(projectId);
+    project.removeResponsiblePerson();
+    projectRepository.update(project);
+  }
+
+  @PreAuthorize("hasPermission(#projectId, 'life.qbic.projectmanagement.domain.model.project.Project', 'WRITE')")
+  public void updateObjective(ProjectId projectId, String objective) {
     ProjectObjective projectObjective = ProjectObjective.create(objective);
     Project project = loadProject(projectId);
     project.stateObjective(projectObjective);
     projectRepository.update(project);
   }
 
   @PreAuthorize("hasPermission(#projectId, 'life.qbic.projectmanagement.domain.model.project.Project', 'WRITE')")
-  public void addFunding(ProjectId projectId, String label, String referenceId) {
+  public void setFunding(ProjectId projectId, String label, String referenceId) {
     Funding funding = Funding.of(label, referenceId);
     var project = loadProject(projectId);
     project.setFunding(funding);

project-management/src/main/java/life/qbic/projectmanagement/domain/model/project/Project.java

@@ -166,6 +166,10 @@ public void addExperiment(Experiment experiment) {
     lastModified = Instant.now();
   }
 
+  public void removeResponsiblePerson() {
+    responsiblePerson = null;
+  }
+
   public void stateObjective(ProjectObjective projectObjective) {
     Objects.requireNonNull(projectObjective);
     if (projectObjective.equals(projectIntent.objective())) {
@@ -278,6 +282,10 @@ public List<ExperimentId> experiments() {
     return experiments.stream().map(Experiment::experimentId).toList();
   }
 
+  public Instant getLastModified() {
+    return lastModified;
+  }
+
   @Override
   public boolean equals(Object o) {
     if (this == o) {

project-management/src/test/groovy/life/qbic/projectmanagement/application/ProjectInformationServiceSpec.groovy

@@ -91,7 +91,7 @@ class ProjectInformationServiceSpec extends Specification {
 
         when: "the project objective is updated for a project"
         String projectObjective = "All your objectives are belong to us"
-        projectInformationService.stateObjective(project.getId(), projectObjective)
+        projectInformationService.updateObjective(project.getId(), projectObjective)
 
         then: "the project intent contains the new project objective"
         project.projectIntent.objective().objective() == projectObjective

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

@@ -0,0 +1,209 @@
+.flex-horizontal {
+  display: flex;
+  flex-direction: row;
+}
+
+.heading-with-icon {
+  color: #878787;
+  column-gap: var(--lumo-space-s);
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+  line-height: 1;
+  font-size: var(--lumo-space-m);
+}
+
+.heading-with-icon vaadin-icon {
+  height: auto;
+}
+
+.section {
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+
+.trailing-margin-large {
+  margin-bottom: var(--lumo-space-xl);
+}
+
+.trailing-margin-normal {
+  margin-bottom: var(--lumo-space-l);
+}
+
+.trailing-margin-small {
+  margin-bottom: var(--lumo-space-s);
+}
+
+.section-header-row {
+  display: flex;
+  width: 100%;
+}
+
+.section-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: var(--lumo-space-m);
+}
+
+.section-title {
+  font-weight: bold;
+  color: var(--lumo-secondary-text-color);
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.font-size-small {
+  font-size: var(--lumo-font-size-l);
+}
+
+.font-size-medium {
+  font-size: var(--lumo-font-size-xl);
+}
+
+.font-size-large {
+  font-size: var(--lumo-font-size-xxl);
+}
+
+.sub-header {
+  font-size: var(--lumo-font-size-s);
+  color: #878787;
+  margin-bottom: 0.5rem;
+}
+
+.tag-list {
+  width: 100%;
+  display: flex;
+}
+
+.detail-box {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid lightgray;
+  border-radius: var(--lumo-space-s);
+  max-height: 10rem;
+}
+
+.detail-box-header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: var(--lumo-space-s);
+  font-size: var(--lumo-font-size-m);
+  font-weight: bold;
+  color: #878787;
+  line-height: 1;
+}
+
+.detail-box-header vaadin-icon {
+  height: auto;
+}
+
+.detail-box-child {
+  border-width: 1px 1px 1px 1px;
+  border-color: lightgray;
+  padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m);
+}
+
+.detail-box-child:first-child {
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: lightgray;
+}
+
+.icon-label {
+  font-size: var(--lumo-font-size-m);
+  line-height: 1;
+  display: flex;
+  flex-direction: row;
+  gap: var(--lumo-space-l);
+}
+
+.icon-label-container {
+  display: flex;
+  flex-direction: row;
+  font-size: var(--lumo-font-size-m);
+  color: #878787;
+  font-weight: bold;
+  gap: var(--lumo-space-s);
+}
+
+.icon-label-container vaadin-icon {
+  height: auto;
+}
+
+.vertical-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.horizontal-list {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.dynamic-growing-flex-item {
+  flex-grow: 1;
+}
+
+.wrapping-flex-container {
+  flex-wrap: wrap;
+}
+
+.overflow-hidden-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gap-large {
+  gap: var(--lumo-space-l);
+}
+
+.gap-medium {
+  gap: var(--lumo-space-m);
+}
+
+.gap-small {
+  gap: var(--lumo-space-s);
+}
+
+.allow-row-wrap {
+  flex-wrap: wrap;
+}
+
+.overflow-scroll-height {
+  overflow: auto;
+}
+
+.ontology-term {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: var(--lumo-space-s);
+  white-space: nowrap;
+  flex-wrap: wrap;
+}
+
+.fixed-medium-width {
+  width: 25rem;
+}
+
+.simple-paragraph {
+  font-size: var(--lumo-font-size-m);
+  margin-bottom: var(--lumo-space-m);
+  max-width: 40em;
+}
+

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

@@ -1,6 +1,7 @@
 /* This file defines the styling and layout for all custom components. The components are sorted alphabetically */
 
 /*Make sure to import the css classes for each custom component to avoid cluttering the master-style-sheet */
+@import "all.css";
 @import "button.css";
 @import "card.css";
 @import "combobox.css";

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

@@ -18,6 +18,10 @@ vaadin-dialog-overlay::part(title) {
   margin-inline-start: 0;
 }
 
+.large-dialog::part(overlay) {
+  width: 66vw;
+}
+
 /* set the width of the notification */
 .notification-dialog::part(overlay) {
   width: 36.75rem;

user-interface/frontend/themes/datamanager/components/page-area.css

@@ -6,7 +6,7 @@
 
 .page-area {
   background-color: var(--lumo-base-color);
-  padding: var(--lumo-space-m);
+  padding: var(--lumo-space-l);
   flex-direction: column;
   display: flex;
   gap: var(--lumo-space-s);

user-interface/frontend/themes/datamanager/styles.css

@@ -1,2 +1,3 @@
+@import "theme-editor.css";
 @import "components/custom.css";
-@import "components/vaadin-custom.css";
+@import "components/vaadin-custom.css";

user-interface/src/main/java/life/qbic/datamanager/export/rocrate/ROCreateBuilder.java

@@ -5,8 +5,6 @@
 
 import edu.kit.datamanager.ro_crate.RoCrate;
 import edu.kit.datamanager.ro_crate.RoCrate.RoCrateBuilder;
-import edu.kit.datamanager.ro_crate.context.CrateMetadataContext;
-import edu.kit.datamanager.ro_crate.context.RoCrateMetadataContext;
 import edu.kit.datamanager.ro_crate.entities.contextual.ContextualEntity;
 import edu.kit.datamanager.ro_crate.entities.contextual.ContextualEntity.ContextualEntityBuilder;
 import edu.kit.datamanager.ro_crate.entities.data.FileEntity.FileEntityBuilder;

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

@@ -0,0 +1,24 @@
+package life.qbic.datamanager.views;
+
+/**
+ * <b>Measurement Type</b>
+ * <p>
+ * Some controlled enum vocabulary for different measurement types to use in the frontend part of
+ * the application.
+ *
+ * @since 1.6.0
+ */
+public enum MeasurementType {
+  PROTEOMICS("Proteomics"),
+  GENOMICS("Genomics");
+
+  private final String type;
+
+  MeasurementType(String type) {
+    this.type = type;
+  }
+
+  public String getType() {
+    return type;
+  }
+}

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

@@ -0,0 +1,42 @@
+package life.qbic.datamanager.views;
+
+import life.qbic.datamanager.views.general.Tag;
+import life.qbic.datamanager.views.general.Tag.TagColor;
+
+/**
+ * <b>Tag Factory</b>
+ *
+ * <p>Create display tags for all thinkable use cases.</p>
+ *
+ * @since 1.6.0
+ */
+public class TagFactory {
+
+  private TagFactory() {}
+
+  public static Tag forMeasurement(MeasurementType measurementType) {
+    return switch (measurementType) {
+      case GENOMICS -> pinkTag("Genomics");
+      case PROTEOMICS -> violetTag("Proteomics");
+    };
+  }
+
+  public static Tag forCustom(String label, TagColor tagColor) {
+    return tagWithColor(label, tagColor);
+  }
+
+  private static Tag tagWithColor(String label, TagColor color) {
+    var tag = new Tag(label);
+    tag.setTagColor(color);
+    return tag;
+  }
+
+  private static Tag violetTag(String label) {
+    return tagWithColor(label, TagColor.VIOLET);
+  }
+
+  private static Tag pinkTag(String label) {
+    return tagWithColor(label, TagColor.PINK);
+  }
+
+}