Skip to content

Commit 240413c

Browse files
mattbitmattbit
committed
Merge branch 'task/fix-scan-metrics' of github.com:Giskard-AI/giskard into task/fix-scan-metrics
2 parents c98c786 + 680e1ce commit 240413c

File tree

4 files changed

+594
-574
lines changed

4 files changed

+594
-574
lines changed

‎frontend/src/views/main/project/SuiteTestExecutionCard.vue‎

Lines changed: 152 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,224 +1,224 @@
11
<template>
2-
<div class="test-container">
3-
<div class="d-flex flex-row align-center test-card-header">
4-
<span class="test-name text-black">
5-
Test {{ suiteTest.test.displayName ?? suiteTest.test.name }}
6-
<span v-if="transformationFunction"> to {{
7-
transformationFunction.displayName ?? transformationFunction.name
8-
}}</span>
9-
<span v-if="slicingFunction"> on slice {{ slicingFunction.displayName ?? slicingFunction.name }}</span>
10-
</span>
11-
<!-- TODO: Add tag to the test suite level (https://github.com/Giskard-AI/giskard/issues/1034)
12-
<div class="d-flex flex-row gap-4">
13-
<v-chip v-if="!compact" v-for="tag in sorted(suiteTest.test.tags)" x-small :color="pasterColor(tag)"
14-
label>
15-
{{ tag }}
16-
</v-chip>
17-
</div>
18-
-->
19-
<div class="flex-grow-1" />
20-
<div v-if="result" :class="`d-flex flex-row align-center gap-8 ${result.passed ? 'test-passed' : 'test-failed'}`">
2+
<div class="test-container">
3+
<div class="d-flex flex-row flex-wrap align-center test-card-header">
4+
<span class='test-name text-black'>
5+
Test {{ suiteTest.test.displayName ?? suiteTest.test.name }}
6+
<span v-if='transformationFunction'> to {{
7+
transformationFunction.displayName ?? transformationFunction.name
8+
}}</span>
9+
<span v-if='slicingFunction'> on slice {{ slicingFunction.displayName ?? slicingFunction.name }}</span>
10+
</span>
11+
<!-- TODO: Add tag to the test suite level (https://github.com/Giskard-AI/giskard/issues/1034)
12+
<div class="d-flex flex-row gap-4">
13+
<v-chip v-if="!compact" v-for="tag in sorted(suiteTest.test.tags)" x-small :color="pasterColor(tag)"
14+
label>
15+
{{ tag }}
16+
</v-chip>
17+
</div>
18+
-->
19+
<div class="flex-grow-1"/>
20+
<div v-if="result" :class="`d-flex flex-row align-center gap-8 ${result.passed ? 'test-passed' : 'test-failed'}`">
2121
<span v-if="result.metric" class="metric">Measured <strong>Metric = {{
2222
result.metric
23-
}}</strong></span>
24-
<v-chip v-if="result.passed" :color="Colors.PASS_SURFACE" :text-color="Colors.ON_PASS_SURFACE" label>
25-
<v-icon>done</v-icon>
26-
Passed
27-
</v-chip>
28-
<v-chip v-else small :color="Colors.FAIL_SURFACE" :text-color="Colors.ON_FAIL_SURFACE" label>
29-
<v-icon small>close</v-icon>
30-
Failed
31-
</v-chip>
32-
<v-tooltip bottom>
33-
<template v-slot:activator="{ on, attrs }">
34-
<div v-on="on">
35-
<v-btn color="primary" outlined small disabled>
36-
<v-icon small>info</v-icon>
37-
Debug
38-
</v-btn>
39-
</div>
40-
</template>
41-
<span>Coming soon</span>
42-
</v-tooltip>
23+
}}</strong></span>
24+
<v-chip v-if="result.passed" :color="Colors.PASS_SURFACE" :text-color="Colors.ON_PASS_SURFACE" label>
25+
<v-icon>done</v-icon>
26+
Passed
27+
</v-chip>
28+
<v-chip v-else :color="Colors.FAIL_SURFACE" :text-color="Colors.ON_FAIL_SURFACE" label small>
29+
<v-icon small>close</v-icon>
30+
Failed
31+
</v-chip>
32+
<v-tooltip bottom>
33+
<template v-slot:activator="{ on, attrs }">
34+
<div v-on="on">
35+
<v-btn color="primary" disabled outlined small>
36+
<v-icon small>info</v-icon>
37+
Debug
38+
</v-btn>
4339
</div>
44-
</div>
45-
<div class="d-flex flex-row align-end test-card-footer">
46-
<div v-for="({ name, value, type }) in orderedParams" class="d-flex flex-column">
47-
<span class="text-input-name">{{ name }}</span>
48-
<span :class="['BaseModel', 'Dataset'].includes(type) ? 'text-input-value' : 'text-input-value-code'">{{
49-
value
50-
}}</span>
51-
</div>
52-
<div class="flex-grow-1" />
53-
<v-btn v-if="!isPastExecution" text small @click="editTests" color="rgba(0, 0, 0, 0.6)">
54-
<v-icon small class="mr-1">settings</v-icon>
55-
Edit parameters
56-
</v-btn>
57-
</div>
40+
</template>
41+
<span>Coming soon</span>
42+
</v-tooltip>
43+
</div>
44+
</div>
45+
<div class="d-flex flex-row flex-wrap align-end test-card-footer">
46+
<div v-for="({ name, value, type }) in orderedParams" class="d-flex flex-column">
47+
<span class="text-input-name">{{ name }}</span>
48+
<span :class="['BaseModel', 'Dataset'].includes(type) ? 'text-input-value' : 'text-input-value-code'">{{
49+
value
50+
}}</span>
51+
</div>
52+
<div class="flex-grow-1"/>
53+
<v-btn v-if="!isPastExecution" color="rgba(0, 0, 0, 0.6)" small text @click="editTests">
54+
<v-icon class="mr-1" small>settings</v-icon>
55+
Edit parameters
56+
</v-btn>
5857
</div>
58+
</div>
5959
</template>
6060

