@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/app/providers/HitProvider.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from 'api';
+import useMyApi from 'components/hooks/useMyApi';
+import { uniq } from 'lodash-es';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext } from 'use-context-selector';
+import { SocketContext } from './SocketProvider';
+export const HitContext = createContext(null);
+/**
+ * Central repository for storing individual hit data across the application. Allows efficient retrieval of hits across componenents.
+ */
+const HitProvider = ({ children }) => {
+    const { dispatchApi } = useMyApi();
+    const { addListener, removeListener } = useContext(SocketContext);
+    /**
+     * The most immediate of two levels of caching, this ref stores the raw promises for each hit.
+     * Rapidly updates, good for uses in-context where parallel updates my be occurring, i.e.
+     * when two cards request the same hit that's missing from the store. Used in getHit for this reason.
+     */
+    const hitRequests = useRef({});
+    /**
+     * The "Authoritative" store of hits. Changes here will trigger rerenders, and essentially
+     * caches the result of the above promises. Slower to update, so used outside of the hitcontext
+     * where parallel requests aren't an issue.
+     */
+    const [hits, setHits] = useState({});
+    const [selectedHitIds, setSelectedHitIds] = useState([]);
+    // The central location where we propagate any changes from hits made via websockets into the repository. We just save every update,
+    // instead of caching it across many components inconsistently as before.
+    const handler = useMemo(() => (data) => {
+        if (data.hit) {
+            // eslint-disable-next-line no-console
+            console.debug('Received websocket update for hit', data.hit.howler.id);
+            hitRequests.current[data.hit.howler.id] = Promise.resolve(data.hit);
+            setHits(_hits => ({ ..._hits, [data.hit.howler.id]: data.hit }));
+        }
+    }, []);
+    useEffect(() => {
+        addListener('hit_provider', handler);
+        return () => removeListener('hit_provider');
+    }, [addListener, handler, removeListener]);
+    /**
+     * A method to retrieve a hit from the context. It first checks the hit state,
+     * then checks for ongoing requests, then finally executes a new request if necessary.
+     */
+    const getHit = useCallback(async (id, force = false) => {
+        if (!hitRequests.current[id] || force) {
+            hitRequests.current[id] = dispatchApi(api.hit.get(id));
+            const newHit = await hitRequests.current[id];
+            setHits(_hits => ({ ..._hits, [id]: newHit }));
+        }
+        return hitRequests.current[id];
+    }, [dispatchApi]);
+    /**
+     * Update a hit in the context locally
+     */
+    const updateHit = useCallback((newHit) => {
+        hitRequests.current[newHit.howler.id] = Promise.resolve(newHit);
+        setHits(_hits => ({ ..._hits, [newHit.howler.id]: newHit }));
+    }, []);
+    /**
+     * Add a large number of hits to the cache. Used for results of searches.
+     */
+    const loadHits = useCallback((newHits) => {
+        const mappedHits = newHits.map(hit => [hit.howler.id, hit]);
+        mappedHits.forEach(([id, hit]) => {
+            hitRequests.current[id] = Promise.resolve(hit);
+        });
+        setHits(_hits => ({ ..._hits, ...Object.fromEntries(mappedHits) }));
+    }, []);
+    const addHitToSelection = useCallback((id) => {
+        setSelectedHitIds(_selected => uniq([..._selected, id]));
+    }, []);
+    const removeHitFromSelection = useCallback((id) => {
+        setSelectedHitIds(_selected => _selected.filter(_id => _id !== id));
+    }, []);
+    const clearSelectedHits = useCallback((except) => {
+        setSelectedHitIds(!!except ? [except] : []);
+    }, []);
+    const selectedHits = useMemo(() => selectedHitIds.map(id => hits[id]).filter(hit => !!hit), [hits, selectedHitIds]);
+    useEffect(() => {
+        selectedHitIds.forEach(id => {
+            if (!hitRequests.current[id]) {
+                getHit(id);
+            }
+        });
+    }, [getHit, selectedHitIds]);
+    useEffect(() => {
+        Object.entries(hits).forEach(([id, hit]) => {
+            hitRequests.current[id] = Promise.resolve(hit);
+        });
+    }, [hits]);
+    return (_jsx(HitContext.Provider, { value: {
+            hits,
+            getHit,
+            updateHit,
+            selectedHits,
+            addHitToSelection,
+            removeHitFromSelection,
+            clearSelectedHits,
+            loadHits
+        }, children: children }));
+};
+export default HitProvider;

