demo.html 3.11 KB
Newer Older
Sascha Herzinger's avatar
Sascha Herzinger committed
1
<!doctype html>
2
<meta charset="UTF-8">
Sascha Herzinger's avatar
Sascha Herzinger committed
3
4

<head>
5
  <script src="http://localhost:8080/fractal.js"></script>
Sascha Herzinger's avatar
Sascha Herzinger committed
6
7
8
</head>

<body>
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h1>Fractalis Test Page</h1>
<p>
  This page is for demonstration purpose only.
  It showcases the functionality of Fractalis for researchers and
  serves as an example on how to use the API for developers.
</p>
<input type="button" onclick="loadData()" value="Prepare data for analysis"/>
<input type="button" onclick="deleteData()" value="Clear analysis cache"/>
<!--<input type="button" onclick="loadState()" value="load state"/>-->
<label for="state-ids">State ID:</label>
<input type="text" id="state-ids" style="width: 20vw;">
<br/>
<br/>
<div class="charts">
Sascha Herzinger's avatar
Sascha Herzinger committed
23
24
25
26
  <div class="chart chart-1"></div>
  <div class="chart chart-2"></div>
  <div class="chart chart-3"></div>
  <div class="chart chart-4"></div>
27
28
29
30
  <div class="chart chart-5"></div>
  <div class="chart chart-6"></div>
  <div class="chart chart-7"></div>
  <div class="chart chart-8"></div>
Sascha Herzinger's avatar
Sascha Herzinger committed
31
</div>
32

Sascha Herzinger's avatar
Sascha Herzinger committed
33
34
35
36
37
38
</body>

<script>
  /* eslint-disable */

  const fjs = fractal.init({
39
    handler: 'test',
40
    dataSource: 'http://localhost',
41
    fractalisNode: 'http://localhost',
Sascha Herzinger's avatar
Sascha Herzinger committed
42
    getAuth () {
43
44
45
46
      return {token: ''}
    },
    options: {
      controlPanelPosition: 'right'
Sascha Herzinger's avatar
Sascha Herzinger committed
47
48
    }
  })
49

Sascha Herzinger's avatar
Sascha Herzinger committed
50
51
  fjs.setSubsets([
  ])
52

Sascha Herzinger's avatar
Sascha Herzinger committed
53
54
55
  function loadData () {
    fjs.loadData([
      {
56
57
        data_type: 'numerical_array',
        label: 'Expression Data',
Sascha Herzinger's avatar
Sascha Herzinger committed
58
        num_samples: 300,
59
        num_features: 100
Sascha Herzinger's avatar
Sascha Herzinger committed
60
61
      },
      {
62
63
        data_type: 'numerical',
        label: 'Numerical Data 1',
Sascha Herzinger's avatar
Sascha Herzinger committed
64
        num_samples: 300
Sascha Herzinger's avatar
Sascha Herzinger committed
65
66
      },
      {
67
68
        data_type: 'numerical',
        label: 'Numerical Data 2',
Sascha Herzinger's avatar
Sascha Herzinger committed
69
        num_samples: 300
Sascha Herzinger's avatar
Sascha Herzinger committed
70
71
      },
      {
72
73
        data_type: 'numerical',
        label: 'Numerical Data 3',
Sascha Herzinger's avatar
Sascha Herzinger committed
74
        num_samples: 300
75
76
      },
      {
77
78
        data_type: 'categorical',
        label: 'Categorical Data 1',
Sascha Herzinger's avatar
Sascha Herzinger committed
79
        num_samples: 300,
80
        values: ['A', 'B', 'C', 'D']
Sascha Herzinger's avatar
Sascha Herzinger committed
81
82
      },
      {
83
84
        data_type: 'categorical',
        label: 'Categorical Data 2',
Sascha Herzinger's avatar
Sascha Herzinger committed
85
        num_samples: 300,
86
        values:['X', 'Y']
Sascha Herzinger's avatar
Sascha Herzinger committed
87
88
89
90
91
92
93
94
      }
    ])
  }

  function deleteData () {
    fjs.clearCache()
  }

95
  function loadState () {
96
    document.querySelector('.state-ids').value.split('+').forEach((id, i) => {
97
98
99
      if (id.length) {
        fjs.id2chart(`.copy-${i+1}`, id)
      }
100
    })
101
102
  }

103
  const chartStateIDs = []
104
  function setCharts () {
105
    const vms = [
Sascha Herzinger's avatar
Sascha Herzinger committed
106
      fjs.setChart('correlation-analysis', '.chart-1'),
107
108
109
110
111
112
113
      fjs.setChart('correlation-analysis', '.chart-2'),
      fjs.setChart('correlation-analysis', '.chart-3'),
      fjs.setChart('correlation-analysis', '.chart-4'),
      fjs.setChart('boxplot', '.chart-5'),
      fjs.setChart('boxplot', '.chart-6'),
      fjs.setChart('pca-analysis', '.chart-7'),
      fjs.setChart('pca-analysis', '.chart-8')
114
115
116
117
    ]
    vms.forEach((vm, i) => {
      fjs.chart2id(vm, id => {
        chartStateIDs[i] = id
118
        document.querySelector('#state-ids').value = chartStateIDs.join('+')
119
120
      })
    })
121
122
123
124
125
  }

  window.addEventListener('load', () => {
    setCharts()
  })
Sascha Herzinger's avatar
Sascha Herzinger committed
126
</script>
127
128

<style>
129
  .charts {
130
131
  }

Sascha Herzinger's avatar
Sascha Herzinger committed
132
  .chart {
133
134
135
    float: left;
    height: 20vw;
    width: 20vw;
136
137
  }
</style>