Skip to content

Commit 1ae3c52

Browse files
birmbirm
authored
Merge pull request #1079 from camicroscope/develop
For 3.12
2 parents 8e1148c + eb5dcee commit 1ae3c52

59 files changed

Lines changed: 3535 additions & 1764 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/axe-a11y-check.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ jobs:
2424
- run: npm install -g http-server
2525
- run: npm run build --if-present
2626
- run: http-server -s &
27+
- name: Install specific version of ChromeDriver
28+
run: npm install -g chromedriver@125
2729
- name: Run axe
2830
run: |
2931
npm install -g @axe-core/cli
3032
sleep 90
31-
axe http://127.0.0.1:8080 --exit
33+
axe http://127.0.0.1:8080 --chromedriver-path $(npm root -g)/chromedriver/bin/chromedriver --exit

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
4646
| ![](https://fonts.gstatic.com/s/i/materialicons/bug_report/v4/24px.svg) | Bug Report | Report a bug or give feedback. |
4747
| ![](https://fonts.gstatic.com/s/i/materialicons/camera_enhance/v4/24px.svg) | Slide Capture | Click to take a screenshot of the slide and annotations on it. |
4848
| ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg) | Tutorial | Click to view a guided tour of the viewer tools. |
49-
49+
| ![](https://fonts.gstatic.com/s/i/materialicons/auto_graph/v4/24px.svg) | Visualization | Click to view visualizations of annotations. |
5050

5151
## Toolbar Shortcuts
5252

‎apps/Info.html‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<!-- Font Awesome -->
1515
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
1616

17-
<title>CaMicroscope Data Table</title>
17+
<title>caMicroscope - Information Dashboard</title>
1818

1919
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
2020

@@ -38,9 +38,28 @@
3838
<link rel="stylesheet" href="./table.css" />
3939
<link rel="stylesheet" href="./info.css" />
4040
<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
41+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
42+
43+
<style>
44+
.skip-to-content {
45+
position: absolute;
46+
top: -40px;
47+
left: 0;
48+
background: #212529;
49+
color: white;
50+
padding: 8px;
51+
z-index: 100;
52+
transition: top 0.3s;
53+
}
54+
.skip-to-content:focus {
55+
top: 0;
56+
}
57+
</style>
58+
4159
</head>
4260

4361
<body>
62+
<a href="#main-content" class="skip-to-content">Skip to main content</a>
4463
<div class="page-container">
4564
<div>
4665
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
@@ -70,12 +89,13 @@
7089
</div>
7190
</nav>
7291

73-
<div class="header text-center text-white bg-info p-4">
92+
<main id="main-content">
93+
<div class="header text-center text-white bg-dark p-4">
7494
<h1 class="h1">caMicroscope</h1>
7595
<p style="font-weight: bold; font-size: 14pt;">Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
7696
<div style="align-content: center;">
7797
<div class="btn-group" role="group">
78-
<a href="./table.html"> <button style="border-color: white; border-radius: 5px 0 0 5px;" type="button" class="btn btn-secondary bg-info text-light" title="Slides Table"><i class="fas fa-list-alt"></i> Slides</button> </a>
98+
<a href="./table.html"> <button style="border-color: white; border-radius: 5px 0 0 5px;" type="button" class="btn btn-secondary bg-dark text-light" title="Slides Table"><i class="fas fa-list-alt"></i> Slides</button> </a>
7999
<button type="button" style="border-color: white;" class="btn btn-secondary bg-white text-dark" title="Information Dashboard"> <i class="fas fa-info-circle"></i> Info</button>
80100
</div>
81101
</div>
@@ -103,6 +123,7 @@ <h4 class="card-title text-center">Synopsis</h4><hr class="mt-0">
103123
</div>
104124
</div>
105125
</div>
126+
106127
<div class="alert alert-info" role="alert">
107128

108129
<h4 style="text-align:center">Annotations</h4><hr class="mt-0">
@@ -151,6 +172,8 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
151172
</div>
152173
</div>
153174
</div>
175+
</main>
176+
154177

155178
<!-- footer -->
156179
<footer id="footer-layout"></footer>
@@ -207,11 +230,37 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
207230
else{
208231
heatdisp="<i class='fas fa-check' style='color:green;'></i>"
209232
}
210-
var button = `<td> <button class=\"btn btn-primary\" data-id='${allSlides.length}' onclick='openDetails(this)'>Details</button></td>`
211-
var markup = "<tr><td>"+JSONdata.id+"</td><td>"+JSONdata.name+"</td><td>"+annodisp+"</td><td>"+heatdisp+"</td>"+button+"</tr>"
233+
var button = `<td> <button class=\"btn btn-primary btn-sm\" data-id='${allSlides.length}' onclick='openDetails(this)'>Details</button></td>`
234+
const visualization_button = `<td>
235+
<button class="btn btn-success btn-sm" data-id='${JSONdata.id}' onclick='openView(this)'>VisualGraph</span></button>
236+
</button></td>`
237+
var markup = "<tr><td>"+JSONdata.id+"</td><td>"+JSONdata.name+"</td><td>"+annodisp+"</td><td>"+heatdisp+"</td><td>"+button+visualization_button+"</td></tr>"
212238
table.append(markup);
213239
}
214240

241+
function openView(e) {
242+
const oid = e.dataset.id;
243+
console.log(oid);
244+
if (oid) {
245+
window.location.href = `./visualization-dashboard.html?slideId=${sanitize(oid)}`;
246+
} else {
247+
alert('No Data Id');
248+
}
249+
}
250+
251+
function sanitize(string) {
252+
string = string || '';
253+
const map = {
254+
'&': '&amp;',
255+
'<': '&lt;',
256+
'>': '&gt;',
257+
'"': '&quot;',
258+
'\'': '&#x27;',
259+
'/': '&#x2F;',
260+
};
261+
const reg = /[&<>"'/]/ig;
262+
return string.replace(reg, (match) => (map[match]));
263+
}
215264
function openDetails(tag){
216265
document.getElementById('detail-dialog').style.display = 'block';
217266
document.getElementById('detail-dialog').style.opacity = '1';
@@ -229,9 +278,9 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
229278
table.append(content);
230279
addAnnotations(allSlides[count].annotations);
231280
addHeatmaps(allSlides[count].heatmap);
232-
console.log(allSlides[count]);
281+
console.log(allSlides[count],count);
233282
}
234-
283+
235284
function addAnnotations(content){
236285
if(content.length===0){
237286
return;
@@ -441,7 +490,7 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
441490
addbody(JSONdata);
442491
});
443492
});
444-
// console.log(JSONdata);
493+
// console.log(JSONdata);
445494
}
446495
});
447496
}

