Skip to content

Fixed display issue on smaller screen height #1171

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

Merged
merged 3 commits into from
Jun 14, 2023
Merged

Fixed display issue on smaller screen height #1171

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f642aec
Fixed display issue on smaller screen height
kevinmessiaen Jun 13, 2023
4dcbb4d
Prettier
kevinmessiaen Jun 13, 2023
738de1d
Merge branch 'main' into feature/gsk-1299-debugging-session-list-is-b…
kevinmessiaen Jun 13, 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
117 changes: 65 additions & 52 deletions frontend/src/views/main/project/Debugger.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,66 @@
<template>
<div v-if="mlWorkerStore.isExternalWorkerConnected" class="vertical-container">
<v-container fluid class="vc" v-if="debuggingSessionsStore.debuggingSessions.length > 0">
<div v-if='mlWorkerStore.isExternalWorkerConnected' class='vertical-container'>
<v-container v-if='debuggingSessionsStore.debuggingSessions.length > 0' class='vc' fluid>
<v-row>
<v-col cols="4">
<v-text-field v-show="debuggingSessionsStore.currentDebuggingSessionId === null" label="Search for a debugging session" append-icon="search" outlined v-model="searchSession"></v-text-field>
<v-col cols='4'>
<v-text-field v-show='debuggingSessionsStore.currentDebuggingSessionId === null'
v-model='searchSession' append-icon='search' label='Search for a debugging session'
outlined></v-text-field>
</v-col>
<v-col cols="8">
<div class="d-flex justify-end">
<v-btn v-if="debuggingSessionsStore.currentDebuggingSessionId !== null" text @click="showPastSessions" class="mr-3">
<v-icon class="mr-2">mdi-arrow-left</v-icon>
<v-col cols='8'>
<div class='d-flex justify-end'>
<v-btn v-if='debuggingSessionsStore.currentDebuggingSessionId !== null' class='mr-3' text
@click='showPastSessions'>
<v-icon class='mr-2'>mdi-arrow-left</v-icon>
Back to all sessions
</v-btn>
<AddDebuggingSessionModal v-show="debuggingSessionsStore.currentDebuggingSessionId === null" :projectId="projectId" @createDebuggingSession="createDebuggingSession"></AddDebuggingSessionModal>
<AddDebuggingSessionModal v-show='debuggingSessionsStore.currentDebuggingSessionId === null'
:projectId='projectId'
@createDebuggingSession='createDebuggingSession'></AddDebuggingSessionModal>
</div>
</v-col>
</v-row>

<v-expansion-panels v-if="debuggingSessionsStore.currentDebuggingSessionId === null">
<v-row class="mr-12 ml-6 caption secondary--text text--lighten-3 pb-2">
<v-col cols="3" class="col-container" title="Session name">Session name</v-col>
<v-col cols="2" class="col-container" title="Created at">Created at</v-col>
<v-col cols="3" class="col-container" title="Dataset">Dataset</v-col>
<v-col cols="3" class="col-container" title="Model">Model</v-col>
<v-col cols="1"></v-col>
<v-expansion-panels v-if='debuggingSessionsStore.currentDebuggingSessionId === null'>
<v-row class='mr-12 ml-6 caption secondary--text text--lighten-3 pb-2'>
<v-col class='col-container' cols='3' title='Session name'>Session name</v-col>
<v-col class='col-container' cols='2' title='Created at'>Created at</v-col>
<v-col class='col-container' cols='3' title='Dataset'>Dataset</v-col>
<v-col class='col-container' cols='3' title='Model'>Model</v-col>
<v-col cols='1'></v-col>
</v-row>

<v-expansion-panel v-for="session in filteredSessions" :key="session.id" @click.stop="openDebuggingSession(session.id, projectId)" class="expansion-panel">
<v-expansion-panel-header :disableIconRotate="true" class="grey lighten-5" tile>
<v-row class="px-2 py-1 align-center">
<v-col cols="3" class="font-weight-bold" :title="`${session.name} (ID: ${session.id})`">
<div class="pr-4">
<InlineEditText :text="session.name" @save="(name) => renameSession(session.id, name)">
<v-expansion-panel v-for='session in filteredSessions' :key='session.id'
class='expansion-panel' @click.stop='openDebuggingSession(session.id, projectId)'>
<v-expansion-panel-header :disableIconRotate='true' class='grey lighten-5' tile>
<v-row class='px-2 py-1 align-center'>
<v-col :title='`${session.name} (ID: ${session.id})`' class='font-weight-bold' cols='3'>
<div class='pr-4'>
<InlineEditText :text='session.name' @save='(name) => renameSession(session.id, name)'>
</InlineEditText>
</div>
</v-col>
<v-col cols="2" class="col-container">
<span :title="session.createdDate | date">
<v-col class='col-container' cols='2'>
<span :title='session.createdDate | date'>
{{ session.createdDate | date }}
</span>
</v-col>
<v-col cols="3" class="col-container">
<span :title="(session.dataset.name ? session.dataset.name : 'Unnamed dataset') + ` (ID: ${session.dataset.id})`" @click.stop.prevent="copyText(session.dataset.id, 'Copied dataset ID to clipboard')">
<v-col class='col-container' cols='3'>
<span
:title="(session.dataset.name ? session.dataset.name : 'Unnamed dataset') + ` (ID: ${session.dataset.id})`"
@click.stop.prevent="copyText(session.dataset.id, 'Copied dataset ID to clipboard')">
{{ session.dataset.name ? session.dataset.name : 'Unnamed dataset' }}
</span>
</v-col>
<v-col cols="3" class="col-container">
<span :title="`${session.model.name} (ID: ${session.model.id})`" @click.stop.prevent="copyText(session.model.id, 'Copied model ID to clipboard')">{{ session.model.name ? session.model.name : 'Unnamed model' }}</span>
<v-col class='col-container' cols='3'>
<span :title='`${session.model.name} (ID: ${session.model.id})`'
@click.stop.prevent="copyText(session.model.id, 'Copied model ID to clipboard')">{{ session.model.name ? session.model.name : 'Unnamed model'
}}</span>
</v-col>
<v-col cols="1">
<v-col cols='1'>
<v-card-actions>
<v-btn icon @click.stop.prevent="deleteDebuggingSession(session)">
<v-icon color="accent">delete</v-icon>
<v-btn icon @click.stop.prevent='deleteDebuggingSession(session)'>
<v-icon color='accent'>delete</v-icon>
</v-btn>
</v-card-actions>
</v-col>
Expand All @@ -63,37 +73,40 @@
</div>
</v-container>

