Skip to content

Commit

Permalink
[#216] Andreas' review implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@notcruz
notcruz committed Mar 1, 2023
1 parent 23b819f commit a41c6f7
Show file tree
Hide file tree
Showing 13 changed files with 730 additions and 748 deletions.
44 changes: 21 additions & 23 deletions client/src/components/exercise/lab7/Main.js
View file
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React from "react";
import { Router } from "@reach/router";
import "../../../assets/stylesheets/main.scss";

Expand All @@ -12,31 +12,29 @@ import AlterationStart from "./pages/AlterationActivity/AlterationStart";
import AlterationQuiz from "./pages/AlterationActivity/AlterationQuiz";
import ExerciseEnd from "./pages/ExerciseEnd";

class Main extends Component {
render() {
return (
<div className="bottomSpace">
<Router className="app">
<ExerciseStart default path="/*" />
const Main = () => {
return (
<div className="bottomSpace">
<Router className="app">
<ExerciseStart default path="/*" />

{/* Phase 1: Simulation */}
<AISimulation path="/AISimulation" />
<SimulationSummary path="/SimulationSummary" />
<BadAIExplanation path="/BadAIExplanation" />
{/* Phase 1: Simulation */}
<AISimulation path="/AISimulation" />
<SimulationSummary path="/SimulationSummary" />
<BadAIExplanation path="/BadAIExplanation" />

{/* Phase 2: Improve AI Code Repair */}
<AICodeRepair path="/AICodeRepair" />
<ImprovedAISimulation path="/ImprovedAISimulation" />
{/* Phase 2: Improve AI Code Repair */}
<AICodeRepair path="/AICodeRepair" />
<ImprovedAISimulation path="/ImprovedAISimulation" />

{/* Phase 3: Alteration Activity */}
<AlterationStart path="/AlterationStart" />
<AlterationQuiz path="/AlterationQuiz" />
{/* Phase 3: Alteration Activity */}
<AlterationStart path="/AlterationStart" />
<AlterationQuiz path="/AlterationQuiz" />

<ExerciseEnd path="/ExerciseEnd" />
</Router>
</div>
);
}
}
<ExerciseEnd path="/ExerciseEnd" />
</Router>
</div>
);
};

export default Main;
12 changes: 5 additions & 7 deletions client/src/components/exercise/lab7/components/Code.js
View file
Expand Up @@ -160,14 +160,10 @@ class Code extends Component {
<div className="code_editor__file code_editor__file--active">
AutoSysAI.js
</div>
{/* psuedocode */}
{/* <div className="code_editor__file code_editor__file--inactive">
Psuedocode
</div> */}
</div>

{/* import React, Component from react */}
<div className="code_editor__code">
{/* import React, Component from react */}
<div className="code_editor__line">
<span className="code_editor__line--purple">import&nbsp;</span>
<span className="code_editor__line--blue">React</span>
Expand Down Expand Up @@ -199,13 +195,15 @@ class Code extends Component {
<div className="code_editor__line">
{/* AI function comment */}
<span className="code_editor__line--darkgreen">
&#47;&#47; Here is where you will update the equation to improve the AI&lsquo;s accuracy
&#47;&#47; Here is where you will update the equation to improve
the AI&lsquo;s accuracy
</span>
</div>
<div className="code_editor__line">
{/* AI function comment */}
<span className="code_editor__line--darkgreen">
&#47;&#47; Feel free to add other math operations to improve its accuracy
&#47;&#47; Feel free to add other math operations to improve its
accuracy
</span>
</div>
<div className="code_editor__line">
Expand Down
181 changes: 82 additions & 99 deletions client/src/components/exercise/lab7/components/Collapsible.js
View file
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { useState } from "react";
import {
FILE_INCORRECT,
FILE_INTRUSION,
Expand All @@ -7,114 +7,97 @@ import {
} from "../../../../constants/lab7";
import PropTypes from "prop-types";

class Collapsible extends Component {
constructor(props) {
super(props);
this.state = {
active: false,
};
}
const Collapsible = ({ result: { files, threatLvl }, index }) => {
const [active, setActive] = useState(false);

/**
* Toggle method for dropdown. No dropdown if no intrusions occurred.
*
* @param numOfIntrusions number of intrusions
*/
handleClick = (numOfIntrusions) => {
const { active } = this.state;
if (numOfIntrusions > 0) this.setState({ active: !active });
const handleClick = (numOfIntrusions) => {
if (numOfIntrusions > 0) setActive(!active);
};

render = () => {
const { active } = this.state;
const {
result: { files, threatLvl },
index,
} = this.props;
const intrusions = files.filter((file) => file.result === FILE_INTRUSION);
const protectedFiles = files.filter(
(file) => file.result === FILE_PROTECTED
);
const incorrectFiles = files.filter(
(file) => file.result === FILE_INCORRECT
);
const intrusions = files.filter((file) => file.result === FILE_INTRUSION);
const protectedFiles = files.filter((file) => file.result === FILE_PROTECTED);
const incorrectFiles = files.filter((file) => file.result === FILE_INCORRECT);

return (
<div className={"tw-bg-[#EBE8E8] tw-shadow-xl"}>
<button
onClick={() => this.handleClick(intrusions.length)}
className={
"tw-border-none tw-flex tw-w-full tw-items-center tw-justify-around tw-justify-center tw-text-lg tw-py-3 tw-px-6"
}
>
<p className={"tw-font-bold tw-text-xl tw-w-28"}>Round {index + 1}</p>
<p className={"tw-font-semibold tw-text-left tw-w-44"}>
Threat Level: {THREAT_LEVEL_TEXT[threatLvl]}
</p>
<p className={"tw-font-semibold tw-text-left tw-w-28"}>
<span className={intrusions.length > 0 ? "tw-text-[#e31c3d]" : ""}>
Intrusions: {intrusions.length}
</span>
</p>
<p className={"tw-font-semibold tw-text-left tw-w-36"}>
Protected (TP): {protectedFiles.length}
</p>
<p className={"tw-font-semibold tw-text-left tw-w-36"}>
<span
className={incorrectFiles.length > 0 ? "tw-text-brightRed" : ""}
>
Incorrect (FP): {incorrectFiles.length}
</span>
</p>
<div className={"tw-w-3"}>{active ? "-" : "+"}</div>
</button>
{active && intrusions.length > 0 && (
<div className={"tw-px-16"}>
<div className={"tw-mt-6"}>
<h3 className={"tw-font-bold"}>List of Intrusions</h3>
<ul className={"tw-pb-9 tw-pt-3"}>
{intrusions.map((file, index) => {
const className =
"tw-flex tw-text-left tw-py-3 tw-border-x-0 tw-border-b tw-border-solid ";
return (
<li
key={index}
className={
className +
(index === 0 ? "tw-border-t" : "tw-border-t-0")
}
>
<div className={"tw-flex-shrink-0 tw-w-64"}>
<p>
<span className={"tw-font-bold"}>Filename:</span>{" "}
{file.fileName}
</p>
<p>
<span className={"tw-font-bold"}>
Sensitivity Level:
</span>{" "}
{file.sensitivityLevel}
</p>
<p>
<span className={"tw-font-bold"}>Content:</span>{" "}
{file.content}
</p>
</div>
<div className={"tw-ml-3"}>
<p className={"tw-font-bold"}>Intrusion Message:</p>
<p>{file.message}</p>
</div>
</li>
);
})}
</ul>
</div>
return (
<div className={"tw-bg-[#EBE8E8] tw-shadow-xl"}>
<button
onClick={() => handleClick(intrusions.length)}
className={
"tw-border-none tw-flex tw-w-full tw-items-center tw-justify-around tw-justify-center tw-text-lg tw-py-3 tw-px-6"
}
>
<p className={"tw-font-bold tw-text-xl tw-w-28"}>Round {index + 1}</p>
<p className={"tw-font-semibold tw-text-left tw-w-44"}>
Threat Level: {THREAT_LEVEL_TEXT[threatLvl]}
</p>
<p className={"tw-font-semibold tw-text-left tw-w-28"}>
<span className={intrusions.length > 0 ? "tw-text-[#e31c3d]" : ""}>
Intrusions: {intrusions.length}
</span>
</p>
<p className={"tw-font-semibold tw-text-left tw-w-36"}>
Protected (TP): {protectedFiles.length}
</p>
<p className={"tw-font-semibold tw-text-left tw-w-36"}>
<span
className={incorrectFiles.length > 0 ? "tw-text-brightRed" : ""}
>
Incorrect (FP): {incorrectFiles.length}
</span>
</p>
<div className={"tw-w-3"}>{active ? "-" : "+"}</div>
</button>
{active && intrusions.length > 0 && (
<div className={"tw-px-16"}>
<div className={"tw-mt-6"}>
<h3 className={"tw-font-bold"}>List of Intrusions</h3>
<ul className={"tw-pb-9 tw-pt-3"}>
{intrusions.map((file, index) => {
const className =
"tw-flex tw-text-left tw-py-3 tw-border-x-0 tw-border-b tw-border-solid ";
return (
<li
key={index}
className={
className +
(index === 0 ? "tw-border-t" : "tw-border-t-0")
}
>
<div className={"tw-flex-shrink-0 tw-w-64"}>
<p>
<span className={"tw-font-bold"}>Filename:</span>{" "}
{file.fileName}
</p>
<p>
<span className={"tw-font-bold"}>
Sensitivity Level:
</span>{" "}
{file.sensitivityLevel}
</p>
<p>
<span className={"tw-font-bold"}>Content:</span>{" "}
{file.content}
</p>
</div>
<div className={"tw-ml-3"}>
<p className={"tw-font-bold"}>Intrusion Message:</p>
<p>{file.message}</p>
</div>
</li>
);
})}
</ul>
</div>
)}
</div>
);
};
}
</div>
)}
</div>
);
};

export default Collapsible;

Expand Down
77 changes: 35 additions & 42 deletions client/src/components/exercise/lab7/components/File.js
View file
@@ -1,55 +1,48 @@
import React, { Component } from "react";
import React from "react";
import PropTypes from "prop-types";
import { AI_CORRECT, LOCKED_FILE } from "../../../../constants/lab7";
import LOCKED from "../../../../assets/images/lab7/lock.png";
import OPEN from "../../../../assets/images/lab7/unlock.png";

class File extends Component {
constructor(props) {
super(props);
}
const File = ({ data }) => {
const image = data.decision === LOCKED_FILE ? LOCKED : OPEN;
const alt = `A .png image of ${
data.decision === LOCKED_FILE ? "a locked" : "an unlocked"
} lock.`;
const reportClassName =
data.report === AI_CORRECT ? "tw-text-[#2e8540]" : "tw-text-[#e31c3d]";

render() {
const { data } = this.props;
const image = data.decision === LOCKED_FILE ? LOCKED : OPEN;
const alt = `A .png image of ${
data.decision === LOCKED_FILE ? "a locked" : "an unlocked"
} lock.`;
const reportClassName =
data.report === AI_CORRECT ? "tw-text-[#2e8540]" : "tw-text-[#e31c3d]";

return (
<div className={"tw-flex tw-flex-col tw-items-center"}>
<div
className={"tw-space-y-3 tw-flex tw-flex-col tw-justify-center file"}
>
{data.report !== undefined && (
<div>
<img className={"tw-h-14 tw-w-14"} src={image} alt={alt} />
<p className={"tw-mt-1.5 tw-font-bold"}>{data.decision} FILE</p>
</div>
)}
<div>
<p className={"tw-leading-tight tw-font-bold"}>{data.fileName}</p>
<p className={"tw-leading-tight tw-italic"}>
Sensitivity Level {data.sensitivityLevel}
</p>
</div>
<div>
<p className={"tw-font-bold"}>{data.content}</p>
</div>
</div>
return (
<div className={"tw-flex tw-flex-col tw-items-center"}>
<div
className={"tw-space-y-3 tw-flex tw-flex-col tw-justify-center file"}
>
{data.report !== undefined && (
<div className={"tw-bg-[#DCDCDC] tw-mt-6 tw-px-10 tw-py-1.5"}>
<span className={`tw-font-bold ${reportClassName}`}>
{data.report}
</span>
<div>
<img className={"tw-h-14 tw-w-14"} src={image} alt={alt} />
<p className={"tw-mt-1.5 tw-font-bold"}>{data.decision} FILE</p>
</div>
)}
<div>
<p className={"tw-leading-tight tw-font-bold"}>{data.fileName}</p>
<p className={"tw-leading-tight tw-italic"}>
Sensitivity Level {data.sensitivityLevel}
</p>
</div>
<div>
<p className={"tw-font-bold"}>{data.content}</p>
</div>
</div>
);
}
}
{data.report !== undefined && (
<div className={"tw-bg-[#DCDCDC] tw-mt-6 tw-px-10 tw-py-1.5"}>
<span className={`tw-font-bold ${reportClassName}`}>
{data.report}
</span>
</div>
)}
</div>
);
};

export default File;

Expand Down

0 comments on commit a41c6f7

Please sign in to comment.