Improvements in the interface (#92)

fleur101 · web-flow · commit f86f501417ba · 2021-01-26T10:41:49.000+01:00
* Make improvements in the interface

* Fix LimeResult reference

* Split line and rename test file

* Revert string changes
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/__tests__/components/explanation/LimeResult.test.js b/src/__tests__/components/explanation/LimeResult.test.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import PostHocExplanation from '../../../components/explanation/post_hoc';
+import LimeResult from '../../../components/explanation/LimeResult';
 import HorizontalBarChartCard from '../../../components/chart/HorizontalBarChartCard';
 import {parseLimeResult} from '../../../util/dataReducers';
 import {limeList} from '../../../../stories/Explanation';
 
 describe('Lime result', () => {
     it('renders without data', () => {
-        const element = shallow(<PostHocExplanation
+        const element = shallow(<LimeResult
                                     jobs={[]}
                                     isLimeValuesLoaded={true}
                                     traceId={1}
@@ -17,7 +17,7 @@ describe('Lime result', () => {
     });
 
     it('renders with data', () => {
-        const element = shallow(<PostHocExplanation
+        const element = shallow(<LimeResult
                                     jobs={[]}
                                     isLimeValuesLoaded={true}
                                     traceId={1}
diff --git a/src/components/WalkThrough.js b/src/components/WalkThrough.js
@@ -32,19 +32,19 @@ class WalkThrough extends PureComponent {
                 </div>
             </CardTitle>
             <CardText>
-                <p>Nirdizati Research is a <span onDoubleClick={this.otherClick.bind(this)}>tool</span> that aims at
-                    supporting
+                <p>Nirdizati Research is a <span onDoubleClick={this.otherClick.bind(this)}>tool</span> that aims to
+                    support
                     expert users in finding the best predictive models suitable for specific datasets and prediction
                     problems. The
                     predictive models can then be used to provide predictions at runtime on incomplete traces or streams
                     of
                     events.</p>
 
                 <p>The tool offers a wide selection of features ranging from event log preprocessing options to
-                    hyperparmeter
+                    hyperparameter
                     optimization as well as runtime feedback to the user.</p>
 
-                <p>The standard procedure to be followed to use the application is summarized in the steps below.</p>
+                <p>The standard procedure to use the application is summarized in the steps below.</p>
                 {rotate(this.state.other)}
                 <div className="md-grid">
                     <List className="md-cell md-cell--12 md-cell--8-tablet">
@@ -125,7 +125,7 @@ class WalkThrough extends PureComponent {
                             button={<Button flat primary href={'/#/explanation'}
                                             iconEl={<FontIcon>work</FontIcon>}>Explanation</Button>}
                              title="Explanation"
-                             text="Explanation"
+                             text="See explanations for model predictions"
                              threeLines
                         /> }
                     </List>
diff --git a/src/components/chart/HorizontalBarChartCard.js b/src/components/chart/HorizontalBarChartCard.js
@@ -47,6 +47,9 @@ class HorizontalBarChartCard extends React.Component {
         xaxis: {
           min: -1,
           max: 1,
+          title: {
+            text: 'Correlation'
+          },
           labels: {
             show: true
           },
diff --git a/src/components/chart/PredictionLineChart.js b/src/components/chart/PredictionLineChart.js
@@ -36,7 +36,7 @@ class PredictionLineChart extends React.Component {
               max: this.props.data.length +1,
               tickAmount: this.props.data.length +1,
               title: {
-                text: 'Feature'
+                text: 'Prefix length'
               }
             },
             yaxis: {
diff --git a/src/components/chart/ScatterChartCard.js b/src/components/chart/ScatterChartCard.js
@@ -40,7 +40,7 @@ const ScatterChartCard = props => {
             max: props.data.length + 1,
             tickAmount: props.data.length + 1,
             title: {
-               text: 'Time',
+               text: 'Prefix length',
              },
         }
       }
diff --git a/src/components/chart/VerticalBarChartCard.js b/src/components/chart/VerticalBarChartCard.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactApexChart from 'react-apexcharts';
 
-class HorizontalBarChartCard extends React.Component {
+class VerticalBarChartCard extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -40,7 +40,7 @@ class HorizontalBarChartCard extends React.Component {
             }
           },
           title: {
-            text: 'Count',
+            text: 'Number of traces',
           },
         }, {
           labels: {
@@ -50,7 +50,7 @@ class HorizontalBarChartCard extends React.Component {
           },
           opposite: true,
           title: {
-            text: 'Label: 1 means False, 2 means True'
+            text: 'Label'
           }
         }],
         xaxis: {
@@ -68,7 +68,7 @@ class HorizontalBarChartCard extends React.Component {
       },
       series: [
         {
-          name: 'Count',
+          name: 'Feature value',
           type: 'column',
           data: this.props.count
         },
@@ -92,9 +92,9 @@ class HorizontalBarChartCard extends React.Component {
   }
 }
 
-HorizontalBarChartCard.propTypes = {
+VerticalBarChartCard.propTypes = {
   data: PropTypes.any.isRequired,
   labels: PropTypes.any.isRequired,
   count: PropTypes.any.isRequired
 };
-export default HorizontalBarChartCard;
+export default VerticalBarChartCard;
diff --git a/src/components/explanation/ICEResult.js b/src/components/explanation/ICEResult.js
@@ -33,7 +33,8 @@ class ICEResult extends PureComponent {
                <Card className="md-block-centered">
                  <CardTitle title="ICE Result for a single attribute: "></CardTitle>
                  <CardText>
-                  <h4>Select the feature for ICE, LIME and SHAP</h4>
+                  <p>ICE plot shows correlation of each feature with the label values (1 = False, 2 = True).</p>
+                  <h4>Select a feature for ICE, LIME and SHAP</h4>
                   {this.getTraceSelector()}
                 </CardText>
                 {!this.props.isIceValuesLoaded ? <CircularProgress id="query-indeterminate-progress"/> : null}
diff --git a/src/components/explanation/LimeResult.js b/src/components/explanation/LimeResult.js
@@ -5,17 +5,18 @@ import React from 'react';
 import {Card, CardText, CardTitle} from 'react-md/lib/Cards/index';
 import PropTypes from 'prop-types';
 import {jobPropType} from '../../propTypes';
-import HorizontalBarChartCard from '../../components/chart/HorizontalBarChartCard';
+import HorizontalBarChartCard from '../chart/HorizontalBarChartCard';
 import CircularProgress from 'react-md/lib/Progress/CircularProgress';
 
-const PostHocExplanation = (props) => {
+const LimeResult = (props) => {
     const horizontalBarChart = <HorizontalBarChartCard
     data = {props.limeValueList.values}
     labels = {props.limeValueList.labels}/>;
     return <Card className="md-cell md-cell--12">
         <CardTitle title="LIME Result for a single trace"/>
         <CardText>
-        {props.traceId != '' && props.jobId != '' ?
+            <p>LIME shows correlation of each feature with the prediction.</p>
+            {props.traceId != '' && props.jobId != '' ?
                   'Lime result with trace id: '+ props.traceId
                    +' and job id: '+ props.jobId + ' and prefix: ' + props.attributeId: ''}
         </CardText>
@@ -30,7 +31,7 @@ const PostHocExplanation = (props) => {
 };
 
 
-PostHocExplanation.propTypes = {
+LimeResult.propTypes = {
     jobs: PropTypes.arrayOf(jobPropType).isRequired,
     limeValueList: PropTypes.any.isRequired,
     isLimeValuesLoaded: PropTypes.bool.isRequired,
@@ -40,4 +41,4 @@ PostHocExplanation.propTypes = {
     attributeId: PropTypes.any
 
 };
-export default PostHocExplanation;
+export default LimeResult;
diff --git a/src/components/explanation/ShapResult.js b/src/components/explanation/ShapResult.js
@@ -15,7 +15,8 @@ const ShapResult = (props) => {
     return <Card className="md-cell md-cell--12">
         <CardTitle title="SHAP Result for a single trace"/>
         <CardText>
-        {props.traceId != '' && props.jobId != '' ?
+            <p>SHAP shows correlation of each feature with the prediction.</p>
+            {props.traceId != '' && props.jobId != '' ?
                   'Shap result with trace id: '+ props.traceId
                    +', job id: '+ props.jobId + ' and prefix: ' + props.attributeId: ''}
         </CardText>
diff --git a/src/components/explanation/TemporalStability.js b/src/components/explanation/TemporalStability.js
@@ -17,36 +17,38 @@ const TemporalStability = (props) => {
             <Card className="md-cell md-cell--6">
                 <CardTitle title="SHAP result with temporal stability"></CardTitle>
                 <CardText>
+                    <p>The graph shows the dependence of trace feature importance on the prefix length.</p>
                     { props.traceId != '' && props.jobId != '' ?
                         'Temporal stability result with trace id: '+ props.traceId +' and job id: '+ props.jobId: ''}
                 </CardText>
                 {!props.isShapTempStabilityLoaded ? <CircularProgress id="query-indeterminate-progress"/> : null}
 
                 <CardText>
                     <div>
-                    <PredictionLineChart
-                    data = {temporalStabilityShapResult.data}
-                    categories = {temporalStabilityShapResult.categories}/>
+                        <PredictionLineChart
+                        data = {temporalStabilityShapResult.data}
+                        categories = {temporalStabilityShapResult.categories}/>
                     </div>
-            </CardText>
-        </Card>
-             <Card className="md-cell md-cell--6">
+                </CardText>
+            </Card>
+            <Card className="md-cell md-cell--6">
                 <CardTitle title="LIME result with temporal stability"></CardTitle>
                 <CardText>
+                    <p>The graph shows the dependence of trace feature importance on the prefix length.</p>
                     { props.traceId != '' && props.jobId != '' ?
                         'Temporal stability result with trace id: '+ props.traceId +' and job id: '+ props.jobId: ''}
                 </CardText>
                 {!props.isLimeTempStabilityLoaded ? <CircularProgress id="query-indeterminate-progress"/> : null}
 
                 <CardText>
                     <div>
-                    <PredictionLineChart
-                    data = {temporalStabilityLimeResult.data}
-                    categories = {temporalStabilityLimeResult.categories}/>
+                        <PredictionLineChart
+                        data = {temporalStabilityLimeResult.data}
+                        categories = {temporalStabilityLimeResult.categories}/>
                     </div>
-            </CardText>
-        </Card>
-    </Row>
+                </CardText>
+            </Card>
+        </Row>
     </div>
     ;
 };
diff --git a/src/components/explanation/TraceExplanation.js b/src/components/explanation/TraceExplanation.js
@@ -46,13 +46,12 @@ class TraceExplanation extends PureComponent {
     const attrs = getTraceAttributes(this.props.traceList, this.props.selectedTrace);
     return (
       <Card className="md-block-centered">
-        <CardTitle title="Trace Explanation" />
+        <CardTitle title="Trace table" />
         <CardText>
           <h4>Select the trace composition</h4>
           {this.getTraceSelector()}
         </CardText>
         <CardText>
-          <h2>Trace table</h2>
           <TraceTable
             traceAttributesHeader={attrs.traceAttributesHeader}
             traceEventsHeaders={attrs.traceEventsHeaders}
diff --git a/src/components/upload/ServerUpload.jsx b/src/components/upload/ServerUpload.jsx
@@ -148,27 +148,29 @@ export default class ServerUpload extends PureComponent {
         className="file-inputs__upload-form"
       >
         {progressBar}
-        <FileUpload
-          id="server-upload-file"
-          label="Choose file"
-          required
-          accept=".xes, .mxml"
-          onLoad={this.handleLoad}
-          onLoadStart={this.handleLoadStart}
-          onProgress={this.handleProgress}
-          name="single"
-          className="file-inputs__upload-form__file-upload"
-          primary
-          iconBefore
-        />
-        <TextField
-          id="server-upload-file-field"
-          placeholder="No file chosen"
-          value={fileName}
-          className="file-inputs__upload-form__file-field"
-          readOnly
-          fullWidth={false}
-        />
+        <CardActions className="md-full-width">
+          <FileUpload
+            id="server-upload-file"
+            label="Choose file"
+            required
+            accept=".xes, .mxml"
+            onLoad={this.handleLoad}
+            onLoadStart={this.handleLoadStart}
+            onProgress={this.handleProgress}
+            name="single"
+            className="file-inputs__upload-form__file-upload"
+            primary
+            iconBefore
+          />
+          <TextField
+            id="server-upload-file-field"
+            placeholder="No file chosen"
+            value={fileName}
+            className="file-inputs__upload-form__file-field"
+            readOnly
+            fullWidth={false}
+          />
+        </CardActions>
         <CardActions className="md-full-width">
           <Button type="reset" flat className="md-cell--right">Reset</Button>
           <Button type="submit" flat primary disabled={!fileName || sending}>Submit</Button>
diff --git a/src/components/upload/UploadCard.js b/src/components/upload/UploadCard.js
@@ -4,10 +4,10 @@ import ServerUpload from './ServerUpload.jsx';
 
 const UploadCard = () => {
   return <Card className="md-block-centered">
-    <CardTitle title="Single log file upload"/>
+    <CardTitle title="Option 1. Single log file upload"/>
     <CardText>
-      <h3>Once uploaded, you can split the log into training and validation log files.</h3>
-      <p>Supported log file format are <span className="md-font-semibold">.xes</span></p>
+      <p>Once uploaded, you can split the log into training and validation log files on the Splitting page.</p>
+      <p>Supported log file format is <span className="md-font-semibold">.xes</span></p>
       Upload a single log file.
       Metrics for the charts on Log details page will be calculated during the upload and this process may take
       time. Remain patient!
diff --git a/src/components/upload/UploadDoubleCard.js b/src/components/upload/UploadDoubleCard.js
@@ -4,9 +4,9 @@ import UploadDouble from './UploadDouble.jsx';
 
 const UploadDoubleCard = () => {
   return <Card className="md-block-centered">
-    <CardTitle title="Training and validation log upload"/>
+    <CardTitle title="Option 2. Training and validation log upload"/>
     <CardText>
-      <p>Supported log file formats are <span className="md-font-semibold">.xes</span></p>
+      <p>Supported log file format is <span className="md-font-semibold">.xes</span></p>
       Upload two log files.
       Metrics for the charts on Log details page will be calculated during the upload and this process may take time.
       Remain patient!
diff --git a/src/propTypes.js b/src/propTypes.js
@@ -1,5 +1,4 @@
 import {
-    ALL_IN_ONE,
     ATTRIBUTE_NUMBER,
     ATTRIBUTE_STRING,
     BOOLEAN,
@@ -11,14 +10,15 @@ import {
     LAST_PAYLOAD,
     NEXT_ACTIVITY,
     NO_PADDING,
-    ONLY_THIS,
     REGRESSION,
     REMAINING_TIME,
     SIMPLE_INDEX,
     THRESHOLD_CUSTOM,
     THRESHOLD_MEAN,
     TIME_SERIES_PREDICTION,
-    UP_TO,
+    ONLY_THIS,
+    UP_TO_SINGLE_TASK,
+    UP_TO_SEPARATE_TASKS,
     ZERO_PADDING
 } from './reference';
 import PropTypes from 'prop-types';
@@ -64,7 +64,7 @@ export const splitPropType = PropTypes.shape({
 export const encodingPropType = {
     method: PropTypes.oneOf([SIMPLE_INDEX, BOOLEAN, FREQUENCY, COMPLEX, LAST_PAYLOAD]),
     padding: PropTypes.oneOf([ZERO_PADDING, NO_PADDING]).isRequired,
-    generation_type: PropTypes.oneOf([UP_TO, ONLY_THIS, ALL_IN_ONE]).isRequired,
+    generation_type: PropTypes.oneOf([UP_TO_SINGLE_TASK, ONLY_THIS, UP_TO_SEPARATE_TASKS]).isRequired,
     prefix_length: PropTypes.number.isRequired,
     add_remaining_time: PropTypes.bool.isRequired,
     add_elapsed_time: PropTypes.bool.isRequired,
diff --git a/src/reducers/Models.js b/src/reducers/Models.js
diff --git a/src/reference.js b/src/reference.js
diff --git a/src/views/Explanation/Explanation.js b/src/views/Explanation/Explanation.js
diff --git a/src/views/JobStatus/JobStatus.js b/src/views/JobStatus/JobStatus.js

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ class PredictionLineChart extends React.Component {`
`36`	`36`	`max: this.props.data.length +1,`
`37`	`37`	`tickAmount: this.props.data.length +1,`
`38`	`38`	`title: {`
`39`		`- text: 'Feature'`
	`39`	`+ text: 'Prefix length'`
`40`	`40`	`}`
`41`	`41`	`},`
`42`	`42`	`yaxis: {`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ const ScatterChartCard = props => {`
`40`	`40`	`max: props.data.length + 1,`
`41`	`41`	`tickAmount: props.data.length + 1,`
`42`	`42`	`title: {`
`43`		`- text: 'Time',`
	`43`	`+ text: 'Prefix length',`
`44`	`44`	`},`
`45`	`45`	`}`
`46`	`46`	`}`