<v-container v-else class="vc mt-6">
<v-alert class="text-center">
<p class="headline font-weight-medium grey--text text--darken-2">You haven't created any debugging session for this project. <br>Please create your first session to start debugging your model.</p>
<v-container v-else class='vc mt-6'>
<v-alert class='text-center'>
<p class='headline font-weight-medium grey--text text--darken-2'>You haven't created any debugging session for
this project. <br>Please create your first session to start debugging your model.</p>
</v-alert>
<AddDebuggingSessionModal :projectId="projectId" v-on:createDebuggingSession="createDebuggingSession"></AddDebuggingSessionModal>
<div class="d-flex justify-center mb-6">
<img src="@/assets/logo_debugger.png" class="debugger-logo" title="Debugger tab logo" alt="A turtle using a magnifying glass">
<AddDebuggingSessionModal :projectId='projectId'
v-on:createDebuggingSession='createDebuggingSession'></AddDebuggingSessionModal>
<div class='d-flex justify-center mb-6'>
<img alt='A turtle using a magnifying glass' class='debugger-logo' src='@/assets/logo_debugger.png'
title='Debugger tab logo'>
</div>
</v-container>
</div>
<v-container v-else class="d-flex flex-column vc fill-height">
<h1 class="pt-16">ML Worker is not connected</h1>
<v-container v-else class='d-flex flex-column align-center'>
<h1 class='pt-16'>ML Worker is not connected</h1>
<StartWorkerInstructions></StartWorkerInstructions>
</v-container>
</template>

<script setup lang="ts">
import { computed, ref, onActivated, watch } from "vue";
<script lang='ts' setup>
import { computed, onActivated, ref, watch } from 'vue';
import { $vfm } from 'vue-final-modal';
import { api } from '@/api';
import { useRouter, useRoute } from 'vue-router/composables';
import { useMainStore } from "@/stores/main";
import { useDebuggingSessionsStore } from "@/stores/debugging-sessions";
import { useMLWorkerStore } from "@/stores/ml-worker";
import { InspectionDTO } from "@/generated-sources";
import { useRoute, useRouter } from 'vue-router/composables';
import { useMainStore } from '@/stores/main';
import { useDebuggingSessionsStore } from '@/stores/debugging-sessions';
import { useMLWorkerStore } from '@/stores/ml-worker';
import { InspectionDTO } from '@/generated-sources';
import AddDebuggingSessionModal from '@/components/AddDebuggingSessionModal.vue';
import InlineEditText from '@/components/InlineEditText.vue';
import ConfirmModal from './modals/ConfirmModal.vue';
import StartWorkerInstructions from "@/components/StartWorkerInstructions.vue";
import { copyText } from "@/utils";
import { TYPE } from "vue-toastification";
import StartWorkerInstructions from '@/components/StartWorkerInstructions.vue';
import { copyText } from '@/utils';
import { TYPE } from 'vue-toastification';

const router = useRouter();
const route = useRoute();
Expand All @@ -107,7 +120,7 @@ interface Props {

const props = defineProps<Props>();

const searchSession = ref("");
const searchSession = ref('');

const filteredSessions = computed(() => {

Expand All @@ -125,7 +138,7 @@ const filteredSessions = computed(() => {
model.id.toString().includes(search)
);
}));
})
});

async function showPastSessions() {
debuggingSessionsStore.reload();
Expand Down Expand Up @@ -194,7 +207,7 @@ async function openDebuggingSession(debuggingSessionId: number, projectId: numbe
}

function resetSearchInput() {
searchSession.value = "";
searchSession.value = '';
}

async function openInspection(projectId: string, inspectionId: string) {
Expand Down