Skip to content

Commit

Permalink
ability to send plugin table to main app
Browse files Browse the repository at this point in the history
  • Loading branch information
@kecnry
kecnry committed Jan 26, 2023
1 parent b8247bc commit bd9c5b3
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 143 deletions.
7 changes: 7 additions & 0 deletions jdaviz/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,10 @@ class ApplicationState(State):
docstring="Nested collection of viewers constructed to support the "
"Golden Layout viewer area.")

plugin_stack_items = ListCallbackProperty(
docstring="List of plugin subcomponents to be displayed in the "
"Golden Layout viewer area")


class Application(VuetifyTemplate, HubListener):
"""
Expand Down Expand Up @@ -1363,6 +1367,9 @@ def remove(stack_items):

self.hub.broadcast(ViewerRemovedMessage(cid, sender=self))

def vue_destroy_plugin_stack_item(self, index):
self.state.plugin_stack_items.pop(index)

def vue_data_item_unload(self, event):
"""
Callback for selection events in the front-end data list when clicking to unload an entry
Expand Down
58 changes: 40 additions & 18 deletions jdaviz/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,23 +78,37 @@
:has-headers="state.settings.visible.tab_headers"
@state="onLayoutChange"
>
<gl-row :closable="false">
<g-viewer-tab
v-for="(stack, index) in state.stack_items"
:stack="stack"
:key="stack.viewers.map(v => v.id).join('-')"
:data_items="state.data_items"
:app_settings="state.settings"
:icons="state.icons"
:viewer_icons="state.viewer_icons"
:layer_icons="state.layer_icons"
:closefn="destroy_viewer_item"
@data-item-visibility="data_item_visibility($event)"
@data-item-unload="data_item_unload($event)"
@data-item-remove="data_item_remove($event)"
@call-viewer-method="call_viewer_method($event)"
></g-viewer-tab>
</gl-row>
<gl-col>
<gl-row :closable="false">
<g-viewer-tab
v-for="(stack, index) in state.stack_items"
:stack="stack"
:key="stack.viewers.map(v => v.id).join('-')"
:data_items="state.data_items"
:app_settings="state.settings"
:icons="state.icons"
:viewer_icons="state.viewer_icons"
:layer_icons="state.layer_icons"
:closefn="destroy_viewer_item"
@data-item-visibility="data_item_visibility($event)"
@data-item-unload="data_item_unload($event)"
@data-item-remove="data_item_remove($event)"
@call-viewer-method="call_viewer_method($event)"
></g-viewer-tab>
</gl-row>
<gl-stack v-if="state.plugin_stack_items.length">
<gl-component
v-for="(plugin_item, index) in state.plugin_stack_items"
:key="index"
:title="plugin_item[0]"
@resize="$emit('resize')"
@destroy="on_destroy_plugin_stack_item($event, index)">
<v-container class="plugin-stack-item" style="padding-left: 24px; padding-right: 24px; padding-top: 12px">
<jupyter-widget :widget="plugin_item[1]"></jupyter-widget>
</v-container>
</gl-component>
</gl-stack>
</gl-col>
</golden-layout>
</pane>
<pane size="25" min-size="25" v-if="state.drawer" style="background-color: #fafbfc; border-top: 6px solid #C75109">
Expand Down Expand Up @@ -182,6 +196,14 @@ export default {
onLayoutChange() {
/* Workaround for #1677, can be removed when bqplot/bqplot#1531 is released */
window.dispatchEvent(new Event('resize'));
},
on_destroy_plugin_stack_item(source, index) {
/* There seems to be no close event provided by vue-golden-layout, so we can't distinguish
* between a user closing a tab or a re-render. However, when the user closes a tab, the
* source of the event is a vue component. We can use that distinction as a close signal. */
if (source.$root) {
this.destroy_plugin_stack_item(index)
};
}
},
created() {
Expand Down Expand Up @@ -309,7 +331,7 @@ div.output_wrapper {
display: none !important;
}
.cubeviz .lm_close_tab {
.cubeviz .lm_tab[title$="-viewer"] > .lm_close_tab {
display: none;
}
Expand Down
107 changes: 62 additions & 45 deletions jdaviz/components/plugin_table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,57 @@
<template>
<div>
<v-row>
<v-select
v-model="headers_visible"
:items="headers_avail"
@change="$emit('update:headers_visible', $event)"
label="Columns"
multiple
>
<template v-slot:selection="{ item, index }">
<v-chip v-if="headers_visible.length <= 3">
<span>{{ item }}</span>
</v-chip>
<span
v-if="headers_visible.length > 3 && index === 0"
class="grey--text text-caption"
<div class="plugin-table-component">
<v-row class="no-outside-padding" style="margin-bottom: -8px !important">
<div class="row-select">
<v-select
class="no-hint"
v-model="headers_visible"
:items="headers_avail"
@change="$emit('update:headers_visible', $event)"
label="Columns"
multiple
>
({{ headers_visible.length}} selected)
</span>
</template>
<template v-slot:prepend-item>
<v-list-item
ripple
@mousedown.prevent
@click="() => {if (headers_visible.length < headers_avail.length) { $emit('update:headers_visible', headers_avail)} else {$emit('update:headers_visible', [])}}"
>
<v-list-item-action>
<v-icon>
{{ headers_visible.length == headers_avail.length ? 'mdi-close-box' : headers_visible.length ? 'mdi-minus-box' : 'mdi-checkbox-blank-outline' }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ headers_visible.length < headers_avail.length ? "Select All" : "Clear All" }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
<template v-slot:selection="{ item, index }">
<span
v-if="index === 0"
class="grey--text text-caption"
>
({{ headers_visible.length}} selected)
</span>
</template>
<template v-slot:prepend-item>
<v-list-item
ripple
@mousedown.prevent
@click="() => {if (headers_visible.length < headers_avail.length) { headers_visible = headers_avail} else {headers_visible = []}}"
>
<v-list-item-action>
<v-icon>
{{ headers_visible.length == headers_avail.length ? 'mdi-close-box' : headers_visible.length ? 'mdi-minus-box' : 'mdi-checkbox-blank-outline' }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ headers_visible.length < headers_avail.length ? "Select All" : "Clear All" }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
</div>
<div style="line-height: 64px" class="plugin-send-to-app">
<j-tooltip tipid='plugin-table-send-to-app'>
<v-icon @click="send_to_app">mdi-view-grid-plus-outline</v-icon>
</j-tooltip>
</div>
</v-row>

<v-row class="no-outside-padding">
<v-data-table
dense
:headers="headers_visible.map(item => {return {'text': item, 'value': item}})"
:items="items"
class="elevation-1"
class="elevation-1 width-100"
></v-data-table>
</v-row>

Expand All @@ -61,8 +66,20 @@
</div>
</template>

<script>
module.exports = {
props: ['headers_visible', 'headers_avail', 'items', 'clear_table'],
};
</script>
<style scoped>
.v-data-table {
width: 100% !important
}
.plugin-stack-item .plugin-send-to-app {
display: none;
}
.row-select {
width: calc(100% - 32px)
}
.plugin-stack-item .row-select {
width: 100%;
}
</style>
1 change: 1 addition & 0 deletions jdaviz/components/tooltip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const tooltips = {
some ad blockers or browser settings may block popup windows,
causing this feature not to work.
</div>`,
'plugin-table-send-to-app': 'Show table in main app view',
'g-data-tools':
'Load data from file',
Expand Down
9 changes: 1 addition & 8 deletions jdaviz/configs/default/plugins/markers/markers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,7 @@
:link="'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#markers'"
:popout_button="popout_button">

<plugin-table
:headers_visible.sync="table_headers_visible"
:headers_avail="table_headers_avail"
:items="table_items"
:clear_table="clear_table"
></plugin-table>


<jupyter-widget :widget="table_widget"></jupyter-widget>

</j-tray-plugin>
</template>
Loading

0 comments on commit bd9c5b3

Please sign in to comment.