61-
<script setup lang="ts">
61+
<script lang="ts" setup>
6262
6363
import { SuiteTestDTO, SuiteTestExecutionDTO } from '@/generated-sources';
64-
import { computed } from "vue";
65-
import { storeToRefs } from "pinia";
66-
import { useCatalogStore } from "@/stores/catalog";
67-
import { Colors } from "@/utils/colors";
68-
import { $vfm } from "vue-final-modal";
69-
import SuiteTestInfoModal from "@/views/main/project/modals/SuiteTestInfoModal.vue";
70-
import { useTestSuiteStore } from "@/stores/test-suite";
64+
import { computed } from 'vue';
65+
import { storeToRefs } from 'pinia';
66+
import { useCatalogStore } from '@/stores/catalog';
67+
import { Colors } from '@/utils/colors';
68+
import { $vfm } from 'vue-final-modal';
69+
import SuiteTestInfoModal from '@/views/main/project/modals/SuiteTestInfoModal.vue';
70+
import { useTestSuiteStore } from '@/stores/test-suite';
7171
72-
const { slicingFunctionsByUuid, transformationFunctionsByUuid } = storeToRefs(useCatalogStore())
73-
const { models, datasets } = storeToRefs(useTestSuiteStore())
72+
const { slicingFunctionsByUuid, transformationFunctionsByUuid } = storeToRefs(useCatalogStore());
73+
const { models, datasets } = storeToRefs(useTestSuiteStore());
7474
7575
const props = defineProps<{
76-
suiteTest: SuiteTestDTO,
77-
result?: SuiteTestExecutionDTO,
78-
compact: boolean,
79-
isPastExecution: boolean
76+
suiteTest: SuiteTestDTO,
77+
result?: SuiteTestExecutionDTO,
78+
compact: boolean,
79+
isPastExecution: boolean
8080
}>();
8181
8282
const params = computed(() => props.isPastExecution && props.result
83-
? props.result?.inputs
83+
? props.result?.inputs
8484
: Object.values(props.suiteTest.functionInputs)
8585
.filter(input => !input.isAlias)
86-
.reduce((r, input) => ({ ...r, [input.name]: input.value }), {}))
86+
.reduce((r, input) => ({...r, [input.name]: input.value}), {}))
8787
8888
function mapValue(value: string, type: string): string {
89-
if (type === 'SlicingFunction') {
90-
const slicingFunction = slicingFunctionsByUuid.value[value];
91-
return slicingFunction?.displayName ?? slicingFunction?.name ?? value
92-
} else if (type === 'TransformationFunction') {
93-
const transformationFunction = transformationFunctionsByUuid.value[value];
94-
return transformationFunction?.displayName ?? transformationFunction?.name ?? value
95-
} else if (type === 'BaseModel') {
96-
const model = models.value[value]
97-
return model.name ?? value
98-
} else if (type === 'Dataset') {
99-
const dataset = datasets.value[value]
100-
return dataset.name ?? value
101-
}
102-
return value;
89+
if (type === 'SlicingFunction') {
90+
const slicingFunction = slicingFunctionsByUuid.value[value];
91+
return slicingFunction?.displayName ?? slicingFunction?.name ?? value
92+
} else if (type === 'TransformationFunction') {
93+
const transformationFunction = transformationFunctionsByUuid.value[value];
94+
return transformationFunction?.displayName ?? transformationFunction?.name ?? value
95+
} else if (type === 'BaseModel') {
96+
const model = models.value[value]
97+
return model.name ?? value
98+
} else if (type === 'Dataset') {
99+
const dataset = datasets.value[value]
100+
return dataset.name ?? value
101+
}
102+
return value;
103103
}
104104
105105
const orderedParams = computed(() => params.value ? props.suiteTest.test.args
106-
.filter(({ name }) => params.value!.hasOwnProperty(name))
107-
.map(({ name, type }) => ({
108-
name: name.split('_').map(word => word[0].toUpperCase() + word.slice(1)).join(' '),
109-
value: mapValue(params.value[name], type),
110-
type
111-
}))
106+
.filter(({name}) => params.value!.hasOwnProperty(name))
107+
.map(({name, type}) => ({
108+
name: name.split('_').map(word => word[0].toUpperCase() + word.slice(1)).join(' '),
109+
value: mapValue(params.value[name], type),
110+
type
111+
}))
112112
: [])
113113
114114
const slicingFunction = computed(() => {
115-
const uuid = params.value ? params.value['slicing_function'] : undefined;
115+
const uuid = params.value ? params.value['slicing_function'] : undefined;
116116
117-
if (uuid) {
118-
return slicingFunctionsByUuid.value[uuid];
119-
} else {
120-
return undefined;
121-
}
117+
if (uuid) {
118+
return slicingFunctionsByUuid.value[uuid];
119+
} else {
120+
return undefined;
121+
}
122122
})
123123
124124
const transformationFunction = computed(() => {
125-
const uuid = params.value ? params.value['transformation_function'] : undefined;
125+
const uuid = params.value ? params.value['transformation_function'] : undefined;
126126
127-
if (uuid) {
128-
return transformationFunctionsByUuid.value[uuid];
129-
} else {
130-
return undefined;
131-
}
127+
if (uuid) {
128+
return transformationFunctionsByUuid.value[uuid];
129+
} else {
130+
return undefined;
131+
}
132132
})
133133
134134
135135
async function editTests() {
136-
await $vfm.show({
137-
component: SuiteTestInfoModal,
138-
bind: {
139-
suiteTest: props.suiteTest
140-
}
141-
});
136+
await $vfm.show({
137+
component: SuiteTestInfoModal,
138+
bind: {
139+
suiteTest: props.suiteTest
140+
}
141+
});
142142
}
143143
</script>
144144

145-
<style scoped lang="scss">
145+
<style lang="scss" scoped>
146146
.test-container {
147-
border-radius: 4px 4px 4px 4px;
148-
-webkit-border-radius: 4px 4px 4px 4px;
149-
-moz-border-radius: 4px 4px 4px 4px;
150-
border: 1px solid rgb(224, 224, 224);
151-
background: white;
147+
border-radius: 4px 4px 4px 4px;
148+
-webkit-border-radius: 4px 4px 4px 4px;
149+
-moz-border-radius: 4px 4px 4px 4px;
150+
border: 1px solid rgb(224, 224, 224);
151+
background: white;
152152
}
153153
154154
.test-card-header {
155-
padding: 10px;
156-
gap: 20px;
155+
padding: 10px;
156+
gap: 20px;
157157
}
158158
159159
.test-card-footer {
160-
border-top: 1px solid #dee2e6;
161-
padding: 10px;
162-
gap: 20px;
160+
border-top: 1px solid #dee2e6;
161+
padding: 10px;
162+
gap: 20px;
163163
}
164164
165165
166166
.test-name {
167-
font-style: normal;
168-
font-weight: 500;
169-
font-size: 1em;
170-
line-height: 20px;
171-
letter-spacing: 0.0025em;
172-
color: #000000;
167+
font-style: normal;
168+
font-weight: 500;
169+
font-size: 1em;
170+
line-height: 20px;
171+
letter-spacing: 0.0025em;
172+
color: #000000;
173173
}
174174
175175
.gap-4 {
176-
gap: 8px;
176+
gap: 8px;
177177
}
178178
179179
.gap-8 {
180-
gap: 8px;
180+
gap: 8px;
181181
}
182182
183183
.metric {
184-
font-style: normal;
185-
font-weight: 400;
186-
font-size: 0.875em;
187-
line-height: 16px;
188-
letter-spacing: 0.0025em;
184+
font-style: normal;
185+
font-weight: 400;
186+
font-size: 0.875em;
187+
line-height: 16px;
188+
letter-spacing: 0.0025em;
189189
}
190190
191191
.test-failed {
192-
.metric {
193-
color: #B71C1C;
194-
}
192+
.metric {
193+
color: #B71C1C;
194+
}
195195
}
196196
197197
.text-input-name {
198-
font-style: normal;
199-
font-weight: 400;
200-
font-size: 0.875em;
201-
line-height: 12px;
202-
letter-spacing: 0.0025em;
198+
font-style: normal;
199+
font-weight: 400;
200+
font-size: 0.875em;
201+
line-height: 12px;
202+
letter-spacing: 0.0025em;
203203
}
204204
205205
.text-input-value {
206-
font-style: normal;
207-
font-weight: 400;
208-
font-size: 0.875em;
209-
line-height: 24px;
210-
font-feature-settings: 'liga' off;
211-
color: #000000;
206+
font-style: normal;
207+
font-weight: 400;
208+
font-size: 0.875em;
209+
line-height: 24px;
210+
font-feature-settings: 'liga' off;
211+
color: #000000;
212212
}
213213
214214
.text-input-value-code {
215-
font-family: 'Fira Code', "Helvetica Neue", sans-serif;
216-
font-style: normal;
217-
font-weight: 400;
218-
font-size: 0.75em;
219-
line-height: 24px;
220-
font-feature-settings: 'liga' off;
221-
color: #000000;
215+
font-family: 'Fira Code', "Helvetica Neue", sans-serif;
216+
font-style: normal;
217+
font-weight: 400;
218+
font-size: 0.75em;
219+
line-height: 24px;
220+
font-feature-settings: 'liga' off;
221+
color: #000000;
222222
}
223223
</style>
224224

0 commit comments

Comments
 (0)