From ccbb9b7910e2f48a873a451165808b5d0767d1d2 Mon Sep 17 00:00:00 2001 From: Lennart Hensler Date: Thu, 9 Aug 2018 19:47:13 +0200 Subject: [PATCH] Auto-resizing of the statistic suggest box and other style improvements of the data mining UI --- java/com.sap.sailing.gwt.ui/DataMining.css | 42 ++++++++++++------- .../MultiDimensionalGroupingProvider.java | 28 ++++++++----- .../QueryDefinitionProviderWithControls.java | 16 +++---- .../SuggestBoxStatisticProvider.java | 22 ++++++---- 4 files changed, 68 insertions(+), 40 deletions(-) diff --git a/java/com.sap.sailing.gwt.ui/DataMining.css b/java/com.sap.sailing.gwt.ui/DataMining.css index 814a562d25b..aeb72e14fa3 100644 --- a/java/com.sap.sailing.gwt.ui/DataMining.css +++ b/java/com.sap.sailing.gwt.ui/DataMining.css @@ -211,13 +211,23 @@ input.magnifier { border-bottom: 1px solid rgba(0, 0, 0, 0.25); } +.definitionProviderControlsElements { + margin: 2px; +} + .settingsAnchor { position: relative; - top: 9px; + top: 7.5px; } .groupingProvider { padding: 3px 0px; + overflow-y: auto; +} + +.groupingProviderLabel{ + margin: 2px 2px 2px 0px; + display: inline-block; } .groupingProviderElement { @@ -226,12 +236,24 @@ input.magnifier { } .statisticProvider { - padding: 5px 0px 0px 0px; + padding: 5px 0px; + display: table; +} + +.statisticProviderLabel { + display: table-cell; + white-space: nowrap; } .statisticProviderElement { - margin: 2px; - display: inline-block; + display: table-cell; + width: auto; +} + +.statisticSuggestBoxContainer { + width: 100%; + min-width: 300px; + padding: 0px 3px; } .statisticSuggestBoxPopup { @@ -242,18 +264,6 @@ input.magnifier { overflow-y: scroll; } -.definitionProviderControls { - margin: 2px; -} - -.definitionProviderControlsElements { - margin: 2px; -} - -.queryProviderElementLabel { - margin-left: 0px; -} - .queryDefinitionViewerContent { background-color: white; padding: 5px; diff --git a/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/MultiDimensionalGroupingProvider.java b/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/MultiDimensionalGroupingProvider.java index 8872c0dd4d7..c4b0786a93e 100644 --- a/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/MultiDimensionalGroupingProvider.java +++ b/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/MultiDimensionalGroupingProvider.java @@ -40,7 +40,10 @@ import com.sap.sse.gwt.client.shared.settings.ComponentContext; public class MultiDimensionalGroupingProvider extends AbstractDataMiningComponent implements GroupingProvider { - private static final String GROUPING_PROVIDER_ELEMENT_STYLE = "groupingProviderElement"; + private static final String GroupingProviderStyle = "groupingProvider"; + private static final String GroupingProviderLabelStyle = "groupingProviderLabel"; + private static final String GroupingProviderElementStyle = "groupingProviderElement"; + private static final NaturalComparator NaturalComparator = new NaturalComparator(); private static final Comparator DimensionComparator = (d1, d2) -> { // Null values (to deselect the dimension) on top @@ -79,10 +82,10 @@ public class MultiDimensionalGroupingProvider extends AbstractDataMiningComponen dimensionToGroupByBoxes = new ArrayList>(); mainPanel = new FlowPanel(); - mainPanel.addStyleName("groupingProvider"); + mainPanel.addStyleName(GroupingProviderStyle); + Label groupByLabel = new Label(this.getDataMiningStringMessages().groupBy()); - groupByLabel.addStyleName(GROUPING_PROVIDER_ELEMENT_STYLE); - groupByLabel.addStyleName("queryProviderElementLabel"); + groupByLabel.addStyleName(GroupingProviderLabelStyle); groupByLabel.addStyleName("emphasizedLabel"); mainPanel.add(groupByLabel); @@ -161,11 +164,17 @@ public class MultiDimensionalGroupingProvider extends AbstractDataMiningComponen } private void clear() { - mainPanel.clear(); - dimensionToGroupByBoxes.clear(); + clearDimensionBoxes(); availableDimensions.clear(); } + private void clearDimensionBoxes() { + for (ValueListBox dimensionBox : dimensionToGroupByBoxes) { + dimensionBox.removeFromParent(); + } + dimensionToGroupByBoxes.clear(); + } + @Override public Iterable getAvailableDimensions() { return Collections.unmodifiableList(availableDimensions); @@ -208,7 +217,7 @@ public class MultiDimensionalGroupingProvider extends AbstractDataMiningComponen } }); - dimensionToGroupByBox.addStyleName(GROUPING_PROVIDER_ELEMENT_STYLE); + dimensionToGroupByBox.addStyleName(GroupingProviderElementStyle); return dimensionToGroupByBox; } @@ -252,7 +261,7 @@ public class MultiDimensionalGroupingProvider extends AbstractDataMiningComponen final ValueListBox dimensionListBox = i.next(); if (Util.equalsWithNull(dimension, dimensionListBox.getValue())) { i.remove(); - mainPanel.remove(dimensionListBox); + dimensionListBox.removeFromParent(); updateAcceptableValues(); notifyListeners(); } @@ -265,8 +274,7 @@ public class MultiDimensionalGroupingProvider extends AbstractDataMiningComponen dimensionsToSelect = queryDefinition.getDimensionsToGroupBy(); selectionCallback = callback; if (!isAwaitingReload && !isUpdating && currentRetrieverChainDefinition.equals(newRetrieverChain)) { - mainPanel.clear(); - dimensionToGroupByBoxes.clear(); + clearDimensionBoxes(); ValueListBox firstDimensionToGroupByBox = createDimensionToGroupByBox(); addDimensionToGroupByBoxAndUpdateAcceptableValues(firstDimensionToGroupByBox); diff --git a/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/QueryDefinitionProviderWithControls.java b/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/QueryDefinitionProviderWithControls.java index 35d8f64108b..5297f8f808e 100644 --- a/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/QueryDefinitionProviderWithControls.java +++ b/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/QueryDefinitionProviderWithControls.java @@ -69,8 +69,10 @@ import com.sap.sse.gwt.client.shared.settings.ComponentContext; public class QueryDefinitionProviderWithControls extends AbstractQueryDefinitionProvider implements WithControls { - private static final double HeaderPanelHeight = 45; - private static final double FooterPanelHeight = 50; + private static final double HeaderPanelHeight = 41; + private static final double InitialQueryDefinitionViewerWidth = 600; + private static final double InitialStatisticProviderWidth = 800; + private static final double FooterPanelHeight = 60; private static final int SplitterSize = 10; private final Panel mainPanel; @@ -103,7 +105,7 @@ public class QueryDefinitionProviderWithControls extends AbstractQueryDefinition providerListener = new ProviderListener(); // Creating the header panel, that contains the retriever chain provider and the controls controlsPanel = new FlowPanel(); - controlsPanel.addStyleName("definitionProviderControls"); + controlsPanel.addStyleName("dataMiningMarginBase"); this.settingsControl = settingsControl; addControl(this.settingsControl.getEntryWidget()); @@ -144,7 +146,8 @@ public class QueryDefinitionProviderWithControls extends AbstractQueryDefinition statisticProvider = new SuggestBoxStatisticProvider(parent, context, dataMiningService, errorReporter, settingsControl, settingsManager); - statisticProvider.getEntryWidget().addStyleName("statisticProvider"); + Widget statisticProviderWidget = statisticProvider.getEntryWidget(); + statisticProviderWidget.addStyleName("dataMiningMarginBase"); statisticProvider.addStatisticChangedListener(providerListener); groupingProvider = new MultiDimensionalGroupingProvider(parent, context, dataMiningService, @@ -159,7 +162,7 @@ public class QueryDefinitionProviderWithControls extends AbstractQueryDefinition filterSplitPanel = new SplitLayoutPanel(SplitterSize); filterSplitPanel.addSouth(groupingProvider.getEntryWidget(), FooterPanelHeight); - filterSplitPanel.addEast(queryDefinitionViewer.getEntryWidget(), 600); + filterSplitPanel.addEast(queryDefinitionViewer.getEntryWidget(), InitialQueryDefinitionViewerWidth); filterSplitPanel.setWidgetHidden(queryDefinitionViewer.getEntryWidget(), true); filterSplitPanel.add(filterSelectionProvider.getEntryWidget()); @@ -172,8 +175,7 @@ public class QueryDefinitionProviderWithControls extends AbstractQueryDefinition applyQueryBusyIndicator.add(labeledBusyIndicator); SplitLayoutPanel headerPanel = new SplitLayoutPanel(SplitterSize); - headerPanel.addStyleName("dataMiningMarginBase"); - headerPanel.addWest(statisticProvider.getEntryWidget(), 800); + headerPanel.addWest(statisticProviderWidget, InitialStatisticProviderWidth); headerPanel.add(controlsPanel); DockLayoutPanel contentPanel = new DockLayoutPanel(Unit.PX); diff --git a/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/SuggestBoxStatisticProvider.java b/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/SuggestBoxStatisticProvider.java index c31ed745f36..439fa798125 100644 --- a/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/SuggestBoxStatisticProvider.java +++ b/java/com.sap.sse.datamining.ui/src/main/java/com/sap/sse/datamining/ui/client/selection/SuggestBoxStatisticProvider.java @@ -21,6 +21,7 @@ import com.google.gwt.user.client.ui.FlowPanel; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.MenuItem; import com.google.gwt.user.client.ui.PopupPanel; +import com.google.gwt.user.client.ui.SimplePanel; import com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay; import com.google.gwt.user.client.ui.ValueListBox; import com.google.gwt.user.client.ui.Widget; @@ -62,7 +63,10 @@ import com.sap.sse.gwt.client.suggestion.CustomSuggestBox; public class SuggestBoxStatisticProvider extends AbstractDataMiningComponent implements StatisticProvider { - private static final String STATISTIC_PROVIDER_ELEMENT_STYLE = "statisticProviderElement"; + private static final String StatisticProviderStyle = "statisticProvider"; + private static final String StatisticProviderLabelStyle = "statisticProviderLabel"; + private static final String StatisticProviderElementStyle = "statisticProviderElement"; + private static final String SuggestBoxContainerStyle = "statisticSuggestBoxContainer"; private final DataMiningServiceAsync dataMiningService; private final ErrorReporter errorReporter; @@ -103,9 +107,9 @@ public class SuggestBoxStatisticProvider extends AbstractDataMiningComponent(); mainPanel = new FlowPanel(); + mainPanel.addStyleName(StatisticProviderStyle); Label label = new Label(getDataMiningStringMessages().calculateThe()); - label.addStyleName(STATISTIC_PROVIDER_ELEMENT_STYLE); - label.addStyleName("queryProviderElementLabel"); + label.addStyleName(StatisticProviderLabelStyle); label.addStyleName("emphasizedLabel"); mainPanel.add(label); @@ -130,13 +134,17 @@ public class SuggestBoxStatisticProvider extends AbstractDataMiningComponent(); aggregatorListBox = createAggregatorListBox(); - aggregatorListBox.addStyleName(STATISTIC_PROVIDER_ELEMENT_STYLE); + aggregatorListBox.addStyleName(StatisticProviderElementStyle); mainPanel.add(aggregatorListBox); }