Temporal stability graph

Musacca · Musacca · commit 08661d9ce80f · 2020-01-08T15:18:14.000+02:00
diff --git a/src/actions/PredictionAction.js b/src/actions/PredictionAction.js
@@ -0,0 +1,7 @@
+import {createPayloadForwardingAction} from './index';
+export const PREDICTION_LIST_REQUESTED = 'PREDICTION_LIST_REQUESTED';
+export const predictionListRequested = createPayloadForwardingAction(PREDICTION_LIST_REQUESTED);
+export const PREDICTION_LIST_RETRIEVED = 'PREDICTION_LIST_RETRIEVED';
+export const predictionListRetrieved = createPayloadForwardingAction(PREDICTION_LIST_RETRIEVED);
+export const PREDICTION_LIST_FAILED = 'PREDICTION_LIST_FAILED';
+export const predictionListFailed = createPayloadForwardingAction(PREDICTION_LIST_FAILED);
diff --git a/src/actions/ServerActions.js b/src/actions/ServerActions.js
@@ -7,6 +7,7 @@ import {limeValueListFailed, limeValueListRetrieved} from './LimeActions';
 import {splitFailed, splitsFailed, splitsRetrieved, splitSucceeded} from './SplitActions';
 import {modelsFailed, modelsRetrieved} from './ModelActions';
 import {predictionFailed, predictionSucceeded, replayFailed, replaySucceeded} from './RuntimeActions';
+import {predictionListRetrieved, predictionListFailed} from './PredictionAction';
 
 export const getJobs = () => (dispatch) => {
     jsonAjax(
@@ -138,3 +139,15 @@ export const getLimeValues = ({jobId, traceId}) => (dispatch) => {
         ({error}) => dispatch(limeValueListFailed(error))
     );
 };
+
+export const getPredictionValues = ({jobId, traceId}) => (dispatch) => {
+    jsonAjax(
+        `http://localhost:8083/api/test`,
+        'GET',
+        null,
+        (predictionList) => {
+            dispatch(predictionListRetrieved(predictionList));
+        },
+        ({error}) => dispatch(predictionListFailed(error))
+    );
+};
diff --git a/src/components/chart/HorizontalBarChartCard.js b/src/components/chart/HorizontalBarChartCard.js
@@ -64,6 +64,8 @@ class HorizontalBarChartCard extends React.Component {
         }
       ]
     };
