Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
vig
Sublinear Algorithms for VA
pseudo
Commits
b164296c
Commit
b164296c
authored
Sep 09, 2020
by
Kruyff,D.L.W. (Dylan)
Browse files
Fix average calculated + performance boost
parent
eb452310
Changes
16
Hide whitespace changes
Inline
Side-by-side
AngularApp/prototype/src/app/api.service.ts
View file @
b164296c
...
...
@@ -50,9 +50,21 @@ export class ApiService {
return
await
response
.
json
();
}
async
getQueryWindow
(
window
)
{
const
response
=
await
fetch
(
'
http://127.0.0.1:5000/query
'
,
{
method
:
'
POST
'
,
headers
:
{
'
Accept
'
:
'
application/json
'
,
'
Content-Type
'
:
'
application/json
'
},
body
:
JSON
.
stringify
({
window
})
});
return
await
response
.
json
();
}
// Return similar windows based on an input query
async
getSimilarWindows
(
query
,
tables
)
{
const
response
=
await
fetch
(
'
http://127.0.0.1:5000/
quer
y
'
,
{
const
response
=
await
fetch
(
'
http://127.0.0.1:5000/
similarit
y
'
,
{
method
:
'
POST
'
,
headers
:
{
'
Accept
'
:
'
application/json
'
,
...
...
@@ -63,8 +75,20 @@ export class ApiService {
return
await
response
.
json
();
}
async
getAverageWindow
(
windows
):
Promise
<
number
[][]
>
{
const
response
=
await
fetch
(
'
http://127.0.0.1:5000/average
'
,
{
async
getAverageProgressWindows
(
windows
):
Promise
<
number
[][]
>
{
const
response
=
await
fetch
(
'
http://127.0.0.1:5000/average-progress
'
,
{
method
:
'
POST
'
,
headers
:
{
'
Accept
'
:
'
application/json
'
,
'
Content-Type
'
:
'
application/json
'
},
body
:
JSON
.
stringify
({
windows
})
});
return
await
response
.
json
();
}
async
getAverageTableWindows
(
windows
):
Promise
<
number
[][]
>
{
const
response
=
await
fetch
(
'
http://127.0.0.1:5000/average-table
'
,
{
method
:
'
POST
'
,
headers
:
{
'
Accept
'
:
'
application/json
'
,
...
...
AngularApp/prototype/src/app/app.module.ts
View file @
b164296c
...
...
@@ -17,6 +17,7 @@ import { QueryWindowComponent } from './query-window/query-window.component';
import
{
ZingchartAngularModule
}
from
'
zingchart-angular
'
;
import
{
ProgressViewComponent
}
from
'
./progress-view/progress-view.component
'
;
import
{
MainComponent
}
from
'
./main/main.component
'
;
import
{
MatProgressBarModule
}
from
'
@angular/material/progress-bar
'
;
PlotlyModule
.
plotlyjs
=
PlotlyJS
;
...
...
@@ -38,6 +39,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
PlotlyModule
,
BrowserAnimationsModule
,
MatTabsModule
,
MatProgressBarModule
,
ZingchartAngularModule
],
providers
:
[],
...
...
AngularApp/prototype/src/app/cache.service.ts
View file @
b164296c
...
...
@@ -7,6 +7,7 @@ import {ApiService, RawData} from './api.service';
export
class
CacheService
{
public
rawValues
:
number
[];
public
rawIndices
:
string
[];
public
loadingProgress
:
number
=
0
;
private
_currentTab
:
number
;
private
_query
=
undefined
;
...
...
@@ -14,6 +15,7 @@ export class CacheService {
private
_tables
;
private
_windowSimilarity
;
private
_sliderValue
;
private
_queryWindow
=
[];
public
windowSize
=
500
;
public
nrOfTables
=
10
;
...
...
@@ -30,23 +32,27 @@ export class CacheService {
public
onNewTab
:
EventEmitter
<
void
>
=
new
EventEmitter
<
void
>
();
public
onNewSlider
:
EventEmitter
<
void
>
=
new
EventEmitter
<
void
>
();
public
initialized
:
Promise
<
void
>
;
constructor
(
private
api
:
ApiService
)
{
this
.
initialized
=
this
.
initialize
();
this
.
initialize
();
}
async
initialize
():
Promise
<
void
>
{
this
.
loadingProgress
=
0
;
await
this
.
getRawData
();
this
.
loadingProgress
=
30
;
await
this
.
createWindows
();
this
.
loadingProgress
=
60
;
await
this
.
createTables
();
this
.
loadingProgress
=
100
;
}
async
reset
():
Promise
<
void
>
{
this
.
windowSimilarity
=
undefined
;
this
.
loadingProgress
=
30
;
await
this
.
createWindows
();
this
.
loadingProgress
=
60
;
await
this
.
createTables
();
this
.
loadingProgress
=
100
;
}
async
getRawData
():
Promise
<
void
>
{
...
...
@@ -65,13 +71,24 @@ export class CacheService {
this
.
tables
=
await
this
.
api
.
createTables
(
this
.
parameters
);
}
async
getSimilarWindows
(
query
):
Promise
<
any
>
{
this
.
windowSimilarity
=
await
this
.
api
.
getSimilarWindows
(
query
,
this
.
tables
);
async
getSimilarWindows
():
Promise
<
any
>
{
this
.
windowSimilarity
=
await
this
.
api
.
getSimilarWindows
(
this
.
_queryWindow
,
this
.
tables
);
console
.
log
(
this
.
windowSimilarity
);
return
this
.
windowSimilarity
;
}
async
getAverageWindow
(
windows
):
Promise
<
number
[][]
>
{
return
await
this
.
api
.
getAverageWindow
(
windows
);
async
getAverageProgressWindows
(
windows
):
Promise
<
number
[][]
>
{
return
await
this
.
api
.
getAverageProgressWindows
(
windows
);
}
async
getAverageTableWindows
(
windows
):
Promise
<
number
[][]
>
{
return
await
this
.
api
.
getAverageTableWindows
(
windows
);
}
async
getQueryWindow
(
queryIndex
):
Promise
<
number
[]
>
{
this
.
_queryWindow
=
await
this
.
api
.
getQueryWindow
(
this
.
rawValues
.
slice
(
queryIndex
,
queryIndex
+
this
.
windowSize
));
console
.
log
(
this
.
_queryWindow
);
return
this
.
_queryWindow
;
}
async
updateTables
():
Promise
<
void
>
{
...
...
@@ -92,7 +109,6 @@ export class CacheService {
}
public
set
tables
(
v
)
{
console
.
log
(
v
);
this
.
_tables
=
v
;
this
.
onNewTables
.
emit
();
}
...
...
@@ -112,7 +128,6 @@ export class CacheService {
public
set
windowSimilarity
(
v
)
{
this
.
_windowSimilarity
=
v
;
console
.
log
(
v
);
this
.
onNewSimilarity
.
emit
();
}
...
...
@@ -138,6 +153,11 @@ export class CacheService {
return
this
.
_sliderValue
;
}
public
set
queryWindow
(
v
)
{
this
.
_queryWindow
=
v
;
this
.
onNewQuery
.
emit
();
}
public
get
parameters
():
{[
parameter
:
string
]:
any
}
{
return
{
windowsize
:
this
.
windowSize
,
...
...
AngularApp/prototype/src/app/labeling-window/labeling-window.component.html
View file @
b164296c
...
...
@@ -7,7 +7,8 @@
<button
class=
"incorrect-button"
[class.incorrect-selected]=
"labels[subplot.index] == false"
(click)=
"labelIncorrect(subplot.index)"
>
X
</button>
</div>
</div>
<div
class=
"button-holder"
>
<button
*ngIf=
"windowSimilarity"
(click)=
"changeTables()"
class=
"label-button"
>
Update tables
</button>
</div>
</div>
<div
class=
"button-holder"
>
<button
*ngIf=
"windowSimilarity"
(click)=
"changeTables()"
class=
"label-button"
>
Update tables
</button>
</div>
AngularApp/prototype/src/app/main/main.component.css
View file @
b164296c
...
...
@@ -3,7 +3,7 @@
display
:
none
;
width
:
100%
;
height
:
100%
;
top
:
200px
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
...
...
@@ -12,6 +12,20 @@
cursor
:
pointer
;
}
.loading-progress
{
background-color
:
white
;
z-index
:
3
;
width
:
400px
;
height
:
200px
;
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
margin
:
auto
;
}
.show
{
display
:
block
;
}
AngularApp/prototype/src/app/main/main.component.html
View file @
b164296c
...
...
@@ -3,8 +3,8 @@
<app-overview-window
style=
"z-index: 10"
></app-overview-window>
<mat-tab-group
animationDuration=
"0ms"
(selectedTabChange)=
"changeTab($event)"
>
<mat-tab
label=
"Training"
>
<app-labeling-window></app-labeling-window>
<app-table-overview></app-table-overview>
<app-labeling-window></app-labeling-window>
</mat-tab>
<mat-tab
label=
"Labeled data"
>
<app-labels></app-labels>
...
...
@@ -19,4 +19,12 @@
<app-progress-view></app-progress-view>
</div>
</div>
<div
class=
"overlay"
[class.show]=
"greyOut"
></div>
<div
class=
"overlay"
[class.show]=
"greyOut"
*ngIf=
"loadingProgress != 100"
></div>
<div
class=
"loading-progress"
*ngIf=
"loadingProgress != 100"
>
<span
*ngIf=
"loadingProgress == 0"
>
Retrieving data
</span>
<span
*ngIf=
"loadingProgress == 30"
>
Creating windows
</span>
<span
*ngIf=
"loadingProgress == 60"
>
Creating initial tables
</span>
<mat-progress-bar
mode=
"determinate"
[value]=
"loadingProgress"
>
</mat-progress-bar>
</div>
AngularApp/prototype/src/app/main/main.component.ts
View file @
b164296c
...
...
@@ -18,4 +18,8 @@ export class MainComponent {
public
get
greyOut
()
{
return
this
.
service
.
querySelectionMode
;
}
public
get
loadingProgress
():
number
{
return
this
.
service
.
loadingProgress
;
}
}
AngularApp/prototype/src/app/overview-window/overview-window.component.html
View file @
b164296c
<div
style=
"overflow: auto"
>
<!-- <plotly-plot *ngIf="showPlot" [data]="data" [layout]="layout" (plotly_click)="clicked($event)"></plotly-plot>-->
</div>
<!--<div id="overview"></div>-->
<zingchart-angular
[id]=
"id"
[config]=
"config"
(mousewheel)=
"zoom($event)"
(click)=
"clicked($event)"
[height]=
"200"
[series]=
"series"
></zingchart-angular>
<zingchart-angular
[id]=
"id"
[config]=
"config"
(dblclick)=
"doubleClick($event)"
(mousewheel)=
"zoom($event)"
(click)=
"clicked($event)"
[height]=
"200"
></zingchart-angular>
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @
b164296c
import
{
Component
}
from
'
@angular/core
'
;
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
{
CacheService
}
from
'
../cache.service
'
;
import
zingchart
from
'
zingchart/es6
'
;
...
...
@@ -7,11 +7,13 @@ import zingchart from 'zingchart/es6';
templateUrl
:
'
./overview-window.component.html
'
,
styleUrls
:
[
'
./overview-window.component.css
'
]
})
export
class
OverviewWindowComponent
{
export
class
OverviewWindowComponent
implements
OnInit
{
public
config
;
public
series
;
public
showPlot
=
false
;
public
id
=
"
overview
"
;
public
markers
=
[];
public
series
=
[];
public
goodLabels
=
[];
public
badLabels
=
[];
public
data
;
public
layout
;
...
...
@@ -21,7 +23,6 @@ export class OverviewWindowComponent {
async
ngOnInit
():
Promise
<
void
>
{
this
.
service
.
onNewData
.
subscribe
(()
=>
this
.
initializePlot
());
this
.
service
.
onNewWindows
.
subscribe
(()
=>
{
});
this
.
service
.
onNewTables
.
subscribe
(()
=>
{
if
(
this
.
service
.
query
)
{
this
.
updatePlot
();
...
...
@@ -32,13 +33,39 @@ export class OverviewWindowComponent {
async
initializePlot
()
{
this
.
service
.
query
=
undefined
;
// this.data = this.service.rawIndices.map((e, i) => {
// return [e, values[i]];
// });
this
.
data
=
[];
for
(
let
i
=
0
;
i
<
this
.
service
.
rawValues
.
length
;
i
++
)
{
this
.
data
.
push
([
i
,
this
.
service
.
rawValues
[
i
]]);
}
this
.
series
=
[
{
type
:
'
line
'
,
values
:
this
.
data
,
text
:
'
Raw Values
'
,
zIndex
:
5
,
marker
:
{
alpha
:
0.0
,
zIndex
:
10
}
},
{
type
:
'
scatter
'
,
values
:
[],
text
:
'
Good labels
'
,
marker
:
{
backgroundColor
:
'
#4caf50
'
},
zIndex
:
20
,
},
{
type
:
'
scatter
'
,
values
:
[],
text
:
'
Bad labels
'
,
marker
:
{
backgroundColor
:
'
#f44336
'
},
zIndex
:
20
,
}];
this
.
config
=
{
type
:
"
mixed
"
,
preview
:
{
...
...
@@ -48,58 +75,17 @@ export class OverviewWindowComponent {
"
plotarea
"
:
{
"
margin-top
"
:
"
10px
"
},
'
scale
-x
'
:
{
scale
X
:
{
zooming
:
true
,
zoomTo
:
[
0
,
this
.
service
.
windowSize
],
'
auto-fit
'
:
true
'
auto-fit
'
:
true
,
markers
:
this
.
markers
},
'
scale-y
'
:
{
// zooming: true,
'
auto-fit
'
:
true
},
series
:
[
{
type
:
'
line
'
,
values
:
this
.
data
,
text
:
'
Raw Values
'
,
zIndex
:
5
,
marker
:
{
alpha
:
0.0
,
zIndex
:
10
}
},
{
type
:
'
scatter
'
,
values
:
[],
text
:
'
Good labels
'
,
marker
:
{
backgroundColor
:
'
#4caf50
'
},
zIndex
:
20
,
},
{
type
:
'
scatter
'
,
values
:
[],
text
:
'
Bad labels
'
,
marker
:
{
backgroundColor
:
'
#f44336
'
},
zIndex
:
20
,
}]
series
:
this
.
series
};
// zingchart.render({
// id: 'overview',
// data: this.config,
// height: 200,
// width: '100%'
// });
// zingchart.bind('overview', 'click', (e) => {
// const xyInformation = zingchart.exec('overview', 'getxyinfo', {
// x: e.x,
// y: e.y
// });
// this.clicked({nodeindex: xyInformation[2].nodeidx});
// });
console
.
log
(
"
showing plot
"
);
}
...
...
@@ -112,8 +98,6 @@ export class OverviewWindowComponent {
x
:
clickData
.
x
,
y
:
clickData
.
y
});
console
.
log
(
'
clicked node
'
);
console
.
log
(
xyInformation
);
const
index
=
Math
.
floor
(
xyInformation
[
2
].
nodeidx
/
this
.
service
.
stepSize
);
this
.
service
.
query
=
index
;
const
temp
=
{};
...
...
@@ -123,62 +107,65 @@ export class OverviewWindowComponent {
}
async
updatePlot
()
{
if
(
this
.
service
.
query
)
{
const
windowSimilarity
=
await
this
.
service
.
getSimilarWindows
(
this
.
service
.
query
);
console
.
log
(
'
updating plot
'
);
if
(
!
this
.
service
.
query
)
{
return
;
}
let
goodLabels
=
[];
let
badLabels
=
[];
this
.
goodLabels
=
[];
this
.
badLabels
=
[];
this
.
markers
=
[];
for
(
const
index
in
this
.
service
.
labels
)
{
if
(
this
.
service
.
labels
[
index
])
{
goodLabels
.
push
(
this
.
data
[
index
]);
this
.
goodLabels
.
push
(
this
.
data
[
index
]);
this
.
markers
.
push
({
type
:
'
area
'
,
// BUG: For some reason the range values are multiplied by 10
range
:
[
this
.
data
[
index
][
0
]
/
10
,
(
this
.
data
[
index
][
0
]
+
this
.
service
.
windowSize
)
/
10
],
backgroundColor
:
"
#4caf50
"
,
});
}
else
{
badLabels
.
push
(
this
.
data
[
index
]);
this
.
badLabels
.
push
(
this
.
data
[
index
]);
this
.
markers
.
push
({
type
:
'
area
'
,
// BUG: For some reason the range values are multiplied by 10
range
:
[
this
.
data
[
index
][
0
]
/
10
,
(
this
.
data
[
index
][
0
]
+
this
.
service
.
windowSize
)
/
10
],
backgroundColor
:
"
#f44336
"
,
});
}
}
this
.
series
=
[
{
type
:
'
line
'
,
values
:
this
.
data
,
text
:
'
Raw Values
'
,
zIndex
:
5
,
marker
:
{
alpha
:
0.0
,
zIndex
:
10
}
},
{
type
:
'
scatter
'
,
values
:
goodLabels
,
text
:
'
Good labels
'
,
marker
:
{
backgroundColor
:
'
#4caf50
'
},
zIndex
:
20
,
},
{
type
:
'
scatter
'
,
values
:
badLabels
,
text
:
'
Bad labels
'
,
marker
:
{
backgroundColor
:
'
#f44336
'
},
zIndex
:
20
,
}
];
this
.
series
[
1
].
values
=
this
.
goodLabels
;
this
.
series
[
2
].
values
=
this
.
badLabels
;
this
.
config
.
scaleX
.
markers
=
this
.
markers
;
console
.
log
(
this
.
config
);
zingchart
.
exec
(
"
zingchart-ng-1
"
,
'
setdata
'
,
{
data
:
this
.
config
});
console
.
log
(
'
querying
'
);
await
this
.
service
.
getQueryWindow
(
this
.
service
.
query
);
await
this
.
service
.
getSimilarWindows
();
console
.
log
(
'
done
'
);
}
async
updateCandidates
(
sliderIndex
)
{
console
.
log
(
"
Updating chart
"
);
console
.
log
(
this
.
service
.
windowSimilarity
);
console
.
log
(
sliderIndex
);
const
candidates
=
this
.
service
.
windowSimilarity
[
sliderIndex
.
toString
()];
let
candidates
=
[];
for
(
let
i
=
sliderIndex
;
i
<
this
.
service
.
nrOfTables
;
i
++
)
{
console
.
log
(
i
);
candidates
=
candidates
.
concat
(
this
.
service
.
windowSimilarity
[
sliderIndex
.
toString
()]);
}
console
.
log
(
candidates
);
const
labels
=
[];
const
markers
=
[];
for
(
const
index
of
candidates
)
{
labels
.
push
(
this
.
data
[
index
]);
markers
.
push
({
type
:
'
area
'
,
// BUG: For some reason the range values are multiplied by 10
range
:
[
this
.
data
[
index
][
0
]
/
10
,
(
this
.
data
[
index
][
0
]
+
this
.
service
.
windowSize
)
/
10
],
backgroundColor
:
"
#b1a343
"
,
});
}
console
.
log
(
labels
);
const
newSeries
=
this
.
series
.
slice
(
0
,
3
);
const
newSeries
=
this
.
config
.
series
.
slice
(
0
,
3
);
newSeries
.
push
({
type
:
'
scatter
'
,
values
:
labels
,
...
...
@@ -188,15 +175,25 @@ export class OverviewWindowComponent {
},
zIndex
:
20
,
});
this
.
series
=
newSeries
;
this
.
config
.
series
=
newSeries
;
this
.
config
.
scaleX
.
markers
=
this
.
markers
.
concat
(
markers
);
zingchart
.
exec
(
"
zingchart-ng-1
"
,
'
setdata
'
,
{
data
:
this
.
config
});
}
zoom
(
p
)
{
if
(
!
p
.
ev
)
{
return
;
}
if
(
p
.
ev
.
wheelDelta
>
0
)
{
zingchart
.
exec
(
"
zingchart-ng-1
"
,
'
zoomin
'
);
}
else
if
(
p
.
ev
.
wheelDelta
<
0
)
{
zingchart
.
exec
(
"
zingchart-ng-1
"
,
'
zoomout
'
);
}
console
.
log
(
p
);
}
doubleClick
(
e
)
{
zingchart
.
exec
(
"
zingchart-ng-1
"
,
'
viewall
'
);
}
}
AngularApp/prototype/src/app/progress-view/progress-view.component.ts
View file @
b164296c
...
...
@@ -74,12 +74,16 @@ export class ProgressViewComponent implements OnInit {
}
async
initializeInfo
():
Promise
<
void
>
{
const
keys
=
Object
.
keys
(
this
.
similarity
).
map
(
a
=>
Number
(
a
)).
sort
((
a
,
b
)
=>
b
-
a
);
const
allWindows
=
[];
for
(
const
key
of
keys
)
{
allWindows
.
push
(
this
.
similarity
[
key
]);
const
keys
=
Object
.
keys
(
this
.
similarity
);
for
(
let
i
=
this
.
cache
.
nrOfTables
;
i
>=
1
;
i
--
)
{
if
(
keys
.
indexOf
(
i
.
toString
())
===
-
1
)
{
allWindows
.
push
([]);
}
else
{
allWindows
.
push
(
this
.
similarity
[
i
.
toString
()]);
}
}
const
averages
=
await
this
.
cache
.
getAverageWindow
(
allWindows
);
const
averages
=
await
this
.
cache
.
getAverage
Progress
Window
s
(
allWindows
);
this
.
plot
=
this
.
averagePlot
(
averages
);
}
...
...
AngularApp/prototype/src/app/table-overview/table-overview.component.css
View file @
b164296c
...
...
@@ -9,5 +9,4 @@
.subplot
:hover
{
cursor
:
pointer
!important
;
background-color
:
#4CAF50
;
}
AngularApp/prototype/src/app/table-overview/table-overview.component.html
View file @
b164296c
...
...
@@ -7,6 +7,7 @@
<div
class=
"plots"
>
<div
class=
"subplot"
*ngFor=
"let subplot of averages"
>
<plotly-plot
[data]=
"subplot.data"
[layout]=
"subplot.layout"
></plotly-plot>
<button
(click)=
"setQuery(subplot.data)"
>
Use as query
</button>
</div>
</div>
</div>
AngularApp/prototype/src/app/table-overview/table-overview.component.ts
View file @
b164296c
...
...
@@ -14,7 +14,7 @@ export class TableOverviewComponent implements OnInit {
ngOnInit
():
void
{
this
.
service
.
onNewTables
.
subscribe
(()
=>
this
.
createPlots
());
this
.
service
.
onNew
Quer
y
.
subscribe
(()
=>
this
.
createPlots
());
this
.
service
.
onNew
Similarit
y
.
subscribe
(()
=>
this
.
createPlots
());
}
public
get
tables
()
{
...
...
@@ -60,6 +60,7 @@ export class TableOverviewComponent implements OnInit {
const
queryEntry
=
Object
.
keys
(
table
.
entries
).
filter
((
hash
:
string
)
=>
{
return
table
.
entries
[
hash
].
indexOf
(
this
.
service
.
query
)
>
-
1
;
})[
0
];
console
.
log
(
queryEntry
);
listOfWindows
.
push
(
table
.
entries
[
queryEntry
]);
}
this
.
subplots
.
push
(
...
...
@@ -103,9 +104,13 @@ export class TableOverviewComponent implements OnInit {