Skip to content

Commit 13ef641

Browse files
arpitnarechaniaarpitnarechania
committed
update homepage
1 parent 965a6ec commit 13ef641

File tree

4 files changed

+131
-18
lines changed

4 files changed

+131
-18
lines changed

‎src/app/app.component.scss

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -654,4 +654,47 @@
654654

655655
::ng-deep .p-card .p-card-body, ::ng-deep .p-card .p-card-content{
656656
padding: 0 !important;
657-
}
657+
}
658+
659+
::ng-deep .embed-responsive {
660+
position: relative;
661+
display: block;
662+
width: 100%;
663+
padding: 0;
664+
overflow: hidden;
665+
}
666+
667+
::ng-deep .embed-responsive::before {
668+
display: block;
669+
content: "";
670+
}
671+
672+
::ng-deep .embed-responsive .embed-responsive-item,
673+
::ng-deep .embed-responsive iframe,
674+
::ng-deep .embed-responsive embed,
675+
::ng-deep .embed-responsive object,
676+
::ng-deep .embed-responsive video {
677+
position: absolute;
678+
top: 0;
679+
bottom: 0;
680+
left: 0;
681+
width: 100%;
682+
height: 100%;
683+
border: 0;
684+
}
685+
686+
::ng-deep .embed-responsive-21by9::before {
687+
padding-top: 42.857143%;
688+
}
689+
690+
::ng-deep .embed-responsive-16by9::before {
691+
padding-top: 56.25%;
692+
}
693+
694+
::ng-deep .embed-responsive-4by3::before {
695+
padding-top: 75%;
696+
}
697+
698+
::ng-deep .embed-responsive-1by1::before {
699+
padding-top: 100%;
700+
}

‎src/app/applications/dynamic-query-widgets-homefinder/component.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,16 @@ <h6 class="panel-heading display-inline">Control Panel</h6>
2525
[value]="appFilters['Rooms'].model" (selectedChange)="appFilters['Rooms'].model = $event.value; updateVis()"
2626
[options]="appFilters['Rooms'].qFilterSliderConfig" mode="interaction" [visualize]="false" [freeze]="true" />
2727
</div>
28-
<!-- <hr> -->
28+
<br/>
29+
<hr>
2930
<div class="form-group">
3031
<label>Price</label>
3132
<provenance-slider [attr.data-label]="'Room'" id="{{'provenance-single-slider-price'}}" ngDefaultControl
3233
[value]="appFilters['Price'].model[0]" [highValue]="appFilters['Price'].model[1]" (selectedChange)="appFilters['Price'].model[0] = $event.value; appFilters['Price'].model[1] = $event.highValue; updateVis()"
3334
[options]="appFilters['Price'].qFilterSliderConfig" mode="interaction" [visualize]="false" [freeze]="true" />
3435
</div>
35-
<!-- <hr> -->
36+
<br/>
37+
<hr>
3638
<div class="form-group">
3739
<label>Lot Config</label>
3840
<provenance-radiobutton ngDefaultControl id="{{'provenance-radiobutton-lotconfig'}}"
@@ -44,9 +46,10 @@ <h6 class="panel-heading display-inline">Control Panel</h6>
4446
[freeze]="true"
4547
/>
4648
</div>
47-
<!-- <hr> -->
49+
<hr>
4850
<div class="form-group">
4951
<label>Heating Type</label>
52+
<br/><br/>
5053
<provenance-multiselect dndDropzone id="{{'provenance-multiselect-heatingtype'}}" ngDefaultControl
5154
[attr.data-label]="'Heating Type'" [(selected)]="appFilters['Heating Type'].model"
5255
(selectedChange)="updateVis()"

‎src/app/applications/home/component.html