‎apps/batchloader/batchloader.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
77
<meta
88
name="viewport"
9-
content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0"
1010
/>
1111
<link
1212
rel="stylesheet"

‎apps/common.css‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@
1212
margin: 0;
1313
}
1414

15-
#footer-layout hr {
16-
border-bottom-color: #ffffff;
17-
padding: 0;
18-
margin: 0;
19-
}
20-
2115
#footer-layout {
2216
color: whitesmoke;
2317
text-align: left;
@@ -29,17 +23,17 @@
2923
color: whitesmoke;
3024
}
3125

32-
.company-name {
26+
.report-link a,
27+
.company-name a {
3328
color: #e5c1ea;
3429
}
3530

36-
.company-name a {
31+
.report-link a:hover,
32+
.company-name a:hover {
3733
color: #e5c1ea;
34+
text-decoration: none;
3835
}
3936

40-
.company-name:hover {
41-
color: #d5c1ea;
42-
}
4337
#footer-layout strong,
4438
#footer-layout b {
4539
color: #ffffff;

‎apps/dev-workbench/workbench.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,20 @@
6767
margin-left: 0 !important;
6868
}
6969
}
70+
.navbar .nav-item .options-button {
71+
color: #000;
72+
border: none;
73+
}
74+
75+
.focus-visible:focus-visible {
76+
outline: 3px solid #000;
77+
outline-offset: 2px;
78+
box-shadow: 0 0 0 5px rgb(23, 162, 184);
79+
}
80+
81+
/* For browsers that don't support :focus-visible */
82+
.focus-visible:focus {
83+
outline: 3px solid #000;
84+
outline-offset: 2px;
85+
box-shadow: 0 0 0 5px rgb(23, 162, 184);
86+
}

‎apps/dev-workbench/workbench.html‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,31 @@
6060
<script src="../../common/jszip.min.js"></script>
6161
<script src="../../common/FileSaver.min.js"></script>
6262
<script src="../../common/localforage.min.js"></script>
63+
64+
<style>
65+
.skip-to-content {
66+
position: absolute;
67+
top: -40px;
68+
left: 0;
69+
background: #212529;
70+
color: white;
71+
padding: 8px;
72+
z-index: 100;
73+
transition: top 0.3s;
74+
}
75+
.skip-to-content:focus {
76+
top: 0;
77+
}
78+
</style>
6379
</head>
6480
<body>
81+
<a href="#main-content" class="skip-to-content">Skip to main content</a>
6582
<!--Navbar-->
6683
<nav
6784
class="navbar navbar-expand-lg navbar-dark flex-row px-2"
6885
style="background: rgb(33, 37, 41);"
6986
>
70-
<div style="cursor: pointer;" id="goBack">
87+
<div role="button" aria-label="Go back" style="cursor: pointer;" id="goBack" tabindex="0">
7188
<i data-feather="arrow-left" class="text-white"></i>
7289
</div>
7390

