inception-project · reckart · Oct 1, 2022 · Oct 1, 2022 · Oct 1, 2022 · Oct 1, 2022
diff --git a/inception/inception-ui-annotation/pom.xml b/inception/inception-ui-annotation/pom.xml
@@ -109,11 +109,6 @@
       <artifactId>inception-preferences</artifactId>
     </dependency>
 
-    <dependency>
-      <groupId>com.googlecode.wicket-jquery-ui</groupId>
-      <artifactId>wicket-kendo-ui</artifactId>
-    </dependency>
-
     <dependency>
       <groupId>org.apache.wicket</groupId>
       <artifactId>wicket-core</artifactId>
@@ -158,6 +153,14 @@
       <groupId>de.agilecoders.wicket</groupId>
       <artifactId>wicket-bootstrap-extensions</artifactId>
     </dependency>
+    <dependency>
+      <groupId>com.googlecode.wicket-jquery-ui</groupId>
+      <artifactId>wicket-jquery-ui-core</artifactId>
+    </dependency>
+    <dependency>
+      <groupId>com.googlecode.wicket-jquery-ui</groupId>
+      <artifactId>wicket-kendo-ui</artifactId>
+    </dependency>
     <dependency>
       <groupId>org.danekja</groupId>
       <artifactId>jdk-serializable-functional</artifactId>

diff --git a/...otation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/AnnotationPage.html b/...otation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/AnnotationPage.html
@@ -19,23 +19,33 @@
 <html xmlns:wicket="http://wicket.apache.org">
 <body>
   <wicket:extend>
-    <div class="flex-content flex-v-container">
-      <div class="annotation-editor-container flex-content flex-h-container flex-gutter flex-no-initial-gutter">
-        <div wicket:id="leftSidebar" class="flex-v-container flex-gutter"></div>
-        <div wicket:id="centerArea" class="flex-content flex-v-container flex-gutter">
-          <div class="flex-content card">
-            <div class="card-header border-bottom-0">
-              <span wicket:id="documentNamePanel"/> 
-              <span wicket:id="numberOfPages" class="small text-muted float-end"/>
+    <div class="flex-content flex-v-container annotation-editor-container">
+      <div wicket:id="splitter-right" class="flex-content">
+        <div class="fit-child-snug">
+          <div wicket:id="splitter-left">
+            <div wicket:id="leftSidebarContainer">
+              <div wicket:id="leftSidebar" class="flex-v-container flex-gutter"></div>
             </div>
-            <div class="card-body flex-v-container" style="padding: 0px;">
-              <nav wicket:id="actionBar" class="action-bar"/>
-              <div wicket:id="editor" class="flex-content flex-v-container" style="padding: 0px;"/>
+            <div wicket:id="centerAreaContainer">
+              <div wicket:id="centerArea" class="flex-content flex-v-container flex-gutter">
+                <div class="flex-content card">
+                  <div class="card-header border-bottom-0">
+                    <span wicket:id="documentNamePanel"/> 
+                    <span wicket:id="numberOfPages" class="small text-muted float-end"/>
+                  </div>
+                  <div class="card-body flex-v-container" style="padding: 0px;">
+                    <nav wicket:id="actionBar" class="action-bar"/>
+                    <div wicket:id="editor" class="flex-content flex-v-container" style="padding: 0px;"/>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div wicket:id="rightSidebar" class="flex-sidebar flex-v-container">
-          <wicket:container wicket:id="annotationDetailEditorPanel"/>
+        <div class="fit-child-snug">
+          <div wicket:id="rightSidebar" class="flex-sidebar flex-v-container">
+            <wicket:container wicket:id="annotationDetailEditorPanel"/>
+          </div>
         </div>
       </div>
     </div>

diff --git a/...otation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/AnnotationPage.java b/...otation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/AnnotationPage.java
@@ -27,10 +27,13 @@
 import static de.tudarmstadt.ukp.clarin.webanno.model.SourceDocumentStateTransition.NEW_TO_ANNOTATION_IN_PROGRESS;
 import static de.tudarmstadt.ukp.clarin.webanno.ui.core.page.ProjectPageBase.NS_PROJECT;
 import static de.tudarmstadt.ukp.clarin.webanno.ui.core.page.ProjectPageBase.PAGE_PARAM_PROJECT;