Lines changed: 77 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,61 @@
1-
<div class="container">
1+
<div class="container" style="font-family: monospace;">
2+
<br />
23
<div class="row">
34
<div class="col-md-12 text-center">
4-
<img style="border:1px solid grey" src="assets/images/architecture.png" width="75%" />
5+
<h2><img src="assets/images/logo-dark.png" height="36" alt="ProvenanceWidgets Logo" />ProvenanceWidgets</h2>
6+
<h5 class="text-muted">A JavaScript Library of UI Controls to Track and Dynamically Overlay Analytic Provenance
7+
</h5>
8+
<h6 class="text-muted">Arpit Narechania, Kaustubh Odak, Mennatallah El-Assady, Alex Endert</h6>
9+
<h6 class="text-muted">Georgia Institute of Technology and ETH Zürich</h6>
10+
<div class="text-center mt-md">
11+
<a href="https://github.com/ProvenanceWidgets/ProvenanceWidgets" target="_blank" class="btn btn-info"><i
12+
class="pi pi-github"></i>&nbsp;View on Github</a>&nbsp;
13+
<a href="https://arxiv.org/pdf/2407.17431" target="_blank" class="btn btn-success"><i
14+
class="pi pi-file-pdf"></i>&nbsp;Paper (VIS 2024)</a>&nbsp;
15+
<a href="https://github.com/ProvenanceWidgets/Supplemental-Material" target="_blank" class="btn btn-warning"><i
16+
class="pi pi-link"></i>&nbsp;Supplemental Material (VIS 2024)</a>
17+
</div>
518
</div>
619
</div>
720
<hr>
21+
<div class="row">
22+
<div class="col-md-6">
23+
<div class="p-md" style="text-align: justify;">
24+
<small>
25+
ProvenanceWidgets is a Javascript library of UI control elements such as radio buttons, checkboxes, and
26+
dropdowns to track and dynamically overlay a user's analytic provenance. These in situ overlays not only save
27+
screen space but also minimize the amount of time and effort needed to access the same information from
28+
elsewhere in the UI. In this paper, we discuss how we design modular UI control elements to track how often and
29+
how recently a user interacts with them and design visual overlays showing an aggregated summary as well as a
30+
detailed temporal history. We demonstrate the capability of ProvenanceWidgets by recreating three prior widget
31+
libraries: (1) Scented Widgets, (2) Phosphor objects, and (3) Dynamic Query Widgets. We also evaluated its
32+
expressiveness and conducted case studies with visualization developers to evaluate its effectiveness. We find
33+
that ProvenanceWidgets enables developers to implement custom provenance-tracking applications effectively.
34+
ProvenanceWidgets is available as open-source software to help application
35+
developers build custom provenance-based systems.
36+
</small>
37+
</div>
38+
</div>
39+
<div class="col-md-6">
40+
<div class="p-md">
41+
<div class="embed-responsive embed-responsive-16by9">
42+
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7l6jKbS2SFI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<hr>
48+
<div class="row">
49+
<div class="col-md-12">
50+
<h4>Showcase</h4>
51+
<br />
52+
</div>
53+
</div>
854
<div class="row">
955
<div class="col-md-3">
1056
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/playground')">
1157
<ng-template pTemplate="subtitle">
12-
<div class="text-center">Playground</div>
58+
<h5 class="text-center">Playground</h5>
1359
</ng-template>
1460
<ng-template pTemplate="content">
1561
<img style="border:1px solid grey" src="assets/images/playground.png" width="100%" />
@@ -19,7 +65,7 @@
1965
<div class="col-md-3" (click)="navigateToRoute('/scented-widgets')">
2066
<p-card class="w-100 cursor-pointer">
2167
<ng-template pTemplate="subtitle">
22-
<div class="text-center">Scented Widgets</div>
68+
<h5 class="text-center">Scented Widgets</h5>
2369
</ng-template>
2470
<ng-template pTemplate="content">
2571
<img style="border:1px solid grey" src="assets/images/scented-widgets.png" width="100%" />
@@ -29,7 +75,7 @@
2975
<div class="col-md-3">
3076
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/phosphor-objects')">
3177
<ng-template pTemplate="subtitle">
32-
<div class="text-center">Phosphor Objects</div>
78+
<h5 class="text-center">Phosphor Objects</h5>
3379
</ng-template>
3480
<ng-template pTemplate="content">
3581
<img style="border:1px solid grey" src="assets/images/phosphor-objects.png" width="100%" />
@@ -39,30 +85,30 @@
3985
<div class="col-md-3">
4086
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/data-distribution')">
4187
<ng-template pTemplate="subtitle">
42-
<div class="text-center">Data Distribution</div>
88+
<h5 class="text-center">Data Distribution</h5>
4389
</ng-template>
4490
<ng-template pTemplate="content">
4591
<img style="border:1px solid grey" src="assets/images/data-distribution.png" width="100%" />
4692
</ng-template>
4793
</p-card>
4894
</div>
4995
</div>
50-
<br/>
96+
<br />
5197
<div class="row">
5298
<div class="col-md-3">
5399
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/vega-example')">
54100
<ng-template pTemplate="subtitle">
55-
<div class="text-center">Vega Integration</div>
101+
<h5 class="text-center">Vega Integration</h5>
56102
</ng-template>
57103
<ng-template pTemplate="content">
58104
<img style="border:1px solid grey" src="assets/images/vega-example.png" width="100%" />
59105
</ng-template>
60106
</p-card>
61107
</div>
62108
<div class="col-md-3">
63-
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/dynamic-query-widgets-homefinder')" >
109+
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/dynamic-query-widgets-homefinder')">
64110
<ng-template pTemplate="subtitle">
65-
<div class="text-center">Dynamic Query Widgets</div>
111+
<h5 class="text-center">Dynamic Query Widgets</h5>
66112
</ng-template>
67113
<ng-template pTemplate="content">
68114
<img style="border:1px solid grey" src="assets/images/dynamic-query-widgets-homefinder.png" width="100%" />
@@ -72,7 +118,7 @@
72118
<div class="col-md-3">
73119
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/widgets-to-vis-one-way')">
74120
<ng-template pTemplate="subtitle">
75-
<div class="text-center">Widgets to Visualization one-way</div>
121+
<h5 class="text-center">Widgets to Visualization one-way</h5>
76122
</ng-template>
77123
<ng-template pTemplate="content">
78124
<img style="border:1px solid grey" src="assets/images/widgets-to-vis-one-way.png" width="100%" />
@@ -82,12 +128,31 @@
82128
<div class="col-md-3">
83129
<p-card class="w-100 cursor-pointer" (click)="navigateToRoute('/vis-to-widgets-one-way')">
84130
<ng-template pTemplate="subtitle">
85-
<div class="text-center">Visualization to Widgets one-way</div>
131+
<h5 class="text-center">Visualization to Widgets one-way</h5>
86132
</ng-template>
87133
<ng-template pTemplate="content">
88134
<img style="border:1px solid grey" src="assets/images/vis-to-widgets-one-way.png" width="100%" />
89135
</ng-template>
90136
</p-card>
91137
</div>
92138
</div>
139+
<br/>
140+
<hr>
141+
<div class="row">
142+
<div class="col-md-12">
143+
<h4>Documentation</h4>
144+
<span>Coming Soon...</span>
145+
</div>
146+
</div>
147+
<br />
148+
<hr>
149+
<div class="row">
150+
<div class="col-md-12">
151+
<h4>Contact</h4>
152+
<span>Email Arpit at arpitnarechania [at] gmail.com</span>
153+
</div>
154+
</div>
155+
<br />
156+
<hr>
157+
<br />
93158
</div>

‎src/app/applications/home/component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ export class HomeComponent implements OnInit {
1414

1515
ngOnInit(): void { }
1616

17-
navigateToRoute(route){
18-
this.router.navigateByUrl(route);
17+
navigateToRoute(route:string){
18+
const url = `${window.location.origin}/#/${route}`;
19+
window.open(url, '_blank');
20+
// this.router.navigateByUrl(route, '_blank');
1921
}
2022
}

0 commit comments

Comments
 (0)