@@ -87,13 +104,14 @@
87104

88105
class="nav-item dropdown"
89106
>
90-
<a
91-
class="nav-link dropdown-toggle"
107+
<button
108+
class="nav-link dropdown-toggle options-button"
92109
id="navbarDropdownMenuLink"
93110
data-toggle="dropdown"
94111
aria-haspopup="true"
95112
aria-expanded="false"
96-
>Options</a
113+
aria-label="Options dropdown"
114+
>Options</button
97115
>
98116
<div
99117
style="margin-left: -5em;"
@@ -105,20 +123,24 @@
105123
class="dropdown-item"
106124
href="#"
107125
style="display: none;"
108-
><i class="fas fa-file-export"></i>&nbsp;&nbsp;Export</a
126+
tabindex="0"
127+
role="menuitem"
128+
><i class="fas fa-file-export" aria-hidden="true"></i>&nbsp;&nbsp;Export</a
109129
>
110130
<a class="dropdown-item" href="#" onclick="importWork()"
111-
><i class="fas fa-file-import"></i>&nbsp;&nbsp;Import</a
131+
tabindex="0" role="menuitem"><i class="fas fa-file-import"></i>&nbsp;&nbsp;Import</a
112132
>
113-
<input type="file" id="importFile" />
133+
<input type="file" id="importFile" tabindex="-1" />
114134
<a
115135
class="dropdown-item helpButton"
116136
href="#"
117137
data-toggle="modal"
118138
data-target="#helpModal"
119139
onClick="displayUserGuide()"
140+
tabindex="0"
141+
role="menuitem"
120142
>
121-
<i class="fas fa-question-circle"></i>
143+
<i class="fas fa-question-circle" aria-hidden="true"></i>
122144
&nbsp;&nbsp;Help/User Guide</a
123145
>
124146
</div>
@@ -129,6 +151,7 @@
129151
</nav>
130152
<!--/.Navbar-->
131153

154+
<main id="main-content">
132155
<div id="headbar">
133156
<br />
134157
<div id="headContent" style="font-size: xx-large;">
@@ -165,7 +188,8 @@
165188
margin-bottom: -1em;
166189
"
167190
type="button"
168-
class="btn btn-primary"
191+
class="btn btn-primary focus-visible"
192+
aria-label="Select or create your dataset"
169193
>
170194
<i data-feather="chevron-right" class="text-white"></i>
171195
</button>
@@ -258,7 +282,7 @@ <h4 class="card-title">Select your dataset</h4>
258282
style="overflow: hidden;"
259283
class="custom-file-label spriteInputLabel"
260284
for="spriteInput"
261-
> Choose file
285+
>
262286
</label>
263287
</div>
264288
</div>
@@ -346,7 +370,6 @@ <h5 class="modal-title" id="labelSelectModalTitle"></h5>
346370
for="labelsInput"
347371
style="overflow: hidden;"
348372
>
349-
Choose
350373
</label>
351374
</div>
352375
</div>
@@ -509,5 +532,7 @@ <h5 class="modal-title" id="helpModalTitle">Help - User Guide</h5>
509532
<script>
510533
feather.replace(); // for feather Icons
511534
</script>
535+
536+
</main>
512537
</body>
513538
</html>

‎apps/dev-workbench/workbench.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,25 @@ $(document).ready(function() {
44
$('#stepper').show(400);
55
});
66

7-
$('#goBack').click(function() {
8-
window.history.back();
9-
});
7+
// Unified function for going back
8+
function goBack(e) {
9+
// Prevent default action for keyboard events
10+
if (e && e.preventDefault) {
11+
e.preventDefault();
12+
}
13+
window.history.back();
14+
}
15+
16+
// Click event for the back button
17+
$('#goBack').on('click', goBack);
18+
19+
// Keydown event for the back button
20+
$('#goBack').on('keydown', function(e) {
21+
// Check for both Enter (13) and Space (32) key codes
22+
if (e.keyCode === 13 || e.keyCode === 32) {
23+
goBack(e);
24+
}
25+
});
1026

1127
// initialize Step 1
1228
function dataSelect() {

‎apps/dicom-connect/table.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta charset='utf-8'>
77
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
88
<meta name='viewport'
9-
content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
9+
content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0>
1010
<!-- common -->
1111
<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
1212
<!-- Check If we're logged in ok, otherwise, log in for us -->

‎apps/heatmap/heatmap.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="keywords" content="camicroscope, quip" />
66
<meta charset='utf-8'>
77
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
8-
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
8+
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=2.0>
99
1010
<title>caMicroscope</title>
1111
<!-- google material icons css sheet -->

0 commit comments

Comments
 (0)