+import static de.tudarmstadt.ukp.inception.rendering.editorstate.AnnotationPreference.SIDEBAR_SIZE_DEFAULT;
 import static de.tudarmstadt.ukp.inception.rendering.selection.FocusPosition.TOP;
 import static de.tudarmstadt.ukp.inception.support.WebAnnoConst.CURATION_USER;
 import static de.tudarmstadt.ukp.inception.support.WebAnnoConst.SPAN_TYPE;
 import static de.tudarmstadt.ukp.inception.support.lambda.LambdaBehavior.visibleWhen;
+import static java.util.Collections.emptyMap;
+import static java.util.Collections.emptySet;
 
 import java.io.IOException;
 import java.lang.invoke.MethodHandles;
@@ -39,10 +42,12 @@
 import java.util.Map;
 import java.util.Map.Entry;
 import java.util.Objects;
+import java.util.Set;
 
 import org.apache.uima.cas.CAS;
-import org.apache.wicket.AttributeModifier;
+import org.apache.wicket.ClassAttributeModifier;
 import org.apache.wicket.RestartResponseException;
+import org.apache.wicket.StyleAttributeModifier;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.feedback.IFeedback;
 import org.apache.wicket.markup.html.WebMarkupContainer;
@@ -59,6 +64,10 @@
 import org.wicketstuff.annotation.mount.MountPath;
 import org.wicketstuff.event.annotation.OnEvent;
 
+import com.googlecode.wicket.jquery.core.Options;
+import com.googlecode.wicket.kendo.ui.widget.splitter.SplitterAdapter;
+import com.googlecode.wicket.kendo.ui.widget.splitter.SplitterBehavior;
+
 import de.tudarmstadt.ukp.clarin.webanno.api.annotation.actionbar.ActionBar;
 import de.tudarmstadt.ukp.clarin.webanno.api.annotation.page.AnnotationEditorState;
 import de.tudarmstadt.ukp.clarin.webanno.api.annotation.page.AnnotationPageBase;
@@ -76,6 +85,7 @@
 import de.tudarmstadt.ukp.clarin.webanno.ui.annotation.component.DocumentNamePanel;
 import de.tudarmstadt.ukp.clarin.webanno.ui.annotation.detail.AnnotationDetailEditorPanel;
 import de.tudarmstadt.ukp.clarin.webanno.ui.annotation.sidebar.SidebarPanel;
+import de.tudarmstadt.ukp.clarin.webanno.ui.annotation.sidebar.SidebarStateChangedEvent;
 import de.tudarmstadt.ukp.inception.annotation.events.AnnotationEvent;
 import de.tudarmstadt.ukp.inception.annotation.events.BeforeDocumentOpenedEvent;
 import de.tudarmstadt.ukp.inception.annotation.events.DocumentOpenedEvent;
@@ -99,7 +109,6 @@
 import de.tudarmstadt.ukp.inception.schema.api.adapter.AnnotationException;
 import de.tudarmstadt.ukp.inception.support.spring.ApplicationEventPublisherHolder;
 import de.tudarmstadt.ukp.inception.support.wicket.DecoratedObject;
-import de.tudarmstadt.ukp.inception.support.wicket.WicketUtil;
 
 @MountPath(NS_PROJECT + "/${" + PAGE_PARAM_PROJECT + "}/annotate/#{" + PAGE_PARAM_DOCUMENT + "}")
 public class AnnotationPage
@@ -126,11 +135,17 @@ public class AnnotationPage
 
     private long currentProjectId;
 
-    private WebMarkupContainer centerArea;
-    private WebMarkupContainer actionBar;
+    private final WebMarkupContainer leftSplitterContainer;
+    private final SplitterBehavior leftSplitterBehavior;
+    private final WebMarkupContainer leftSidebarContainer;
+    private final WebMarkupContainer rightSplitterContainer;
+    private final WebMarkupContainer centerAreaContainer;
+    private final WebMarkupContainer centerArea;
+    private final WebMarkupContainer actionBar;
+    private final SidebarPanel leftSidebar;
+    private final AnnotationDetailEditorPanel detailEditor;
+
     private AnnotationEditorBase annotationEditor;
