WIP: Virtualising both table views and some modal performance improvements

webapp/package.json

@@ -65,6 +65,9 @@
 		"react-redux": "^7.2.0",
 		"react-router-dom": "^5.2.0",
 		"react-select": "^5.2.2",
+		"react-virtualized-auto-sizer": "^1.0.7",
+		"react-vtree": "^2.0.4",
+		"react-window": "^1.8.8",
 		"trim-newlines": "^4.0.2"
 	},
 	"jest": {
@@ -113,6 +116,8 @@
 		"@types/react-redux": "^7.1.23",
 		"@types/react-router-dom": "^5.3.3",
 		"@types/react-select": "^5.0.0",
+		"@types/react-virtualized-auto-sizer": "^1.0.1",
+		"@types/react-window": "^1.8.5",
 		"@types/redux-mock-store": "^1.0.3",
 		"@typescript-eslint/eslint-plugin": "^5.16.0",
 		"@typescript-eslint/parser": "^5.16.0",

webapp/src/components/cardBadges.tsx

@@ -4,6 +4,7 @@ import React, {useMemo} from 'react'
 import {useIntl} from 'react-intl'
 
 import {Card} from '../blocks/card'
+import {RootState} from '../store'
 import {useAppSelector} from '../store/hooks'
 import {getCardContents} from '../store/contents'
 import {getCardComments} from '../store/comments'
@@ -76,8 +77,8 @@ const calculateBadges = (contents: ContentsType, comments: CommentBlock[]): Badg
 
 const CardBadges = (props: Props) => {
     const {card, className} = props
-    const contents = useAppSelector(getCardContents(card.id))
-    const comments = useAppSelector(getCardComments(card.id))
+    const contents = useAppSelector((state: RootState) => getCardContents(state, card.id))
+    const comments = useAppSelector((state: RootState) => getCardComments(state, card.id))
     const badges = useMemo(() => calculateBadges(contents, comments), [contents, comments])
     if (!hasBadges(badges)) {
         return null

webapp/src/components/cardDialog.tsx

@@ -27,6 +27,7 @@ import {getUserBlockSubscriptionList} from '../store/initialLoad'
 import {getClientConfig} from '../store/clientConfig'
 
 import {IUser} from '../user'
+import {RootState} from '../store'
 import {getMe} from '../store/users'
 import {Permission} from '../constants'
 import {Block, createBlock} from '../blocks/block'
@@ -53,10 +54,10 @@ type Props = {
 
 const CardDialog = (props: Props): JSX.Element => {
     const {board, activeView, cards, views} = props
-    const card = useAppSelector(getCard(props.cardId))
-    const contents = useAppSelector(getCardContents(props.cardId))
-    const comments = useAppSelector(getCardComments(props.cardId))
-    const attachments = useAppSelector(getCardAttachments(props.cardId))
+    const card = useAppSelector((state: RootState) => getCard(state, props.cardId))
+    const contents = useAppSelector((state: RootState) => getCardContents(state, props.cardId))
+    const comments = useAppSelector((state: RootState) => getCardComments(state, props.cardId))
+    const attachments = useAppSelector((state: RootState) => getCardAttachments(state, props.cardId))
     const clientConfig = useAppSelector(getClientConfig)
     const intl = useIntl()
     const dispatch = useAppDispatch()

webapp/src/components/centerPanel.tsx

@@ -396,6 +396,14 @@ const CenterPanel = (props: Props) => {
         return {visible: vg, hidden: hg}
     }, [cards, activeView.fields.visibleOptionIds, activeView.fields.hiddenOptionIds, groupByProperty, boardUsers])
 
+    const onDialogClose = useCallback(() => {
+        showCard(undefined)
+    }, [])
+
+    const dialogShowCard = useCallback((cardId?: string | undefined) => {
+        showCard(cardId)
+    }, [showCard])
+
     return (
         <div
             className='BoardComponent'
@@ -410,8 +418,8 @@ const CenterPanel = (props: Props) => {
                         cards={cards}
                         key={props.shownCardId}
                         cardId={props.shownCardId}
-                        onClose={() => showCard(undefined)}
-                        showCard={(cardId) => showCard(cardId)}
+                        onClose={onDialogClose}
+                        showCard={dialogShowCard}
                         readonly={props.readonly}
                     />
                 </RootPortal>}

webapp/src/components/gallery/galleryCard.tsx

@@ -8,6 +8,7 @@ import {Card} from '../../blocks/card'
 import {ContentBlock} from '../../blocks/contentBlock'
 import {useSortable} from '../../hooks/sortable'
 import mutator from '../../mutator'
+import {RootState} from '../../store'
 import {getCardContents} from '../../store/contents'
 import {useAppSelector} from '../../store/hooks'
 import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
@@ -40,7 +41,7 @@ const GalleryCard = (props: Props) => {
     const intl = useIntl()
     const {card, board} = props
     const [isDragging, isOver, cardRef] = useSortable('card', card, props.isManualSort && !props.readonly, props.onDrop)
-    const contents = useAppSelector(getCardContents(card.id))
+    const contents = useAppSelector((state: RootState) => getCardContents(state, card.id))
     const [showConfirmationDialogBox, setShowConfirmationDialogBox] = useState<boolean>(false)
 
     const visiblePropertyTemplates = props.visiblePropertyTemplates || []

webapp/src/components/table/table.scss

@@ -11,9 +11,9 @@
         display: flex;
         flex-shrink: 0;
         align-items: center;
-        height: 50px;
+        height: 44px;
         margin-right: 15px;
-        margin-top: 15px;
+        // margin-top: 15px;
         vertical-align: middle;
         border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.08);
 
@@ -212,7 +212,8 @@
     .octo-table-body {
         display: flex;
         flex-direction: column;
-        width: fit-content;
+        width: 100%;
+        height: 100%;
     }
 
     .octo-table-header,
@@ -250,7 +251,8 @@
     }
 
     .table-row-container {
-        width: fit-content;
+        width: 100%;
+        height: 100%;
 
         .octo-table-cell {
             align-items: center;