diff --git a/.github/workflows/axe-a11y-check.yml b/.github/workflows/axe-a11y-check.yml index d7e6123f2..7c6058049 100644 --- a/.github/workflows/axe-a11y-check.yml +++ b/.github/workflows/axe-a11y-check.yml @@ -24,8 +24,10 @@ jobs: - run: npm install -g http-server - run: npm run build --if-present - run: http-server -s & + - name: Install specific version of ChromeDriver + run: npm install -g chromedriver@125 - name: Run axe run: | npm install -g @axe-core/cli sleep 90 - axe http://127.0.0.1:8080 --exit + axe http://127.0.0.1:8080 --chromedriver-path $(npm root -g)/chromedriver/bin/chromedriver --exit diff --git a/README.md b/README.md index a8bc67900..e0e54d650 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto | ![](https://fonts.gstatic.com/s/i/materialicons/bug_report/v4/24px.svg) | Bug Report | Report a bug or give feedback. | | ![](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. | | ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg) | Tutorial | Click to view a guided tour of the viewer tools. | - +| ![](https://fonts.gstatic.com/s/i/materialicons/auto_graph/v4/24px.svg) | Visualization | Click to view visualizations of annotations. | ## Toolbar Shortcuts diff --git a/apps/Info.html b/apps/Info.html index d1055de91..27e380fa6 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -14,7 +14,7 @@ - CaMicroscope Data Table + caMicroscope - Information Dashboard @@ -38,9 +38,28 @@ + + + + +
-
+
+

caMicroscope

Digital pathology image viewer with support for human/machine generated annotations and markups.

- +
@@ -103,6 +123,7 @@

Synopsis

+ + + @@ -207,11 +230,37 @@

