Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

269 group defences #318

Merged
merged 9 commits into from
Sep 28, 2023
Merged

269 group defences #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
837d332
Grouped defences
gsproston-scottlogic Sep 22, 2023
09e4b7f
Better html grouping
gsproston-scottlogic Sep 22, 2023
4912f3e
Removed strategy box
gsproston-scottlogic Sep 22, 2023
91cde08
Visually clearer grouping
gsproston-scottlogic Sep 22, 2023
7ec146f
Rounded corners on control section
gsproston-scottlogic Sep 22, 2023
3af6d67
Using some rather than find
gsproston-scottlogic Sep 26, 2023
9c86336
Using details html elements
gsproston-scottlogic Sep 26, 2023
fd6e601
Better html DRY principles
gsproston-scottlogic Sep 26, 2023
4da8c55
Fix merge conflicts
gsproston-scottlogic Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/src/Theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@
--main-toggle-off-colour: #ababab;
--main-toggle-on-colour: var(--main-accent-colour);

--control-header-background-colour: var(
--main-button-inactive-background-colour
);
--control-body-background-colour: #3a3a3a;

--overlay-hidden-colour: #0008;
--overlay-background-colour: #8ad5da;
--overlay-attack-background-colour: #d6d6ff;
Expand Down
18 changes: 13 additions & 5 deletions frontend/src/components/ControlPanel/ControlPanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
#control-panel {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 30px;
}

#control-strategy {
padding: 0 30px;
overflow-y: auto;
.control-collapsible-section {
background-color: var(--control-body-background-colour);
margin-bottom: 12px;
border-radius: 8px;
overflow: hidden;
}

