Group 4 (2025 MSwAI) - Changes

uce.portal/resources/templates/corpus/components/corpusAnnotations.ftl

@@ -186,5 +186,49 @@
                 <input type="checkbox" class="rounded-0 bg-prime" disabled ${isChecked}/>
             </div>
         </div>
+
+        <div class="col-lg-4 annotation-entry">
+            <#assign isChecked = "" />
+            <#if corpusConfig.getAnnotations().isOffensiveSpeech() == true>
+                <#assign isChecked = "checked"/>
+            </#if>
+            <div class="flexed align-items-center justify-content-between border p-2 rounded wrapped">
+                <label class="mb-0 pr-1 color-dark">Offensive Speech</label>
+                <input type="checkbox" class="rounded-0 bg-prime" disabled ${isChecked}/>
+            </div>
+        </div>
+
+        <div class="col-lg-4 annotation-entry">
+            <#assign isChecked = "" />
+            <#if corpusConfig.getAnnotations().isEmotion() == true>
+                <#assign isChecked = "checked"/>
+            </#if>
+            <div class="flexed align-items-center justify-content-between border p-2 rounded wrapped">
+                <label class="mb-0 pr-1 color-dark">Emotions</label>
+                <input type="checkbox" class="rounded-0 bg-prime" disabled ${isChecked}/>
+            </div>
+        </div>
+
+        <div class="col-lg-4 annotation-entry">
+            <#assign isChecked = "" />
+            <#if corpusConfig.getAnnotations().isToxic() == true>
+                <#assign isChecked = "checked"/>
+            </#if>
+            <div class="flexed align-items-center justify-content-between border p-2 rounded wrapped">
+                <label class="mb-0 pr-1 color-dark">Toxic</label>
+                <input type="checkbox" class="rounded-0 bg-prime" disabled ${isChecked}/>
+            </div>
+        </div>
+
+        <div class="col-lg-4 annotation-entry">
+            <#assign isChecked = "" />
+            <#if corpusConfig.getAnnotations().isSentiment() == true>
+                <#assign isChecked = "checked"/>
+            </#if>
+            <div class="flexed align-items-center justify-content-between border p-2 rounded wrapped">
+                <label class="mb-0 pr-1 color-dark">Sentiment</label>
+                <input type="checkbox" class="rounded-0 bg-prime" disabled ${isChecked}/>
+            </div>
+        </div>
     </div>
 </div>

uce.portal/resources/templates/css/document-reader.css

