Merge pull request #22 from WSE-research/clientChanges2

v2.2.0

Dockerfile

@@ -14,18 +14,28 @@ COPY dockerfile_scripts/extract_commons_version.sh /app/extract_commons_version.
 RUN chmod +x /app/extract_commons_version.sh
 RUN /app/extract_commons_version.sh
 
+#Build Stage - Frontend
+FROM node:latest AS client_build
+WORKDIR /app
+COPY ./client ./client
+WORKDIR /app/client
+RUN npm install && npm run build
+
+
 #Build Stage
 FROM maven:latest AS build
 WORKDIR /app
 COPY ./src ./src
 COPY ./pom.xml ./pom.xml
 COPY --from=qanary_commons /app/qa.commons.jar .
 COPY --from=qanary_commons /app/jar_version .
+COPY --from=client_build /app/client/build/* src/main/resources/static
 # Installing the qa_commons dependency
 COPY dockerfile_scripts/install_commons_dependency.sh /app/install_commons_dependency.sh
 RUN chmod +x /app/install_commons_dependency.sh
 RUN /app/install_commons_dependency.sh
 # build the app
+WORKDIR /app
 RUN mvn clean install
 
 FROM openjdk:17-jdk-alpine

client/src/App.js

@@ -2,9 +2,7 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import logo from './logo.svg';
 import './App.css';
-import Explanation from "./explanationComponent/Explanation";
 import {
     BrowserRouter as Router,
     Route,

client/src/dataViewer/DataViewer.css

@@ -0,0 +1,99 @@
+.container {
+    display: flex;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 25px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    padding: 50px 10px;
+}
+
+.left {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+.right {
+    display: flex;
+    gap: 2rem;
+}
+
+.MuiFormControl-root {
+    margin: 0 !important;
+}
+
+.exampleData {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.explanationContainer {
+    margin-top: 1rem;
+    display: flex;
+    height: 30vh;
+}
+
+.explanationContainer > div {
+    flex: 1;
+    margin: 30px;
+    border-radius: 25px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    max-height: 100%;
+    overflow-y: auto;
+}
+
+.explanationContainer p {
+    padding: 10px;
+}
+
+.explanationSelection {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-bottom: 50px;
+}
+
+.explanationSelection > span {
+    font-weight: 500;
+}
+
+.explanationSelection > span:hover {
+    cursor: pointer;
+}
+
+.scoresContainer {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 1rem;
+    gap: .5rem;
+}
+
+.scores {
+    display: flex;
+    gap: .5rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .right {
+        flex-direction: column;
+    }
+
+    .explanationContainer {
+        flex-direction: column;
+        height: 60vh;
+    }
+}
+
+@media only screen and (min-width: 1033px) {
+    .left {
+        align-self: flex-end;
+    }
+}