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
eb452310
Commit
eb452310
authored
Sep 07, 2020
by
Kruyff,D.L.W. (Dylan)
Browse files
Added zingchart hooks
parent
fae71d8c
Changes
13
Hide whitespace changes
Inline
Side-by-side
AngularApp/prototype/src/app/app.component.html
View file @
eb452310
<div
style=
"display: flex; justify-content: space-between;"
>
<div
class=
"left"
style=
"width: 80%"
>
<app-overview-window></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>
</mat-tab>
<mat-tab
label=
"Labeled data"
>
<app-labels></app-labels>
</mat-tab>
<mat-tab
label=
"Settings"
>
<app-settings></app-settings>
</mat-tab>
</mat-tab-group>
</div>
<div
style=
"width: 20%;"
>
<app-query-window></app-query-window>
<app-progress-view></app-progress-view>
</div>
</div>
<app-main></app-main>
AngularApp/prototype/src/app/app.component.ts
View file @
eb452310
import
{
Component
}
from
'
@angular/core
'
;
import
{
CacheService
}
from
'
./cache.service
'
;
@
Component
({
selector
:
'
app-root
'
,
templateUrl
:
'
./app.component.html
'
,
})
export
class
AppComponent
{
constructor
(
private
service
:
CacheService
)
{
}
changeTab
(
tab
)
{
this
.
service
.
currentTab
=
tab
.
index
;
}
}
AngularApp/prototype/src/app/app.module.ts
View file @
eb452310
...
...
@@ -16,6 +16,7 @@ import { LabelsComponent } from './labels/labels.component';
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
'
;
PlotlyModule
.
plotlyjs
=
PlotlyJS
;
...
...
@@ -29,6 +30,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
LabelsComponent
,
QueryWindowComponent
,
ProgressViewComponent
,
MainComponent
,
],
imports
:
[
BrowserModule
,
...
...
AngularApp/prototype/src/app/cache.service.ts
View file @
eb452310
...
...
@@ -19,6 +19,7 @@ export class CacheService {
public
nrOfTables
=
10
;
public
hashSize
=
5
;
public
stepSize
=
1
;
public
querySelectionMode
=
true
;
public
onNewData
:
EventEmitter
<
void
>
=
new
EventEmitter
<
void
>
();
public
onNewSimilarity
:
EventEmitter
<
void
>
=
new
EventEmitter
<
void
>
();
...
...
AngularApp/prototype/src/app/main/main.component.css
0 → 100644
View file @
eb452310
.overlay
{
position
:
fixed
;
display
:
none
;
width
:
100%
;
height
:
100%
;
top
:
200px
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
z-index
:
2
;
cursor
:
pointer
;
}
.show
{
display
:
block
;
}
AngularApp/prototype/src/app/main/main.component.html
0 → 100644
View file @
eb452310
<div
style=
"display: flex; justify-content: space-between;"
>
<div
class=
"left"
style=
"width: 80%"
>
<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>
</mat-tab>
<mat-tab
label=
"Labeled data"
>
<app-labels></app-labels>
</mat-tab>
<mat-tab
label=
"Settings"
>
<app-settings></app-settings>
</mat-tab>
</mat-tab-group>
</div>
<div
style=
"width: 20%;"
>
<app-query-window></app-query-window>
<app-progress-view></app-progress-view>
</div>
</div>
<div
class=
"overlay"
[class.show]=
"greyOut"
></div>
AngularApp/prototype/src/app/main/main.component.ts
0 → 100644
View file @
eb452310
import
{
Component
}
from
'
@angular/core
'
;
import
{
CacheService
}
from
'
../cache.service
'
;
@
Component
({
selector
:
'
app-main
'
,
templateUrl
:
'
./main.component.html
'
,
styleUrls
:
[
'
./main.component.css
'
]
})
export
class
MainComponent
{
constructor
(
private
service
:
CacheService
)
{
}
changeTab
(
tab
)
{
this
.
service
.
currentTab
=
tab
.
index
;
}
public
get
greyOut
()
{
return
this
.
service
.
querySelectionMode
;
}
}
AngularApp/prototype/src/app/overview-window/overview-window.component.html
View file @
eb452310
<div
style=
"overflow: auto"
>
<!-- <plotly-plot *ngIf="showPlot" [data]="data" [layout]="layout" (plotly_click)="clicked($event)"></plotly-plot>-->
</div>
<zingchart-angular
[config]=
"config"
[height]=
"200"
[series]=
"series
"
(node_click)=
"clicked($event)
"
></zingchart-angular>
<!--<div id="overview"></div>-->
<zingchart-angular
[id]=
"id"
[config]=
"config"
(mousewheel)=
"zoom($event)"
(click)=
"clicked($event)"
[height]=
"200"
[series]=
"series"
></zingchart-angular>
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @
eb452310
import
{
Component
}
from
'
@angular/core
'
;
import
{
CacheService
}
from
'
../cache.service
'
;
import
zingchart
from
'
zingchart/es6
'
;
@
Component
({
selector
:
'
app-overview-window
'
,
...
...
@@ -10,6 +11,7 @@ export class OverviewWindowComponent {
public
config
;
public
series
;
public
showPlot
=
false
;
public
id
=
"
overview
"
;
public
data
;
public
layout
;
...
...
@@ -85,12 +87,34 @@ export class OverviewWindowComponent {
zIndex
:
20
,
}]
};
// 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
"
);
}
async
clicked
(
clickData
)
{
if
(
!
this
.
service
.
querySelectionMode
)
{
return
;
}
this
.
service
.
querySelectionMode
=
false
;
const
xyInformation
=
zingchart
.
exec
(
"
zingchart-ng-1
"
,
'
getxyinfo
'
,
{
x
:
clickData
.
x
,
y
:
clickData
.
y
});
console
.
log
(
'
clicked node
'
);
const
index
=
Math
.
floor
(
clickData
.
nodeindex
/
this
.
service
.
stepSize
);
console
.
log
(
xyInformation
);
const
index
=
Math
.
floor
(
xyInformation
[
2
].
nodeidx
/
this
.
service
.
stepSize
);
this
.
service
.
query
=
index
;
const
temp
=
{};
temp
[
index
]
=
true
;
...
...
@@ -166,4 +190,13 @@ export class OverviewWindowComponent {
});
this
.
series
=
newSeries
;
}
zoom
(
p
)
{
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
);
}
}
AngularApp/prototype/src/app/progress-view/progress-view.component.html
View file @
eb452310
<div
*ngIf=
"plot"
class=
"window"
>
<div
class=
"plots"
>
<plotly-plot
[data]=
"plot.data"
[layout]=
"plot.layout"
(sliderEnd)=
setSliderValue($event)
></plotly-plot>
<plotly-plot
[data]=
"plot.data"
[layout]=
"plot.layout"
(sliderEnd)=
"
setSliderValue($event)
"
></plotly-plot>
</div>
</div>
AngularApp/prototype/src/app/query-window/query-window.component.html
View file @
eb452310
...
...
@@ -5,5 +5,6 @@
<div
*ngIf=
"query"
class=
"query-contents"
>
<span
style=
"display: flex; justify-content: center"
><b>
Current query
</b></span>
<plotly-plot
[data]=
"plot.data"
[layout]=
"plot.layout"
></plotly-plot>
<button
style=
"display: flex; justify-content: center; margin: 5px"
(click)=
"newQuery()"
>
Select new query
</button>
</div>
</div>
AngularApp/prototype/src/app/query-window/query-window.component.ts
View file @
eb452310
...
...
@@ -55,4 +55,8 @@ export class QueryWindowComponent implements OnInit {
get
query
():
number
{
return
this
.
service
.
query
;
}
public
newQuery
()
{
this
.
service
.
querySelectionMode
=
true
;
}
}
Flaskserver/.idea/workspace.xml
View file @
eb452310
...
...
@@ -2,10 +2,10 @@
<project
version=
"4"
>
<component
name=
"ChangeListManager"
>
<list
default=
"true"
id=
"556080ba-825c-4b55-a92a-867a4df4fb32"
name=
"Default Changelist"
comment=
""
>
<change
beforePath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/
cache.service.ts
"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/
cache.service.ts
"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/
overview-window/overview-window.component.html
"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/
overview-window/overview-window.component.html
"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.html"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.html"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/.
./AngularApp/prototype/src/app/progress-view/progress-view.component.ts"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.ts
"
afterDir=
"false"
/>
<change
beforePath=
"$PROJECT_DIR$/.
idea/workspace.xml"
beforeDir=
"false"
afterPath=
"$PROJECT_DIR$/.idea/workspace.xml
"
afterDir=
"false"
/>
</list>
<option
name=
"EXCLUDED_CONVERTED_TO_IGNORED"
value=
"true"
/>
<option
name=
"SHOW_DIALOG"
value=
"false"
/>
...
...
@@ -59,7 +59,7 @@
</list>
</option>
</component>
<component
name=
"ProjectFrameBounds"
extendedState=
"
6
"
>
<component
name=
"ProjectFrameBounds"
extendedState=
"
7
"
>
<option
name=
"x"
value=
"12"
/>
<option
name=
"y"
value=
"-36"
/>
<option
name=
"width"
value=
"1890"
/>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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