Skip to content

Commit

Permalink
Merge pull request #1295 from OpenC3/dv_height
Browse files Browse the repository at this point in the history 
DataViewer collapsable header and full height
  • Loading branch information
@jmthomas
jmthomas authored May 22, 2024
2 parents 2964d61 + ab02ec1 commit 055f4c4
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 91 deletions.
169 changes: 93 additions & 76 deletions ...s-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/DataViewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,81 +24,88 @@
<div>
<top-bar :menus="menus" :title="title" />
<v-card>
<v-container>
<v-row dense>
<v-col>
<v-text-field
v-model="startDate"
label="Start Date"
type="date"
:rules="[rules.required]"
data-test="start-date"
/>
</v-col>
<v-col>
<v-text-field
v-model="startTime"
label="Start Time"
type="time"
step="1"
:rules="[rules.required]"
data-test="start-time"
/>
</v-col>
<v-col>
<v-text-field
v-model="endDate"
label="End Date"
type="date"
:rules="endTime ? [rules.required] : []"
data-test="end-date"
/>
</v-col>
<v-col>
<v-text-field
v-model="endTime"
label="End Time"
type="time"
step="1"
:rules="endDate ? [rules.required] : []"
data-test="end-time"
/>
</v-col>
<v-col cols="auto" class="pt-4">
<v-btn
v-if="running"
color="primary"
width="100"
data-test="stop-button"
@click="stop"
>
Stop
</v-btn>
<v-btn
v-else
:disabled="!canStart"
color="primary"
width="100"
class="pulse-button"
data-test="start-button"
@click="start"
>
Start
</v-btn>
</v-col>
</v-row>
<div class="mb-3" v-show="warning || error || connectionFailure">
<v-alert type="warning" v-model="warning" dismissible>
{{ warningText }}
</v-alert>
<v-alert type="error" v-model="error" dismissible>
{{ errorText }}
</v-alert>
<v-alert type="error" v-model="connectionFailure">
OpenC3 backend connection failed.
</v-alert>
</div>
</v-container>
<v-expansion-panels v-model="panel" style="margin-bottom: 5px">
<v-expansion-panel>
<v-expansion-panel-header
style="z-index: 1"
></v-expansion-panel-header>
<v-expansion-panel-content>
<v-row dense>
<v-col>
<v-text-field
v-model="startDate"
label="Start Date"
type="date"
:rules="[rules.required]"
data-test="start-date"
/>
</v-col>
<v-col>
<v-text-field
v-model="startTime"
label="Start Time"
type="time"
step="1"
:rules="[rules.required]"
data-test="start-time"
/>
</v-col>
<v-col>
<v-text-field
v-model="endDate"
label="End Date"
type="date"
:rules="endTime ? [rules.required] : []"
data-test="end-date"
/>
</v-col>
<v-col>
<v-text-field
v-model="endTime"
label="End Time"
type="time"
step="1"
:rules="endDate ? [rules.required] : []"
data-test="end-time"
/>
</v-col>
<v-col cols="auto" class="pt-4">
<v-btn
v-if="running"
color="primary"
width="100"
data-test="stop-button"
@click="stop"
>
Stop
</v-btn>
<v-btn
v-else
:disabled="!canStart"
color="primary"
width="100"
class="pulse-button"
data-test="start-button"
@click="start"
>
Start
</v-btn>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<div class="mb-3" v-show="warning || error || connectionFailure">
<v-alert type="warning" v-model="warning" dismissible>
{{ warningText }}
</v-alert>
<v-alert type="error" v-model="error" dismissible>
{{ errorText }}
</v-alert>
<v-alert type="error" v-model="connectionFailure">
OpenC3 backend connection failed.
</v-alert>
</div>
<v-tabs ref="tabs" v-model="curTab">
<v-tab
v-for="(tab, index) in config.tabs"
Expand Down Expand Up @@ -128,7 +135,7 @@
<v-tabs-items v-model="curTab">
<v-tab-item v-for="(tab, index) in config.tabs" :key="tab.ref" eager>
<keep-alive>
<v-card flat style="height: 90vh">
<v-card flat>
<v-divider />
<v-card-title class="pa-3">
<span v-text="tab.name" />
Expand Down Expand Up @@ -278,6 +285,7 @@ export default {
// Initialize with all built-in components
components: [{ label: 'COSMOS Raw/Decom', value: 'DumpComponent' }],
counter: 0,
panel: 0,
componentType: null,
componentName: null,
openConfig: false,
Expand Down Expand Up @@ -679,6 +687,15 @@ export default {
</script>

<style scoped>
.v-expansion-panel-content {
.container {
margin: 0px;
}
}
.v-expansion-panel-header {
min-height: 10px;
padding: 5px;
}
/* Add some juice to the START button to indicate it needs to be pressed */
.pulse-button {
animation: pulse 2s infinite;
Expand Down
42 changes: 27 additions & 15 deletions ...s-init/plugins/packages/openc3-tool-common/src/components/dataviewer/HistoryComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
-->

<template>
<v-container class="pt-0">
<v-row dense class="mt-2">
<v-col>
<div class="pa-2">
<v-row dense class="mb-2">
<v-col cols="4">
<v-text-field
v-model="filterText"
label="Search"
Expand All @@ -37,9 +37,7 @@
data-test="history-component-search"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-col cols="8" class="mt-1">
<v-slider
v-model="pauseOffset"
v-on:mousedown="pause"
Expand All @@ -62,7 +60,7 @@
<v-textarea
ref="textarea"
:value="displayText"
rows="1"
:rows="rows"
no-resize
readonly
solo
Expand Down Expand Up @@ -197,7 +195,7 @@
</div>
</v-col>
</v-row>
</v-container>
</div>
</template>

<script>
Expand All @@ -217,6 +215,7 @@ export default {
pausedAt: 0,
pauseOffset: 0,
pausedHistory: [],
rows: 1,
textarea: null,
displayText: '',
rules: {
Expand Down Expand Up @@ -315,6 +314,7 @@ export default {
join += '\n'
}
this.displayText = packets.join(join)
this.rows = this.displayText.split('\n').length
},
matchesSearch: function (text) {
if (this.filterText === null) {
Expand All @@ -323,7 +323,7 @@ export default {
return text
.split('\n')
.filter((line) =>
line.toLowerCase().includes(this.filterText.toLowerCase()),
line.toLowerCase().includes(this.filterText.toLowerCase())
)
.join('\n')
},
Expand All @@ -337,7 +337,7 @@ export default {
link.href = url
link.setAttribute(
'download',
`${format(new Date(), 'yyyy_MM_dd_HH_mm_ss')}.txt`,
`${format(new Date(), 'yyyy_MM_dd_HH_mm_ss')}.txt`
)
link.click()
window.URL.revokeObjectURL(url)
Expand All @@ -360,10 +360,26 @@ export default {
}
</script>

<style>
/* Flash the chevron icon 3 times to let the user know they can minimize the controls */
i.v-icon.mdi-chevron-down {
animation: pulse 2s 3;
}
@keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
</style>
<style lang="scss" scoped>
.text-area-container {
position: relative;
height: 60vh;
.v-textarea {
font-family: 'Courier New', Courier, monospace;
}
Expand All @@ -374,10 +390,6 @@ export default {
right: 24px;
}
}
.text-area-container :deep(textarea) {
height: 60vh;
}

.pulse {
animation: pulse 2s infinite;
}
Expand Down

0 comments on commit 055f4c4

Please sign in to comment.