Skip to content
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

Remember plotted items in the Agent graph. #560

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Remember plotted items in the Agent graph. #560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
74904e9
Remember plotted items in the Levels graph.
ezio-melotti Dec 13, 2023
6609a05
Linter fixes.
ezio-melotti Dec 13, 2023
accecc6
More linter fixes.
ezio-melotti Dec 13, 2023
e7e504c
Fix handling of plotted items while switching subpanels.
ezio-melotti Dec 25, 2023
65ea3f5
Fix corner case while changing panels.
ezio-melotti Dec 25, 2023
558d8cf
Refactor code.
ezio-melotti Dec 25, 2023
6c6f3c1
Fix linter error.
ezio-melotti Dec 25, 2023
6d83e02
Merge branch 'master' into plotted-items
ezio-melotti Dec 25, 2023
3b8e4f4
Merge branch 'master' into plotted-items
ezio-melotti Jan 7, 2024
583a9b9
Remember plotted items in the Agent graph.
ezio-melotti Jan 8, 2024
83c8e16
Use undefined to fix var initialization.
ezio-melotti Jan 9, 2024
40d14ea
Merge branch 'master' into plotted-items-agent-expl
ezio-melotti Apr 1, 2024
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
9 changes: 5 additions & 4 deletions src/components/dashboard/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ The layout of each panel is defined in BasePanel.vue to avoid duplication.

