Fixing different problems of the view

docker/postgres/docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.1'
 
 services:
   mrscrooge:
-    image: dracks/mrscrooge
+    image: dracks/mrscrooge:latest-postgres
     container_name: mrscrooge
     depends_on:
       - postgres
@@ -13,7 +13,7 @@ services:
       - 3333:80
 
   postgres:
-    image: postgres
+    image: postgres:12
     environment:
       POSTGRES_PASSWORD: postgres
       POSTGRES_USER: postgres

view/src/contents/graphs/graph-with-rechart/enrich-graph.spec.ts

@@ -1,32 +1,34 @@
 import { Tag } from '../../../api/client/tag/types';
 import { tagFactory } from '../../../utils/data-factory/tag.factory';
-import {enrichGraph} from './enrich-graph'
+import { enrichGraph } from './enrich-graph';
 
+describe('enrichGraph', () => {
+    let tagsMap: Map<number, Tag>;
+    const tagId = (tag: number) => ({ tag });
 
-describe('enrichGraph', ()=>{
-    let tagsMap : Map<number, Tag>
-    const tagId=(tag: number)=>({tag})
-
-    beforeEach(()=>{
+    beforeEach(() => {
         const tagsList = [
-            tagFactory.build({id: 1, name: 'tag1'}),
-            tagFactory.build({id: 2, name: 'tag2'}),
-            tagFactory.build({id: 3, name: 'tag3'}),
-            tagFactory.build({id: 4, name: 'tag4'})
-        ]
-        tagsMap = new Map(tagsList.map(tag => [tag.id, tag]))
-    })
-    it('A graph with group type tags and preserving the order', ()=>{
-        const result = enrichGraph({
-            dateRange: 'all',
-            group: {
-                groupTags: [tagId(3), tagId(1)],
-                group: 'tags',
+            tagFactory.build({ id: 1, name: 'tag1' }),
+            tagFactory.build({ id: 2, name: 'tag2' }),
+            tagFactory.build({ id: 3, name: 'tag3' }),
+            tagFactory.build({ id: 4, name: 'tag4' }),
+        ];
+        tagsMap = new Map(tagsList.map(tag => [tag.id, tag]));
+    });
+    it('A graph with group type tags and preserving the order', () => {
+        const result = enrichGraph(
+            {
+                dateRange: 'all',
+                group: {
+                    groupTags: [tagId(3), tagId(1)],
+                    group: 'tags',
+                },
+                id: 1,
+                kind: 'pie',
+                name: 'some graph',
             },
-            id: 1,
-            kind: 'pie',
-            name: 'some graph'
-        }, tagsMap)
-        expect(result.group.groupTags).toEqual([tagsMap.get(3), tagsMap.get(1)])
-    })
-})
+            tagsMap,
+        );
+        expect(result.group.groupTags).toEqual([tagsMap.get(3), tagsMap.get(1)]);
+    });
+});

view/src/contents/graphs/graph-with-rechart/enrich-graph.ts

@@ -1,8 +1,11 @@
 import { EnrichedGraph, EnrichedGroup, GraphGroup, GraphV2 } from '../../../api/client/graphs/types';
 import { Tag } from '../../../api/client/tag/types';
 
