added collapsable header to ScaleValueCardView

protegeproject · Aug 28, 2024 · e3257e5 · e3257e5
1 parent 9ec7839
commit e3257e5
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git a/...main/java/edu/stanford/bmir/protege/web/client/postcoordination/PostCoordinationTable.css b/...main/java/edu/stanford/bmir/protege/web/client/postcoordination/PostCoordinationTable.css
@@ -17,13 +17,13 @@
 }
 
 .rotatedHeader div {
-  transform-origin: left;
-  transform: rotate(-75deg)  translate(-50px,100%);
-  display: table-cell;
-  vertical-align: middle;
-  text-align: start;
-  text-wrap: wrap;
-  white-space: nowrap;
+    transform-origin: left;
+    transform: rotate(-75deg) translate(-50px, 100%);
+    display: table-cell;
+    vertical-align: middle;
+    text-align: start;
+    text-wrap: wrap;
+    white-space: nowrap;
 }
 
 .customRowStyle {
@@ -61,8 +61,8 @@
 .postCoordinationTable {
     border-radius: 5px;
     overflow: hidden;
-    -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,.15);
-    box-shadow: 0 0 40px 0 rgba(0,0,0,.15);
+    -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15);
+    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15);
     margin: 15px;
     border-collapse: collapse;
     padding: 3px;
@@ -105,12 +105,18 @@
     text-align: center;
     vertical-align: middle;
 }
+
 .scaleValue-table-value-cell {
     padding-left: 10px;
     text-align: left;
 }
 
 .scaleValueHeaderDescription {
-    font-size: 11px; /* Smaller font size for description */
-    font-style: italic; /* Italic style for description */
+    font-size: 11px;
+    font-style: italic;
+}
+
+.toggle-icon {
+    cursor: pointer;
+    margin-right: 5px;
 }
diff --git a/...tanford/bmir/protege/web/client/postcoordination/PostCoordinationTableResourceBundle.java b/...tanford/bmir/protege/web/client/postcoordination/PostCoordinationTableResourceBundle.java
@@ -56,6 +56,9 @@ interface PostCoordinationTableCss extends CssResource {
 
         @ClassName("scaleValueHeaderDescription")
         String scaleValueHeaderDescription();
+
+        @ClassName("toggle-icon")
+        String toggleIcon();
     }
 
 }
diff --git a/...anford/bmir/protege/web/client/postcoordination/scaleValuesCard/ScaleAllowMultiValue.java b/...anford/bmir/protege/web/client/postcoordination/scaleValuesCard/ScaleAllowMultiValue.java
@@ -11,7 +11,7 @@ public enum ScaleAllowMultiValue {
         this.description = description;
     }
 
-    public String getBrowserTest() {
+    public String getBrowserText() {
         return description;
     }
 

diff --git a/...ord/bmir/protege/web/client/postcoordination/scaleValuesCard/ScaleValueCardPresenter.java b/...ord/bmir/protege/web/client/postcoordination/scaleValuesCard/ScaleValueCardPresenter.java
@@ -36,7 +36,7 @@ private void bindView() {
 
     private void initTable() {
         view.clearTable();
-        view.addHeader(postCoordinationAxis.getScaleLabel(), scaleValue.getGenericScale().getAllowMultiValue().getBrowserTest());
+        view.addHeader(postCoordinationAxis.getScaleLabel(), scaleValue.getGenericScale().getAllowMultiValue().getBrowserText());
         view.addSelectValueButton();
 
         dispatchServiceManager.execute(GetRenderedOwlEntitiesAction.create(projectId, new HashSet<>(scaleValue.getValueIris())),

diff --git a/...ford/bmir/protege/web/client/postcoordination/scaleValuesCard/ScaleValueCardViewImpl.java b/...ford/bmir/protege/web/client/postcoordination/scaleValuesCard/ScaleValueCardViewImpl.java
@@ -15,6 +15,10 @@ interface ScaleValueCardViewImplUiBinder extends UiBinder<HTMLPanel, ScaleValueC
 
     private static final ScaleValueCardViewImplUiBinder uiBinder = GWT.create(ScaleValueCardViewImplUiBinder.class);
     private final HTMLPanel rootPanel;
+    private HTML headerHtml;
+    private boolean isCollapsed = false;
+    private final String collapseIcon = "&#9660;";
+    private final String expandIcon = "&#9654;";
     private static final PostCoordinationTableResourceBundle.PostCoordinationTableCss postCoordinationStyle = PostCoordinationTableResourceBundle.INSTANCE.style();
 
     private static final WebProtegeClientBundle.ButtonsCss buttonCss = WebProtegeClientBundle.BUNDLE.buttons();
@@ -52,14 +56,15 @@ public void clearTable() {
     public void addHeader(String headerText, String description) {
         GWT.log("Adding header. Current row count: " + valueTable.getRowCount());
 
-        // Combine header text and description using HTML with inline span for description
-        HTML headerHtml = new HTML(headerText + "<br><span class=\"" + postCoordinationStyle.scaleValueHeaderDescription() + "\">" + description + "</span>");
+        headerHtml = new HTML("<span class=\"" + postCoordinationStyle.toggleIcon() + "\">" + collapseIcon + "</span> " + headerText + "<br><span class=\"" + postCoordinationStyle.scaleValueHeaderDescription() + "\">" + description + "</span>");
+        headerHtml.setStyleName(postCoordinationStyle.scaleValueHeader());
 
-        // Add the combined header HTML to the table cell and apply the scaleValueHeader style to the cell
         valueTable.setWidget(0, 0, headerHtml);
         valueTable.getFlexCellFormatter().setColSpan(0, 0, 2);
         valueTable.getCellFormatter().setStyleName(0, 0, postCoordinationStyle.scaleValueHeader());
 
+        headerHtml.addClickHandler(event -> toggleTable());
+
         GWT.log("Header added. Current row count: " + valueTable.getRowCount());
     }
 
@@ -95,10 +100,30 @@ private void setRowContents(int rowIndex, String value) {
         GWT.log("New row added. Current row count: " + valueTable.getRowCount());
     }
 
+    @Override
     public void setDeleteValueButtonHandler(DeleteScaleValueButtonHandler handler) {
         this.deleteScaleValueButtonHandler = handler;
     }
 
+    private void toggleTable() {
+        isCollapsed = !isCollapsed;
+
+        for (int i = 1; i < valueTable.getRowCount(); i++) {
+            valueTable.getRowFormatter().setVisible(i, !isCollapsed);
+        }
+
+        String currentHtml = headerHtml.getHTML();
+        String icon = isCollapsed ? expandIcon : collapseIcon;
+
+        if (currentHtml.contains("<span class=\"" + postCoordinationStyle.toggleIcon() + "\">")) {
+            int spanEnd = currentHtml.indexOf("</span>") + 7; // 7 to move past "</span>"
+
+            currentHtml = currentHtml.substring(spanEnd).trim(); // Extract text after the span
+        }
+
+        headerHtml.setHTML("<span class=\"" + postCoordinationStyle.toggleIcon() + "\">" + icon + "</span> " + currentHtml);
+    }
+
     @Override
     public void addSelectValueButton() {
         int lastRow = valueTable.getRowCount();