Infor else{ heatdisp="" } - var button = ` ` - var markup = ""+JSONdata.id+""+JSONdata.name+""+annodisp+""+heatdisp+""+button+"" + var button = ` ` + const visualization_button = ` + + ` + var markup = ""+JSONdata.id+""+JSONdata.name+""+annodisp+""+heatdisp+""+button+visualization_button+"" table.append(markup); } +function openView(e) { +const oid = e.dataset.id; +console.log(oid); + if (oid) { + window.location.href = `./visualization-dashboard.html?slideId=${sanitize(oid)}`; + } else { + alert('No Data Id'); + } +} + +function sanitize(string) { + string = string || ''; + const map = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + '\'': ''', + '/': '/', + }; + const reg = /[&<>"'/]/ig; + return string.replace(reg, (match) => (map[match])); +} function openDetails(tag){ document.getElementById('detail-dialog').style.display = 'block'; document.getElementById('detail-dialog').style.opacity = '1'; @@ -229,9 +278,9 @@

Infor table.append(content); addAnnotations(allSlides[count].annotations); addHeatmaps(allSlides[count].heatmap); - console.log(allSlides[count]); + console.log(allSlides[count],count); } - + function addAnnotations(content){ if(content.length===0){ return; @@ -441,7 +490,7 @@

Infor addbody(JSONdata); }); }); - // console.log(JSONdata); + // console.log(JSONdata); } }); } diff --git a/apps/batchloader/batchloader.html b/apps/batchloader/batchloader.html index bd329b73d..543565f8f 100644 --- a/apps/batchloader/batchloader.html +++ b/apps/batchloader/batchloader.html @@ -6,7 +6,7 @@ + + + +

@@ -165,7 +188,8 @@ margin-bottom: -1em; " type="button" - class="btn btn-primary" + class="btn btn-primary focus-visible" + aria-label="Select or create your dataset" > @@ -258,7 +282,7 @@

Select your dataset

style="overflow: hidden;" class="custom-file-label spriteInputLabel" for="spriteInput" - > Choose file + >
@@ -346,7 +370,6 @@ for="labelsInput" style="overflow: hidden;" > - Choose @@ -509,5 +532,7 @@ + +
diff --git a/apps/dev-workbench/workbench.js b/apps/dev-workbench/workbench.js index 2a408cd2c..80e1c8f9c 100644 --- a/apps/dev-workbench/workbench.js +++ b/apps/dev-workbench/workbench.js @@ -4,9 +4,25 @@ $(document).ready(function() { $('#stepper').show(400); }); -$('#goBack').click(function() { - window.history.back(); -}); +// Unified function for going back + function goBack(e) { + // Prevent default action for keyboard events + if (e && e.preventDefault) { + e.preventDefault(); + } + window.history.back(); + } + +// Click event for the back button + $('#goBack').on('click', goBack); + + // Keydown event for the back button + $('#goBack').on('keydown', function(e) { + // Check for both Enter (13) and Space (32) key codes + if (e.keyCode === 13 || e.keyCode === 32) { + goBack(e); + } + }); // initialize Step 1 function dataSelect() { diff --git a/apps/dicom-connect/table.html b/apps/dicom-connect/table.html index 3c9a662ca..65f0e8118 100644 --- a/apps/dicom-connect/table.html +++ b/apps/dicom-connect/table.html @@ -6,7 +6,7 @@ + content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0> diff --git a/apps/heatmap/heatmap.html b/apps/heatmap/heatmap.html index 40e814c2a..475d599a0 100644 --- a/apps/heatmap/heatmap.html +++ b/apps/heatmap/heatmap.html @@ -5,7 +5,7 @@ - + - + + - +
@@ -24,49 +44,63 @@
- + + - -
+
+
-
-
-

caMicroscope

-
-
+
+

caMicroscope

+
@@ -81,54 +115,47 @@

caMicroscope

-

caMicroscope

+

caMicroscope

Use camicroscope to explore and mark slides uploaded. If this is a restricted access deployment, you will be prompted to log in here.

- More + More
-

Documentation

+

Documentation

Read documentation for using and developing caMicroscope.

- More + More
-
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + - diff --git a/apps/landing/main.css b/apps/landing/main.css index ebd3c424e..d7930ed36 100644 --- a/apps/landing/main.css +++ b/apps/landing/main.css @@ -7,6 +7,11 @@ License: pixelarity.com/license */ +/* h1 */ +.page-title { + font-size: 40px !important; +} + /* Reset */ /* addind loader animation */ @@ -2716,7 +2721,7 @@ /* Wrapper */ .wrapper { - padding: 6.5em 0 4.5em 0 ; + padding: 3em 0 3em 0 ; position: relative; } @@ -3816,10 +3821,6 @@ /* Header */ - body { - padding-top: 3.5em; - } - body.landing { padding-top: 0; } diff --git a/apps/mini/viewer.html b/apps/mini/viewer.html index dfac92d47..193c63498 100644 --- a/apps/mini/viewer.html +++ b/apps/mini/viewer.html @@ -6,7 +6,7 @@ diff --git a/apps/model/model.css b/apps/model/model.css index 32ef379a7..a24554a4c 100644 --- a/apps/model/model.css +++ b/apps/model/model.css @@ -1,5 +1,5 @@ input { -/* required to properly style form + /* required to properly style form elements on WebKit based browsers */ -webkit-appearance: none; @@ -16,22 +16,27 @@ input { input:focus:invalid { box-shadow: none; } + @-webkit-keyframes blinker { 50% { - opacity: 0; + opacity: 0; } } -.blink{ + +.blink { animation: blinker 1s linear infinite; } -.error{ + +.error { color: yellow; } + #mtable { table-layout: fixed; width: 100%; border-collapse: collapse; } + #mtable thead th:nth-child(1) { width: 15%; } @@ -51,6 +56,7 @@ input:focus:invalid { #mtable thead th:nth-child(5) { width: 15%; } + #mtable thead th:nth-child(6) { width: 15%; } @@ -64,7 +70,8 @@ td { text-align: center; } -thead, tfoot { +thead, +tfoot { background: #d5dbe5; } @@ -76,7 +83,9 @@ thead, tfoot { border: 1px solid black; } -.switch input {display:none;} +.switch input { + display: none; +} .slider { position: absolute; @@ -101,30 +110,28 @@ thead, tfoot { transition: .4s; } -input:focus + .slider { +input:focus+.slider { box-shadow: 0 0 1px #2196F3; } -input:checked + .slider:before { +input:checked+.slider:before { -webkit-transform: translateX(106px); -ms-transform: translateX(26px); transform: translateX(106px); } -.slider:after -{ - content:'Upload'; +.slider:after { + content: 'Upload'; position: absolute; - transform: translate(-50%,-50%); + transform: translate(-50%, -50%); top: 50%; left: 54%; font-size: 10px; font-family: Verdana, sans-serif; } -input:checked + .slider:after -{ - content:'Link'; +input:checked+.slider:after { + content: 'Link'; left: 35%; } @@ -138,7 +145,8 @@ input[type="radio"] { border-radius: 50%; } -input[type='radio']:checked, input[type='checkbox']:checked { +input[type='radio']:checked, +input[type='checkbox']:checked { background: #365F9C; } @@ -168,8 +176,9 @@ input[type="radio"] { /*height: 25px;*/ line-height: 25px; font-size: 16px; - padding: 5px ; + padding: 5px; } + input[type='radio']:checked { background: #365F9C; } @@ -183,38 +192,43 @@ ul.disabled { background: #CCC; } -.form-style{ +.form-style { color: #464544; font-size: 14px; - max-width:400px; - margin:10px auto; - background:#fff; - border-radius:2px; - padding:10px; + max-width: 400px; + margin: 10px auto; + background: #fff; + border-radius: 2px; + padding: 10px; /*font-family: Georgia, "Times New Roman", Times, serif;*/ } -.form-style #mg{ + +.form-style #mg { margin-top: 20px; text-align: center; } -.form-style ul{ - list-style:none; - padding:0; - margin:0; + +.form-style ul { + list-style: none; + padding: 0; + margin: 0; } -.form-style li{ + +.form-style li { display: block; padding: 5px; - border:1px solid #DDDDDD; + border: 1px solid #DDDDDD; margin-bottom: 20px; border-radius: 3px; } -.form-style li:last-child{ - border:none; + +.form-style li:last-child { + border: none; margin-bottom: 0px; text-align: center; } -.form-style li > label{ + +.form-style li>label { display: block; float: left; margin-top: -19px; @@ -226,28 +240,30 @@ ul.disabled { overflow: hidden; /*font-family: Arial, Helvetica, sans-serif;*/ } + .form-style input[type="text"], .form-style input[type="date"], .form-style input[type="datetime"], .form-style input[type="number"], .form-style input[type="url"], .form-style textarea, -.form-style select -{ +.form-style select { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; display: block; outline: none; - border: 1px solid black;; + border: 1px solid black; + ; height: 25px; line-height: 25px; font-size: 16px; padding: 0; /*font-family: Georgia, "Times New Roman", Times, serif;*/ } -.form-style li > span{ + +.form-style li>span { background: #F3F3F3; display: block; padding: 3px; @@ -257,11 +273,13 @@ ul.disabled { /*font-family: Arial, Helvetica, sans-serif;*/ font-size: 11px; } -.form-style textarea{ - resize:none; + +.form-style textarea { + resize: none; } + .form-style input[type="submit"], -.form-style input[type="button"]{ +.form-style input[type="button"] { background: #2147FF; border: none; padding: 10px 20px 10px 20px; @@ -269,12 +287,14 @@ ul.disabled { border-radius: 3px; color: #D2E2FF; } + .form-style input[type="submit"]:hover, -.form-style input[type="button"]:hover{ +.form-style input[type="button"]:hover { background: #6B9FFF; - color:#fff; + color: #fff; } -#upload_panel .modalbox-content{ + +#upload_panel .modalbox-content { width: 30%; @media only screen and ( max-width: 1100px ) { @@ -286,75 +306,82 @@ ul.disabled { } } -#roi_panel .modalbox-content{ +#roi_panel .modalbox-content { width: 45%; border-collapse: collapse; } -#choice_panel .modalbox-content{ + +#choice_panel .modalbox-content { width: 25%; - + } -#details_panel .modalbox-content{ + +#details_panel .modalbox-content { width: 25%; } + .form-style [type=url]:focus, .form-style input[type=text]:focus, -.form-style input[type=number]:focus -{ +.form-style input[type=number]:focus { background-color: #ddd; outline: none; - border:2px; + border: 2px; border-style: solid; } + .form-style #modelupload, -.form-style #weightsupload{ +.form-style #weightsupload { cursor: pointer; } -#roitable{ - border-collapse: collapse; - position: relative; +#roitable { + border-collapse: collapse; + position: relative; } -.btn-del{ - background-color: red; - border: none; - color: white; - padding: 12px 16px; - font-size: 14px; - cursor: pointer; + +.btn-del { + background-color: red; + border: none; + color: white; + padding: 12px 16px; + font-size: 14px; + cursor: pointer; } -.btn-change{ - background-color: rgb(133, 53, 199); - border: none; - color: white; - padding: 12px 16px; - font-size: 14px; - cursor: pointer; + +.btn-change { + background-color: rgb(133, 53, 199); + border: none; + color: white; + padding: 12px 16px; + font-size: 14px; + cursor: pointer; } -.btn-final-change{ + +.btn-final-change { background-color: rgb(138, 175, 35); - border: none; - color: white; - padding: 12px 16px; - font-size: 14px; - cursor: pointer; + border: none; + color: white; + padding: 12px 16px; + font-size: 14px; + cursor: pointer; } .btn-sel { - - border: 10px ; - border-color: black; - padding: 10px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - border-radius: 100% + + border: 10px; + border-color: black; + padding: 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + border-radius: 100% } + .btn-sel:hover { background-color: #3e8e41; transform: scale(1.3); @@ -363,9 +390,10 @@ ul.disabled { } -body{ +body { color: black; } + .message { color: #0c5460; background-color: #d1ecf1; @@ -378,101 +406,103 @@ body{ } .check { - display: block; - position: relative; - padding-left: 35px; - cursor: pointer; - font-size: 14px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + display: block; + position: relative; + padding-left: 35px; + cursor: pointer; + font-size: 14px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /* Hide the browser's default checkbox */ .check input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; } /* Create a custom checkbox */ .checkmark { - position: absolute; - top: 0; - left: 0; - height: 25px; - width: 25px; - background-color: #eee; + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + background-color: #eee; } /* On mouse-over, add a grey background color */ -.check:hover input ~ .checkmark { - background-color: #ccc; +.check:hover input~.checkmark { + background-color: #ccc; } /* When the checkbox is checked, add a blue background */ -.check input:checked ~ .checkmark { - background-color: #2196F3; +.check input:checked~.checkmark { + background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { - content: ""; - position: absolute; - display: none; + content: ""; + position: absolute; + display: none; } /* Show the checkmark when checked */ -.check input:checked ~ .checkmark:after { - display: block; +.check input:checked~.checkmark:after { + display: block; } /* Style the checkmark/indicator */ .check .checkmark:after { - left: 9px; - top: 5px; - width: 5px; - height: 10px; - border: solid white; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } -#textInput{ +#textInput { width: 10%; float: right; } -#ext1{ - - text-align: center; - font-size: 16px; +#ext1 { + + text-align: center; + font-size: 16px; } -#ext2{ - - text-align: center; - font-size: 16px; + +#ext2 { + + text-align: center; + font-size: 16px; } -.extract{ - padding : 3% 6% 3% 6%; - - color: white; - background-color:#46a049 !important; - border-radius: 7%; - width: 70%; + +.extract { + padding: 3% 6% 3% 6%; + + color: white; + background-color: #46a049 !important; + border-radius: 7%; + width: 70%; } .extract:hover { - + transform: scale(1.2); cursor: pointer; @@ -480,50 +510,91 @@ body{ } #snackbar { - visibility: hidden; /* Hidden by default. Visible on click */ - min-width: 250px; /* Set a default minimum width */ - margin-left: -125px; /* Divide value of min-width by 2 */ - background-color: #333; /* Black background color */ - color: #fff; /* White text color */ - text-align: center; /* Centered text */ - border-radius: 2px; /* Rounded borders */ - padding: 16px; /* Padding */ - position: fixed; /* Sit on top of the screen */ - z-index: 1; /* Add a z-index if needed */ - left: 50%; /* Center the snackbar */ - bottom: 30px; /* 30px from the bottom */ - border-radius: 10px; + visibility: hidden; + /* Hidden by default. Visible on click */ + min-width: 250px; + /* Set a default minimum width */ + margin-left: -125px; + /* Divide value of min-width by 2 */ + background-color: #333; + /* Black background color */ + color: #fff; + /* White text color */ + text-align: center; + /* Centered text */ + border-radius: 2px; + /* Rounded borders */ + padding: 16px; + /* Padding */ + position: fixed; + /* Sit on top of the screen */ + z-index: 1; + /* Add a z-index if needed */ + left: 50%; + /* Center the snackbar */ + bottom: 30px; + /* 30px from the bottom */ + border-radius: 10px; } /* Show the snackbar when clicking on a button (class added with JavaScript) */ #snackbar.show { - visibility: visible; /* Show the snackbar */ - /* Add animation: Take 0.5 seconds to fade in and out the snackbar. + visibility: visible; + /* Show the snackbar */ + /* Add animation: Take 0.5 seconds to fade in and out the snackbar. However, delay the fade out process for 2.5 seconds */ - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; - animation: fadein 0.5s, fadeout 0.5s 2.5s; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; } /* Animations to fade the snackbar in and out */ @-webkit-keyframes fadein { - from {bottom: 0; opacity: 0;} - to {bottom: 30px; opacity: 1;} + from { + bottom: 0; + opacity: 0; + } + + to { + bottom: 30px; + opacity: 1; + } } @keyframes fadein { - from {bottom: 0; opacity: 0;} - to {bottom: 30px; opacity: 1;} + from { + bottom: 0; + opacity: 0; + } + + to { + bottom: 30px; + opacity: 1; + } } @-webkit-keyframes fadeout { - from {bottom: 30px; opacity: 1;} - to {bottom: 0; opacity: 0;} + from { + bottom: 30px; + opacity: 1; + } + + to { + bottom: 0; + opacity: 0; + } } @keyframes fadeout { - from {bottom: 30px; opacity: 1;} - to {bottom: 0; opacity: 0;} + from { + bottom: 30px; + opacity: 1; + } + + to { + bottom: 0; + opacity: 0; + } } .switch1 { @@ -534,7 +605,9 @@ body{ border: 1px solid black; } -.switch1 input {display:none;} +.switch1 input { + display: none; +} .slider1 { position: absolute; @@ -559,29 +632,82 @@ body{ transition: .4s; } -input:focus + .slider1 { +input:focus+.slider1 { box-shadow: 0 0 1px #2196F3; } -input:checked + .slider1:before { +input:checked+.slider1:before { -webkit-transform: translateX(68px); -ms-transform: translateX(26px); transform: translateX(68px); } -.slider1:after -{ - content:'NO'; +.slider1:after { + content: 'NO'; position: absolute; - transform: translate(-50%,-50%); + transform: translate(-50%, -50%); top: 50%; left: 54%; font-size: 10px; font-family: Verdana, sans-serif; } -input:checked + .slider1:after -{ - content:'YES'; +input:checked+.slider1:after { + content: 'YES'; left: 35%; +} + +@media screen and (max-width: 200px) { + + thead tr th { + table-layout: auto; + display: flex; + flex-direction: column; + padding-bottom: 10px; + + + } + + #editclass { + margin-left: -6px;/*positioned it to the center for extreme cases for mobile devices*/ + } + + #mtable { + flex-direction: column; + } + + + +} + +@media screen and (min-width: 200px) and (max-width : 500px) { + + + #mtable { + table-layout: auto; + display: block; + overflow-x: scroll; + } + + thead tr th { + /* Allow natural width for each header */ + text-align: center; + /* Center text within each header */ + margin: 3px; + + /* Add optional margin for spacing */ + } +} + + + +@media screen and (max-width: 1200px) { + + #mtable { + table-layout: auto; + display: block; + } + + + } \ No newline at end of file diff --git a/apps/model/model.js b/apps/model/model.js index ad35d55e7..5800ab16b 100644 --- a/apps/model/model.js +++ b/apps/model/model.js @@ -155,7 +155,7 @@ async function initUIcomponents() { Size (MB) Date Saved Remove Model - Edit Class List + Edit Class List diff --git a/apps/port/export.html b/apps/port/export.html index cda842b7f..d3c01896d 100644 --- a/apps/port/export.html +++ b/apps/port/export.html @@ -9,6 +9,9 @@ .export--header{ background-color: #17a2b8 !important; color: white; + font-weight: bold; + font-size: 14pt; + } #output{ padding: 20px; diff --git a/apps/port/import.html b/apps/port/import.html index 1f26d7a31..ecf6114da 100644 --- a/apps/port/import.html +++ b/apps/port/import.html @@ -22,25 +22,24 @@

Import Annotations

Info


-
+

-
+

File Contents

-
+

-

-
+
- \ No newline at end of file + diff --git a/apps/port/import.js b/apps/port/import.js index f487d604f..8c19a5507 100644 --- a/apps/port/import.js +++ b/apps/port/import.js @@ -2,10 +2,12 @@ const store = new Store('../../data'); function prepareAnnot() { try { - let output = JSON.parse(document.getElementById('input')); + let output = JSON.parse(document.getElementById('input').value); output['provenance']['image']['slide'] = document.getElementById('slide_id').value; output['provenance']['analysis']['execution'] = document.getElementById('annot_name').value; output['properties']['annotations']['name'] = document.getElementById('annot_name').value; + output['provenance']['analysis']['name'] = document.getElementById('annot_name').value; + output['provenance']['analysis']['execution_id'] = document.getElementById('annot_name').value; } catch (e) { alert(e); } @@ -14,9 +16,9 @@ function prepareAnnot() { function saveAnnot() { try { - let doc = JSON.parse(document.getElementById('output')); + let doc = JSON.parse(document.getElementById('output').value); + store.addMark(doc).then((x)=>alert('done!')).catch((e)=>alert(e)); } catch (e) { alert(e); } - store.addMark(doc).then((x)=>alert('done!')).catch((e)=>alert(e)); } diff --git a/apps/port/xml2geo.js b/apps/port/xml2geo.js index b25ee1b9c..4722df21e 100644 --- a/apps/port/xml2geo.js +++ b/apps/port/xml2geo.js @@ -62,5 +62,7 @@ function xml2geo() { output['provenance']['image']['slide'] = document.getElementById('slide_id').value; output['provenance']['analysis']['execution'] = document.getElementById('annot_name').value; output['properties']['annotations']['name'] = document.getElementById('annot_name').value; + output['provenance']['analysis']['name'] = document.getElementById('annot_name').value; + output['provenance']['analysis']['execution_id'] = document.getElementById('annot_name').value; document.getElementById('output').innerHTML = JSON.stringify(output); } diff --git a/apps/segment/segment.js b/apps/segment/segment.js index 46c92240f..687e430ef 100644 --- a/apps/segment/segment.js +++ b/apps/segment/segment.js @@ -73,12 +73,12 @@ async function initUIcomponents() {