@cccsaurora/howler-ui 2.18.0-dev.682 → 2.18.0-dev.686
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api/v2/search/index.js +1 -1
- package/components/elements/view/ViewTitle.d.ts +1 -0
- package/components/elements/view/ViewTitle.js +9 -2
- package/components/routes/home/ViewCard.js +46 -40
- package/components/routes/views/ViewComposer.js +44 -17
- package/models/entities/generated/View.d.ts +1 -0
- package/package.json +1 -1
- package/utils/viewUtils.js +3 -0
package/api/v2/search/index.js
CHANGED
|
@@ -14,7 +14,7 @@ export const post = (indexes, request) => {
|
|
|
14
14
|
indexes = indexes.split(',').filter(identity);
|
|
15
15
|
}
|
|
16
16
|
if (indexes.some(index => !['hit', 'observable', 'case'].includes(index))) {
|
|
17
|
-
throw new Error('Only hit, case and observable indexes should be used currently.');
|
|
17
|
+
throw new Error('Only hit, case, and observable indexes should be used currently.');
|
|
18
18
|
}
|
|
19
19
|
if (indexes.length < 1) {
|
|
20
20
|
throw new Error('indexes must have length of at least 1.');
|
|
@@ -4,7 +4,7 @@ import { Chip, Stack, Tooltip, Typography } from '@mui/material';
|
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
6
|
import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
|
|
7
|
-
export const ViewTitle = ({ title, type, query, sort, span }) => {
|
|
7
|
+
export const ViewTitle = ({ title, type, query, sort, span, indexes }) => {
|
|
8
8
|
const { t } = useTranslation();
|
|
9
9
|
const spanLabel = useMemo(() => {
|
|
10
10
|
if (!span) {
|
|
@@ -17,9 +17,16 @@ export const ViewTitle = ({ title, type, query, sort, span }) => {
|
|
|
17
17
|
return t(span);
|
|
18
18
|
}
|
|
19
19
|
}, [span, t]);
|
|
20
|
+
const indexLabel = useMemo(() => {
|
|
21
|
+
if (!indexes || indexes.length === 0) {
|
|
22
|
+
return '';
|
|
23
|
+
}
|
|
24
|
+
else
|
|
25
|
+
return `(${indexes.join(', ')})`;
|
|
26
|
+
}, [indexes]);
|
|
20
27
|
return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.views.manager.${type}`), children: {
|
|
21
28
|
readonly: _jsx(Lock, { fontSize: "small" }),
|
|
22
29
|
global: _jsx(Language, { fontSize: "small" }),
|
|
23
30
|
personal: _jsx(Person, { fontSize: "small" })
|
|
24
|
-
}[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel })] }))] }));
|
|
31
|
+
}[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span || indexLabel) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel }), indexLabel && _jsx(Chip, { label: indexLabel })] }))] }));
|
|
25
32
|
};
|
|
@@ -3,74 +3,80 @@ import { OpenInNew } from '@mui/icons-material';
|
|
|
3
3
|
import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
|
|
4
4
|
import api from '@cccsaurora/howler-ui/api';
|
|
5
5
|
import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
|
|
6
|
-
import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
|
|
6
|
+
import { useHitContextSelector as useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
|
|
7
7
|
import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
|
|
8
8
|
import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
|
|
9
9
|
import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
|
|
10
|
+
import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
|
|
10
11
|
import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
|
|
11
12
|
import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
|
|
12
13
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
13
14
|
import { useTranslation } from 'react-i18next';
|
|
14
15
|
import { Link, useNavigate } from 'react-router-dom';
|
|
15
16
|
import { useContextSelector } from 'use-context-selector';
|
|
17
|
+
import { isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
|
|
16
18
|
import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
|
|
17
|
-
// Custom hook to select
|
|
18
|
-
const
|
|
19
|
-
const
|
|
19
|
+
// Custom hook to select records by IDs with proper memoization
|
|
20
|
+
const useSelectRecordsByIds = (recordIds) => {
|
|
21
|
+
const recordIdsRef = useRef(recordIds);
|
|
20
22
|
const prevResultRef = useRef([]);
|
|
21
|
-
const
|
|
22
|
-
// Keep ref up to date with latest
|
|
23
|
-
|
|
23
|
+
const prevRecordIdsRef = useRef([]);
|
|
24
|
+
// Keep ref up to date with latest recordIds
|
|
25
|
+
recordIdsRef.current = recordIds;
|
|
24
26
|
const selector = useCallback(ctx => {
|
|
25
|
-
const
|
|
26
|
-
// Fast path: if
|
|
27
|
-
if (
|
|
28
|
-
|
|
29
|
-
//
|
|
30
|
-
const
|
|
31
|
-
if (!
|
|
27
|
+
const currentRecordIds = recordIdsRef.current;
|
|
28
|
+
// Fast path: if recordIds array didn't change, check if record objects changed
|
|
29
|
+
if (prevRecordIdsRef.current.length === currentRecordIds.length &&
|
|
30
|
+
currentRecordIds.every((id, i) => id === prevRecordIdsRef.current[i])) {
|
|
31
|
+
// RecordIds unchanged - check if any record objects changed by reference
|
|
32
|
+
const anyRecordChanged = currentRecordIds.some((id, i) => ctx.records[id] !== prevResultRef.current[i]);
|
|
33
|
+
if (!anyRecordChanged) {
|
|
32
34
|
return prevResultRef.current;
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
37
|
// Something changed - rebuild the array
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
prevResultRef.current =
|
|
39
|
-
return
|
|
38
|
+
const currentRecords = currentRecordIds.map(id => ctx.records[id]).filter(Boolean);
|
|
39
|
+
prevRecordIdsRef.current = currentRecordIds;
|
|
40
|
+
prevResultRef.current = currentRecords;
|
|
41
|
+
return currentRecords;
|
|
40
42
|
}, []); // Empty deps - selector never changes
|
|
41
|
-
return
|
|
43
|
+
return useRecordContextSelector(selector);
|
|
42
44
|
};
|
|
43
45
|
// Utility functions
|
|
44
46
|
const normalize = (val) => (val == null ? '' : String(val));
|
|
45
47
|
// Have to normalize the fields as websockets and api return null and undefined respectively. This causes false positives when comparing signatures if not normalized to a consistent value. We also stringify non-primitive values to ensure changes are detected.
|
|
46
|
-
const
|
|
47
|
-
if (!
|
|
48
|
+
const createRecordSignature = (record) => {
|
|
49
|
+
if (!record) {
|
|
48
50
|
return '';
|
|
49
|
-
|
|
51
|
+
}
|
|
52
|
+
if (isObservable(record)) {
|
|
53
|
+
return record.howler?.id;
|
|
54
|
+
}
|
|
55
|
+
return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
|
|
50
56
|
};
|
|
51
|
-
const
|
|
52
|
-
if (
|
|
57
|
+
const createSignatureFromRecords = (records) => {
|
|
58
|
+
if (records.length === 0)
|
|
53
59
|
return '';
|
|
54
|
-
return
|
|
60
|
+
return records.map(createRecordSignature).join('|');
|
|
55
61
|
};
|
|
56
62
|
const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
|
|
57
63
|
const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
|
|
58
64
|
const navigate = useNavigate();
|
|
59
65
|
const { t } = useTranslation();
|
|
60
66
|
const { dispatchApi } = useMyApi();
|
|
61
|
-
const [
|
|
67
|
+
const [recordIds, setRecordIds] = useState([]);
|
|
62
68
|
const [loading, setLoading] = useState(false);
|
|
63
69
|
const debounceTimerRef = useRef(null);
|
|
64
70
|
const isRefreshing = useRef(false);
|
|
65
71
|
const lastSignature = useRef('');
|
|
66
72
|
const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
|
|
67
73
|
const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
|
|
68
|
-
const
|
|
74
|
+
const loadRecords = useRecordContextSelector(ctx => ctx.loadRecords);
|
|
69
75
|
// Subscribe to hits from HitProvider cache based on current hitIds in the view
|
|
70
76
|
// Uses memoized selector to avoid unnecessary re-renders on unrelated hit updates
|
|
71
|
-
const
|
|
77
|
+
const records = useSelectRecordsByIds(recordIds);
|
|
72
78
|
// Create a stable signature that only changes when relevant fields change
|
|
73
|
-
const
|
|
79
|
+
const recordsSignature = useMemo(() => createSignatureFromRecords(records), [records]);
|
|
74
80
|
const refreshView = useCallback(async () => {
|
|
75
81
|
if (!view?.query || isRefreshing.current) {
|
|
76
82
|
onRefreshComplete?.();
|
|
@@ -78,21 +84,21 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
|
|
|
78
84
|
}
|
|
79
85
|
isRefreshing.current = true;
|
|
80
86
|
try {
|
|
81
|
-
const res = await dispatchApi(api.search.
|
|
87
|
+
const res = await dispatchApi(api.v2.search.post(view.indexes, {
|
|
82
88
|
query: view.query,
|
|
83
89
|
rows: limit,
|
|
84
90
|
metadata: ['analytic']
|
|
85
91
|
}));
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
lastSignature.current =
|
|
92
|
+
const fetchedRecords = res.items ?? [];
|
|
93
|
+
loadRecords(fetchedRecords);
|
|
94
|
+
setRecordIds(fetchedRecords.map(r => r.howler.id));
|
|
95
|
+
lastSignature.current = createSignatureFromRecords(fetchedRecords);
|
|
90
96
|
}
|
|
91
97
|
finally {
|
|
92
98
|
isRefreshing.current = false;
|
|
93
99
|
onRefreshComplete?.();
|
|
94
100
|
}
|
|
95
|
-
}, [dispatchApi, limit, view?.query,
|
|
101
|
+
}, [dispatchApi, limit, view?.query, view?.indexes, loadRecords, onRefreshComplete]);
|
|
96
102
|
const debouncedRefresh = useCallback(() => {
|
|
97
103
|
if (debounceTimerRef.current) {
|
|
98
104
|
clearTimeout(debounceTimerRef.current);
|
|
@@ -125,16 +131,16 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
|
|
|
125
131
|
}, [view?.query, limit, refreshView]);
|
|
126
132
|
// Monitor hits currently in the view for changes that might affect query results
|
|
127
133
|
useEffect(() => {
|
|
128
|
-
if (!
|
|
129
|
-
lastSignature.current =
|
|
134
|
+
if (!recordsSignature || recordIds.length === 0 || !lastSignature.current) {
|
|
135
|
+
lastSignature.current = recordsSignature;
|
|
130
136
|
return;
|
|
131
137
|
}
|
|
132
138
|
// Check if signature actually changed
|
|
133
|
-
if (lastSignature.current ===
|
|
139
|
+
if (lastSignature.current === recordsSignature) {
|
|
134
140
|
return;
|
|
135
141
|
}
|
|
136
142
|
debouncedRefresh();
|
|
137
|
-
}, [
|
|
143
|
+
}, [recordsSignature, recordIds, debouncedRefresh]);
|
|
138
144
|
useEffect(() => {
|
|
139
145
|
return () => {
|
|
140
146
|
if (debounceTimerRef.current) {
|
|
@@ -151,6 +157,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
|
|
|
151
157
|
}
|
|
152
158
|
return selectedElement.id;
|
|
153
159
|
}, []);
|
|
154
|
-
return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) :
|
|
160
|
+
return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(ObservableCard, { observable: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
|
|
155
161
|
};
|
|
156
162
|
export default ViewCard;
|
|
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
|
|
|
4
4
|
import { HelpOutline, Save } from '@mui/icons-material';
|
|
5
5
|
import { Alert, Checkbox, CircularProgress, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
|
|
6
6
|
import api from '@cccsaurora/howler-ui/api';
|
|
7
|
+
import {} from '@cccsaurora/howler-ui/api/search';
|
|
7
8
|
import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
|
|
8
9
|
import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
|
|
9
10
|
import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
|
|
@@ -17,6 +18,7 @@ import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout
|
|
|
17
18
|
import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
|
|
18
19
|
import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
|
|
19
20
|
import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
|
|
21
|
+
import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
|
|
20
22
|
import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
|
|
21
23
|
import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
|
|
22
24
|
import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
|
|
@@ -28,6 +30,7 @@ import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
|
|
|
28
30
|
import ErrorBoundary from '../ErrorBoundary';
|
|
29
31
|
import RecordQuery from '../hits/search/RecordQuery';
|
|
30
32
|
import HitSort from '../hits/search/shared/HitSort';
|
|
33
|
+
import IndexPicker from '../hits/search/shared/IndexPicker';
|
|
31
34
|
import SearchSpan from '../hits/search/shared/SearchSpan';
|
|
32
35
|
const ViewComposer = () => {
|
|
33
36
|
const { t } = useTranslation();
|
|
@@ -38,8 +41,10 @@ const ViewComposer = () => {
|
|
|
38
41
|
const addView = useContextSelector(ViewContext, ctx => ctx.addView);
|
|
39
42
|
const editView = useContextSelector(ViewContext, ctx => ctx.editView);
|
|
40
43
|
const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
|
|
44
|
+
const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
|
|
45
|
+
const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
|
|
41
46
|
const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
|
|
42
|
-
const
|
|
47
|
+
const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
|
|
43
48
|
// view state
|
|
44
49
|
const [title, setTitle] = useState('');
|
|
45
50
|
const [type, setType] = useState('global');
|
|
@@ -56,14 +61,17 @@ const ViewComposer = () => {
|
|
|
56
61
|
const [searching, setSearching] = useState(false);
|
|
57
62
|
const [error, setError] = useState(null);
|
|
58
63
|
const [response, setResponse] = useState();
|
|
64
|
+
const [isLoadingView, setIsLoadingView] = useState(!!routeParams.id);
|
|
59
65
|
const onSave = useCallback(async () => {
|
|
60
66
|
setLoading(true);
|
|
61
67
|
try {
|
|
68
|
+
const normalizedIndexes = indexes?.length > 0 ? indexes : ['hit'];
|
|
62
69
|
if (!routeParams.id) {
|
|
63
70
|
const newView = await addView({
|
|
64
71
|
title,
|
|
65
72
|
type,
|
|
66
73
|
query,
|
|
74
|
+
indexes: normalizedIndexes,
|
|
67
75
|
sort: sort || null,
|
|
68
76
|
span: span || null,
|
|
69
77
|
settings: {
|
|
@@ -77,6 +85,7 @@ const ViewComposer = () => {
|
|
|
77
85
|
title,
|
|
78
86
|
type,
|
|
79
87
|
query,
|
|
88
|
+
indexes: normalizedIndexes,
|
|
80
89
|
sort,
|
|
81
90
|
span,
|
|
82
91
|
settings: { advance_on_triage: advanceOnTriage }
|
|
@@ -101,23 +110,24 @@ const ViewComposer = () => {
|
|
|
101
110
|
sort,
|
|
102
111
|
span,
|
|
103
112
|
advanceOnTriage,
|
|
113
|
+
indexes,
|
|
104
114
|
navigate,
|
|
105
115
|
editView,
|
|
106
116
|
showErrorMessage
|
|
107
117
|
]);
|
|
108
|
-
const
|
|
109
|
-
setQuery(_query);
|
|
118
|
+
const performSearch = useCallback(async (searchQuery, searchIndexes, searchSort, searchSpan) => {
|
|
110
119
|
setSearching(true);
|
|
111
120
|
setError(null);
|
|
112
121
|
try {
|
|
113
|
-
const
|
|
122
|
+
const normalizedIndexes = searchIndexes?.length > 0 ? searchIndexes : ['hit'];
|
|
123
|
+
const _response = await dispatchApi(api.v2.search.post(normalizedIndexes, {
|
|
114
124
|
rows: pageCount,
|
|
115
|
-
query:
|
|
116
|
-
sort,
|
|
117
|
-
filters:
|
|
125
|
+
query: searchQuery,
|
|
126
|
+
sort: searchSort,
|
|
127
|
+
filters: searchSpan ? [`event.created:${convertDateToLucene(searchSpan)}`] : [],
|
|
118
128
|
metadata: ['template', 'analytic']
|
|
119
129
|
}), { showError: false, throwError: true });
|
|
120
|
-
|
|
130
|
+
loadRecords(_response.items);
|
|
121
131
|
setResponse(_response);
|
|
122
132
|
}
|
|
123
133
|
catch (e) {
|
|
@@ -126,18 +136,25 @@ const ViewComposer = () => {
|
|
|
126
136
|
finally {
|
|
127
137
|
setSearching(false);
|
|
128
138
|
}
|
|
129
|
-
}, [dispatchApi,
|
|
139
|
+
}, [dispatchApi, loadRecords, pageCount]);
|
|
140
|
+
const search = useCallback(async (_query) => {
|
|
141
|
+
setQuery(_query);
|
|
142
|
+
await performSearch(_query, indexes, sort, span);
|
|
143
|
+
}, [performSearch, indexes, sort, span, setQuery]);
|
|
130
144
|
useEffect(() => {
|
|
131
|
-
search
|
|
145
|
+
// Only run initial search if we're NOT editing an existing view
|
|
146
|
+
if (!routeParams.id) {
|
|
147
|
+
search(query || DEFAULT_QUERY);
|
|
148
|
+
}
|
|
132
149
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
133
|
-
}, []);
|
|
150
|
+
}, [routeParams.id]);
|
|
134
151
|
// We only run this when ancillary properties (i.e. filters, sorting) change
|
|
135
152
|
useEffect(() => {
|
|
136
|
-
if (query) {
|
|
153
|
+
if (query && !isLoadingView) {
|
|
137
154
|
search(query);
|
|
138
155
|
}
|
|
139
156
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
140
|
-
}, [sort, span]);
|
|
157
|
+
}, [sort, span, indexes, isLoadingView]);
|
|
141
158
|
useEffect(() => {
|
|
142
159
|
if (!routeParams.id) {
|
|
143
160
|
return;
|
|
@@ -153,13 +170,23 @@ const ViewComposer = () => {
|
|
|
153
170
|
}
|
|
154
171
|
setTitle(viewToEdit.title);
|
|
155
172
|
setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
|
|
156
|
-
|
|
173
|
+
const loadedQuery = viewToEdit.query || DEFAULT_QUERY;
|
|
174
|
+
const loadedIndexes = viewToEdit.indexes || indexes;
|
|
175
|
+
const loadedSort = viewToEdit.sort || sort;
|
|
176
|
+
const loadedSpan = viewToEdit.span || span;
|
|
177
|
+
setQuery(loadedQuery);
|
|
178
|
+
if (viewToEdit.indexes) {
|
|
179
|
+
setIndexes(loadedIndexes);
|
|
180
|
+
}
|
|
157
181
|
if (viewToEdit.sort) {
|
|
158
|
-
setSort(
|
|
182
|
+
setSort(loadedSort);
|
|
159
183
|
}
|
|
160
184
|
if (viewToEdit.span) {
|
|
161
|
-
setSpan(
|
|
185
|
+
setSpan(loadedSpan);
|
|
162
186
|
}
|
|
187
|
+
// Perform search with the loaded values to avoid using stale state
|
|
188
|
+
await performSearch(loadedQuery, loadedIndexes, loadedSort, loadedSpan);
|
|
189
|
+
setIsLoadingView(false);
|
|
163
190
|
})();
|
|
164
191
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
192
|
}, [routeParams.id]);
|
|
@@ -172,6 +199,6 @@ const ViewComposer = () => {
|
|
|
172
199
|
fontSize: '0.9em',
|
|
173
200
|
fontStyle: 'italic',
|
|
174
201
|
mb: 0.5
|
|
175
|
-
}), variant: "body2", children: t('hit.search.prompt') }), _jsx(RecordQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(
|
|
202
|
+
}), variant: "body2", children: t('hit.search.prompt') }), _jsx(RecordQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(IndexPicker, {}), _jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(record => record.__index === 'hit' ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.DENSE }, record.howler.id)) : (_jsx(ObservableCard, { observable: record }, record.howler.id)))] }) })] }) }) }) }));
|
|
176
203
|
};
|
|
177
204
|
export default ViewComposer;
|
package/package.json
CHANGED
package/utils/viewUtils.js
CHANGED