seperate help for log and linear scale

This commit is contained in:
jmillman 2016-05-12 17:56:15 -04:00
parent c008a1387f
commit d0423f7870
2 changed files with 67 additions and 25 deletions

View File

@ -39,6 +39,7 @@ import javafx.scene.control.Label;
import javafx.scene.control.RadioButton; import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup; import javafx.scene.control.ToggleGroup;
import javafx.scene.control.Tooltip; import javafx.scene.control.Tooltip;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView; import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane; import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox; import javafx.scene.layout.HBox;
@ -236,7 +237,9 @@ public class CountsViewPane extends AbstractVisualizationPane<String, Number, No
private Label scaleLabel; private Label scaleLabel;
@FXML @FXML
private ImageView helpImageView; private ImageView logImageView;
@FXML
private ImageView linearImageView;
@FXML @FXML
@NbBundle.Messages({ @NbBundle.Messages({
@ -244,9 +247,10 @@ public class CountsViewPane extends AbstractVisualizationPane<String, Number, No
"CountsViewPane.scaleLabel.text=Scale:", "CountsViewPane.scaleLabel.text=Scale:",
"CountsViewPane.scaleHelp.label.text=Scales: ", "CountsViewPane.scaleHelp.label.text=Scales: ",
"CountsViewPane.linearRadio.text=Linear", "CountsViewPane.linearRadio.text=Linear",
"CountsViewPane.scaleHelp=The linear scale is good for many use cases. When this scale is selected, the height of the bars represents the counts in a linear, one-to-one fashion, and the y-axis is labeled with values. When the range of values is very large, time periods with low counts may have a bar that is too small to see. To help the user detect this, the labels for date ranges with events are bold. To see bars that are too small, there are three options: adjust the window size so that the visualization area has more vertical space, adjust the time range shown so that time periods with larger bars are excluded, or adjust the scale setting to logarithmic.\n\nThe logarithmic scale represents the number of events in a non-linear way that compresses the difference between large and small numbers. Note that even with the logarithmic scale, an extremely large difference in counts may still produce bars too small to see. In this case the only option may be to filter events to reduce the difference in counts. NOTE: Because the logarithmic scale is applied to each event type separately, the maening of the height of the combined bar is not intuitive, and to emphasize this, no labels are shown on the y-axis with the logarithmic scale. The logarithmic scale should be used to quickly compare the counts ", "CountsViewPane.scaleHelpLinear=The linear scale is good for many use cases. When this scale is selected, the height of the bars represents the counts in a linear, one-to-one fashion, and the y-axis is labeled with values. When the range of values is very large, time periods with low counts may have a bar that is too small to see. To help the user detect this, the labels for date ranges with events are bold. To see bars that are too small, there are three options: adjust the window size so that the visualization area has more vertical space, adjust the time range shown so that time periods with larger bars are excluded, or adjust the scale setting to logarithmic.",
"CountsViewPane.scaleHelp2=across time within a type, or across types for one time period, but not both.", "CountsViewPane.scaleHelpLog=The logarithmic scale represents the number of events in a non-linear way that compresses the difference between large and small numbers. Note that even with the logarithmic scale, an extremely large difference in counts may still produce bars too small to see. In this case the only option may be to filter events to reduce the difference in counts. NOTE: Because the logarithmic scale is applied to each event type separately, the maening of the height of the combined bar is not intuitive, and to emphasize this, no labels are shown on the y-axis with the logarithmic scale. The logarithmic scale should be used to quickly compare the counts ",
"CountsViewPane.scaleHelp3= The actual counts (available in tooltips or the result viewer) should be used for absolute comparisons. Use the logarithmic scale with care."}) "CountsViewPane.scaleHelpLog2=across time within a type, or across types for one time period, but not both.",
"CountsViewPane.scaleHelpLog3= The actual counts (available in tooltips or the result viewer) should be used for absolute comparisons. Use the logarithmic scale with care."})
void initialize() { void initialize() {
assert logRadio != null : "fx:id=\"logRadio\" was not injected: check your FXML file 'CountsViewSettingsPane.fxml'."; // NON-NLS assert logRadio != null : "fx:id=\"logRadio\" was not injected: check your FXML file 'CountsViewSettingsPane.fxml'."; // NON-NLS
assert linearRadio != null : "fx:id=\"linearRadio\" was not injected: check your FXML file 'CountsViewSettingsPane.fxml'."; // NON-NLS assert linearRadio != null : "fx:id=\"linearRadio\" was not injected: check your FXML file 'CountsViewSettingsPane.fxml'."; // NON-NLS
@ -263,25 +267,28 @@ public class CountsViewPane extends AbstractVisualizationPane<String, Number, No
}); });
logRadio.setSelected(true); logRadio.setSelected(true);
//make a popup hrlp window with descriptions of the scales. //make a popup help "window" with a description of the log scale.
helpImageView.setCursor(Cursor.HAND); logImageView.setCursor(Cursor.HAND);
helpImageView.setOnMouseClicked(clicked -> { logImageView.setOnMouseClicked(clicked -> {
Text text = new Text(Bundle.CountsViewPane_scaleHelp()); Text text = new Text(Bundle.CountsViewPane_scaleHelpLog());
Text text2 = new Text(Bundle.CountsViewPane_scaleHelp2()); Text text2 = new Text(Bundle.CountsViewPane_scaleHelpLog2());
Font baseFont = text.getFont(); Font baseFont = text.getFont();
text2.setFont(Font.font(baseFont.getFamily(), FontWeight.BOLD, FontPosture.ITALIC, baseFont.getSize())); text2.setFont(Font.font(baseFont.getFamily(), FontWeight.BOLD, FontPosture.ITALIC, baseFont.getSize()));
Text text3 = new Text(Bundle.CountsViewPane_scaleHelp3()); Text text3 = new Text(Bundle.CountsViewPane_scaleHelpLog3());
showPopoverHelp(logImageView,
Bundle.CountsViewPane_logRadio_text(),
logImageView.getImage(),
new TextFlow(text, text2, text3));
});
Pane borderPane = new BorderPane(null, null, new ImageView(helpImageView.getImage()), //make a popup help "window" with a description of the linear scale.
new TextFlow(text, text2, text3), linearImageView.setCursor(Cursor.HAND);
new Label(Bundle.CountsViewPane_scaleHelp_label_text())); linearImageView.setOnMouseClicked(clicked -> {
borderPane.setPadding(new Insets(10)); Text text = new Text(Bundle.CountsViewPane_scaleHelpLinear());
borderPane.setPrefWidth(500); text.setWrappingWidth(480); //This is a hack to fix the layout.
showPopoverHelp(linearImageView,
PopOver popOver = new PopOver(borderPane); Bundle.CountsViewPane_linearRadio_text(),
popOver.setDetachable(false); linearImageView.getImage(), text);
popOver.setArrowLocation(PopOver.ArrowLocation.TOP_CENTER);
popOver.show(helpImageView);
}); });
} }
@ -293,6 +300,33 @@ public class CountsViewPane extends AbstractVisualizationPane<String, Number, No
} }
} }
/**
*
* Static utility to to show a Popover with the given Node as owner.
*
* @param owner The owner of the Popover
* @param headerText A short String that will be shown in the top-left
* corner of the Popover.
* @param headerImage An Image that will be shown at the top-right corner of
* the Popover.
* @param content The main content of the Popover, shown in the
* bottom-center
*
*/
private static void showPopoverHelp(final Node owner, final String headerText, final Image headerImage, final Node content) {
Pane borderPane = new BorderPane(null, null, new ImageView(headerImage),
content,
new Label(headerText));
borderPane.setPadding(new Insets(10));
borderPane.setPrefWidth(500);
PopOver popOver = new PopOver(borderPane);
popOver.setDetachable(false);
popOver.setArrowLocation(PopOver.ArrowLocation.TOP_CENTER);
popOver.show(owner);
}
/** /**
* Task that clears the Chart, fetches new data according to the current * Task that clears the Chart, fetches new data according to the current
* ZoomParams and loads it into the Chart * ZoomParams and loads it into the Chart

View File

@ -18,15 +18,23 @@
</HBox.margin> </HBox.margin>
</Label> </Label>
<RadioButton fx:id="logRadio" mnemonicParsing="false" selected="true" styleClass="toggle-butto" text="Logarithmic"> <RadioButton fx:id="logRadio" contentDisplay="RIGHT" mnemonicParsing="false" selected="true" styleClass="toggle-butto" text="Logarithmic">
<toggleGroup> <toggleGroup>
<ToggleGroup fx:id="scaleGroup" /> <ToggleGroup fx:id="scaleGroup" />
</toggleGroup> </toggleGroup>
</RadioButton> </RadioButton>
<RadioButton fx:id="linearRadio" mnemonicParsing="false" text="Linear" toggleGroup="$scaleGroup" />
<ImageView fx:id="helpImageView" fitHeight="16.0" fitWidth="16.0" pickOnBounds="true" preserveRatio="true"> <ImageView fx:id="logImageView" fitHeight="16.0" fitWidth="16.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../../images/question-frame.png" />
</image>
<HBox.margin>
<Insets right="5.0" />
</HBox.margin>
</ImageView>
<RadioButton fx:id="linearRadio" contentDisplay="RIGHT" mnemonicParsing="false" text="Linear" toggleGroup="$scaleGroup" />
<ImageView fx:id="linearImageView" fitHeight="16.0" fitWidth="16.0" pickOnBounds="true" preserveRatio="true">
<image> <image>
<Image url="@../../images/question-frame.png" /> <Image url="@../../images/question-frame.png" />
</image> </image>