File size: 2,010 Bytes
d61b9c7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from "react";
import AppBase from "./App";
import { FilterConfig } from "./models/filter";
import { VisualizationGroup } from "./models/visualizationOutput";
import { InsightsConfig } from "./models/insightsConfig";

interface WebAppState {
  data: VisualizationGroup[];
  config: InsightsConfig;
  loading: boolean;
}

class WebApp extends React.Component<{}, WebAppState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      data: [],
      config: {
        classes: [],
        methods: [],
        method_arguments: {},
        selected_method: "",
      },
      loading: false,
    };
    this._fetchInit();
  }

  _fetchInit = () => {
    fetch("init")
      .then((r) => r.json())
      .then((r) => this.setState({ config: r }));
  };

  fetchData = (filter_config: FilterConfig) => {
    this.setState({ loading: true });
    fetch("fetch", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(filter_config),
    })
      .then((response) => response.json())
      .then((response) => this.setState({ data: response, loading: false }));
  };

  onTargetClick = (
    labelIndex: number,
    inputIndex: number,
    modelIndex: number,
    callback: () => void
  ) => {
    fetch("attribute", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ labelIndex, inputIndex, modelIndex }),
    })
      .then((response) => response.json())
      .then((response) => {
        const data = this.state.data ?? [];
        data[inputIndex][modelIndex] = response;
        this.setState({ data });
        callback();
      });
  };

  render() {
    return (
      <AppBase
        fetchData={this.fetchData}
        fetchInit={this._fetchInit}
        onTargetClick={this.onTargetClick}
        data={this.state.data}
        config={this.state.config}
        loading={this.state.loading}
      />
    );
  }
}

export default WebApp;