.control-collapsible-section-header {
background-color: var(--control-header-background-colour);
padding: 12px 14px;
cursor: default;
}
60 changes: 49 additions & 11 deletions frontend/src/components/ControlPanel/ControlPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,38 @@ function ControlPanel({
setEmails: (emails: EmailInfo[]) => void;
setNumCompletedLevels: (numCompletedLevels: number) => void;
}) {
function getDefencesConfigure() {
return defences.filter((defence) => {
return ![
DEFENCE_TYPES.LLM_EVALUATION,
DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
DEFENCE_TYPES.SYSTEM_ROLE,
].some((id) => id === defence.id);
});
}

function getDefencesModel() {
return defences.filter((defence) => {
return [
DEFENCE_TYPES.LLM_EVALUATION,
DEFENCE_TYPES.QA_LLM_INSTRUCTIONS,
DEFENCE_TYPES.SYSTEM_ROLE,
].some((id) => id === defence.id);
});
}

return (
<div id="control-panel">
<div id="control-strategy">
{/* hide defence box on levels 1 and 2 */}
{(currentLevel === LEVEL_NAMES.LEVEL_3 ||
currentLevel === LEVEL_NAMES.SANDBOX) && (
{/* hide defence box on levels 1 and 2 */}
{(currentLevel === LEVEL_NAMES.LEVEL_3 ||
currentLevel === LEVEL_NAMES.SANDBOX) && (
<details className="control-collapsible-section">
<summary className="control-collapsible-section-header">
Defence Configuration
</summary>
<DefenceBox
currentLevel={currentLevel}
defences={defences}
defences={getDefencesConfigure()}
showConfigurations={
// only allow configuration in sandbox
currentLevel === LEVEL_NAMES.SANDBOX ? true : false
Expand All @@ -48,12 +71,27 @@ function ControlPanel({
setDefenceInactive={setDefenceInactive}
setDefenceConfiguration={setDefenceConfiguration}
/>
)}
{/* only show model selection box in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && <ModelBox />}
{/* only show document viewer button in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
</div>
</details>
)}
{/* only show model selection box in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && (
<details className="control-collapsible-section">
<summary className="control-collapsible-section-header">
Model Configuration
</summary>
<DefenceBox
currentLevel={currentLevel}
defences={getDefencesModel()}
showConfigurations={true}
setDefenceActive={setDefenceActive}
setDefenceInactive={setDefenceInactive}
setDefenceConfiguration={setDefenceConfiguration}
/>
<ModelBox />
</details>
)}
{/* only show document viewer button in sandbox mode */}
{currentLevel === LEVEL_NAMES.SANDBOX && <DocumentViewButton />}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion ...rc/components/StrategyBox/StrategyBox.css → .../src/components/DefenceBox/DefenceBox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#strategy-box {
#defence-box {
position: relative;
}
5 changes: 2 additions & 3 deletions frontend/src/components/DefenceBox/DefenceBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "../StrategyBox/StrategyBox.css";
import "./DefenceBox.css";
import DefenceMechanism from "./DefenceMechanism";
import {
DEFENCE_TYPES,
Expand All @@ -24,8 +24,7 @@ function DefenceBox({
) => Promise<boolean>;
}) {
return (
<div id="strategy-box">
<div className="side-bar-header">Defences</div>
<div id="defence-box">
{defences.map((defence, index) => {
return (
<DefenceMechanism
Expand Down
32 changes: 22 additions & 10 deletions frontend/src/components/DefenceBox/DefenceMechanism.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,34 @@
.defence-mechanism-config {
font-size: 0.875rem;
margin-top: 4px;
.defence-mechanism {
padding: 12px 14px;
cursor: default;
}

.defence-mechanism header {
display: flex;
justify-content: space-between;
}

.defence-mechanism-config-validated {
margin-top: 10px;
margin-bottom: 10px;
.defence-mechanism header h4 {
font-size: 1rem;
font-style: normal;
font-weight: 400;
margin: 0;
}

.defence-mechanism > .info-box {
font-size: 0.875rem;
margin-top: 4px;
}

.validation-text {
font-size: 0.875rem;
font-weight: 600;
}

/*
* Modified from https://www.w3schools.com/howto/howto_css_switch.asp
*/

/* The switch - the box around the slider */
.switch {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't help thinking a checkbox would be so much simpler than a homegrown slider. This is a whole heap of css...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This bit isn't really added in this PR, I was just moving the comment to a more suitable place. Could maybe put it in it's own component to hide it away? But I'd prefer for that work to be in a new ticket as it's not really to do with this one.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes understood! Was just a comment in passing. Think we could add an issue for it though, it's really unwise to overcomplicate things. If we are going to overhaul the UI, we might consider a component library instead of home-cooking all our own.

position: relative;
Expand Down Expand Up @@ -65,10 +81,6 @@ input:checked + .slider:before {
transform: translateX(16px);
}

/*
* Modified from https://www.w3schools.com/howto/howto_css_switch.asp
*/

/* Rounded sliders */
.slider.round {
border-radius: 34px;
Expand Down
94 changes: 41 additions & 53 deletions frontend/src/components/DefenceBox/DefenceMechanism.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
} from "../../models/defence";
import { validateDefence } from "../../service/defenceService";
import "./DefenceMechanism.css";
import "../StrategyBox/StrategyMechanism.css";
import DefenceConfiguration from "./DefenceConfiguration";
import { TiTick, TiTimes } from "react-icons/ti";

Expand Down Expand Up @@ -71,60 +70,49 @@ function DefenceMechanism({
}

return (
<span>
<div
className="strategy-mechanism defence-mechanism"
onClick={toggleDefenceInfo}
>
<div className="strategy-mechanism-header">
<span>{defenceDetail.name}</span>
<label className="switch">
<input
type="checkbox"
placeholder="defence-toggle"
onChange={toggleDefence}
// set checked if defence is active
checked={defenceDetail.isActive}
/>
<span className="slider round"></span>
</label>
</div>
{isInfoBoxVisible ? (
<div className="strategy-mechanism-info-box">
<div>{defenceDetail.info}</div>
<article className="defence-mechanism" onClick={toggleDefenceInfo}>
<header>
<h4>{defenceDetail.name}</h4>
<label className="switch">
<input
type="checkbox"
placeholder="defence-toggle"
onChange={toggleDefence}
// set checked if defence is active
checked={defenceDetail.isActive}
/>
<span className="slider round"></span>
</label>
</header>
{isInfoBoxVisible && (
<div className="info-box">
<p>{defenceDetail.info}</p>

{showConfigurations ? (
<div className="defence-mechanism-config">
{defenceDetail.config.map((config) => {
return (
<DefenceConfiguration
key={config.id}
isActive={defenceDetail.isActive}
config={config}
setConfigurationValue={setConfigurationValue}
/>
);
})}
</div>
) : null}
{showConfigurations &&
defenceDetail.config.map((config) => {
return (
<DefenceConfiguration
key={config.id}
isActive={defenceDetail.isActive}
config={config}
setConfigurationValue={setConfigurationValue}
/>
);
})}

{isConfigured ? (
<div className="defence-mechanism-config-validated">
{configValidated ? (
<p className="validation-text">
<TiTick /> defence successfully configured
</p>
) : (
<p className="validation-text">
<TiTimes /> invalid input - configuration failed
</p>
)}
</div>
) : null}
</div>
) : null}
</div>
</span>
{isConfigured &&
(configValidated ? (
<p className="validation-text">
<TiTick /> defence successfully configured
</p>
) : (
<p className="validation-text">
<TiTimes /> invalid input - configuration failed
</p>
))}
</div>
)}
</article>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh this is looking much better, nice use of article 👍

);
}

Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/ModelBox/ModelBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import ModelConfiguration from "./ModelConfiguration";
function ModelBox() {
return (
<div className="model-box">
<div className="side-bar-header">Model</div>
<ModelSelection />
<ModelConfiguration />
</div>
Expand Down
32 changes: 0 additions & 32 deletions frontend/src/components/StrategyBox/StrategyMechanism.css
View file
Open in desktop

This file was deleted.