Button to toggle visibility of explanation texts

frontend/styles/view/type-inference.css

@@ -12,7 +12,6 @@
 #type-inference-view #content {
 	display: flex;
 	flex-direction: row;
-	column-gap: 5mm;
 	width: 100%;
 	height: 100%;
 	padding: 10px 10px 0;
@@ -49,11 +48,10 @@ tc-explanation {
 	overflow-y: auto;
 }
 
-#rules-button {
+.hovering-button {
 	height: 9em;
 	position: fixed;
 	top: 50%;
-	left: 1em;
 	transform: translateY(-50%);
 	writing-mode: vertical-rl;
 	z-index: 1;
@@ -61,6 +59,14 @@ tc-explanation {
 	background-color: rgba(255,255,255,0.8);
 }
 
+#rules-button {
+	left: 1em;
+}
+
+#explanation-text-button {
+	right: 1em;
+}
+
 #type-inference-view #rules {
 	width: 28em;
 	flex-shrink: 0;

src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java

@@ -54,7 +54,9 @@ public class TypeInferenceView extends VerticalLayout
     private static final String CONTENT_ID3 = "content3";
     private static final String CONTENT_ID4 = "content4";
     private static final String RULES_ID = "rules";
+    private static final String HOVER_BUTTON_CLASS = "hovering-button";
     private static final String RULES_BUTTON_ID = "rules-button";
+    private static final String EXPLANATION_TEXT_BUTTON_ID = "explanation-text-button";
     private static final String H_LINE_ID = "horizontalLine";
     private static final String FOOTER_ID = "footer";
 
@@ -112,10 +114,15 @@ public class TypeInferenceView extends VerticalLayout
     }
 
     private boolean rulesVisible = false;
+    private boolean explanationTextsVisible = true;
 
     private void setContent() {
         Button button = new Button(getTranslation("root.inferenceRules"));
+        button.setClassName(HOVER_BUTTON_CLASS);
         button.setId(RULES_BUTTON_ID);
+        Button button2 = new Button(getTranslation("root.explanationTexts"));
+        button2.setClassName(HOVER_BUTTON_CLASS);
+        button2.setId(EXPLANATION_TEXT_BUTTON_ID);
 
         Div horizontalContainer = new Div();
         horizontalContainer.setId(CONTENT_ID4);
@@ -131,7 +138,7 @@ public class TypeInferenceView extends VerticalLayout
 
         Div treeDiv = new Div();
         treeDiv.setId(CONTENT_ID3);
-        treeDiv.add(tree, button);
+        treeDiv.add(tree, button, button2);
         container.add(unification, treeDiv);
         horizontalContainer.add(container, explanation);
 
@@ -143,6 +150,10 @@ public class TypeInferenceView extends VerticalLayout
             rulesVisible = !rulesVisible;
             rules.getElement().setVisible(rulesVisible);
         });
+        button2.addClickListener(e -> {
+            explanationTextsVisible = !explanationTextsVisible;
+            explanation.getElement().setVisible(explanationTextsVisible);
+        });
 
         content.add(rules, horizontalContainer);
     }

src/main/resources/language/translation_de.properties

@@ -197,6 +197,7 @@ share.latexTree.label=LaTeX-Code (vollständiger Typherleitungsbaum)
 share.packagesUnification.label=Pakete (Unifikation/MGU)
 share.latexUnification.label=LaTeX-Code (aktueller Schritt in Unifikation/MGU)
 
+root.explanationTexts=Erläuterungen
 explanationTree.initial=Zu Beginn der Typinferenz wird dem eingegebenen Term %0% die Typvariable %1% zugewiesen. \
 In den folgenden Schritten wird der Typ von %1% sukzessive bestimmt.
 explanationTree.varStep=Der aktuelle Term %0% ist eine Variable. Daher wird in diesem Schritt die Var-Regel auf die \

src/main/resources/language/translation_en.properties

@@ -184,6 +184,7 @@ share.latexTree.label=LaTeX code (whole inference tree)
 share.packagesUnification.label=Packages (unification/MGU)
 share.latexUnification.label=LaTeX code (current step in unifcation/MGU)
 
+root.explanationTexts=Algorithm steps
 explanationTree.initial=At the beginning of the algorithm the type variable %1% is assigned to the input %0%. \
  In the following steps the type of %1% will be determined gradually.
 explanationTree.varStep=The current expression %0% is a variable. Therefore the var rule is applied to the variable \