Skip to content

Commit

Permalink
run prettier to format files
Browse files Browse the repository at this point in the history
  • Loading branch information
Khaled authored and Khaled committed Feb 5, 2025
1 parent 0feb725 commit df21bb9
Show file tree
Hide file tree
Showing 49 changed files with 1,022 additions and 1,388 deletions.
115 changes: 48 additions & 67 deletions lumigator/frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
size="small"
label="Hybrid"
aria-label="Logs"
style="padding:0;background: transparent; border: none; font-weight: 400;gap: 4px"
style="padding: 0; background: transparent; border: none; font-weight: 400; gap: 4px"
iconClass="mode-icon"
class="l-mode__selector"
/>
Expand All @@ -22,67 +22,47 @@
<div class="external-links-container">
<ul>
<li>
<a
href="https://github.com/mozilla-ai/lumigator"
target="_blank"
>GitHub <span class="pi pi-arrow-up-right" />
<a href="https://github.com/mozilla-ai/lumigator" target="_blank"
>GitHub <span class="pi pi-arrow-up-right" />
</a>
</li>
<li>
<a
href="https://mozilla-ai.github.io/lumigator/"
target="_blank"
>Documentation <span class="pi pi-arrow-up-right" />
<a href="https://mozilla-ai.github.io/lumigator/" target="_blank"
>Documentation <span class="pi pi-arrow-up-right" />
</a>
</li>

</ul>
</div>
</div>
<div class="l-main-container">
<ConfirmDialog></ConfirmDialog>
<Toast
position="bottom-right"
group="br"
>
<Toast position="bottom-right" group="br">
<template #message="slotProps">
<div
class="toaster-content"
:class="slotProps.message.severity"
>
<span :class="slotProps.message.messageicon" ></span>
<div class="toaster-content" :class="slotProps.message.severity">
<span :class="slotProps.message.messageicon"></span>
<div class="toaster-content__text">
<h4> {{ slotProps.message.summary }}</h4>
<p v-if="slotProps.message.detail ">{{ slotProps.message.detail }} </p>
<h4>{{ slotProps.message.summary }}</h4>
<p v-if="slotProps.message.detail">{{ slotProps.message.detail }}</p>
</div>
</div>
</template>
</Toast>
<router-view v-slot="{ Component }">
<transition
name="transition-fade"
mode="out-in"
>
<component
:is="Component"
@s-disable-scroll.stop=""
/>
<transition name="transition-fade" mode="out-in">
<component :is="Component" @s-disable-scroll.stop="" />
</transition>
</router-view>
</div>
<div class="sliding-panel"
:class="{ open: showSlidingPanel }"
>
</div>
<div class="sliding-panel" :class="{ open: showSlidingPanel }"></div>
</div>
</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import LMenu from '@/components/organisms/LMenu.vue';
import { useDatasetStore } from '@/stores/datasets/store'
import { useExperimentStore } from '@/stores/experiments/store'
import { useDatasetStore } from '@/stores/datasets/store';
import { useExperimentStore } from '@/stores/experiments/store';
import { useSlidePanel } from '@/composables/SlidingPanel';
import ConfirmDialog from 'primevue/confirmdialog';
import Toast from 'primevue/toast';
Expand All @@ -96,27 +76,27 @@ const tooltipConfig = ref({
pt: {
root: {
style: {
background: `transparent`
}
background: `transparent`,
},
},
text: {
style: {
background: `black`,
}
background: `black`,
},
},
arrow: {
style: {
['border-right-color']: `black`
}
}
}
})
['border-right-color']: `black`,
},
},
},
});
const { showSlidingPanel } = useSlidePanel();
onMounted(async () => {
await experimentStore.loadExperiments();
await datasetStore.loadDatasets();
})
});
</script>

