Skip to content

Commit

Permalink
Fixed filter update errors (#1305)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theorm
theorm authored Sep 28, 2024
1 parent 0dc6b48 commit ef440b5
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 196 deletions.
205 changes: 110 additions & 95 deletions src/components/Monitor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<template>
<div v-if="isActive" class="monitor drop-shadow bg-light" v-on:click.stop>
<!-- <div v-if="isActive" class="monitor drop-shadow bg-light" v-on:click.stop :class="{'invisible': isDragging}"
<!-- <div v-if="isActive" class="monitor drop-shadow bg-light" v-on:click.stop :class="{'invisible': isDragging}"
draggable="true"
v-on:dragstart="dragstart($event)"
v-on:dragend="dragend($event)"
v-bind:style="transformStyle"
> -->
<div class="d-flex my-2 align-items-center">
<b-tabs pills class="px-2" style="flex-grow:1">
<b-tabs pills class="px-2" style="flex-grow: 1">
<template v-slot:tabs-end>
<b-nav-item v-for="t in tabs" :key="t" v-on:click="switchTab(t)" :class="{'active': t === tab}">
<span v-html="$t(`tabs.${t}`)"/>
<span class="pl-1" v-if="subtitle" v-html="subtitle"/>
<b-nav-item
v-for="t in tabs"
:key="t"
v-on:click="switchTab(t)"
:class="{ active: t === tab }"
>
<span v-html="$t(`tabs.${t}`)" />
<span class="pl-1" v-if="subtitle" v-html="subtitle" />
</b-nav-item>
</template>
</b-tabs>
<div class="pr-3">
<span class="dripicons-cross" v-on:click="fadeOut"/>
<span class="dripicons-cross" v-on:click="fadeOut" />
</div>
</div>

Expand All @@ -30,13 +35,11 @@
</h2>
<!-- timeline vis -->
<div style="min-height: 80px">
<div v-if="itemTimelineDomain.length && !isPendingTimeline" style='position:relative;'>
<timeline class='bg-light pb-2'
:values="itemTimeline"
:domain="itemTimelineDomain">
<div v-if="itemTimelineDomain.length && !isPendingTimeline" style="position: relative">
<timeline class="bg-light pb-2" :values="itemTimeline" :domain="itemTimelineDomain">
<template v-slot="tooltipScope">
<div v-if="tooltipScope.tooltip.item">
{{ $d(tooltipScope.tooltip.item.t, 'year') }} &middot;
{{ $d(tooltipScope?.tooltip?.item?.t ?? 0, 'year') }} &middot;
<b>{{ tooltipScope.tooltip.item.w }}</b> {{ groupBy }}
<!-- <br />
<span class="contrast" v-if="tooltipScope.tooltip.item.w1 > 0">
Expand All @@ -46,40 +49,57 @@
</div>
</template>
</timeline>

</div>
</div>
<!-- {{ path }}
{{ searchQueryFilters }} -->
<div class="mx-3">
<b-form-group class="m-0">
<b-form-checkbox v-model="applyCurrentSearchFilters">
<span v-html="$t('labels.applyCurrentSearchFilters', { count: countActiveFilters })"/>
<span
v-html="$t('labels.applyCurrentSearchFilters', { count: countActiveFilters })"
/>
</b-form-checkbox>
</b-form-group>
<p class="ml-1">
<ellipsis v-bind:initialHeight="70">
<span v-html="statsLabel"/>
<search-query-summary v-if="applyCurrentSearchFilters" class="pl-2 border-left border-tertiary" :search-query='searchQuery' />
</ellipsis>
</p>
<p class="ml-1">
<ellipsis v-bind:initialHeight="70">
<span v-html="statsLabel" />
<search-query-summary
v-if="applyCurrentSearchFilters"
class="pl-2 border-left border-tertiary"
:search-query="searchQuery"
/>
</ellipsis>
</p>
</div>
</div>
<div v-if="isPending" class="text-center m-3" v-html="$t('loading')" />
<div v-else >
<div v-else>
<div class="text-center m-2" v-if="filterModificationsEnabled">
<b-button size="sm" class="mr-1" variant="outline-primary" @click="applyFilter('include')">{{ $t('actions.addToCurrentFilters') }}</b-button>
<b-button size="sm" class="ml-1" variant="outline-primary" @click="applyFilter('exclude')">{{ $t('actions.removeFromCurrentFilters') }}</b-button>
<b-button
size="sm"
class="mr-1"
variant="outline-primary"
@click="applyFilter('include')"
>{{ $t('actions.addToCurrentFilters') }}</b-button
>
<b-button
size="sm"
class="ml-1"
variant="outline-primary"
@click="applyFilter('exclude')"
>{{ $t('actions.removeFromCurrentFilters') }}</b-button
>
</div>

<!-- detailed label -->
<div class="mx-3">
<div v-if="['person', 'location'].indexOf(type) !== -1">
<wikidata-block :item="item" v-if="item.wikidataId" class="p-2"/>
<wikidata-block :item="item" v-if="item.wikidataId" class="p-2" />
<div class="m-2" v-else>{{ item }}</div>
</div>
<div v-else class="m-2" style="max-height: 150px; overflow: scroll">
<item-label :item="item" :type="type" detailed/>
<item-label :item="item" :type="type" detailed />
</div>
</div>

Expand All @@ -92,20 +112,19 @@
</div>
</div>
<div v-else>there is no selection.</div>

</div>
</div>
</template>

<script>
import { mapState, mapActions, mapStores } from 'pinia'
import { useMonitorStore } from '@/stores/monitor'
import Ellipsis from './modules/Ellipsis.vue';
import Timeline from './modules/Timeline.vue';
import WikidataBlock from './modules/WikidataBlock.vue';
import ItemLabel from './modules/lists/ItemLabel.vue';
import SearchQuerySummary from './modules/SearchQuerySummary.vue';
import SearchQuery from '../models/SearchQuery';
import Ellipsis from './modules/Ellipsis.vue'
import Timeline from './modules/Timeline.vue'
import WikidataBlock from './modules/WikidataBlock.vue'
import ItemLabel from './modules/lists/ItemLabel.vue'
import SearchQuerySummary from './modules/SearchQuerySummary.vue'
import SearchQuery from '../models/SearchQuery'
import { containsFilter } from '@/logic/filters'
/**
Expand Down Expand Up @@ -134,32 +153,32 @@ export default {
position: {},
transformStyle: {},
tabs: ['selectedItem'], // 'currentSearch'],
tab: 'selectedItem',
tab: 'selectedItem'
}),
methods: {
/**
* @param {{ x: number, y: number }} param
*/
dragstart({ x, y }) {
this.isDragging = true;
this.isDragging = true
if (isNaN(this.position.x)) {
this.position = { x, y };
this.position = { x, y }
}
},
/**
* @param {{ x: number, y: number }} param
*/
dragend({ x, y }) {
this.isDragging = false;
this.isDragging = false
this.transformStyle = {
transform: `translate(${x - this.position.x}px,${y - this.position.y}px)`,
};
transform: `translate(${x - this.position.x}px,${y - this.position.y}px)`
}
},
/**
* @param {string} tab
*/
switchTab(tab) {
this.tab = tab;
this.tab = tab
},
...mapActions(useMonitorStore, {
fadeOut: 'hide'
Expand All @@ -168,7 +187,6 @@ export default {
* @param {string} context
*/
async applyFilter(context = 'include') {
const newFilter = {
type: this.type,
q: this.item.uid,
Expand All @@ -182,7 +200,7 @@ export default {
const updatedFilters = [...this.searchQueryFilters].concat(newFilter)
await this.monitorStore.updateFilters(updatedFilters)
}
this.fadeOut();
this.fadeOut()
},
handleMoreClicked() {
this.fadeOut()
Expand Down Expand Up @@ -212,16 +230,13 @@ export default {
itemTimelineDomain() {
const { itemTimeline } = this
if (!itemTimeline.length) {
return [];
return []
}
return [
itemTimeline[0].t,
itemTimeline[itemTimeline.length - 1].t,
];
return [itemTimeline[0].t, itemTimeline[itemTimeline.length - 1].t]
},
/** @returns {number} */
countActiveFilters() {
return this.searchQuery.countActiveFilters();
return this.searchQuery.countActiveFilters()
},
/** @returns {SearchQuery} */
searchQuery() {
Expand All @@ -232,41 +247,41 @@ export default {
if (this.itemTimelineDomain.length !== 2) {
return this.$t('actions.loading').toString()
}
const [from, to] = this.itemTimelineDomain;
const [from, to] = this.itemTimelineDomain
return this.$t('itemStatsFiltered', {
count: this.countActiveFilters,
from,
to,
to
}).toString()
},
/** @returns {boolean} */
isItemSelected() {
return !!this.item;
return !!this.item
},
/** @returns {object} */
detailsUrl() {
if (this.type === 'newspaper') {
return {
name: 'newspaper',
params: {
newspaper_uid: this.item.uid,
},
};
newspaper_uid: this.item.uid
}
}
} else if (this.type === 'topic') {
return {
name: 'topic',
params: {
topic_uid: this.item.uid,
},
};
// @ts-ignore
topic_uid: this.item.uid
}
}
// @ts-ignore
} else if (['person', 'location'].indexOf(type) !== this.type) {
return {
name: 'entity',
params: {
entity_id: this.item.uid,
},
};
entity_id: this.item.uid
}
}
} else if (this.type === 'textReuseCluster') {
return {
name: 'text-reuse-clusters',
Expand All @@ -275,28 +290,28 @@ export default {
}
}
}
return null;
return null
},
/** @returns {string | undefined} */
path() {
return this.$route.name;
return this.$route.name
},
/** @returns {string} */
statsLabel() {
if (this.isPendingTimeline) {
return this.$t('actions.loading').toString()
}
let key = 'itemStats';
let key = 'itemStats'
if (!this.itemTimelineDomain.length) {
key = 'itemStatsEmpty';
key = 'itemStatsEmpty'
} else if (this.applyCurrentSearchFilters && this.countActiveFilters) {
key = 'itemStatsFiltered';
key = 'itemStatsFiltered'
}
return this.$t(key, {
count: this.$n(this.itemCountRelated),
from: this.itemTimelineDomain[0],
to: this.itemTimelineDomain[1],
to: this.itemTimelineDomain[1]
}).toString()
},
applyCurrentSearchFilters: {
Expand All @@ -308,53 +323,53 @@ export default {
set(val) {
this.monitorStore.setApplyCurrentSearchFilters(val)
this.monitorStore.loadItemTimeline()
},
},
}
}
},
components: {
Timeline,
WikidataBlock,
ItemLabel,
SearchQuerySummary,
Ellipsis,
},
Ellipsis
}
// - removed: added "x" close button in component
// mounted() {
// document.addEventListener('click', this.fadeOut);
// document.addEventListener('touchstart', this.fadeOut);
// },
};
}
</script>