-export const enrichGroup = ({ groupTags: oldGroupTags, ...group }: GraphGroup, tagsMap: Map<number, Tag>): EnrichedGroup => {
-    const groupTags = oldGroupTags?.map(tag => tagsMap.get(tag.tag)).filter(Boolean) as Tag[] ?? [];
+export const enrichGroup = (
+    { groupTags: oldGroupTags, ...group }: GraphGroup,
+    tagsMap: Map<number, Tag>,
+): EnrichedGroup => {
+    const groupTags = (oldGroupTags?.map(tag => tagsMap.get(tag.tag)).filter(Boolean) as Tag[]) ?? [];
 
     return {
         ...group,

view/src/contents/graphs/use-graph-data.spec.ts

@@ -42,7 +42,7 @@ describe('useGraphData', () => {
             { id: 5, name: 'tag_5' },
             { id: 8, name: 'tag_8' },
         ].map(element => ({ ...element, children: [], filters: [] }));
-        tagsMap = new Map(tags.map(tag => [tag.id, tag]))
+        tagsMap = new Map(tags.map(tag => [tag.id, tag]));
     });
     it('Check basic pie', () => {
         expect(useGraphDataGenerator(enrichGraph({ ...GraphV2Pie, id: 2 }, tagsMap))).toEqual([

view/src/contents/raw-data-list/raw-data-list.tsx

@@ -86,7 +86,14 @@ export const RawDataList: React.FC = () => {
                 </TableRow>
             </TableHeader>
             <TableBody>
-                <InfiniteScroll items={filteredResults}>
+                <InfiniteScroll
+                    items={filteredResults}
+                    renderMarker={marker => (
+                        <TableRow>
+                            <TableCell>{marker}</TableCell>
+                        </TableRow>
+                    )}
+                >
                     {(result: RdsEnriched) => (
                         <RawDataRow rds={result} tags={tags} onChange={replace} key={result.id} />
                     )}

view/src/contents/tags/edit-tag/edit-tag.form.tsx

@@ -26,8 +26,8 @@ export const EditTagForm: React.FC<EditTagFormProps> = ({ tag, save }) => {
         while (tmpChildrenList.length > 0) {
             const firstChildId = tmpChildrenList.pop() as number;
             childrenList.push(firstChildId);
-            const firstChild = tagsMap[firstChildId];
-            firstChild.children.forEach(child => tmpChildrenList.push(child));
+            const firstChild = tagsMap.get(firstChildId);
+            firstChild?.children.forEach(child => tmpChildrenList.push(child));
         }
         return tags.filter(({ id }) => !childrenList.includes(id)).map(({ id, name }) => ({ id, name }));
     }, [tag, tag?.parent, tagsMap, tags]);

view/src/contents/tags/edit-tag/edit-tag.tsx

@@ -13,9 +13,10 @@ import { UITag } from './models/ui-tag.model';
 export const TagEdit: React.FC = () => {
     const { tagsMap, refresh } = useTagsContext();
     const { id } = useParams<{ id: string }>();
-    const tag: Tag | undefined = tagsMap[Number.parseInt(id ?? 'Nan', 10)];
+    const idNum = Number.parseInt(id ?? 'Nan', 10);
+    const tag: Tag | undefined = tagsMap.get(idNum);
 
-    const [, updateTag] = usePutTag(tag?.id);
+    const [, updateTag] = usePutTag(tag?.id ?? 0);
 
     const [tagUiValue, setTagUiValue] = React.useState<UITag | undefined>();
 

view/src/contents/tags/edit-tag/filter-list-add.tsx

@@ -19,6 +19,7 @@ export const FilterListAddArgs: React.FC<FilterListAddArgs> = ({ conditions, tag
     const [, request] = usePostTagFilter();
     const [viewFilter, setViewFilter] = React.useState<Partial<TagFilter>>({
         tag: tagId,
+        conditional: '',
     });
     React.useEffect(() => {
         setViewFilter({ tag: tagId });

view/src/contents/tags/list-tags.tsx

@@ -9,7 +9,7 @@ import { TagListRow } from './tag-list-row';
 
 export const TagsList: React.FC = () => {
     const [isAdding, setIsAdding] = React.useState(false);
-    const { tags, tagsMap: tagsHash, refresh } = useTagsContext();
+    const { tags, tagsMap, refresh } = useTagsContext();
 
     const onClose = React.useCallback(
         async (newTag?: Tag) => {
@@ -41,7 +41,7 @@ export const TagsList: React.FC = () => {
             <TableBody>
                 {isAdding ? <NewTagRow close={onClose} /> : undefined}
                 <InfiniteScroll items={tags}>
-                    {(result: Tag) => <TagListRow key={result.id} tag={result} tagHash={tagsHash} refresh={refresh} />}
+                    {(result: Tag) => <TagListRow key={result.id} tag={result} tagsMap={tagsMap} refresh={refresh} />}
                 </InfiniteScroll>
             </TableBody>
         </Table>

view/src/contents/tags/tag-list-row.tsx

@@ -10,17 +10,17 @@ import { ConfirmationButton } from '../../utils/ui/confirmation-button';
 interface TagListRowArgs {
     refresh: () => void;
     tag: Tag;
-    tagHash: Record<number, Tag>;
+    tagsMap: Map<number, Tag>;
 }
 
-export const TagListRow: React.FC<TagListRowArgs> = ({ tag, tagHash, refresh }) => {
+export const TagListRow: React.FC<TagListRowArgs> = ({ tag, tagsMap: tagHash, refresh }) => {
     const [, deleteRequest] = useDeleteTag(tag.id);
     const navigate = useNavigate();
-    const parentTag = tag.parent ? tagHash[tag.parent] : { name: undefined };
+    const parentTag = tag.parent ? tagHash.get(tag.parent) : { name: undefined };
     const logger = useLogger();
     return (
         <TableRow>
-            <TableCell>{parentTag.name}</TableCell>
+            <TableCell>{parentTag?.name}</TableCell>
             <TableCell>{tag.name}</TableCell>
             <TableCell>{tag.negateConditional ? 'not and' : 'or'}</TableCell>
             <TableCell>{tag.filters.length}</TableCell>

view/src/utils/data-factory/tag.factory.ts

@@ -1,4 +1,4 @@
-import * as Factory from 'factory.ts'
+import * as Factory from 'factory.ts';
 
 import { Tag } from '../../api/client/tag/types';
 
@@ -7,4 +7,4 @@ export const tagFactory = Factory.Sync.makeFactory<Tag>({
     name: 'Build tag',
     children: [],
     filters: [],
-})
+});