Commit 649baf31 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Clear entity and reset year range when new query is successful

parent e64489c4
Pipeline #881 failed with stage
......@@ -4,7 +4,6 @@ import { performQuery, selectError } from './querySlice';
import { openModal } from '../search/searchSlice';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import styles from './Query.module.css';
export default function Query(props) {
// The component state is just the query text (for now)
......@@ -36,7 +35,7 @@ export default function Query(props) {
value={text}
onChange={onChangeText}
/>
<span className={styles.error}>{error}</span>
<span className="text-danger">{error}</span>
<Button variant="outline-success" type="submit" onClick={submit}>
<span role="img" aria-label="search icon">
🔎
......
......@@ -2,6 +2,8 @@ import { createSlice } from '@reduxjs/toolkit';
import { sendQuery } from '../../api/mimirAPI';
import stubData from '../../stub/voro-università-della-svizzera-italiana.json';
import { clearEntity } from '../voronoi/voronoiSlice';
import { resetRange } from '../yearrange/yearRangeSlice';
export const querySlice = createSlice({
name: 'query',
......@@ -40,6 +42,8 @@ export const performQuery = (query) => async (dispatch) => {
try {
const data = await sendQuery(query);
dispatch(getQueryResultSuccess(data));
dispatch(clearEntity());
dispatch(resetRange());
} catch (err) {
dispatch(getQueryResultFailure(err.toString()));
} finally {
......
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setRange, setYears, selectYears, selectRange } from './yearRangeSlice';
import { setRange, setYears, selectYears, selectRange, resetRange } from './yearRangeSlice';
import ReactEcharts from 'echarts-for-react';
import { selectNodes, selectResultsById } from '../navbar/querySlice';
import { useDebouncedCallback } from 'use-debounce';
......@@ -21,6 +21,7 @@ export default function YearRange() {
// Create data for chart and store it in redux
useEffect(() => {
logger.debug('YearRange: creating year counts for chart');
const yearCounts = nodes
.filter((n) => n.leaf)
.map((n) => resultsById[n.name])
......@@ -34,6 +35,8 @@ export default function YearRange() {
const yearList = Object.keys(yearCounts).map((y) => ({ year: y, count: yearCounts[y] }));
const x = yearList.map((y) => parseInt(y.year, 10));
const y = yearList.map((y) => y.count);
const chart = chartRef.current.getEchartsInstance();
chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
debouncedDispatch(setYears({ x, y }));
}, [debouncedDispatch, resultsById, nodes]);
......@@ -57,7 +60,7 @@ export default function YearRange() {
// Go back to overview
logger.debug('\t-> back to overview');
chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
debouncedDispatch(setRange({ start: config.YEARS.MIN, end: config.YEARS.MAX }));
debouncedDispatch(resetRange());
} else {
// Zoom on clicked year
logger.debug('\t-> zoom on clicked year');
......
......@@ -18,13 +18,19 @@ export const yearRangeSlice = createSlice({
setRange: (state, action) => {
state.range = action.payload;
},
resetRange: (state) => {
state.range = {
start: config.YEARS.MIN,
end: config.YEARS.MAX,
};
},
setYears: (state, action) => {
state.years = action.payload;
},
},
});
export const { setRange, setYears } = yearRangeSlice.actions;
export const { setRange, setYears, resetRange } = yearRangeSlice.actions;
export const selectYears = (state) => state.yearRange.years;
export const selectRange = (state) => state.yearRange.range;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment