Skip to content

Commit

Permalink
Merge pull request singnet#22 from singnet/master
Browse files Browse the repository at this point in the history 
Pull from parent
  • Loading branch information
@raamb
raamb authored Feb 5, 2019
2 parents cb7f84b + b670d92 commit bd7d482
Showing 1 changed file with 98 additions and 15 deletions.
113 changes: 98 additions & 15 deletions src/components/service/TimeSeriesAnomalyDiscoveryService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import Typography from "@material-ui/core/Typography";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

export default class TimeSeriesAnomalyDiscoveryService extends React.Component {

Expand All @@ -19,12 +24,24 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
this.state = {
serviceName: undefined,
methodName: undefined,

timeseries: undefined,
alphabet: undefined,
slidingwindowsize: undefined,
paasize: undefined,
debug: 0,
response: undefined
debugflag: "0",

response: undefined,

styles: {
details: {
fontSize: 14,
alignItems: 'left',
},
defaultFontSize: {
fontSize: 15
}
}
};

this.message = undefined;
Expand Down Expand Up @@ -100,7 +117,7 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
alphabet: this.state.alphabet,
slidingwindowsize: this.state.slidingwindowsize,
paasize: this.state.paasize,
debugflag: this.state.debug
debugflag: this.state.debugflag
});
}

Expand Down Expand Up @@ -161,12 +178,13 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
style: {fontSize: 15}
}}
value={this.state.timeseries}
name="message"
name="timeseries"
onChange={this.handleChange}
rows="6"
defaultValue=""
margin="normal"
/>
<br/>
<TextField
id="standard-multiline-static"
label="Alphabet"
Expand All @@ -178,12 +196,13 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
style: {fontSize: 15}
}}
value={this.state.alphabet}
name="message"
name="alphabet"
onChange={this.handleChange}
rows="6"
defaultValue=""
margin="normal"
/>
<br/>
<TextField
id="standard-multiline-static"
label="Sliding Window Size"
Expand All @@ -195,12 +214,13 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
style: {fontSize: 15}
}}
value={this.state.slidingwindowsize}
name="message"
name="slidingwindowsize"
onChange={this.handleChange}
rows="6"
defaultValue=""
margin="normal"
/>
<br/>
<TextField
id="standard-multiline-static"
label="Piecewise Aggregate Approximation Size"
Expand All @@ -212,7 +232,7 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
style: {fontSize: 15}
}}
value={this.state.paasize}
name="message"
name="paasize"
onChange={this.handleChange}
rows="6"
defaultValue=""
Expand All @@ -222,6 +242,71 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
<Grid item xs={12} style={{textAlign: "center"}}>
<Button variant="contained" color="primary" onClick={this.submitAction}>Invoke</Button>
</Grid>
<Grid item xs={12} style={{textAlign: "left", fontSize: 15, lineHeight: 2}}>
<br/>
<h3>
This service allows to detect anomalies in time series. It follows the summarized pipeline bellow:
</h3>
<br/>
<ul>
<li><b>Piecewise Aggregate approximation:</b> discretise the time series sub-sequences with a sliding window.</li>
<li><b>Symbolic Aggregate Approximation:</b> transform the driscretized sub-sequences symbols based on an alphabet.</li>
<li><b>Sequitur:</b> build a context-free grammar with all the generated symbols from the entire time series.</li>
<li><b>Density Curve:</b> build a density curve based on the context-free generated grammar rules.</li>
<li><b>Optimization and Detection:</b> detect anomalies in the density curve with a hill-climbing inspired algorithm.</li>
</ul>
<br/>
<h3>
A brief explanation about the parameters:
</h3>
<ul>
<li><b>Time Series:</b>The time series in which anomalies will be detected.</li>
<li><b>Alphabet:</b> Alphabet used to discretizise the paa apporximation.</li>
<li><b>Sliding Window Size:</b> Sliding window used to create the time series symbols to build the free context grammar through the Sequitur algorithm.</li>
<li><b>Piecewise Aggregate Approximation:</b> Number of sub-samples that will be generated for each sliding window position.</li>
</ul>
<br/>
<p>
With the bellow presented example input parameters, the algorithms should be able to detect each simulated spike in the time series.
A spike is represented by the number 1000 while a normal sample is represented by the number 1.
</p>
<br/>
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
<Typography style={this.state.styles.defaultFontSize}>Input example</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={this.state.styles.details}>
<pre style={{
whiteSpace: "pre-wrap",
overflowX: "scroll"
}}>
Time Series: 1 1 1 1 1 1000 1 1 1 1 1 1000 1 1 1 1 1 1000 1 1 1 1 1 1000 1 1 1 1 1 100
<br/>
Alphabet: a b c d e f g h i j
<br/>
Sliding Window Size: 4
<br/>
Piecewise Aggregate Approximation Size: 2
</pre>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
<Typography style={this.state.styles.defaultFontSize}>Response example</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={this.state.styles.details}>
<pre style={{
whiteSpace: "pre-wrap",
overflowX: "scroll"
}}>
<br/>
Detected anomalies at indexes (Starting from 0):
<br/>
4 5 10 11 16 17 22 23
</pre>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
</React.Fragment>
)
}
Expand All @@ -230,14 +315,12 @@ export default class TimeSeriesAnomalyDiscoveryService extends React.Component {
return (
<React.Fragment>
<Grid item xs={12} style={{textAlign: "center"}}>
<h4>
The above numbers are the indexes of the original time series in which anomalies were detected:
</h4>
<br/>
<div style={{padding: 20, backgroundColor: "#E5EFFC"}}>
<h5>
{this.props.response.value}
</h5>
<div style={{textAlign: "left", padding: 20, backgroundColor: "#E5EFFC"}}>
<h4>Detected anomalies at indexes (Starting from 0): </h4>
<br/>
<div>
<h5>{this.props.response.output}</h5>
</div>
</div>
</Grid>
</React.Fragment>
Expand Down

0 comments on commit bd7d482

Please sign in to comment.