<style lang="scss">
.monitor {
border: 1px solid #343a40;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
margin-left: -200px;
margin-top: -175px;
pointer-events: auto;
.monitor {
border: 1px solid #343a40;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
margin-left: -200px;
margin-top: -175px;
pointer-events: auto;
h2 {
font-size: inherit;
}
h2 {
font-size: inherit;
}
}
</style>
<i18n lang="json">
{
"en": {
"tabs": {
"currentSearch": "current search",
"selectedItem": "current selection"
},
"labels": {
"applyCurrentSearchFilters": "apply current search filters ({count} filters)"
},
"itemStatsEmpty": "No results apparently",
"itemStats": "<b class='number'>{count}</b> results in total (from {from} to {to})",
"itemStatsFiltered": "<b class='number'>{count}</b> results from {from} to {to}, within current search:"
}
{
"en": {
"tabs": {
"currentSearch": "current search",
"selectedItem": "current selection"
},
"labels": {
"applyCurrentSearchFilters": "apply current search filters ({count} filters)"
},
"itemStatsEmpty": "No results apparently",
"itemStats": "<b class='number'>{count}</b> results in total (from {from} to {to})",
"itemStatsFiltered": "<b class='number'>{count}</b> results from {from} to {to}, within current search:"
}
}
</i18n>
Loading

0 comments on commit ef440b5

Please sign in to comment.