wbrawner/Everest
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Heavily optimized Visualizer by switching from Accordions to TreeView

Browse source
This commit is contained in:
Rohit Awate 2018-04-28 23:54:09 +05:30
parent b81b67cc6f
commit c0e4d3f72b
No known key found for this signature in database
GPG key ID: 9C04E52F6B625A85
2 changed files with 61 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/main/java/com/rohitawate/everest/controllers/DashboardController.java
View file

@ -38,7 +38,6 @@ import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.CacheHint;
import javafx.scene.Parent;
import javafx.scene.control.*;
import javafx.scene.input.KeyCode;
@ -92,7 +91,7 @@ public class DashboardController implements Initializable {
private HeaderTabController headerTabController;
private BodyTabController bodyTabController;
private IntegerProperty paramsCountProperty;
private Accordion accordion;
private TreeView<HBox> treeView;
private GETRequest getRequest;
private DataDispatchRequest dataRequest;
@ -355,9 +354,10 @@ public class DashboardController implements Initializable {
responseType.setText("JSON");
JsonNode node = EverestUtilities.mapper.readTree(responseBody);
responseArea.setText(EverestUtilities.mapper.writeValueAsString(node));
accordion.getPanes().clear();
visualizerTab.setDisable(false);
populateVisualizer(accordion, "root", node);
TreeItem<HBox> root = new TreeItem<>();
treeView.setRoot(root);
populateVisualizer(root, "root", node);
break;
case "application/xml":
responseType.setText("XML");
@ -385,18 +385,19 @@ public class DashboardController implements Initializable {
}
private void setupVisualizer() {
accordion = new Accordion();
accordion.setCache(true);
accordion.setCacheHint(CacheHint.SPEED);
visualizer.setContent(accordion);
treeView = new TreeView<>();
visualizer.setContent(treeView);
}
private void populateVisualizer(Accordion rootAccordion, String rootName, JsonNode root) {
private void populateVisualizer(TreeItem<HBox> rootItem, String rootName, JsonNode root) {
Label rootLabel = new Label(rootName);
rootLabel.getStyleClass().addAll("visualizerRootLabel", "visualizerLabel");
rootItem.setValue(new HBox(rootLabel));
JsonNode currentNode;
VBox container = new VBox();
container.setStyle("-fx-padding: 3px 30px");
Label valueLabel;
TitledPane pane = new TitledPane(rootName, container);
HBox valueContainer;
List<TreeItem<HBox>> items = new LinkedList<>();
Tooltip valueTooltip;
if (root.isArray()) {
@ -407,23 +408,22 @@ public class DashboardController implements Initializable {
if (currentNode.isValueNode()) {
valueLabel = new Label(currentNode.toString());
valueLabel.getStyleClass().add("visualizerValueLabel");
valueLabel.getStyleClass().addAll("visualizerValueLabel", "visualizerLabel");
valueLabel.setWrapText(true);
valueTooltip = new Tooltip(currentNode.toString());
valueLabel.setTooltip(valueTooltip);
container.getChildren().add(valueLabel);
valueContainer = new HBox(valueLabel);
items.add(new TreeItem<>(valueContainer));
} else if (currentNode.isObject()) {
Accordion arrayAccordion = new Accordion();
container.getChildren().add(arrayAccordion);
populateVisualizer(arrayAccordion, "", currentNode);
TreeItem<HBox> newRoot = new TreeItem<>();
items.add(newRoot);
populateVisualizer(newRoot, "", currentNode);
}
}
rootAccordion.getPanes().add(pane);
} else {
Iterator<Entry<String, JsonNode>> iterator = root.fields();
Entry<String, JsonNode> currentEntry;
HBox valueContainer;
Label keyLabel;
Tooltip keyTooltip;
@ -433,32 +433,30 @@ public class DashboardController implements Initializable {
if (currentNode.isValueNode()) {
keyLabel = new Label(currentEntry.getKey() + ": ");
keyLabel.setStyle("-fx-font-weight: bold");
keyLabel.getStyleClass().add("visualizerKeyLabel");
keyLabel.getStyleClass().addAll("visualizerKeyLabel", "visualizerLabel");
keyTooltip = new Tooltip(currentEntry.getKey());
keyLabel.setTooltip(keyTooltip);
valueLabel = new Label(currentNode.toString());
valueLabel.getStyleClass().add("visualizerValueLabel");
valueLabel.getStyleClass().addAll("visualizerValueLabel", "visualizerLabel");
valueLabel.setWrapText(true);
valueTooltip = new Tooltip(currentNode.toString());
valueLabel.setTooltip(valueTooltip);
valueContainer = new HBox(keyLabel, valueLabel);
container.getChildren().add(valueContainer);
items.add(new TreeItem<>(valueContainer));
} else if (currentNode.isArray() || currentNode.isObject()) {
Accordion arrayAccordion = new Accordion();
container.getChildren().add(arrayAccordion);
populateVisualizer(arrayAccordion, currentEntry.getKey(), currentNode);
TreeItem<HBox> newRoot = new TreeItem<>();
items.add(newRoot);
populateVisualizer(newRoot, currentEntry.getKey(), currentNode);
}
}
rootAccordion.getPanes().add(pane);
}
if (!rootName.equals("root")) {
pane.getStyleClass().add("nonRootTitledPane"); // Special CSS class to set padding for non-root panes only
} else {
rootAccordion.setExpandedPane(pane);
rootItem.getChildren().addAll(items);
if (rootName.equals("root")) {
rootItem.setExpanded(true);
}
}

52
src/main/resources/css/Adreana.css
View file

@ -312,41 +312,53 @@
-fx-background-color: #2a2a2a;
}
.nonRootTitledPane {
-fx-padding: 3px 0px;
}
.titled-pane .title {
.visualizerLabel {
-fx-font-family: "Liberation Mono", monospace;
-fx-background-color: #404040;
}
.titled-pane .content {
-fx-background-color: #282828;
-fx-border-width: 0px;
}
.titled-pane .content {
-fx-font-family: "Liberation Mono", monospace;
-fx-padding: 3px 0px;
.visualizerRootLabel {
-fx-font-size: 19px;
-fx-text-fill: white;
-fx-font-weight: bold;
}
.visualizerKeyLabel {
-fx-font-size: 18px;
-fx-text-fill: #bababa;
-fx-text-alignment: left;
-fx-font-weight: bold;
}
.visualizerValueLabel {
-fx-font-size: 18px;
-fx-text-fill: #959595;
-fx-text-alignment: left;
}
.titled-pane .title .text,
.titled-pane .title .arrow-button .arrow {
-fx-background-color: #dadada;
-fx-fill: #dadada;
/* Visualizer tree */
.tree-view {
-fx-background-color: #353535;
-fx-padding: 0px;
}
.tree-cell .tree-disclosure-node .arrow {
-fx-background-color: orangered;
}
.tree-cell {
-fx-background-color: #282828;
-fx-border-width: 0px;
}
.tree-cell:selected,
.tree-cell:expanded,
.tree-cell:focused {
-fx-background-color: #454545;
}
.tree-view .scroll-bar:horizontal .increment-arrow,
.tree-view .scroll-bar:horizontal .decrement-arrow,
.tree-view .scroll-bar:horizontal .increment-button,
.tree-view .scroll-bar:horizontal .decrement-button {
-fx-padding: 0;
}
/* SnackBar */