@@ -141,30 +141,30 @@ body {
 .header-btn:hover {
     background-color: lightgray;
     transition: 0.15s;
-    color:white;
+    color: white;
 }
 
 .document-content {
     padding: 2rem 4.5rem;
 }
 
-.document-content *{
-    font-family: Courier  !important;
+.document-content * {
+    font-family: Courier !important;
     word-break: break-word;
 }
 
 .document-content p,
 .document-content label,
-.document-content span{
+.document-content span {
     font-size: 16px;
 }
 
 .document-content h5,
 .document-content h4,
 .document-content h3,
 .document-content h2,
-.document-content h1{
-    color:rgba(0, 0, 0, 0.6);
+.document-content h1 {
+    color: rgba(0, 0, 0, 0.6);
     font-weight: bold;
 }
 
@@ -338,6 +338,26 @@ body {
     position: relative;
 }
 
+.document-content .colorable-emotion {
+    transition: background-color 0.3s ease;
+    position: relative;
+}
+
+.document-content .colorable-offensive {
+    transition: background-color 0.3s ease;
+    position: relative;
+}
+
+.document-content .colorable-toxic {
+    transition: background-color 0.3s ease;
+    position: relative;
+}
+
+.document-content .colorable-sentiment {
+    transition: background-color 0.3s ease;
+    position: relative;
+}
+
 .document-content .animated-topic-scroll {
     transition: box-shadow 0.3s ease-in-out;
     box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
@@ -347,9 +367,9 @@ body {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 20px;         /* minimum size */
+    min-width: 20px; /* minimum size */
     height: 20px;
-    padding: 0 4px;          /* horizontal padding */
+    padding: 0 4px; /* horizontal padding */
     border-radius: 50%;
     border: 1px solid #333;
     font-size: 14px;
@@ -360,6 +380,98 @@ body {
     margin-left: 4px;
 }
 
+.document-content .emotion-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px; /* minimum size */
+    height: 20px;
+    padding: 0 4px; /* horizontal padding */
+    border-radius: 20%;
+    border: 1px solid #333;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: white;
+    color: #333;
+    cursor: pointer;
+    margin-left: 4px;
+}
+
+.document-content .emotion-covered.highlight {
+    background-color: rgba(255, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 2px 4px;
+}
+
+.document-content .offensive-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px; /* minimum size */
+    height: 20px;
+    padding: 0 4px; /* horizontal padding */
+    border-radius: 20%;
+    border: 1px solid #333;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: white;
+    color: #333;
+    cursor: pointer;
+    margin-left: 4px;
+}
+
+.document-content .offensive-covered.highlight {
+    background-color: rgba(255, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 2px 4px;
+}
+
+.document-content .toxic-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px; /* minimum size */
+    height: 20px;
+    padding: 0 4px; /* horizontal padding */
+    border-radius: 20%;
+    border: 1px solid #333;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: white;
+    color: #333;
+    cursor: pointer;
+    margin-left: 4px;
+}
+
+.document-content .toxic-covered.highlight {
+    background-color: rgba(255, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 2px 4px;
+}
+
+.document-content .sentiment-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px; /* minimum size */
+    height: 20px;
+    padding: 0 4px; /* horizontal padding */
+    border-radius: 20%;
+    border: 1px solid #333;
+    font-size: 14px;
+    font-weight: bold;
+    background-color: white;
+    color: #333;
+    cursor: pointer;
+    margin-left: 4px;
+}
+
+.document-content .sentiment-covered.highlight {
+    background-color: rgba(255, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 2px 4px;
+}
+
 .side-bar {
     width: 500px;
     transition: 0.5s;
@@ -468,31 +580,72 @@ body {
     font-size: 0.7rem;
     color: #333;
     font-weight: 600;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     text-align: center;
     width: 100%;
     white-space: normal;
     word-wrap: break-word;
     hyphens: auto;
-    border: 1px solid rgba(0,0,0,0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     min-height: 32px;
 }
 
 .side-bar-content .document-topics-list .topic-tag:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
     cursor: pointer;
 }
 
 .side-bar-content .document-topics-list .topic-tag.active-topic {
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    border: 2px solid rgba(0,0,0,0.3);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border: 2px solid rgba(0, 0, 0, 0.3);
     font-weight: 700;
     opacity: 1.2;
 }
 
+/* Sidebar Model Selection */
+.side-bar-content .model-category {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.side-bar-content .model-category label {
+    font-weight: bold;
+    font-size: 1.1rem;
+    color: #333;
+}
+.side-bar-content .model-category select {
+    padding: 6px 10px;
+    font-size: 14px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+    transition: border-color 0.2s ease-in-out;
+}
+.side-bar-content .model-category select:focus {
+    border-color: #007bff;
+    outline: none;
+}
+.side-bar-content .model-category select option {
+    padding: 6px 10px;
+    font-size: 14px;
+    background-color: #fff;
+    color: #333;
+}
+.side-bar-content .model-category select option:hover {
+    background-color: #f0f0f0;
+}
+.side-bar-content .model-category select option:checked {
+    background-color: #007bff;
+    color: white;
+}
+.side-bar-content .model-category select option:checked:hover {
+    background-color: #0056b3;
+}
+
 /* Scrollbar Minimap Styles */
 .scrollbar-minimap {
     position: fixed;
@@ -566,14 +719,14 @@ body {
     --c: #ffffff;
 
     padding: 1em;
-    border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r);
-    clip-path: polygon(100% 100%,0 100%,0 0,100% 0,
-    100% max(0%  ,var(--p) - var(--b)/2),
+    border-radius: var(--r)/var(--r) min(var(--r), var(--p) - var(--b) / 2) min(var(--r), 100% - var(--p) - var(--b) / 2) var(--r);
+    clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0,
+    100% max(0%, var(--p) - var(--b) / 2),
     calc(100% + var(--h)) var(--p),
-    100% min(100%,var(--p) + var(--b)/2));
+    100% min(100%, var(--p) + var(--b) / 2));
     background: var(--c);
     border-image: conic-gradient(var(--c) 0 0) fill 0/
-    calc(var(--p) - var(--b)/2) 0 calc(100% - var(--p) - var(--b)/2) var(--r)/
+    calc(var(--p) - var(--b) / 2) 0 calc(100% - var(--p) - var(--b) / 2) var(--r)/
     0 var(--h) 0 0;
 }
 
@@ -622,6 +775,7 @@ body {
 .tab-content .tab-pane.active {
     display: block;
 }
+
 .side-bar.visualization-expanded {
     width: 150vw !important;
     transition: width 0.3s ease;
@@ -633,6 +787,7 @@ body {
     height: 100%;
     position: relative;
 }
+
 .visualization-wrapper .visualization-content {
     flex: 1;
     overflow-y: auto;
@@ -651,13 +806,16 @@ body {
     width: 100%;
 
 }
+
 .visualization-wrapper .visualization-spinner__icon {
     margin-bottom: 16px;
 }
+
 .visualization-wrapper .visualization-spinner__icon i {
     font-size: 2.5rem;
     color: #0078d4;
 }
+
 .visualization-wrapper .visualization-spinner__text {
     font-size: 1.1rem;
     color: #444;
@@ -669,6 +827,7 @@ body {
 .visualization-content .viz-panel {
     display: none;
 }
+
 .viz-panel.active {
     display: block;
 }
@@ -685,7 +844,7 @@ body {
     display: flex;
     justify-content: space-around;
     border-radius: 24px;
-    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
     background: #fff;
     border: 1px solid #e0e0e0;
     padding: 0.5rem 1.5rem;
@@ -704,6 +863,7 @@ body {
     color: #555;
     transition: color 0.2s, background 0.2s;
 }
+
 .viz-nav-btn.active {
     color: #007bff;
     background: none;
@@ -741,7 +901,7 @@ body {
     outline: none;
 }
 
-#vp-3, #vp-4, #vp-5, #vp-2, #vp-1 {
+#vp-3, #vp-4, #vp-5, #vp-2, #vp-1, #vp-6 {
     display: flex;
     align-items: center;
     justify-content: center;