XY Charts, Timegraph: Display failed message

Currently, if the analysis fails (i.e. outputStatus is FAILED) then the
analysis's view panel never updates and shows "Analysis running" forever
even though the server has responded.

Show a message to tell the user the analysis has failed.

Add analysisFailedMessage method to abstract-output-component rather
than abstract-tree-output-component so that it can be used by all output
components (ex. TableOutputComponent).

Add a separate CSS class for the analysis failed message (instead of
reusing the styling used for the "no results" message) because the
failed message is displayed in the main render area (rather than the
chart area) so it needs different styling.

Contributes towards fixing #460

Signed-off-by: Erica Bugden <erica.bugden@gmail.com>

packages/react-components/src/components/abstract-output-component.tsx

@@ -109,4 +109,12 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
     }
 
     abstract renderMainArea(): React.ReactNode;
+
+    protected analysisFailedMessage(): React.ReactFragment {
+        return <React.Fragment>
+            <div className='analysis-failed-message'>
+                Trace analysis failed.
+            </div>
+        </React.Fragment>;
+    }
 }

packages/react-components/src/components/abstract-tree-output-component.tsx

@@ -4,6 +4,10 @@ import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/respon
 
 export abstract class AbstractTreeOutputComponent<P extends AbstractOutputProps, S extends AbstractOutputState> extends AbstractOutputComponent<P, S> {
     renderMainArea(): React.ReactNode {
+        if (this.state.outputStatus === ResponseStatus.FAILED) {
+            return this.analysisFailedMessage();
+        }
+
         // Make tree thiner when chart has a y-axis
         const yAxisBuffer = this.props.outputDescriptor.type === 'TREE_TIME_XY' ? this.props.style.yAxisWidth: 0;
         const treeWidth = this.getMainAreaWidth() - this.props.style.chartWidth - yAxisBuffer;

packages/react-components/style/output-components-style.css

@@ -102,6 +102,14 @@ canvas {
     align-self: center;
 }
 
+.analysis-failed-message {
+    font-size: 20px;
+    margin-top: -20px; /* So text is vertically aligned relative to its center rather than its top */
+    transform: translate(0, 50%);
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .table-tree {
     display: grid;
     border-collapse: collapse;