@cccsaurora/howler-ui 2.13.1 → 2.13.2

package/components/app/providers/HitSearchProvider.js

@@ -78,7 +78,7 @@ const HitSearchProvider = ({ children }) => {
                     fullQuery = `(howler.bundles:${bundle}) AND (${fullQuery})`;
                 }
                 else if (viewId) {
-                    fullQuery = `(${(await getCurrentView())?.query || 'howler.id:*'}) AND (${fullQuery})`;
+                    fullQuery = `(${(await getCurrentView({ viewId }))?.query || 'howler.id:*'}) AND (${fullQuery})`;
                 }
                 const _response = await dispatchApi(api.search.hit.post({
                     offset: appendResults ? response.rows : offset,
@@ -132,7 +132,6 @@ const HitSearchProvider = ({ children }) => {
         trackTotalHits,
         loadHits,
         getCurrentView,
-        defaultView,
         setOffset
     ]);
     // We only run this when ancillary properties (i.e. filters, sorting) change
@@ -147,7 +146,7 @@ const HitSearchProvider = ({ children }) => {
             setResponse(null);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, startDate, endDate]);
+    }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, startDate, endDate, viewId]);
     return (_jsx(HitSearchContext.Provider, { value: {
             layout,
             displayType,

package/components/app/providers/ViewProvider.d.ts

@@ -12,7 +12,10 @@ export interface ViewContextType {
     addView: (v: View) => Promise<View>;
     editView: (id: string, newView: Partial<Omit<View, 'view_id' | 'owner'>>) => Promise<View>;
     removeView: (id: string) => Promise<void>;
-    getCurrentView: (lazy?: boolean) => Promise<View>;
+    getCurrentView: (config?: {
+        viewId?: string;
+        lazy?: boolean;
+    }) => Promise<View>;
 }
 export declare const ViewContext: import("use-context-selector").Context<ViewContextType>;
 declare const ViewProvider: FC<PropsWithChildren>;

package/components/app/providers/ViewProvider.js

@@ -59,15 +59,17 @@ const ViewProvider = ({ children }) => {
             }
         })();
     }, [defaultView, fetchViews, setDefaultView, views]);