-    private AnnotationDetailEditorPanel detailEditor;
-    private SidebarPanel leftSidebar;
 
     public AnnotationPage(final PageParameters aPageParameters)
     {
@@ -155,30 +170,145 @@ public AnnotationPage(final PageParameters aPageParameters)
 
         handleParameters(document, focus, user);
 
-        createChildComponents();
+        add(createUrlFragmentBehavior());
 
-        updateDocumentView(null, null, null, focus);
-    }
+        detailEditor = createDetailEditor();
 
-    private void createChildComponents()
-    {
-        add(createUrlFragmentBehavior());
+        leftSplitterContainer = new WebMarkupContainer("splitter-left");
+        leftSplitterContainer.setOutputMarkupId(true);
+
+        leftSplitterBehavior = new SplitterBehavior("#" + leftSplitterContainer.getMarkupId(),
+                new Options("orientation", Options.asString("horizontal")) //
+                        .set("panes", //
+                                new Options("size", Options.asString(SIDEBAR_SIZE_DEFAULT + "%")), //
+                                new Options()), //
+                new SplitterAdapter());
+
+        leftSplitterContainer.add(new StyleAttributeModifier()
+        {
+            private static final long serialVersionUID = 7341058776832932461L;
+
+            @Override
+            protected Map<String, String> update(Map<String, String> aOldStyles)
+            {
+                if (!leftSidebar.isCollapsed()) {
+                    return Map.of("width", "100%", "height", "100%");
+                }
+                return emptyMap();
+            }
+        });
+
+        leftSplitterContainer.add(new ClassAttributeModifier()
+        {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            protected Set<String> update(Set<String> aOldClasses)
+            {
+                if (leftSidebar.isCollapsed()) {
+                    return Set.of("flex-h-container");
+                }
+                return emptySet();
+            }
+        });
+
+        rightSplitterContainer = new WebMarkupContainer("splitter-right");
+        rightSplitterContainer.setOutputMarkupId(true);
+
+        rightSplitterContainer.add(new SplitterBehavior("#" + rightSplitterContainer.getMarkupId(),
+                new Options("orientation", Options.asString("horizontal")) //
+                        .set("panes", //
+                                new Options(), //
+                                new Options("size", Options.asString(SIDEBAR_SIZE_DEFAULT + "%"))), //
+                new SplitterAdapter()));
+
+        rightSplitterContainer.add(leftSplitterContainer);
+        add(rightSplitterContainer);
+
+        rightSplitterContainer.add(createRightSidebar());
+
+        leftSidebarContainer = new WebMarkupContainer("leftSidebarContainer");
+        leftSidebarContainer.add(new ClassAttributeModifier()
+        {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            protected Set<String> update(Set<String> aOldClasses)
+            {
+                if (leftSidebar.isCollapsed()) {
+                    return Set.of("flex-h-container");
+                }
+
+                return Set.of("fit-child-snug");
+            }
+        });
+        leftSplitterContainer.add(leftSidebarContainer);
+
+        leftSidebar = createLeftSidebar();
+        leftSidebarContainer.add(leftSidebar);
+
+        if (!leftSidebar.isCollapsed()) {
+            leftSplitterContainer.add(leftSplitterBehavior);
+        }
+
+        centerAreaContainer = new WebMarkupContainer("centerAreaContainer");
+        centerAreaContainer.add(new ClassAttributeModifier()
+        {
+            private static final long serialVersionUID = 1L;
+
+            @Override
+            protected Set<String> update(Set<String> aOldClasses)
+            {
+                if (leftSidebar.isCollapsed()) {
+                    return Set.of("flex-content", "flex-h-container", "ps-3");
+                }
+
+                return Set.of("fit-child-snug");
+            }
+        });
 
         centerArea = new WebMarkupContainer("centerArea");
         centerArea.add(visibleWhen(() -> getModelObject().getDocument() != null));
         centerArea.setOutputMarkupPlaceholderTag(true);
         centerArea.add(createDocumentInfoLabel());
-        add(centerArea);
+        centerAreaContainer.add(centerArea);
 
         actionBar = new ActionBar("actionBar");
         centerArea.add(actionBar);
 
-        add(createRightSidebar());
-
         createAnnotationEditor();
 
-        leftSidebar = createLeftSidebar();
-        add(leftSidebar);
+        leftSplitterContainer.add(centerAreaContainer);
+
+        updateDocumentView(null, null, null, focus);
+    }
+
+    private WebMarkupContainer buildRightSplitter()
+    {
+        var splitter = new WebMarkupContainer("splitter-right");
+        splitter.setOutputMarkupId(true);
+
+        splitter.add(new SplitterBehavior("#" + splitter.getMarkupId(),
+                new Options("orientation", Options.asString("horizontal")) //
+                        .set("panes", //
+                                new Options("size", Options.asString("80%")), //
+                                new Options("size", Options.asString("20%"))), //
+                new SplitterAdapter()));
+
+        return splitter;
+    }
+
+    @OnEvent
+    public void onSidebarStateChanged(SidebarStateChangedEvent aEvent)
+    {
+        if (aEvent.isCollapsed()) {
+            leftSplitterContainer.remove(leftSplitterBehavior);
+        }
+        else {
+            leftSplitterContainer.add(leftSplitterBehavior);
+        }
+
+        aEvent.getTarget().add(rightSplitterContainer);
     }
 
     @Override