+    console.log(this.props.data)
+    console.log(this.props.labels)
     const height = this.props.labels.length * 65;
     const chart = (
       <ReactApexChart
diff --git a/src/components/chart/PredictionLineChart.js b/src/components/chart/PredictionLineChart.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactApexChart from 'react-apexcharts';
+
+class PredictionLineChart extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let graph = {
+            series: [{
+                name: 'Value',
+                data: this.props.data
+            }],
+            options: {
+              chart: {
+                height: 50,
+                type: 'line',
+                toolbar: {
+                    show: false
+                  },
+                zoom: {
+                  enabled: false
+                }
+              },
+              dataLabels: {
+                enabled: false
+              },
+              stroke: {
+                curve: 'straight'
+              },
+              title: {
+                align: 'left'
+              },
+              grid: {
+                row: {
+                  colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+                  opacity: 0.5
+                },
+              },
+              xaxis: {
+                categories: this.props.categories,
+                title: {
+                  text: 'Event number',
+                },
+              },
+              yaxis: {
+                title: {
+                  text: 'Prediction value',
+                },
+              }
+            }
+          };
+          const height = 4 * 65;
+          const chart = (
+            <ReactApexChart
+              options={graph.options}
+              series={graph.series}
+              type="line"
+              height={height}
+            />
+          );
+            return <div id="chart">{chart}</div>;
+        }
+}
+PredictionLineChart.propTypes = {
+    data: PropTypes.any.isRequired,
+    categories: PropTypes.any.isRequired
+};
+export default PredictionLineChart;
diff --git a/src/components/explanation/PredictionLineChartCard.js b/src/components/explanation/PredictionLineChartCard.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {Card, CardTitle, CardText} from 'react-md/lib/Cards/index';
+import PredictionLineChart from '../chart/PredictionLineChart';
+import PropTypes from 'prop-types';
+import {parsePredictionResultList} from '../../util/dataReducers';
+
+const PredictionLineChartCard = (props) => {
+    const predictionData = parsePredictionResultList(props.data);
+    return <Card >
+        <CardTitle title="Temporal Stability"></CardTitle>
+        <CardText>
+            { props.traceId != '' && props.jobId != '' ?
+                'Temporal stability result with trace id: '+ props.traceId +' and job id: '+ props.jobId: ''}
+        </CardText>
+        <CardText>
+            <div className="md-cell md-cell--12">
+            <PredictionLineChart
+            data = {predictionData.data}
+            categories = {predictionData.categories}/>
+            </div>
+        </CardText>
+
+    </Card>;
+};
+PredictionLineChartCard.propTypes = {
+    data: PropTypes.any.isRequired,
+    traceId: PropTypes.any,
+    jobId: PropTypes.any
+};
+export default PredictionLineChartCard;
diff --git a/src/components/explanation/post_hoc.js b/src/components/explanation/post_hoc.js
@@ -14,6 +14,10 @@ const PostHocExplanation = (props) => {
     labels = {props.limeValueList.labels}/>;
     return <Card className="md-block-centered">
         <CardTitle title="Graphs"/>
+        <CardText>
+            {!props.isLimeValuesLoaded ? 'Lime result with trace id: '+ props.traceId +' is loading. Please wait...' :
+             'Lime result with trace id: '+ props.traceId}
+        </CardText>
         {!props.isLimeValuesLoaded ? <CircularProgress id="query-indeterminate-progress"/> : null}
         <CardText>
             <div className="md-cell md-cell--12" key="1">
@@ -29,6 +33,7 @@ PostHocExplanation.propTypes = {
     limeValueList: PropTypes.any.isRequired,
     isLimeValuesLoaded: PropTypes.bool.isRequired,
     fetchState: fetchStatePropType,
+    traceId: PropTypes.any
 
 };
 export default PostHocExplanation;
diff --git a/src/middlewares/ServerMiddleware.js b/src/middlewares/ServerMiddleware.js
@@ -10,7 +10,8 @@ import {
     getTraceList,
     postSplit,
     postTraining,
-    getLimeValues
+    getLimeValues,
+    getPredictionValues
 } from '../actions/ServerActions';
 import {JOB_DELETE_REQUESTED, JOBS_REQUESTED, TRAINING_SUBMITTED} from '../actions/JobActions';
 import {TRACE_LIST_REQUESTED} from '../actions/TraceActions';
@@ -19,6 +20,7 @@ import {LIME_VALUE_LIST_REQUESTED} from '../actions/LimeActions';
 import {SPLIT_SUBMITTED, SPLITS_REQUESTED} from '../actions/SplitActions';
 import {MODELS_REQUESTED} from '../actions/ModelActions';
 import {PREDICTION_SUBMITTED, REPLAY_SUBMITTED} from '../actions/RuntimeActions';
+import { PREDICTION_LIST_REQUESTED } from '../actions/PredictionAction';
 
 const ACTION_TYPE_TO_SERVER_ACTION = {
     [JOBS_REQUESTED]: getJobs,
@@ -32,7 +34,8 @@ const ACTION_TYPE_TO_SERVER_ACTION = {
     [REPLAY_SUBMITTED]: postReplay,
     [MODELS_REQUESTED]: getModels,
     [JOB_DELETE_REQUESTED]: deleteJob,
-    [LIME_VALUE_LIST_REQUESTED]: getLimeValues
+    [LIME_VALUE_LIST_REQUESTED]: getLimeValues,
+    [PREDICTION_LIST_REQUESTED]: getPredictionValues,
 
 };
 
diff --git a/src/reducers/Predictions.js b/src/reducers/Predictions.js
@@ -0,0 +1,49 @@
+import {
+    PREDICTION_LIST_REQUESTED,
+    PREDICTION_LIST_RETRIEVED,
+    PREDICTION_LIST_FAILED,
+} from '../actions/PredictionAction';
+
+const initialState = {
+    fetchState: {inFlight: false},
+    predictionList: {},
+    isPredictionsLoaded: true
+};
+
+const predictions = (state = initialState, action) => {
+        switch (action.type) {
+            case PREDICTION_LIST_REQUESTED: {
+                return {
+                    ...state,
+                    fetchState: {inFlight: true},
+                    isPredictionsLoaded: false,
+
+                };
+            }
+
+            case PREDICTION_LIST_RETRIEVED: {
+                const predictionList = action.payload;
+                return {
+                    ...state,
+                    fetchState: {inFlight: false},
+                    predictionList,
+                    isPredictionsLoaded: true
+                };
+            }
+
+            case PREDICTION_LIST_FAILED: {
+                const predictionList = initialState.predictionList;
+                return {
+                    ...state,
+                    fetchState: {inFlight: false, error: action.payload},
+                    predictionList,
+                    isPredictionsLoaded: true
+                };
+            }
+            default:
+                return state;
+        }
+    }
+;
+
+export default predictions;
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -7,6 +7,7 @@ import splits from './Splits';
 import models from './Models';
 import traces from './Traces';
 import lime from './Lime';
+import predictions from './Predictions';
 
 
 export default combineReducers({
@@ -17,5 +18,6 @@ export default combineReducers({
     training,
     splits,
     traces,
-    lime
+    lime,
+    predictions
 });
diff --git a/src/util/dataReducers.js b/src/util/dataReducers.js
@@ -283,6 +283,18 @@ export const parseLimeResult = (limeValueList) => {
   return ({labels: labels, values: values});
 };
 
+export const parsePredictionResultList = (predictionList) => {
+  let data = [];
+  let keys = Object.keys(predictionList);
+
+  if (keys != null) {
+    for (let j = 0; j < keys.length; j++) {
+      data.push(predictionList[keys[j]]);
+      }
+    }
+  return ({data: data, categories: keys});
+};
+
 export const getTraceAttributes = (traceList, selectedTrace) =>{
   let i=0;
   if (traceList === undefined) {
diff --git a/src/views/Explanation/Explanation.js b/src/views/Explanation/Explanation.js
@@ -27,6 +27,8 @@ import PostHocExplanation from '../../components/explanation/post_hoc';
 import TraceExplanation from '../../components/explanation/TraceExplanation';
 import {getTraceIdsFromLogs, parseLimeResult} from '../../util/dataReducers';
 import JobModelsTable from '../../components/explanation/JobModelsTable';
+import PredictionLineChartCard from '../../components/explanation/PredictionLineChartCard';
+import {predictionListRequested } from '../../actions/PredictionAction';
 
 class Explanation extends Component {
     constructor(props) {
@@ -67,6 +69,7 @@ class Explanation extends Component {
     onChangeTrace(trace) {
         this.props.onTraceChange(trace);
         this.setState({selectedTrace: trace});
+        this.props.onRequestPredictionList(1, 1);
         if (this.props.jobId.length != 0) {
             this.props.onRequestLimeValues(this.props.jobId, trace);
         }
@@ -76,10 +79,12 @@ class Explanation extends Component {
         this.props.onJobChange(id);
         if (this.props.selectedTrace !== '') {
             this.props.onRequestLimeValues(id, this.props.selectedTrace);
+            this.props.onRequestPredictionList(id, this.props.selectedTrace);
         }
     }
 
     componentDidMount() {
+        this.props.onRequestPredictionList(1, 1);
         if (this.props.jobs.length === 0) {
             this.props.onRequestLogList();
             this.props.onRequestSplitList();
@@ -134,7 +139,14 @@ class Explanation extends Component {
                     <PostHocExplanation jobs={this.props.jobs}
                                         fetchState={this.props.fetchState}
                                         limeValueList={parseLimeResult(this.props.limeValueList)}
-                                        isLimeValuesLoaded={this.props.isLimeValuesLoaded}/>
+                                        isLimeValuesLoaded={this.props.isLimeValuesLoaded}
+                                        traceId={this.props.selectedTrace}/>
+                </div>
+                <div className="md-cell md-cell--12">
+                    <PredictionLineChartCard
+                    data={this.props.predictionList}
+                    traceId={this.props.selectedTrace}
+                    jobId={this.props.jobId}/>
                 </div>
             </div>
         );
@@ -154,6 +166,7 @@ Explanation.propTypes = {
     onRequestTraces: PropTypes.func.isRequired,
     onJobChange: PropTypes.func.isRequired,
     onRequestLimeValues: PropTypes.func.isRequired,
+    onRequestPredictionList: PropTypes.func.isRequired,
     filterOptionChange: PropTypes.func.isRequired,
     labelTypeChange: PropTypes.func.isRequired,
     jobs: PropTypes.arrayOf(jobPropType).isRequired,
@@ -181,7 +194,8 @@ Explanation.propTypes = {
     selectedTrace: PropTypes.any,
     filteredJobs: PropTypes.any,
     jobId: PropTypes.number.isRequired,
-    isLimeValuesLoaded: PropTypes.bool.isRequired
+    isLimeValuesLoaded: PropTypes.bool.isRequired,
+    predictionList: PropTypes.any
 };
 
 const mapStateToProps = (state) => ({
@@ -201,6 +215,7 @@ const mapStateToProps = (state) => ({
     jobsById: state.jobs.byId,
     jobId: state.jobs.predictionJobId,
     selectedTrace: state.jobs.selectedTrace,
+    predictionList: state.predictions.predictionList,
     filterOptions: (
         ({
              encodings, clusterings, classification, regression, timeSeriesPrediction,
@@ -223,6 +238,7 @@ const mapDispatchToProps = (dispatch) => ({
     onRequestJobs: () => dispatch(jobsRequested()),
     onRequestTraces: (id) => dispatch(traceListRequested({id})),
     onRequestLimeValues: (jobId, traceId) => dispatch(limeValueListRequested({jobId, traceId})),
+    onRequestPredictionList: (jobId, traceId) => dispatch(predictionListRequested({jobId, traceId})),
     filterOptionChange: (_, event) => dispatch({
         type: FILTER_OPTION_CHANGED,
         payload: {name: event.target.name, value: event.target.value}

Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,8 @@ class HorizontalBarChartCard extends React.Component {`
`64`	`64`	`}`
`65`	`65`	`]`
`66`	`66`	`};`
	`67`	`+ console.log(this.props.data)`
	`68`	`+ console.log(this.props.labels)`
`67`	`69`	`const height = this.props.labels.length * 65;`
`68`	`70`	`const chart = (`
`69`	`71`	`<ReactApexChart`