-    const getCurrentView = useCallback(async (lazy = false) => {
-        const id = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
-        if (!id) {
+    const getCurrentView = useCallback(async ({ viewId, lazy = false } = {}) => {
+        if (!viewId) {
+            viewId = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
+        }
+        if (!viewId) {
             return null;
         }
-        if (!has(views, id) && !lazy) {
-            return (await fetchViews([id]))[0];
+        if (!has(views, viewId) && !lazy) {
+            return (await fetchViews([viewId]))[0];
         }
-        return views[id];
+        return views[viewId];
     }, [defaultView, fetchViews, location.pathname, routeParams.id, views]);
     const editView = useCallback(async (id, partialView) => {
         const result = await dispatchApi(api.view.put(id, partialView));

package/components/app/providers/ViewProvider.test.js

@@ -117,17 +117,23 @@ describe('ViewContext', () => {
     });
     describe('getCurrentView', () => {
         let hook;
-        beforeAll(async () => {
+        beforeEach(async () => {
             hook = await act(async () => {
                 return renderHook(() => useContextSelector(ViewContext, ctx => ctx.getCurrentView), { wrapper: Wrapper });
             });
         });
         it('should allow the user to fetch their current view based on the location', async () => {
             // lazy load should return nothing
-            await expect(hook.result.current(true)).resolves.toBeFalsy();
+            await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
             const result = await act(async () => hook.result.current());
             expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
         });
+        it('should allow the user to fetch their current view based on the view ID', async () => {
+            // lazy load should return nothing
+            await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
+            const result = await act(async () => hook.result.current({ viewId: 'searched_view_id' }));
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+        });
     });
     describe('editView', () => {
         let hook;

package/components/elements/hit/HitBanner.js

@@ -29,7 +29,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         if (!hit?.howler.analytic) {
             return;
         }
-        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic.analytic_id));
+        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
     const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);

package/components/elements/hit/aggregate/HitGraph.js

@@ -42,6 +42,7 @@ const HitGraph = ({ query }) => {
     const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const chartRef = useRef();
     const [loading, setLoading] = useState(false);
     const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);
@@ -113,12 +114,12 @@ const HitGraph = ({ query }) => {
         }
     }, [dispatchApi, endDate, escalationFilter, filterField, override, query, span, startDate]);
     useEffect(() => {
-        if ((!query && !viewId) || error) {
+        if ((!query && !viewId) || error || !response) {
             return;
         }
         performQuery();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [query, viewId, error, span]);
+    }, [query, viewId, error, span, response]);
     const options = useMemo(() => {
         const parentOptions = scatter('hit.summary.title', 'hit.summary.subtitle');
         return {

package/components/routes/hits/search/shared/HitSort.js

@@ -53,7 +53,7 @@ const HitSort = ({ size = 'small' }) => {
             return;
         }
         (async () => {
-            const selectedView = await getCurrentView(true);
+            const selectedView = await getCurrentView({ lazy: true });
             if (selectedView?.sort && !location.search.includes('sort')) {
                 setSavedSort(selectedView.sort);
             }

package/components/routes/hits/search/shared/SearchSpan.js

@@ -26,7 +26,7 @@ const SearchSpan = ({ omitCustom = false, size }) => {
             return;
         }
         (async () => {
-            const viewSpan = (await getCurrentView(true))?.span;
+            const viewSpan = (await getCurrentView({ lazy: true }))?.span;
             if (!viewSpan) {
                 return;
             }

package/components/routes/hits/view/HitViewer.js

@@ -104,7 +104,7 @@ const HitViewer = () => {
             hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
             hit_related: () => _jsx(HitRelated, { hit: hit }),
             ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead })]) ?? []),
-            ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => [
+            ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
                 `external-lead:${dossierIndex}:${leadIndex}`,
                 () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
             ])))

package/components/routes/home/AddNewCard.js

@@ -15,7 +15,7 @@ const TYPES = {
 const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detection'];
 const AddNewCard = ({ dashboard, addCard }) => {
     const { t } = useTranslation();
-    const views = useContextSelector(ViewContext, ctx => ctx.views ?? []);
+    const views = useContextSelector(ViewContext, ctx => ctx.views ?? {});
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const [selectedType, setSelectedType] = useState('');
     const [analytics, setAnalytics] = useState([]);
@@ -58,7 +58,8 @@ const AddNewCard = ({ dashboard, addCard }) => {
     }, [fetchViews]);
     return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                             opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
+                                            !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
                                             (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                                 opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
                                             _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));

package/components/routes/home/index.js

@@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import ErrorBoundary from '../ErrorBoundary';
 import AddNewCard from './AddNewCard';
 import AnalyticCard, {} from './AnalyticCard';
 import EntryWrapper from './EntryWrapper';
@@ -81,41 +82,41 @@ const Home = () => {
         })
             .then(result => setUpdatedHitTotal(result.total));
     }, [updateQuery]);
-    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), _jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEditing && isEqual(dashboard, user.dashboard), color: isEditing ? 'success' : 'primary', startIcon: isEditing ? loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}) : _jsx(Edit, {}), onClick: () => (!isEditing ? setIsEditing(true) : saveChanges()), children: t(isEditing ? 'save' : 'edit') })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
-                                    setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT));
-                                    setUpdatedHitTotal(0);
-                                }, children: _jsx(Close, {}) })] }), children: [_jsx(AlertTitle, { children: t('route.home.alert.updated.title') }), t('route.home.alert.updated.description', { count: updatedHitTotal })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (dashboard ?? []).map(entry => getIdFromEntry(entry)), children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", sx: [
-                                theme => ({
-                                    marginLeft: `${theme.spacing(-1)} !important`
-                                }),
-                                !dashboard?.length &&
-                                    !isEditing && {
-                                    height: '100%',
-                                    display: 'flex',
-                                    alignItems: 'center'
-                                }
-                            ], children: [(dashboard ?? []).map(entry => {
-                                    if (entry.type === 'view') {
-                                        const settings = JSON.parse(entry.config);
-                                        return (_jsx(EntryWrapper, { editing: isEditing, id: settings.viewId, onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(ViewCard, { ...settings }, entry.config) }, entry.entry_id));
+    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), _jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEditing && isEqual(dashboard, user.dashboard), color: isEditing ? 'success' : 'primary', startIcon: isEditing ? loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}) : _jsx(Edit, {}), onClick: () => (!isEditing ? setIsEditing(true) : saveChanges()), children: t(isEditing ? 'save' : 'edit') })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
+                                        setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT));
+                                        setUpdatedHitTotal(0);
+                                    }, children: _jsx(Close, {}) })] }), children: [_jsx(AlertTitle, { children: t('route.home.alert.updated.title') }), t('route.home.alert.updated.description', { count: updatedHitTotal })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (dashboard ?? []).map(entry => getIdFromEntry(entry)), children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", sx: [
+                                    theme => ({
+                                        marginLeft: `${theme.spacing(-1)} !important`
+                                    }),
+                                    !dashboard?.length &&
+                                        !isEditing && {
+                                        height: '100%',
+                                        display: 'flex',
+                                        alignItems: 'center'
                                     }
-                                    else if (entry.type === 'analytic') {
-                                        const settings = JSON.parse(entry.config);
-                                        return (_jsx(EntryWrapper, { editing: isEditing, id: getIdFromEntry(entry), onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(AnalyticCard, { ...settings }, entry.config) }, entry.entry_id));
-                                    }
-                                    else {
-                                        return null;
-                                    }
-                                }), isEditing && (_jsx(AddNewCard, { dashboard: dashboard, addCard: newCard => setStateDashboard(_dashboard => [...(_dashboard ?? []), newCard]) })), !dashboard?.length && !isEditing && (_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: theme => ({
-                                            height: '60vh',
-                                            borderStyle: 'dashed',
-                                            borderColor: theme.palette.text.secondary,
-                                            borderWidth: '1rem',
-                                            borderRadius: '1rem',
-                                            opacity: 0.3,
-                                            justifyContent: 'center',
-                                            alignItems: 'center',
-                                            padding: 3
-                                        }), children: [_jsx(Typography, { variant: "h1", sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(Stack, { direction: "row", spacing: 2.5, children: [_jsx(AppBrand, { application: "howler", variant: "logo", size: "large" }), _jsx("span", { children: t('route.home.title') })] }) }), _jsx(Typography, { variant: "h4", sx: { textAlign: 'center' }, children: t('route.home.description') })] }) }))] }) }) })] }) }));
+                                ], children: [(dashboard ?? []).map(entry => {
+                                        if (entry.type === 'view') {
+                                            const settings = JSON.parse(entry.config);
+                                            return (_jsx(EntryWrapper, { editing: isEditing, id: settings.viewId, onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(ViewCard, { ...settings }, entry.config) }, entry.entry_id));
+                                        }
+                                        else if (entry.type === 'analytic') {
+                                            const settings = JSON.parse(entry.config);
+                                            return (_jsx(EntryWrapper, { editing: isEditing, id: getIdFromEntry(entry), onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(AnalyticCard, { ...settings }, entry.config) }, entry.entry_id));
+                                        }
+                                        else {
+                                            return null;
+                                        }
+                                    }), isEditing && (_jsx(AddNewCard, { dashboard: dashboard, addCard: newCard => setStateDashboard(_dashboard => [...(_dashboard ?? []), newCard]) })), !dashboard?.length && !isEditing && (_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: theme => ({
+                                                height: '60vh',
+                                                borderStyle: 'dashed',
+                                                borderColor: theme.palette.text.secondary,
+                                                borderWidth: '1rem',
+                                                borderRadius: '1rem',
+                                                opacity: 0.3,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                padding: 3
+                                            }), children: [_jsx(Typography, { variant: "h1", sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(Stack, { direction: "row", spacing: 2.5, children: [_jsx(AppBrand, { application: "howler", variant: "logo", size: "large" }), _jsx("span", { children: t('route.home.title') })] }) }), _jsx(Typography, { variant: "h4", sx: { textAlign: 'center' }, children: t('route.home.description') })] }) }))] }) }) })] }) }) }));
 };
 export default Home;

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",