Waitp 1231 base matrix component #4707

alexd-bes · 2023-07-06T04:40:02Z

Issue WAITP-1231: Base UI component for matrix table

Changes:

Created reusable matrix component in ui-components
Added stories
Exposed matrix-related types from types package

Note: column groups are not implemented as yet, that will be in a separate PR

Screenshots:

Basic matrix

Nested with dots

Nested with basic data

Modal with data, shown on click of cell

…onent

tcaiger · 2023-07-10T23:18:15Z

packages/ui-components/src/components/Matrix/Matrix.tsx

+
+const MatrixTable = styled.table`
+  border-collapse: collapse;
+  border: 1px solid ${({ theme }) => hexToRgba(theme.palette.text.primary, 0.2)};


I'm keen to remove the hexToRgba function in favour of just using hex colors with opacity. So for example we should just be able to do ${theme.palette.text.primary}33 to get the same result, right?.
https://www.w3schools.com/cssref/css_colors_legal.php

tcaiger · 2023-07-10T23:19:06Z

packages/ui-components/src/components/Matrix/Matrix.tsx

+        value={{
+          presentationOptions,
+          columns,
+          rows,
+          startColumn,
+          maxColumns,
+          expandedRows,
+          enlargedCell,
+        }}


Do you think there is any need to wrap this context value in a useMemo to optimise performance?

tcaiger · 2023-07-10T23:20:02Z

packages/ui-components/src/components/Matrix/MatrixCell.tsx

+    ${({ theme }) =>
+      theme.palette.background.default === 'transparent'
+        ? 'transparent'
+        : hexToRgba(theme.palette.background.default, 0.8)};


Suggested change

: hexToRgba(theme.palette.background.default, 0.8)};

: `${theme.palette.background.default}cc`;

tcaiger · 2023-07-10T23:20:35Z

packages/ui-components/src/components/Matrix/Matrix.tsx

+    const updateMaxColumns = () => {
+      if (!tableEl || !tableEl?.current || !tableEl?.current?.offsetWidth) return;
+      const { offsetWidth } = tableEl?.current;
+      // 200px is the max width of a column that we want to show


nice comment

tcaiger · 2023-07-10T23:23:58Z

packages/ui-components/src/components/Matrix/MatrixContext.ts

+
+type RowTitle = MatrixRowType['title'];
+
+const defaultContextValue = {


This is really nice. I think that useReducer and context are a great choice here and it organises all these fiddly interactions really nicely.

tcaiger · 2023-07-10T23:26:26Z

packages/ui-components/src/components/Matrix/index.ts

+ */
+
+export { Matrix } from './Matrix';
+export * from './utils';


Do the utils need to be exported? I can't see them used anywhere else.

I mainly did this in case of using them in tupaia-web but I can remove until that comes up

tcaiger

Looks so good. Nice work handling all that complexity. I just have one requested change about removing the rgb util

…onent

…ssential/tupaia into waitp-1231-base-matrix-component

tcaiger

Nice!

* Working legend, grouped columns * Apply location values * Tidy up * Styled column groups * Tiy up files * Add in hidden column titles * Update hidden column title and config types * Generate types * Move the buttons * WAITP-1222: Marker layer (#4686) * setup map entites * wip * wip * re organise project view * mobile search layout * polygon layer * map animation * fix mini map * Update Dashboard.tsx * merging * map overlay data * add Map overlays feature folder * useEntitiesWithLocation * typescript * remove test code * Update InteractivePolygon.tsx * set up * fix api * marker layer * Update types.d.ts * update map layout * wip map overlays * revert map control layout * Update useEntities.ts * copy lesmis * wip * Update MapOverlayList.tsx * default map overlay * radius overlays * navigate to dashboard * fix scroll * measure level * refactor marker layer * refactor useDefaultMapOverlay * types * useEntitiesByMeasureLevel * Update MapOverlaysRoute.ts * fix active entity * Update MarkerLayer.tsx * add comments * Update processMeasureData.ts * refactor useDefaultMapOverlay * Fix merge conflicts * Fix conflict errors --------- Co-authored-by: Tom Caiger <caigertom@gmail.com>

* WAITP-1231 Working table * WIP * Update Matrix.tsx * Fix linting errors * convert to use context * Update hooks * Fix issues * Reorganise files * reorganise context * Working table * Remove enlarged cell modal file * Working modal * Tidy up * Update MatrixCell.tsx * Tidy up hover * Add cell handling for markdown * fix types * WAITP-1231 fixes * Delete types.d.ts * Update index.ts * Fix type error * Waitp 1231 base matrix part 2 (#4714) * Working legend, grouped columns * Apply location values * Tidy up * Styled column groups * Tiy up files * Add in hidden column titles * Update hidden column title and config types * Generate types * Move the buttons * WAITP-1222: Marker layer (#4686) * setup map entites * wip * wip * re organise project view * mobile search layout * polygon layer * map animation * fix mini map * Update Dashboard.tsx * merging * map overlay data * add Map overlays feature folder * useEntitiesWithLocation * typescript * remove test code * Update InteractivePolygon.tsx * set up * fix api * marker layer * Update types.d.ts * update map layout * wip map overlays * revert map control layout * Update useEntities.ts * copy lesmis * wip * Update MapOverlayList.tsx * default map overlay * radius overlays * navigate to dashboard * fix scroll * measure level * refactor marker layer * refactor useDefaultMapOverlay * types * useEntitiesByMeasureLevel * Update MapOverlaysRoute.ts * fix active entity * Update MarkerLayer.tsx * add comments * Update processMeasureData.ts * refactor useDefaultMapOverlay * Fix merge conflicts * Fix conflict errors --------- Co-authored-by: Tom Caiger <caigertom@gmail.com> --------- Co-authored-by: Tom Caiger <caigertom@gmail.com>

alexd-bes added 17 commits July 4, 2023 15:48

WAITP-1231 Working table

f494734

WIP

478d5e6

Update Matrix.tsx

f5977f4

Merge branch 'epic-frontend-rewrite' into waitp-1231-base-matrix-comp…

56f6925

…onent

Fix linting errors

a2b33a4

convert to use context

b6a7363

Update hooks

328caca

Fix issues

aa83f42

Reorganise files

6a7f81b

reorganise context

9b46b79

Working table

0431d46

Remove enlarged cell modal file

40d8eeb

Working modal

d6a817b

Tidy up

e24397c

Update MatrixCell.tsx

8833d4f

Tidy up hover

2b10f2f

Add cell handling for markdown

9fd6482

tcaiger reviewed Jul 10, 2023

View reviewed changes

tcaiger requested changes Jul 10, 2023

View reviewed changes

tcaiger and others added 6 commits July 11, 2023 11:34

Merge branch 'epic-frontend-rewrite' into waitp-1231-base-matrix-comp…

5e4c93a

…onent

fix types

5cb078d

Merge branch 'epic-frontend-rewrite' into waitp-1231-base-matrix-comp…

2ea4853

…onent

WAITP-1231 fixes

cf1a36b

Merge branch 'waitp-1231-base-matrix-component' of github.com:beyonde…

cf43327

…ssential/tupaia into waitp-1231-base-matrix-component

Delete types.d.ts

399b1f7

Update index.ts

cc09da9

alexd-bes requested a review from tcaiger July 11, 2023 00:14

Fix type error

7d691c2

tcaiger approved these changes Jul 11, 2023

View reviewed changes

alexd-bes merged commit d6943ec into epic-frontend-rewrite Jul 11, 2023

alexd-bes deleted the waitp-1231-base-matrix-component branch July 11, 2023 03:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Waitp 1231 base matrix component #4707

Waitp 1231 base matrix component #4707

alexd-bes commented Jul 6, 2023 •

edited

Loading

tcaiger Jul 10, 2023

tcaiger Jul 10, 2023

tcaiger Jul 10, 2023

tcaiger Jul 10, 2023

tcaiger Jul 10, 2023

tcaiger Jul 10, 2023

alexd-bes Jul 10, 2023

tcaiger left a comment

tcaiger left a comment

	: hexToRgba(theme.palette.background.default, 0.8)};
	: `${theme.palette.background.default}cc`;


		type RowTitle = MatrixRowType['title'];

		const defaultContextValue = {

Waitp 1231 base matrix component #4707

Waitp 1231 base matrix component #4707

Conversation

alexd-bes commented Jul 6, 2023 • edited Loading

Issue WAITP-1231: Base UI component for matrix table

Changes:

Screenshots:

Basic matrix

Nested with dots

Nested with basic data

Modal with data, shown on click of cell

tcaiger Jul 10, 2023

Choose a reason for hiding this comment

tcaiger Jul 10, 2023

Choose a reason for hiding this comment

tcaiger Jul 10, 2023

Choose a reason for hiding this comment

tcaiger Jul 10, 2023

Choose a reason for hiding this comment

tcaiger Jul 10, 2023

Choose a reason for hiding this comment

tcaiger Jul 10, 2023

Choose a reason for hiding this comment

alexd-bes Jul 10, 2023

Choose a reason for hiding this comment

tcaiger left a comment

Choose a reason for hiding this comment

tcaiger left a comment

Choose a reason for hiding this comment

alexd-bes commented Jul 6, 2023 •

edited

Loading