Skip to content
GitLab
Menu
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
a06c8e37
Commit
a06c8e37
authored
Feb 16, 2021
by
Kruyff,D.L.W. (Dylan)
Browse files
Scrollable overview
Former-commit-id:
56da1762
parent
ae0aef53
Changes
6
Hide whitespace changes
Inline
Side-by-side
AngularApp/prototype/src/app/overview-window/overview-window.component.html
View file @
a06c8e37
...
...
@@ -13,24 +13,26 @@
</div>
</div>
</as-split-area>
<as-split-area
[size]=
"90"
>
<as-split-area
[size]=
"90"
[style]=
"{'overflow-y': 'hidden'}"
>
<div
class=
"channel_header"
>
Dataset overview
</div>
<div
class=
"toolbar"
>
<label
class=
"small-margin"
for=
"
w
in
dowsize
"
>
Start
</label><br>
<input
class=
"small-margin"
id=
"
w
in
dowsize
"
[(ngModel)]=
"minx"
>
<label
class=
"small-margin"
for=
"
m
in"
>
Start
</label><br>
<input
class=
"small-margin"
id=
"
m
in"
[(ngModel)]=
"minx"
>
<label
class=
"small-margin"
for=
"
hashsize
"
>
End
</label><br>
<input
class=
"small-margin"
[(ngModel)]=
"maxx"
id=
"
hashsize
"
>
<label
class=
"small-margin"
for=
"
max
"
>
End
</label><br>
<input
class=
"small-margin"
[(ngModel)]=
"maxx"
id=
"
max
"
>
<label
class=
"small-margin"
for=
"w"
>
Window Size
</label><br>
<input
class=
"small-margin"
[disabled]=
"true"
[value]=
"maxx - minx"
id=
"w"
>
<button
(click)=
"setquery()"
>
Set as query
</button>
</div>
<div
class=
"overview"
>
<zingchart-angular
#chart
[id]=
"id"
(
mouse
wheel)=
"
zoom
($event)"
(zoom)=
"ping()"
[height]=
"height"
(complete)=
"ping()
"
></zingchart-angular>
<zingchart-angular
#chart
[id]=
"id"
(wheel)=
"
scroll
($event)"
[height]=
"height
"
></zingchart-angular>
</div>
</as-split-area>
</as-split>
...
...
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @
a06c8e37
...
...
@@ -211,6 +211,7 @@ export class OverviewWindowComponent implements OnInit {
});
});
zingchart
.
bind
(
'
zingchart-ng-1
'
,
'
zoom
'
,
(
e
)
=>
{
console
.
log
(
"
zoom
"
);
if
(
e
.
stopupdate
)
{
return
;
}
else
{
...
...
@@ -363,7 +364,7 @@ export class OverviewWindowComponent implements OnInit {
}
ping
()
{
console
.
log
(
"
zoom
"
);
console
.
log
(
"
ping
"
);
}
async
updateCandidates
()
{
...
...
@@ -375,8 +376,29 @@ export class OverviewWindowComponent implements OnInit {
console
.
log
(
candidates
);
this
.
candidateLabels
=
[];
this
.
goodLabels
=
[];
this
.
badLabels
=
[];
this
.
markers
=
[];
for
(
const
index
in
this
.
state
.
labels
)
{
if
(
this
.
state
.
labels
[
index
])
{
this
.
goodLabels
.
push
([
Number
(
index
),
1
]);
this
.
markers
.
push
({
type
:
'
area
'
,
// BUG: For some reason the range values are multiplied by 10
range
:
[
Number
(
index
)
/
10
,
(
Number
(
index
)
+
this
.
state
.
windowSize
)
/
10
],
backgroundColor
:
"
#4caf50
"
,
});
}
else
{
this
.
badLabels
.
push
([
Number
(
index
),
-
1
]);
this
.
markers
.
push
({
type
:
'
area
'
,
// BUG: For some reason the range values are multiplied by 10
range
:
[
Number
(
index
)
/
10
,
(
Number
(
index
)
+
this
.
state
.
windowSize
)
/
10
],
backgroundColor
:
"
#f44336
"
,
});
}
}
for
(
const
index
of
candidates
)
{
this
.
candidateLabels
.
push
([
Number
(
index
),
0
]);
this
.
markers
.
push
({
...
...
@@ -391,6 +413,8 @@ export class OverviewWindowComponent implements OnInit {
if
(
channel
.
type
===
'
line
'
)
{
channel
.
scaleX
.
markers
=
this
.
markers
;
}
else
{
channel
.
series
[
0
].
values
=
this
.
goodLabels
;
channel
.
series
[
1
].
values
=
this
.
badLabels
;
channel
.
series
[
2
].
values
=
this
.
candidateLabels
;
}
}
...
...
@@ -428,15 +452,24 @@ export class OverviewWindowComponent implements OnInit {
// this.state.labels = temp;
// }
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
'
);
scroll
(
p
)
{
p
.
stopPropagation
();
console
.
log
(
'
mousewheel
'
);
console
.
log
(
p
);
console
.
log
(
p
.
deltaY
);
const
q
=
Math
.
round
((
this
.
_maxx
-
this
.
_minx
)
/
10
);
if
(
p
.
deltaY
>
0
)
{
this
.
_minx
=
Math
.
max
(
this
.
_minx
-
q
,
0
);
this
.
_maxx
=
Math
.
max
(
this
.
_maxx
-
q
,
0
);
}
else
if
(
p
.
deltaY
<
0
)
{
this
.
_minx
=
Math
.
min
(
this
.
_minx
+
q
,
this
.
state
.
rawData
[
0
].
values
.
length
-
1
);
this
.
_maxx
=
Math
.
min
(
this
.
_maxx
+
q
,
this
.
state
.
rawData
[
0
].
values
.
length
-
1
);
}
this
.
chart
.
zoomto
({
graphid
:
`zingchart-ng-1-graph-preview`
,
xmin
:
this
.
_minx
,
xmax
:
this
.
_maxx
,
});
}
isInSelection
(
i
):
boolean
{
...
...
AngularApp/prototype/src/app/progress-view/progress-view.component.css
View file @
a06c8e37
...
...
@@ -44,5 +44,10 @@ mat-slider {
width
:
400px
;
}
.button
{
display
:
flex
;
justify-content
:
center
;
}
line
{
stroke
:
#5e4646
;
}
circle
{
stroke
:
#fff
;
stroke-width
:
1.5px
;
}
AngularApp/prototype/src/app/progress-view/progress-view.component.html
View file @
a06c8e37
...
...
@@ -2,13 +2,13 @@
<div
class=
"main-container"
>
<mat-tab-group
mat-stretch-tabs
animationDuration=
"0ms"
>
<mat-tab
label=
"Classifier"
>
<div
*ngIf=
"data"
class=
"container"
>
<div
*ngIf=
"data"
class=
"container
button
"
>
<button
(click)=
"showCandidates()"
>
Show {{ nrOfCandidates }} similar candidates
</button>
</div>
<div
*ngIf=
"data"
class=
"slider"
>
<mat-slider
[min]=
"0"
[max]=
"maxLength"
step=
"1"
[value]=
"sliderValue"
(input)=
"setSliderValue($event)"
thumbLabel
tickInterval=
"
5
"
></mat-slider>
<mat-slider
[min]=
"0"
[max]=
"maxLength"
step=
"1"
[value]=
"sliderValue"
(input)=
"setSliderValue($event)"
tickInterval=
"
1
"
></mat-slider>
</div>
<div
*ngIf=
"data"
class=
"info"
>
<div
class=
"histogram"
>
...
...
@@ -20,7 +20,8 @@
<div
class=
"container"
>
<fieldset>
<legend>
Info
</legend>
# Candidates found: {{1000000}}
<div>
Candidates pruned: {{pruned}}%
</div>
<div>
Computing time: {{computingTime}} seconds
</div>
</fieldset>
</div>
</div>
...
...
AngularApp/prototype/src/app/progress-view/progress-view.component.ts
View file @
a06c8e37
...
...
@@ -305,4 +305,12 @@ export class ProgressViewComponent implements OnInit {
public
showCandidates
()
{
this
.
state
.
sliderValue
=
this
.
_sliderValue
;
}
public
get
pruned
():
string
{
return
(
100
-
100
*
this
.
state
.
lshData
.
average_candidates
.
length
/
this
.
state
.
rawData
[
0
].
values
.
length
).
toPrecision
(
2
);
}
public
get
computingTime
():
number
{
return
this
.
state
.
computedTime
/
1000
;
}
}
AngularApp/prototype/src/app/state.service.ts
View file @
a06c8e37
...
...
@@ -22,6 +22,7 @@ export class StateService {
private
_labels
=
{};
private
_lshParameters
:
number
[];
private
_selection
:
number
[];
public
computedTime
=
0
;
public
windowSize
=
120
;
public
nrOfTables
=
5
;
public
hashSize
=
5
;
...
...
@@ -95,7 +96,9 @@ export class StateService {
*/
async
lshInitial
():
Promise
<
void
>
{
this
.
_weights
=
Array
(
this
.
_queryWindow
.
length
).
fill
(
1
);
const
t0
=
new
Date
().
getTime
();
this
.
lshData
=
await
this
.
api
.
lshInitial
(
this
.
_queryWindow
);
this
.
computedTime
=
new
Date
().
getTime
()
-
t0
;
this
.
_lshParameters
=
this
.
lshData
.
parameters
;
}
...
...
@@ -104,7 +107,9 @@ export class StateService {
*/
async
update
(
labels
,
hashFunctions
):
Promise
<
void
>
{
this
.
_weights
=
await
this
.
api
.
getWeights
(
this
.
_queryWindow
,
labels
,
this
.
_weights
,
hashFunctions
);
const
t0
=
new
Date
().
getTime
();
this
.
lshData
=
await
this
.
api
.
lshUpdate
(
this
.
_queryWindow
,
this
.
_weights
,
this
.
_lshParameters
);
this
.
computedTime
=
new
Date
().
getTime
()
-
t0
;
}
/**
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment