Skip to content

Commit

Permalink
Update filter methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@uittenbroekrobbert
uittenbroekrobbert committed Feb 19, 2025
1 parent fe06b62 commit ecd2f18
Show file tree
Hide file tree
Showing 45 changed files with 334 additions and 176 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ site


.Rproj.user
/tmp-site/
96 changes: 38 additions & 58 deletions docs/html/ai-verordening-popup.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,85 @@
<form class="form" id="ai-act-labels-form" onsubmit="getLabelsFromForm(this); filterTable(); return false;">

<h2>Bepaal je AI-verordening profiel</h2>
<p>
Vul de velden hieronder in om je AI-verordening profiel samen te stellen.<br/>Op basis
van deze informatie worden de relevante vereisten voor jouw AI-systeem gefilterd.
Vul de velden hieronder in om je AI-verordening profiel samen te stellen.<br/>
Op basis van deze informatie worden de relevante vereisten voor jouw AI-systeem gefilterd.
</p>

<div class="form__row">
<label class="form__label" id="rol-label">Rol</label>
<div class="input-checkbox">
<input type="checkbox" id="role-aanbieder" name="role" value="rol-ai-act-aanbieder" class="checkbox__input">
<input type="checkbox" id="role-aanbieder" name="rol-ai-act" value="aanbieder" class="checkbox__input">
<label class="checkbox__label" for="role-aanbieder">Aanbieder</label>
</div>
<div class="input-checkbox">
<input type="checkbox" id="role-gebruiksverantwoordelijke" name="role" value="rol-ai-act-gebruiksverantwoordelijke"
class="checkbox__input">
<input type="checkbox" id="role-gebruiksverantwoordelijke" name="rol-ai-act" value="gebruiksverantwoordelijke" class="checkbox__input">
<label class="checkbox__label" for="role-gebruiksverantwoordelijke">Gebruiksverantwoordelijke</label>
</div>
<div class="input-checkbox">
<input type="checkbox" id="role-importeur" name="role" value="rol-ai-act-importeur" class="checkbox__input">
<input type="checkbox" id="role-importeur" name="rol-ai-act" value="importeur" class="checkbox__input">
<label class="checkbox__label" for="role-importeur">Importeur</label>
</div>
<div class="input-checkbox">
<input type="checkbox" id="role-distributeur" name="role" value="rol-ai-act-distributeur" class="checkbox__input">
<input type="checkbox" id="role-distributeur" name="rol-ai-act" value="distributeur" class="checkbox__input">
<label class="checkbox__label" for="role-distributeur">Distributeur</label>
</div>
</div>

<div class="form__row">
<label class="form__label" id="type-label" for="type">Type AI toepassing</label>
<select class="input-select" id="type" name="type">
<label class="form__label" id="type-label" for="type">
Type AI toepassing
<span class="info-icon" title="Het is alleen mogelijk om het label 'impactvol' of 'geen-impactvol algoritme' te krijgen wanneer er geen sprake is van een AI-systeem of AI-model">i</span>
</label>
<select class="input-select" id="type" name="soort-toepassing" onchange="updateFieldsBasedOnType(this)">
<option value="" hidden="">Selecteer optie</option>
<option value="ai-systeem">AI-systeem</option>
<option value="ai-systeem-voor-algemene-doeleinden">AI-systeem voor algemene doeleinden</option>
<option value="ai-model-voor-algemene-doeleinden">AI-model voor algemene doeleinden</option>
<option value="impactvol-algoritme">impactvol algoritme</option>
<option value="niet-impactvol-algoritme">niet-impactvol algoritme</option>
<option value="geen-algoritme">geen algoritme</option>
<option value="impactvol-algoritme">Impactvol algoritme</option>
<option value="niet-impactvol-algoritme">Niet-impactvol algoritme</option>
</select>
</div>

<div class="form__row">
<label class="form__label" id="label-risk-group" for="risk-group">In welke risicogroep valt de
applicatie?</label>
<select class="input-select" id="risk-group" name="risk-group">
<option value="" hidden="">Selecteer optie</option>
<option value="hoog-risico-ai-systeem">hoog-risico AI</option>
<option value="geen-hoog-risico-ai-systeem">geen hoog-risico AI</option>
<option value="verboden-ai">verboden AI</option>
<option value="uitzondering-van-toepassing">uitzondering van toepassing</option>
<option value="niet van toepassing">niet van toepassing</option>
</select>
</div>


<div class="form__row">
<label class="form__label" id="label-transparency-obligations" for="transparency-obligations">Zijn er
transparantieverplichtingen?</label>
<select class="input-select" id="transparency-obligations" name="transparency-obligations">
<label class="form__label" id="label-risk-group" for="risk-group">
In welke risicogroep valt de applicatie?
<span class="info-icon" title="Alleen van toepassing op AI-systeem en AI-systeem voor algemene doeleinden">i</span>
</label>
<select class="input-select" id="risk-group" name="risicogroep" disabled>
<option value="" hidden="">Selecteer optie</option>
<option value="transparantieverplichting">transparantieverplichting</option>
<option value="geen-transparantieverplichting">geen transparantieverplichting</option>
<option value="">niet van toepassing</option>
<option value="hoog-risico-ai-systeem">Hoog-risico</option>
<option value="geen-hoog-risico-ai-systeem">Geen hoog-risico</option>
<option value="verboden-ai">Verboden AI</option>
<option value="uitzondering-van-toepassing">Uitzondering van toepassing</option>
</select>
</div>

<div class="form__row">
<label class="form__label" id="label-systemic-risk" for="systemic-risk">Is er sprake van een
systeemrisico?</label>
<select class="input-select" id="systemic-risk" name="systemic-risk">
<option value="" hidden="">Selecteer optie</option>
<option value="systeemrisico">systeemrisico</option>
<option value="geen-systeemrisico">geen systeemrisico</option>
<option value="">niet van toepassing</option>
</select>
</div>


<div class="form__row">
<label class="form__label" id="label-open-source" for="open-source">Is de applicatie open source?</label>
<select class="input-select" id="open-source" name="open-source">
<label class="form__label" id="label-transparency-obligations" for="transparency-obligations">
Zijn er transparantieverplichtingen?
<span class="info-icon" title="Alleen van toepassing op AI-systeem en AI-systeem voor algemene doeleinden">i</span>
</label>
<select class="input-select" id="transparency-obligations" name="transparantieverplichting" disabled>
<option value="" hidden="">Selecteer optie</option>
<option value="open-source">open-source</option>
<option value="geen-open-source">geen open-source</option>
<option value="">niet van toepassing</option>
<option value="transparantieverplichting">Transparantieverplichting</option>
<option value="geen-transparantieverplichting">Geen transparantieverplichting</option>
</select>
</div>

<div class="form__row">
<label class="form__label" id="label-conformity-assessment-body" for="conformity-assessment-body">Moet een
conformiteitsbeoordeling worden
uitgevoerd door een geaccrediteerde instantie?</label>
<select class="input-select" id="conformity-assessment-body" name="conformity-assessment_body">
<label class="form__label" id="label-systemic-risk" for="systemic-risk">
Is er sprake van een systeemrisico?
<span class="info-icon" title="Alleen van toepassing op AI-model voor algemene doeleinden">i</span>
</label>
<select class="input-select" id="systemic-risk" name="systeemrisico" disabled>
<option value="" hidden="">Selecteer optie</option>
<option value="beoordeling-door-derde-partij">beoordeling door derde partij</option>
<option value="">niet van toepassing</option>
<option value="systeemrisico">Systeemrisico</option>
<option value="geen-systeemrisico">Geen systeemrisico</option>
</select>
</div>

<div class="form__row">
<button class="button--primary" type="submit">Filter toepassen</button>
</div>
</form
>
</form>
27 changes: 7 additions & 20 deletions docs/javascripts/filtering.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,13 +156,13 @@ function filterTable() {
}

for (let i = 1; i < tr.length; i++) { // Skip header row
var dataLabels = ""
var labelMatchConditions = ""
if (tr[i].hasAttribute("data-labels")) {
dataLabels = tr[i].getAttribute("data-labels")
labelMatchConditions = tr[i].getAttribute("data-labels")
}
var uitzonderingExpressions = [];
var uitzonderingMatchConditions = [];
if (tr[i].hasAttribute("data-uitzondering")) {
uitzonderingExpressions = tr[i].getAttribute("data-uitzondering").split(",").map(item => item.trim()).filter(item => item !== "");
uitzonderingMatchConditions = tr[i].getAttribute("data-uitzondering").split(",").map(item => item.trim()).filter(item => item !== "");
}

var td = tr[i].getElementsByTagName("td")[1]; // Maatregelen column (td[0])
Expand All @@ -179,35 +179,22 @@ function filterTable() {
if (tr[i].getElementsByTagName("td")[2].querySelectorAll(".debug").length === 0) {
tr[i].getElementsByTagName("td")[2].innerHTML += "<div class='debug'></div>";
}
let debugDiv = tr[i].getElementsByTagName("td")[2].querySelectorAll(".debug")[0];

// console.log(`Row ${i} values: `, { txtValue, txtValue2, txtValue3, txtValue4 });

// Check if all selected filters are present
var roleMatch = selectedRoles.every(role => txtValue2.toUpperCase().indexOf(role) > -1);
var lcMatch = selectedLevenscyclus.every(lc => txtValue3.toUpperCase().indexOf(lc) > -1);
var onderwerpMatch = selectedOnderwerpen.every(onderwerp => txtValue4.toUpperCase().indexOf(onderwerp) > -1);
var labelMatch = dataLabels === "" || labelsToFilterOn.length === 0 || evaluateLabelExpression(dataLabels, labelsToFilterOn);
var uitzonderingMatch = anyExpressionMatches(uitzonderingExpressions, labelsInput);

debugDiv.innerHTML = "";
debugDiv.innerHTML += "Match condition: " + dataLabels + "</br></br>";
debugDiv.innerHTML += "Current labels: " + labelsToFilterOn + "</br>";
var labelMatch = labelMatchConditions === "" || labelsToFilterOn.length === 0 || evaluateLabelExpression(labelMatchConditions, labelsToFilterOn);
var uitzonderingMatch = anyExpressionMatches(uitzonderingMatchConditions, labelsInput);

if (uitzonderingMatch && labelMatch) {
tr[i].style.backgroundColor = "rgba(249, 105, 14, 0.15)";
labelMatch = false
} else if (labelMatch && dataLabels !== "") {
tr[i].style.backgroundColor = "rgba(0, 255, 0, 0.15)";
} else {
tr[i].style.backgroundColor = "rgba(0, 0, 255, 0.15)";
}

if (txtValue.toUpperCase().indexOf(filter) > -1 && roleMatch && lcMatch && onderwerpMatch && labelMatch) {
tr[i].style.display = "";
} else {
tr[i].style.backgroundColor = "red";
// tr[i].style.display = "none";
tr[i].style.display = "none";
}
}
}
Expand Down
Loading

0 comments on commit ecd2f18

Please sign in to comment.