@@ -355,11 +485,7 @@ private WebMarkupContainer createRightSidebar()
     {
         WebMarkupContainer rightSidebar = new WebMarkupContainer("rightSidebar");
         rightSidebar.setOutputMarkupPlaceholderTag(true);
-        // Override sidebar width from preferences
-        rightSidebar.add(new AttributeModifier("style",
-                LoadableDetachableModel.of(() -> String.format("flex-basis: %d%%;",
-                        getModelObject().getPreferences().getSidebarSizeRight()))));
-        detailEditor = createDetailEditor();
+
         rightSidebar.add(detailEditor);
         rightSidebar.add(visibleWhen(getModel() //
                 .map(AnnotatorState::getAnnotationLayers) //
@@ -535,7 +661,8 @@ protected void actionLoadDocument(AjaxRequestTarget aTarget, int aFocus)
             if (aTarget != null) {
                 // Update URL for current document
                 updateUrlFragment(aTarget);
-                WicketUtil.refreshPage(aTarget, getPage());
+
+                aTarget.add(rightSplitterContainer);
             }
 
             LOG.trace("Document opened {}@{} {}", state.getUser(), state.getDocument(), aFocus);

diff --git a/...n/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/sidebar/SidebarPanel.java b/...n/src/main/java/de/tudarmstadt/ukp/clarin/webanno/ui/annotation/sidebar/SidebarPanel.java
@@ -17,13 +17,10 @@
  */
 package de.tudarmstadt.ukp.clarin.webanno.ui.annotation.sidebar;
 
-import static java.lang.String.format;
-
 import java.util.ArrayList;
 import java.util.List;
 
 import org.apache.commons.lang3.Validate;
-import org.apache.wicket.AttributeModifier;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.behavior.AttributeAppender;
 import org.apache.wicket.markup.html.panel.Panel;
@@ -60,7 +57,6 @@ public SidebarPanel(String aId, IModel<AnnotatorState> aModel, IModel<Integer> a
 
         Validate.notNull(aActionHandler, "Action handler must not be null");
 
-        setOutputMarkupId(true);
         setOutputMarkupPlaceholderTag(true);
 
         actionHandler = aActionHandler;
@@ -73,12 +69,11 @@ public SidebarPanel(String aId, IModel<AnnotatorState> aModel, IModel<Integer> a
 
         add(new AttributeAppender("class",
                 LoadableDetachableModel.of(() -> tabsPanel.isExpanded() ? "" : "collapsed"), " "));
+    }
 
-        // Override sidebar width from preferences
-        add(new AttributeModifier("style",
-                LoadableDetachableModel.of(() -> tabsPanel.isExpanded()
-                        ? format("flex-basis: %d%%;", aWidthModel.orElse(20).getObject())
-                        : "")));
+    public boolean isCollapsed()
+    {
+        return !tabsPanel.isExpanded();
     }
 
     @Override