<template>
<div :class="{'dashboard-onepanel': isFullscreen}" class="dashboard-view-wrapper">
<BasePanel v-for="([panelName, panelSection], index) in activePanels.map(p => p.split(':'))"
<BasePanel v-for="([panelName, panelSection, plottedItems], index) in activePanels.map(p => p.split(':'))"
:key="index" :class="fullscreenStatus[index]">
<template #panel-title><div class="panel-title">{{panels[panelName].panelTitle}}</div></template>
<template #panel-menu>
Expand Down Expand Up @@ -45,7 +45,8 @@ The layout of each panel is defined in BasePanel.vue to avoid duplication.
</template>
<template #panel-content>
<component :is="panelName" :canvas-number="index" :panel-index="index"
:panel-section="panelSection" :fullscreen="isFullscreenPanel(index)"
:panel-section="panelSection" :plotted-items="plottedItems"
:fullscreen="isFullscreenPanel(index)"
@panel-section-changed="updatePanelSection" />
</template>
</BasePanel>
Expand Down Expand Up @@ -162,10 +163,10 @@ export default {
this.getActivePanels = this.activePanels
this.closePanelMenu()
},
updatePanelSection(index, section) {
updatePanelSection(index, section, plottedItems) {
// update the section of the panel at index
const panelName = this.activePanels[index].split(':')[0]
this.activePanels[index] = [panelName, section].join(':')
this.activePanels[index] = [panelName, section, plottedItems].join(':')
this.getActivePanels = this.activePanels
},
removePanel(index) {
Expand Down
29 changes: 28 additions & 1 deletion src/components/graphs/AgentGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,11 @@ export default {
id: {type: String, required: true},
agent: {type: String, required: true},
category: {type: String, required: true},
plottedItems: {type: String, default: undefined},
fullscreen: {type: Boolean, default: false},
nsteps: {type: Number, required: true},
},
emits: ['plotted-items-changed'],
setup() {
const dashboard = useDashboardStore()
const {isTimerRunning, currentStepBuffer, maxStepBuffer, currencyDict,
Expand Down Expand Up @@ -87,6 +89,10 @@ export default {
category() {
this.initChart()
},
// re-init the chart when we plot something else
plottedItems() {
this.initChart()
},
// re-init the chart when we change the number of steps displayed
nsteps() {
this.initChart()
Expand Down Expand Up @@ -151,8 +157,16 @@ export default {

return consolidated
},
formatLabel(label, unit) {
return label + (unit && !this.unit ? ` (${unit})` : '')
},
// TODO: this code is very similar to LevelsGraph.vue
initChart() {
if (this.plottedItems !== undefined && this.plottedItems.length) {
this.plotted_items = this.plottedItems.split('|')
} else {
this.plotted_items = undefined // no list of items to plot -- plot'em all
}
if (this.chart) {
// when switching chart we have to destroy
// the old one before reusing the same canvas
Expand Down Expand Up @@ -186,12 +200,14 @@ export default {
this.unit = allUnits.size === 1 ? allUnits.values().next().value : ''
datasets = Object.values(datasetsData).map(({unit, label}, i) => ({
data: Array(this.nsteps),
label: label + ((unit && !this.unit) ? ` (${unit})` : ''),
label: this.formatLabel(label, unit),
// TODO: Get field-specific color from currencyDict or fieldDict
borderColor: this.colors[i],
borderWidth: 2,
cubicInterpolationMode: 'monotone',
pointStyle: false,
hidden: (this.plotted_items !== undefined &&
!this.plotted_items.includes(this.formatLabel(label, unit))),
}))
}

Expand Down Expand Up @@ -236,6 +252,17 @@ export default {
usePointStyle: true,
pointStyle: 'line',
},
onClick: (event, legendItem, legend) => {
legend.chart.setDatasetVisibility(
legendItem.datasetIndex,
!legend.chart.isDatasetVisible(legendItem.datasetIndex)
)
legend.chart.update()
const plotted_items = legend.legendItems
.filter(item => !item.hidden)
.map(item => item.text).join('|')
this.$emit('plotted-items-changed', plotted_items)
},
},
tooltip: {
mode: 'index', // show both values
Expand Down
24 changes: 24 additions & 0 deletions src/components/graphs/LevelsGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@ export default {
props: {
id: {type: String, required: true},
plottedStorage: {type: String, required: true},
plottedItems: {type: String, default: undefined},
storagesMapping: {type: Object, required: true}, // TODO: Revert ABM Workaround
fullscreen: {type: Boolean, default: false},
nsteps: {type: Number, required: true},
},
emits: ['plotted-items-changed'],
setup() {
const dashboard = useDashboardStore()
const {currentStepBuffer} = storeToRefs(dashboard)
Expand Down Expand Up @@ -75,6 +77,10 @@ export default {
plottedStorage() {
this.initChart()
},
// re-init the chart when we plot something else
plottedItems() {
this.initChart()
},
// re-init the chart when we change the number of steps displayed
nsteps() {
this.initChart()
Expand All @@ -90,6 +96,11 @@ export default {
initChart() {
this.storage_name = this.plottedStorage
this.storage_type = this.storagesMapping[this.storage_name]
if (this.plottedItems !== undefined && this.plottedItems.length) {
this.plotted_items = this.plottedItems.split('|')
} else {
this.plotted_items = undefined // no list of items to plot -- plot'em all
}
if (this.chart) {
// when switching chart we have to destroy
// the old one before reusing the same canvas
Expand All @@ -112,6 +123,8 @@ export default {
cubicInterpolationMode: 'monotone',
pointStyle: false,
fill: true,
hidden: (this.plotted_items !== undefined &&
!this.plotted_items.includes(label)),
})
),
},
Expand Down Expand Up @@ -144,6 +157,17 @@ export default {
labels: {
boxWidth: 20,
},
onClick: (event, legendItem, legend) => {
legend.chart.setDatasetVisibility(
legendItem.datasetIndex,
!legend.chart.isDatasetVisible(legendItem.datasetIndex)
)
legend.chart.update()
const plotted_items = legend.legendItems
.filter(item => !item.hidden)
.map(item => item.text).join('|')
this.$emit('plotted-items-changed', plotted_items)
},
},
tooltip: {
mode: 'index', // show both values
Expand Down
35 changes: 23 additions & 12 deletions src/components/panels/AgentExplorer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
</select>
</div>
<div v-if="(agent && category)" class="chart-area">
<AgentGraph :id="'canvas-pc-' + canvasNumber" :agent="agent" :category="category"
:fullscreen="fullscreen" :nsteps="fullscreen ? getTotalMissionHours : 24" />
<AgentGraph :id="'canvas-pc-' + canvasNumber"
:agent="agent" :category="category" :plotted-items="plottedItems"
:fullscreen="fullscreen" :nsteps="fullscreen ? getTotalMissionHours : 24"
@plotted-items-changed="updatePlottedItems" />
</div>
</div>
</template>
Expand All @@ -35,7 +37,8 @@ export default {
// these are passed by dashboard/Main.vue and
// determine the panel index and the selected graph
panelIndex: {type: Number, required: true},
panelSection: {type: String, default: null},
panelSection: {type: String, default: undefined},
plottedItems: {type: String, default: undefined},
fullscreen: {type: Boolean, default: false},
},
emits: ['panel-section-changed'],
Expand All @@ -49,8 +52,8 @@ export default {
},
data() {
return {
agent: '',
category: '',
agent: undefined,
category: undefined,
validCategories: ['storage', 'flows', 'growth', 'deprive', 'attributes'],
}
},
Expand Down Expand Up @@ -86,11 +89,11 @@ export default {
},
},
watch: {
agent() {
this.updateSection()
agent(newVal, oldVal) {
this.updateSection(newVal, oldVal)
},
category() {
this.updateSection()
category(newVal, oldVal) {
this.updateSection(newVal, oldVal)
},
activePanels() {
// update section when the user clicks on the reset panels button of the dashboard menu
Expand All @@ -105,7 +108,7 @@ export default {

setFromActivePanels() {
const panel = this.activePanels[this.panelIndex].split(':')[1]
const [activeAgent, activeCategory] = panel ? panel.split('/') : ['', '']
const [activeAgent, activeCategory] = panel ? panel.split('|') : ['', '']
if (activeAgent) {
this.agent = activeAgent
} else {
Expand All @@ -124,10 +127,18 @@ export default {
this.category = this.validCategories.find(c => c in this.activeData[agent])
},

updateSection() {
updateSection(newVal, oldVal) {
// tell dashboard/Main.vue that we changed panel section,
// so that it can update the list of activePanels
this.$emit('panel-section-changed', this.panelIndex, `${this.agent}/${this.category}`)
if (oldVal === undefined) {
return // don't emit when loading the panel for the first time
}
this.$emit('panel-section-changed', this.panelIndex,
`${this.agent}|${this.category}`, undefined)
},
updatePlottedItems(plottedItems) {
this.$emit('panel-section-changed', this.panelIndex,
`${this.agent}|${this.category}`, plottedItems)
},
},
}
Expand Down
20 changes: 15 additions & 5 deletions src/components/panels/StorageRatios.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@
</option>
</select>
<div>
<LevelsGraph :id="'canvas-storage-levels-' + canvasNumber" :plotted-storage="storage"
<LevelsGraph :id="'canvas-storage-levels-' + canvasNumber"
:plotted-storage="storage" :plotted-items="plottedItems"
:storages-mapping="storagesMapping" :fullscreen="fullscreen"
:nsteps="fullscreen?getTotalMissionHours:24" />
:nsteps="fullscreen?getTotalMissionHours:24"
@plotted-items-changed="updatePlottedItems" />
</div>
</div>
</template>
Expand All @@ -32,7 +34,8 @@ export default {
// these are passed by dashboard/Main.vue and
// determine the panel index and the selected graph
panelIndex: {type: Number, required: true},
panelSection: {type: String, default: null},
panelSection: {type: String, default: undefined},
plottedItems: {type: String, default: undefined},
fullscreen: {type: Boolean, default: false},
},
emits: ['panel-section-changed'],
Expand All @@ -58,10 +61,13 @@ export default {
},
},
watch: {
storage() {
storage(newVal, oldVal) {
// tell dashboard/Main.vue that we changed panel section,
// so that it can update the list of activePanels
this.$emit('panel-section-changed', this.panelIndex, this.storage)
if (oldVal === undefined) {
return // don't emit when loading the panel for the first time
}
this.$emit('panel-section-changed', this.panelIndex, this.storage, undefined)
},
getActivePanels() {
// update section when the user clicks on the reset panels button of the dashboard menu
Expand All @@ -83,6 +89,10 @@ export default {
},
methods: {
stringFormatter: StringFormatter,

updatePlottedItems(plottedItems) {
this.$emit('panel-section-changed', this.panelIndex, this.storage, plottedItems)
},
},
}
</script>
Expand Down