Skip to content

Commit 53add6a

Browse files
birmbirm
committed
color scheme rename for xml import
1 parent 536eec9 commit 53add6a

3 files changed

Lines changed: 82 additions & 5 deletions

File tree

‎apps/port/import.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,26 @@ body{
1616
input {
1717
font-family: Roboto, Arial, sans-serif;
1818
font-size: 16px;
19-
width: 60%;
2019
margin-left: 20%;
2120
height: 35px;
2221
border: none;
2322
border-bottom: 3px solid grey;
2423
transition: background-color 0.3s ease;
2524
}
25+
26+
.text-input{
27+
width: 60%;
28+
}
29+
30+
.checkbox{
31+
height:20px;
32+
width: 20px;
33+
}
34+
35+
.hidden{
36+
display: none;
37+
}
38+
2639
textarea{
2740
margin-left: 5%;
2841
font-family: Roboto, Arial, sans-serif;

‎apps/port/import.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,22 @@
1616

1717
<body>
1818
<div class="" id="exportTitle">
19-
<h1 class="h1">Import Annotations</h1>
19+
<h1 class="h1">Import Annotations from XML</h1>
2020
</div>
2121
<div class="form">
2222
<h3 class="h">Info</h3>
2323
<br>
2424
<div class="slide" >
25-
<input type="text" name="slide_id" id="slide_id" placeholder="Slide Id:"><br>
25+
<input type="text" name="slide_id" id="slide_id" class="text-input" placeholder="Slide Id:"><br>
2626
</div>
2727
<br>
2828
<div class="slide">
29-
<input type="text" name="annot_name" id="annot_name" placeholder="Annotation Name:"><br>
29+
<input type="text" name="annot_name" id="annot_name" class="text-input" placeholder="Annotation Name:"><br>
30+
</div>
31+
<br>
32+
<div class="slide checkbox-group" id="apollo_wrapper">
33+
<input type="checkbox" class="checkbox" name="apollo_colors" id="apollo_colors">
34+
<label class="checkbox-label" for="apollo_colors">Relabel Annotations by Apollo's Color Convention?</label>
3035
</div>
3136
<h3 class="h2">File Contents</h3>
3237
<div class="slide">
@@ -42,4 +47,5 @@ <h3 class="h2">File Contents</h3>
4247
</div>
4348
</body>
4449

50+
4551
</html>

‎apps/port/xml2geo.js‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,67 @@ var aperioMap = {
3535
'4': 'Polyline',
3636
};
3737

38+
// apollo color things...
39+
40+
// Define the known color categories and their hex values
41+
const colorCategories = {
42+
"Tumor": "#00FF00",
43+
"Normal_Benign": "#FF00FF",
44+
"Stroma_fibrosis_inflammation": "#FFFF00",
45+
"Necrosis": "#000000",
46+
"Blood": "#FF0000"
47+
};
48+
49+
// Convert hex to RGB
50+
function hexToRgb(hex) {
51+
// Remove the "#" if it's present
52+
hex = hex.replace("#", "");
53+
54+
// Parse hex color to RGB components
55+
let r = parseInt(hex.substring(0, 2), 16);
56+
let g = parseInt(hex.substring(2, 4), 16);
57+
let b = parseInt(hex.substring(4, 6), 16);
58+
59+
return { r, g, b };
60+
}
61+
62+
// Calculate Euclidean distance between two RGB colors
63+
function calculateColorDistance(rgb1, rgb2) {
64+
const rDiff = rgb1.r - rgb2.r;
65+
const gDiff = rgb1.g - rgb2.g;
66+
const bDiff = rgb1.b - rgb2.b;
67+
return Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
68+
}
69+
70+
// Classify the input hex color into one of the categories
71+
function classifyColor(hex) {
72+
const inputRgb = hexToRgb(hex);
73+
let closestCategory = null;
74+
let minDistance = Infinity;
75+
76+
// Loop through all categories and find the closest match
77+
for (const [category, hexColor] of Object.entries(colorCategories)) {
78+
const categoryRgb = hexToRgb(hexColor);
79+
const distance = calculateColorDistance(inputRgb, categoryRgb);
80+
81+
if (distance < minDistance) {
82+
minDistance = distance;
83+
closestCategory = category;
84+
}
85+
}
86+
return closestCategory;
87+
}
88+
89+
3890
function xml2geo() {
3991
let input = document.getElementById('xml_in').value;
4092
xmlDoc = parser.parseFromString(input, 'text/xml');
4193
let annotations = xmlDoc.getElementsByTagName('Annotation');
4294
let slideId = document.getElementById('slide_id').value;
4395
let annotName = document.getElementById('annot_name').value;
4496

97+
let apolloColors = document.getElementById('apollo_colors').checked;
98+
4599
// Store objects per unique color
46100
let outputMap = {};
47101

@@ -57,7 +111,11 @@ function xml2geo() {
57111
outputMap[hexColor]['provenance']['image']['slide'] = slideId;
58112
outputMap[hexColor]['provenance']['analysis']['execution_id'] = randomId;
59113
outputMap[hexColor]['provenance']['analysis']['name'] = `${annotName}_${hexColor}`;
60-
outputMap[hexColor]['properties']['annotations']['name'] = `${annotName}_${hexColor}`;
114+
let colorname = hexColor;
115+
if (apolloColors){
116+
colorname = classifyColor(hexColor)
117+
}
118+
outputMap[hexColor]['properties']['annotations']['name'] = `${annotName}_${colorname}`;
61119
}
62120

63121
let regions = annotation.getElementsByTagName('Region');

0 commit comments

Comments
 (0)