package/dist/components/app/providers/HitSearchProvider.d.ts

@@ -0,0 +1,25 @@
+import type { HowlerSearchResponse } from 'api/search';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import type { Hit } from 'models/entities/generated/Hit';
+import { type Dispatch, type FC, type PropsWithChildren, type SetStateAction } from 'react';
+export interface QueryEntry {
+    [query: string]: string;
+}
+interface HitSearchProviderType {
+    layout: HitLayout;
+    displayType: 'list' | 'grid';
+    searching: boolean;
+    error: string | null;
+    response: HowlerSearchResponse<Hit> | null;
+    viewId: string | null;
+    bundleId: string | null;
+    queryHistory: QueryEntry;
+    fzfSearch: boolean;
+    setDisplayType: (type: 'list' | 'grid') => void;
+    setQueryHistory: Dispatch<SetStateAction<QueryEntry>>;
+    setFzfSearch: Dispatch<SetStateAction<boolean>>;
+    search: (query: string, appendResults?: boolean) => void;
+}
+export declare const HitSearchContext: import("use-context-selector").Context<HitSearchProviderType>;
+declare const HitSearchProvider: FC<PropsWithChildren>;
+export default HitSearchProvider;

package/dist/components/app/providers/HitSearchProvider.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from 'api';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import useMyApi from 'components/hooks/useMyApi';
+import useMyLocalStorage, { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import i18n from 'i18n';
+import isNull from 'lodash-es/isNull';
+import isUndefined from 'lodash-es/isUndefined';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { isMobile } from 'react-device-detect';
+import { useLocation, useParams } from 'react-router-dom';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+import Throttler from 'utils/Throttler';
+import { convertCustomDateRangeToLucene, convertDateToLucene } from 'utils/utils';
+import { HitContext } from './HitProvider';
+import { ParameterContext } from './ParameterProvider';
+import { ViewContext } from './ViewProvider';
+export const HitSearchContext = createContext(null);
+const THROTTLER = new Throttler(500);
+const HitSearchProvider = ({ children }) => {
+    const { get } = useMyLocalStorage();
+    const routeParams = useParams();
+    const location = useLocation();
+    const { dispatchApi } = useMyApi();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const offset = useContextSelector(ParameterContext, ctx => ctx.offset);
+    const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
+    const trackTotalHits = useContextSelector(ParameterContext, ctx => ctx.trackTotalHits);
+    const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const filter = useContextSelector(ParameterContext, ctx => ctx.filter);
+    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
+    const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
+    const [displayType, setDisplayType] = useState('list');
+    const [searching, setSearching] = useState(false);
+    const [error, setError] = useState(null);
+    const [response, setResponse] = useState();
+    const [queryHistory, setQueryHistory] = useState(JSON.parse(get(StorageKey.QUERY_HISTORY)) || { 'howler.id: *': new Date().toISOString() });
+    const [fzfSearch, setFzfSearch] = useState(false);
+    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
+    const bundleId = useMemo(() => (location.pathname.startsWith('/bundles') ? routeParams.id : null), [location.pathname, routeParams.id]);
+    const layout = useMemo(() => (isMobile ? HitLayout.COMFY : (get(StorageKey.HIT_LAYOUT) ?? HitLayout.NORMAL)), [get]);
+    const search = useCallback(async (_query, appendResults) => {
+        THROTTLER.debounce(async () => {
+            if (_query === 'woof!') {
+                i18n.changeLanguage('woof');
+                return;
+            }
+            if (isNull(sort) || isNull(span)) {
+                return;
+            }
+            if (!isNull(_query) && !isUndefined(_query) && _query !== query) {
+                setQuery(_query);
+            }
+            setSearching(true);
+            setError(null);
+            const filters = [];
+            if (span && !span.endsWith('custom')) {
+                filters.push(`event.created:${convertDateToLucene(span)}`);
+            }
+            else if (startDate && endDate) {
+                filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
+            }
+            if (filter) {
+                filters.push(filter);
+            }
+            try {
+                const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
+                let fullQuery = _query || 'howler.id:*';
+                if (bundle) {
+                    fullQuery = `(howler.bundles:${bundle}) AND (${fullQuery})`;
+                }
+                else if (viewId) {
+                    fullQuery = `(${views.find(_view => _view.view_id === viewId)?.query || 'howler.id:*'}) AND (${fullQuery})`;
+                }
+                const _response = await dispatchApi(api.search.hit.post({
+                    offset: appendResults ? response.rows : offset,
+                    rows: pageCount,
+                    query: fullQuery,
+                    sort,
+                    filters,
+                    track_total_hits: trackTotalHits
+                }), { showError: false, throwError: true });
+                if (_response.total < offset) {
+                    setOffset(0);
+                }
+                loadHits(_response.items);
+                if (!appendResults) {
+                    setResponse(_response);
+                }
+                else {
+                    setResponse(_existingResponse => ({
+                        ..._response,
+                        offset: _existingResponse.offset,
+                        rows: Math.min(_existingResponse.rows + _response.rows, _response.total),
+                        items: [..._existingResponse.items, ..._response.items]
+                    }));
+                }
+            }
+            catch (e) {
+                setError(e.message);
+            }
+            finally {
+                setSearching(false);
+            }
+        });
+    }, 
+    // We skip reloading when the response changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        sort,
+        span,
+        query,
+        startDate,
+        endDate,
+        filter,
+        setQuery,
+        location.pathname,
+        routeParams.id,
+        viewId,
+        dispatchApi,
+        offset,
+        pageCount,
+        trackTotalHits,
+        loadHits,
+        views,
+        setOffset
+    ]);
+    // We only run this when ancillary properties (i.e. filters, sorting) change
+    useEffect(() => {
+        // We're being asked to present a view, but we don't currently have the views loaded
+        if (viewId && !viewsReady) {
+            return;
+        }
+        if (span.endsWith('custom') && (!startDate || !endDate)) {
+            return;
+        }
+        if (viewId || bundleId || (query && query !== 'howler.id:*') || offset > 0) {
+            search(query);
+        }
+        else {
+            setResponse(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, viewsReady, startDate, endDate]);
+    return (_jsx(HitSearchContext.Provider, { value: {
+            layout,
+            displayType,
+            setDisplayType,
+            search,
+            searching,
+            error,
+            response,
+            viewId,
+            bundleId,
+            setQueryHistory,
+            queryHistory,
+            fzfSearch,
+            setFzfSearch
+        }, children: children }));
+};
+export default HitSearchProvider;

package/dist/components/app/providers/LocalStorageProvider.d.ts

@@ -0,0 +1,13 @@
+import type { FC, PropsWithChildren } from 'react';
+import { StorageKey } from 'utils/constants';
+type ValuesType = {
+    [K in StorageKey]?: any;
+};
+export interface LocalStorageContextType {
+    set: <T>(key: string, value: T) => void;
+    values: ValuesType;
+    remove: (key: string) => void;
+}
+export declare const LocalStorageContext: import("react").Context<LocalStorageContextType>;
+declare const LocalStorageProvider: FC<PropsWithChildren>;
+export default LocalStorageProvider;

package/dist/components/app/providers/LocalStorageProvider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import useLocalStorage from 'commons/components/utils/hooks/useLocalStorage';
+import { createContext, useCallback, useEffect, useState } from 'react';
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from 'utils/constants';
+export const LocalStorageContext = createContext(null);
+const LocalStorageProvider = ({ children }) => {
+    const { get: getStored, set: setStored, remove: removeStored } = useLocalStorage(MY_LOCAL_STORAGE_PREFIX);
+    const [values, setValues] = useState({});
+    useEffect(() => {
+        const newData = {};
+        for (const key in StorageKey) {
+            if (!values[StorageKey[key]]) {
+                newData[StorageKey[key]] = getStored(StorageKey[key]);
+            }
+        }
+        setValues(current => {
+            return {
+                ...current,
+                ...newData
+            };
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getStored]);
+    const set = useCallback((key, value) => {
+        setStored(key, value);
+        setValues(current => ({
+            ...current,
+            [key]: value
+        }));
+    }, [setStored]);
+    const remove = useCallback((key) => {
+        removeStored(key);
+        setValues(current => {
+            const copy = { ...current };
+            delete copy[key];
+            return copy;
+        });
+    }, [removeStored]);
+    return _jsx(LocalStorageContext.Provider, { value: { values, set, remove }, children: children });
+};
+export default LocalStorageProvider;

package/dist/components/app/providers/ModalProvider.d.ts

@@ -0,0 +1,16 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+export interface ModalOptions {
+    disableClose?: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+}
+interface ModalContextType {
+    showModal: (children: ReactNode, options?: ModalOptions) => () => void;
+    content?: ReactNode;
+    setContent: (children: ReactNode) => void;
+    options?: ModalOptions;
+    close: () => void;
+}
+export declare const ModalContext: import("react").Context<ModalContextType>;
+declare const ModalProvider: FC<PropsWithChildren>;
+export default ModalProvider;

package/dist/components/app/providers/ModalProvider.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useEffect, useState } from 'react';
+const defaultOptions = {
+    disableClose: false
+};
+export const ModalContext = createContext(null);
+const ModalProvider = ({ children }) => {
+    const [content, setContent] = useState(null);
+    const [options, setOptions] = useState(defaultOptions);
+    useEffect(() => {
+        if (!content) {
+            setOptions(defaultOptions);
+        }
+    }, [content]);
+    const showModal = useCallback((_children, newOptions) => {
+        setContent(_children);
+        if (options) {
+            setOptions({
+                ...options,
+                ...newOptions
+            });
+        }
+        return () => setContent(null);
+    }, [options]);
+    const close = useCallback(() => setContent(null), []);
+    return (_jsx(ModalContext.Provider, { value: { showModal, content, setContent, options, close }, children: children }));
+};
+export default ModalProvider;

package/dist/components/app/providers/OverviewProvider.d.ts

@@ -0,0 +1,13 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { Overview } from 'models/entities/generated/Overview';
+import type { FC, PropsWithChildren } from 'react';
+interface OverviewContextType {
+    overviews: Overview[];
+    getOverviews: (force?: boolean) => Promise<Overview[]>;
+    getMatchingOverview: (h: Hit) => Overview;
+    refresh: () => void;
+    loaded: boolean;
+}
+export declare const OverviewContext: import("react").Context<OverviewContextType>;
+declare const OverviewProvider: FC<PropsWithChildren>;
+export default OverviewProvider;

package/dist/components/app/providers/OverviewProvider.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from 'api';
+import { createContext, useCallback, useState } from 'react';
+export const OverviewContext = createContext(null);
+const OverviewProvider = ({ children }) => {
+    const [fetching, setFetching] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+    const [overviews, setOverviews] = useState([]);
+    const getOverviews = useCallback(async (force = false) => {
+        if ((loaded && !force) || fetching) {
+            return overviews;
+        }
+        else {
+            try {
+                setFetching(true);
+                const result = await api.overview.get();
+                setOverviews(result);
+                setLoaded(true);
+                return result;
+            }
+            finally {
+                setFetching(false);
+            }
+        }
+    }, [fetching, loaded, overviews]);
+    /**
+     * Based on a given hit, retrieve the best match for a Overview
+     */
+    const getMatchingOverview = useCallback((hit) => hit &&
+        overviews
+            .filter(_overview => 
+        // The analytic must match, and the detection must either a) not exist or b) match the hit
+        _overview.analytic === hit.howler.analytic &&
+            (!_overview.detection || _overview.detection.toLowerCase() === hit.howler.detection?.toLowerCase()))
+            .sort((a, b) => {
+            if (a.detection && !b.detection) {
+                return -1;
+            }
+            else if (!a.detection && b.detection) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        })[0], [overviews]);
+    const refresh = useCallback(() => {
+        setLoaded(false);
+        getOverviews();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsx(OverviewContext.Provider, { value: {
+            overviews,
+            getOverviews,
+            getMatchingOverview,
+            refresh,
+            loaded
+        }, children: children }));
+};
+export default OverviewProvider;

package/dist/components/app/providers/ParameterProvider.d.ts

@@ -0,0 +1,25 @@
+import type { FC, PropsWithChildren } from 'react';
+interface ParameterProviderType {
+    selected?: string;
+    query?: string;
+    offset: number;
+    trackTotalHits: boolean;
+    sort?: string;
+    span?: string;
+    filter?: string;
+    startDate?: string;
+    endDate?: string;
+    setSelected: (id: string) => void;
+    setQuery: (id: string) => void;
+    setOffset: (offset: string | number) => void;
+    setSort: (sort: string) => void;
+    setSpan: (span: string) => void;
+    setFilter: (filter: string) => void;
+    setCustomSpan: (startDate: string, endDate: string) => void;
+}
+export declare const ParameterContext: import("use-context-selector").Context<ParameterProviderType>;
+/**
+ * Context responsible for tracking updates to query operations in hit and view search.
+ */
+declare const ParameterProvider: FC<PropsWithChildren>;
+export default ParameterProvider;