<style scoped lang="scss">
Expand Down Expand Up @@ -182,8 +162,7 @@ onMounted(async () => {
border-radius: $l-main-radius;
display: grid;
text-align: center;
border: 1px solid black
border: 1px solid black;
}
.sliding-panel {
Expand All @@ -199,38 +178,40 @@ onMounted(async () => {
}
.l-main-container {
transition: flex-grow 0.3s, margin-right 0.3s;
transition:
flex-grow 0.3s,
margin-right 0.3s;
}
.sliding-panel.open+.l-main-container {
.sliding-panel.open + .l-main-container {
margin-right: 0;
}
}
</style>

<style lang="scss">
.toaster-content {
width: 100%;
display: flex;
gap: 5px;
.toaster-content {
width: 100%;
display: flex;
gap: 5px;
span {
padding: 5px;
}
span {
padding: 5px;
}
p {
font-size: $l-menu-font-size;
}
p {
font-size: $l-menu-font-size;
}
&.error {
color: $l-grey-100;
h4 {
font-weight: $l-font-weight-semibold;
}
&.error {
color: $l-grey-100;
h4 {
font-weight: $l-font-weight-semibold;
}
}
}
.mode-icon {
font-size: $l-font-size-xs!important;
}
.mode-icon {
font-size: $l-font-size-xs !important;
}
</style>
14 changes: 7 additions & 7 deletions lumigator/frontend/src/components/__tests__/HelloWorld.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { describe, it, expect } from 'vitest'
import { describe, it, expect } from 'vitest';

import { mount } from '@vue/test-utils'
import LPageHeader from '../molecules/LPageHeader.vue'
import { mount } from '@vue/test-utils';
import LPageHeader from '../molecules/LPageHeader.vue';

describe('LPageHeader', () => {
it('renders properly', () => {
const wrapper = mount(LPageHeader, { props: { msg: 'Hello Vitest' } })
expect(wrapper.text()).toContain('Hello Vitest')
})
})
const wrapper = mount(LPageHeader, { props: { msg: 'Hello Vitest' } });
expect(wrapper.text()).toContain('Hello Vitest');
});
});
24 changes: 12 additions & 12 deletions lumigator/frontend/src/components/molecules/LDatasetEmpty.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<h2 class="l-dataset-empty__instructions">Submit a dataset to start using Lumigator.</h2>
<p class="l-dataset-empty__instructions-text">
<span>
Use a dataset as the basis for your evaluation.
It includes data for the model you'd like to evaluate and possibly a ground truth "answer".
Use a dataset as the basis for your evaluation. It includes data for the model you'd like to
evaluate and possibly a ground truth "answer".
</span>
</p>
<Button
Expand All @@ -17,24 +17,26 @@
/>
<p class="l-dataset-empty__note">
Your dataset should be a CSV file and include the following columns:
<span class="l-dataset-empty__note-item">examples</span>,
<span class="l-dataset-empty__note-item">ground_truth</span>.
<span class="l-dataset-empty__note-item">examples</span>,
<span class="l-dataset-empty__note-item">ground_truth</span>.
</p>
<p class="l-dataset-empty__note">
The
<span class="l-dataset-empty__note-item">ground_truth</span>
<span class="l-dataset-empty__note-item">ground_truth</span>
column is optional, as it can be generated using Lumigator.
<a href="https://mozilla-ai.github.io/lumigator/"
target="_blank"
style="background-color: transparent;"
>Learn more <span class="pi pi-arrow-up-right" /></a>
<a
href="https://mozilla-ai.github.io/lumigator/"
target="_blank"
style="background-color: transparent"
>Learn more <span class="pi pi-arrow-up-right"
/></a>
</p>
</div>
</template>

<script lang="ts" setup>
import Button from 'primevue/button';
const emit = defineEmits(['l-add-dataset'])
const emit = defineEmits(['l-add-dataset']);
</script>

<style scoped lang="scss">
Expand Down Expand Up @@ -70,7 +72,6 @@ const emit = defineEmits(['l-add-dataset'])
font-weight: $l-font-weight-normal;
margin-top: $l-spacing-1;
margin-bottom: $l-spacing-1/2;
}
&__note {
Expand All @@ -79,6 +80,5 @@ const emit = defineEmits(['l-add-dataset'])
background: $black;
}
}
}
</style>
Loading

0 comments on commit df21bb9

Please sign in to comment.