hide help page as long as it is not finished

pdb-js/src/app/app.component.html

@@ -13,7 +13,9 @@
   <a href="/" title="open main page"><img src="assets/img/home.svg" class="icon-small" aria-hidden="false" aria-label="go to main page" /></a> 
   <a href="/vis" title="open visualization page"><img src="assets/img/scatter-chart2.svg" class="icon-small" aria-hidden="false" aria-label="go to visualization page" /></a>
   <!--a href="/upload" title="upload data"><img src="assets/img/upload.svg" class="icon-small" aria-hidden="false" aria-label="upload data" /></a-->
+  <!--
   <a href="/help" title="open help page" class="right"><img src="assets/img/question-mark-round.svg" class="icon-small" aria-hidden="false" aria-label="help" /></a>
+  -->
 </div>
 
 <router-outlet></router-outlet>

pdb-js/src/app/app.component.scss

@@ -5,7 +5,7 @@
   width: 100%;
   padding-bottom: 0.5em;
   border-bottom: solid 1px black;
-  background-color: #ccc;
+  background-color: #eee;
 }
   
 .right{

pdb-js/src/app/help-page/help-page.component.html

@@ -11,38 +11,41 @@
 This page describes how to use this tool.
 </p>
 
+<h2>Use Cases</h2>
+This tool was designed to show raw performance data instead of aggregations or statistics. 
+The scatter plot is the main visualization style. 
+
+
 <h2>Why not use one of the existing monitoring tools?</h2>
 <p>
 There are many tools out there that do monitoring in one way or the other. There are complete closed source solutions like 
 <a href="https://newrelic.com" target="_blank" rel="nofollow" class="external-link">New Relic</a>, 
 <a href="https://www.splunk.com" target="_blank" rel="nofollow" class="external-link">Splunk</a> 
 and <a href="https://www.appdynamics.com/" target="_blank" rel="nofollow" class="external-link">App Dynamics</a>.
-They bring everything you need, a tool to collect logs or metrics, a database, a UI with dashboards and alerting.
+They bring everything you need, a tool to collect logs or metrics, a database, a UI with dashboards and alerting. 
-</p>
-<p> 
 The OSS community likes to break them down into separate tools. 
 For example the <a href="https://www.elastic.co/products/elastic-stack" target="_blank" rel="nofollow" class="external-link">ELK</a>-stack
 consists of <a href="https://www.elastic.co/products/elasticsearch" target="_blank" rel="nofollow" class="external-link">Elasticsearch</a>
 as database and <a href="https://www.elastic.co/products/kibana" target="_blank" rel="nofollow" class="external-link">Kibana</a> 
 as the UI. It is usually combined with <a href="https://www.elastic.co/products/logstash" target="_blank" rel="nofollow" class="external-link">Logstash</a> 
 or <a href="https://www.elastic.co/de/beats/filebeat" target="_blank" rel="nofollow" class="external-link">Filebeat</a> 
-for logfile collection.</p>
+for logfile collection.
-<p>
 Another popular UI is <a href="https://grafana.com/" target="_blank" rel="nofollow" class="external-link">Grafana</a> 
 which can be combined with
 <a href="https://grafana.com/oss/loki/" target="_blank" rel="nofollow" class="external-link">Loki</a>,
 <a href="https://prometheus.io/" target="_blank" rel="nofollow" class="external-link">Prometheus</a>,
 <a href="https://graphiteapp.org/" target="_blank" rel="nofollow" class="external-link">Graphite</a> or
 <a href="https://grafana.com/oss/metrictank/" target="_blank" rel="nofollow" class="external-link">Metrictank</a> (which is an engine for Graphite).
-</p>
+Relatively new and popular for its good database is the duo <a href="https://www.influxdata.com/products/influxdb-overview/" target="_blank" rel="nofollow" class="external-link">InfluxDB</a> 
-<p>
-Newer and popular for its good database is the duo <a href="https://www.influxdata.com/products/influxdb-overview/" target="_blank" rel="nofollow" class="external-link">InfluxDB</a> 
 + <a href="https://www.influxdata.com/time-series-platform/chronograf/" target="_blank" rel="nofollow" class="external-link">Chronograf</a>. 
 </p>
 <p>
 Apart from the general purpose solutions there are also more specialized tools. For example 
 <a href="https://www.nagios.org/" target="_blank" rel="nofollow" class="external-link">Nagios</a>/<a href="https://icinga.com/" target="_blank" rel="nofollow" class="external-link">Icinga</a>
-which specializes in hardware monitoring.
+which specializes in hardware monitoring. <a href="https://www.solarwinds.com/" target="_blank" rel="nofollow" class="external-link">Solarwinds</a> 
+is another tool more suited for hardware monitoring.
+</p>
+<p>
 </p>
 <br/>
 <br/><br/>
@@ -76,5 +79,5 @@ which specializes in hardware monitoring.
 and many more. None of them provides the visualizations we had in mind. We wanted to plot each value of the time series data individually, so that we can identify the 
 response times of a single request. But tools like Splunk, Kibana, Chronograf or Grafana only plot aggregated data (average, min/max, percentiles). 
 <p>
-
+<!-- -->
 

pdb-js/src/styles.scss

@@ -31,6 +31,17 @@ $background-color: #CBD7F4;
   box-sizing: border-box;
 }
 
+h1 {
+  font-size: 2rem;
+  margin-block-start: 0.67rem;
+  margin-block-end: 0.67rem;
+}
+h2 {
+  font-size: 1.5rem;
+  margin-block-start: 0.83rem;
+  margin-block-end: 0.83rem;
+}
+
 .icon-inline {
   width: 1em;
   height: 1em;