feat: add highlight for selection and fix svg rendering (#49)

* feat: add highlight for selection and fix svg rendering

* cut semver

* fix lint issues

Co-authored-by: Amber Hoak <amhoak@microsoft.com>
Co-authored-by: Chris Trevino <chtrevin@microsoft.com>

.yarn/versions/71489b15.yml

@@ -0,0 +1,6 @@
+releases:
+  "@essex-js-toolkit/hierarchy-browser": patch
+  "@essex-js-toolkit/stories": patch
+
+declined:
+  - "@essex-js-toolkit/dev"

packages/hierarchy-browser/src/CommunityCard/AdjacentCommunities/AdjacentCommunities.tsx

@@ -9,7 +9,7 @@ import CommunityEdgeList from '../../NeighborList/CommunityEdgeList'
 import { ScrollArea } from '../../ScollArea'
 import { CommunityDataProvider } from '../../common/dataProviders'
 import { useThemesAccentStyle } from '../../hooks/theme'
-import { ITableSettings } from '../../types'
+import { EntityId, ITableSettings } from '../../types'
 import { CommunityTable } from '../CommunityTable'
 import { TableExpander } from '../TableExpander'
 import { useAdjacentCommunityData } from './hooks/useAdjacentCommunityData'
@@ -24,100 +24,105 @@ interface IAdajacentCommunities {
 	visibleColumns: string[] | undefined
 	minimizeColumns: boolean | undefined
 	refresh: boolean
+	selections?: EntityId[]
+	onSelectionChange: (id: EntityId) => void
 }
 
-export const AdjacentCommunities: React.FC<IAdajacentCommunities> = function AdjacentCommunities({
-	dataProvider,
-	isOpen,
-	styles,
-	visibleColumns,
-	minimizeColumns,
-	refresh,
-}: IAdajacentCommunities) {
-	const colorStyle = useThemesAccentStyle(isOpen)
+export const AdjacentCommunities: React.FC<IAdajacentCommunities> =
+	function AdjacentCommunities({
+		dataProvider,
+		isOpen,
+		styles,
+		visibleColumns,
+		minimizeColumns,
+		refresh,
+		selections,
+		onSelectionChange,
+	}: IAdajacentCommunities) {
+		const colorStyle = useThemesAccentStyle(isOpen)
 
-	const {
-		edgeContentStyle,
-		edgeEntitiesContentStyle,
-		edgeEntitiesExpanderClick,
-		edgeExpanderClick,
-		edgeListOpen,
-		edgeEntitiesOpen,
-	} = useExpandedPanel({ isOpen })
+		const {
+			edgeContentStyle,
+			edgeEntitiesContentStyle,
+			edgeEntitiesExpanderClick,
+			edgeExpanderClick,
+			edgeListOpen,
+			edgeEntitiesOpen,
+		} = useExpandedPanel({ isOpen })
 
-	const [
-		setEdgeSelection,
-		loadMoreEntities,
-		moreEntitiesToLoad,
-		edgeEntities,
-		selectedCommunityEdge,
-		clearCurrentSelection,
-	] = useEdgeSelection(dataProvider)
-	const [
-		adjacentCommunities,
-		isAdjacentEntitiesLoading,
-	] = useAdjacentCommunityData(dataProvider, isOpen, refresh)
+		const [
+			setEdgeSelection,
+			loadMoreEntities,
+			moreEntitiesToLoad,
+			edgeEntities,
+			selectedCommunityEdge,
+			clearCurrentSelection,
+		] = useEdgeSelection(dataProvider)
+		const [adjacentCommunities, isAdjacentEntitiesLoading] =
+			useAdjacentCommunityData(dataProvider, isOpen, refresh)
 
-	return (
-		<>
-			{adjacentCommunities && adjacentCommunities.length > 0 ? (
-				<>
-					<Spacer style={colorStyle} className={'neighbor-expander-button'}>
-						{isOpen ? (
-							<TableExpander
+		return (
+			<>
+				{adjacentCommunities && adjacentCommunities.length > 0 ? (
+					<>
+						<Spacer style={colorStyle} className={'neighbor-expander-button'}>
+							{isOpen ? (
+								<TableExpander
+									isOpen={edgeListOpen}
+									handleButtonClick={edgeExpanderClick}
+									styles={styles?.neighborExpandButton}
+								/>
+							) : null}
+						</Spacer>
+						<Content style={edgeContentStyle}>
+							<CommunityEdgeList
+								edges={adjacentCommunities}
+								selectedEdge={selectedCommunityEdge}
+								onEdgeClick={setEdgeSelection}
+								clearCurrentSelection={clearCurrentSelection}
 								isOpen={edgeListOpen}
-								handleButtonClick={edgeExpanderClick}
-								styles={styles?.neighborExpandButton}
-							/>
-						) : null}
-					</Spacer>
-					<Content style={edgeContentStyle}>
-						<CommunityEdgeList
-							edges={adjacentCommunities}
-							selectedEdge={selectedCommunityEdge}
-							onEdgeClick={setEdgeSelection}
-							clearCurrentSelection={clearCurrentSelection}
-							isOpen={edgeListOpen}
-							styles={styles}
-						/>
-					</Content>
-				</>
-			) : null}
-			{isAdjacentEntitiesLoading || edgeEntities?.length > 0 ? (
-				<>
-					<Spacer style={colorStyle} className={'neighbor-expander-button'}>
-						{isOpen ? (
-							<TableExpander
-								isOpen={edgeEntitiesOpen}
-								handleButtonClick={edgeEntitiesExpanderClick}
-								styles={styles?.neighborExpandButton}
+								styles={styles}
 							/>
-						) : null}
-					</Spacer>
-					<Content style={edgeEntitiesContentStyle}>
-						{edgeEntities?.length > 0 && edgeEntitiesOpen ? (
-							<ScrollArea
-								loadMore={loadMoreEntities}
-								hasMore={moreEntitiesToLoad}
-							>
-								<CommunityTable
-									entities={edgeEntities}
-									communityId={selectedCommunityEdge?.communityId}
-									visibleColumns={visibleColumns}
-									styles={styles}
-									minimize={minimizeColumns}
+						</Content>
+					</>
+				) : null}
+				{isAdjacentEntitiesLoading || edgeEntities?.length > 0 ? (
+					<>
+						<Spacer style={colorStyle} className={'neighbor-expander-button'}>
+							{isOpen ? (
+								<TableExpander
+									isOpen={edgeEntitiesOpen}
+									handleButtonClick={edgeEntitiesExpanderClick}
+									styles={styles?.neighborExpandButton}
 								/>
-							</ScrollArea>
-						) : null}
-						{isAdjacentEntitiesLoading ? (
-							<Spinner label={ENTITY_LOADER_MSG} />
-						) : null}
-					</Content>
-				</>
-			) : null}
-		</>
-	)
-}
+							) : null}
+						</Spacer>
+						<Content style={edgeEntitiesContentStyle}>
+							{edgeEntities?.length > 0 && edgeEntitiesOpen ? (
+								<ScrollArea
+									loadMore={loadMoreEntities}
+									hasMore={moreEntitiesToLoad}
+								>
+									<CommunityTable
+										entities={edgeEntities}
+										communityId={selectedCommunityEdge?.communityId}
+										visibleColumns={visibleColumns}
+										styles={styles}
+										minimize={minimizeColumns}
+										selections={selections}
+										onSelectionChange={onSelectionChange}
+									/>
+								</ScrollArea>
+							) : null}
+							{isAdjacentEntitiesLoading ? (
+								<Spinner label={ENTITY_LOADER_MSG} />
+							) : null}
+						</Content>
+					</>
+				) : null}
+			</>
+		)
+	}
 const Content = styled.div`
 	overflow-y: auto;
 	transition: height 0.2s;

packages/hierarchy-browser/src/CommunityCard/CommunityCard.tsx

@@ -3,9 +3,14 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Spinner } from '@fluentui/react'
-import React, { memo, useMemo } from 'react'
+import React, { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
-import { ILoadNeighborCommunities, ISettings } from '..'
+import {
+	EntityId,
+	ILoadNeighborCommunities,
+	IOnSelectionChange,
+	ISettings,
+} from '..'
 import { EmptyEntityList } from '../EntityItem/EmptyEntityList'
 import { ScrollArea } from '../ScollArea'
 import { CommunityDataProvider } from '../common/dataProviders'
@@ -26,6 +31,8 @@ export interface ICommunityCardProps {
 	settings: ISettings
 	dataProvider: CommunityDataProvider
 	toggleUpdate: boolean
+	selections?: EntityId[]
+	onSelectionChange?: IOnSelectionChange
 }
 
 const ENTITY_LOADER_MSG = 'Fetching entity data...'
@@ -40,6 +47,8 @@ export const CommunityCard: React.FC<ICommunityCardProps> = memo(
 		settings,
 		dataProvider,
 		toggleUpdate,
+		selections,
+		onSelectionChange,
 	}: ICommunityCardProps) {
 		const {
 			isOpen: isOpenProp,
@@ -69,6 +78,23 @@ export const CommunityCard: React.FC<ICommunityCardProps> = memo(
 			[isLoading],
 		)
 
+		const handleEntityClick = useCallback(
+			(entiyId: EntityId) => {
+				if (onSelectionChange) {
+					const currentSelection = selections || []
+					const deduped = new Set(currentSelection)
+					if (deduped.has(entiyId)) {
+						deduped.delete(entiyId)
+						onSelectionChange(Array.from(deduped))
+					} else {
+						deduped.add(entiyId)
+						onSelectionChange(Array.from(deduped))
+					}
+				}
+			},
+			[onSelectionChange, selections],
+		)
+
 		return (
 			<Container>
 				<CommunityOverview
@@ -94,6 +120,8 @@ export const CommunityCard: React.FC<ICommunityCardProps> = memo(
 									visibleColumns={visibleColumns}
 									styles={styles?.table}
 									minimize={minimizeColumns}
+									selections={selections}
+									onSelectionChange={handleEntityClick}
 								/>
 							</ScrollArea>
 						) : null}
@@ -111,6 +139,8 @@ export const CommunityCard: React.FC<ICommunityCardProps> = memo(
 						visibleColumns={visibleColumns}
 						minimizeColumns={minimizeColumns}
 						refresh={toggleUpdate}
+						selections={selections}
+						onSelectionChange={handleEntityClick}
 					/>
 				</Flex>
 			</Container>

packages/hierarchy-browser/src/CommunityCard/CommunityOverview.tsx

@@ -64,9 +64,8 @@ export const CommunityOverview: React.FC<ICommunityOverviewProps> = memo(
 			buttonStyle,
 		] = useOverviewStyles(styles)
 
-		const { showLevel, showMembership, showFilter, showExport } = useControls(
-			controls,
-		)
+		const { showLevel, showMembership, showFilter, showExport } =
+			useControls(controls)
 		const communityText = useCommunityText(communityId)
 
 		const handleFilterChange = useCallback(
@@ -193,7 +192,7 @@ const FlexyContainer = styled.div`
 const Grid = styled.div`
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
-	grid-column-gap: 5;
+	grid-column-gap: 8;
 	grid-row-gap: 1;
 	width: 100%;
 `

packages/hierarchy-browser/src/CommunityCard/CommunityTable.tsx

@@ -3,21 +3,28 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Text } from '@fluentui/react'
-import React, { memo, useMemo } from 'react'
+import React, { memo, useMemo , useCallback } from 'react'
 import styled from 'styled-components'
-import { CommunityId, IEntityDetail } from '..'
 import { EntityItem } from '../EntityItem/EntityItem'
 import { textStyle } from '../common/styles'
-
 import { useTableStyles } from '../hooks/useStyles'
-import { ITableSettings } from '../types'
+import {
+	CommunityId,
+	ITableSettings,
+	EntityId,
+	IEntityDetail,
+	IOnSelectionChange,
+} from '../types'
+
 
 export interface ICommunityTableProps {
 	entities: IEntityDetail[]
 	styles?: ITableSettings
 	communityId?: CommunityId
 	visibleColumns?: string[]
 	minimize?: boolean
+	selections?: EntityId[]
+	onSelectionChange: (id: EntityId) => void
 }
 
 export const CommunityTable: React.FC<ICommunityTableProps> = memo(
@@ -27,7 +34,14 @@ export const CommunityTable: React.FC<ICommunityTableProps> = memo(
 		styles,
 		communityId,
 		visibleColumns,
+		selections,
+		onSelectionChange,
 	}: ICommunityTableProps) {
+		const isSelected = useCallback(
+			(entity: IEntityDetail): boolean | undefined =>
+				selections && selections.includes(entity.id),
+			[selections],
+		)
 		const attrKeys: string[] = useMemo(() => {
 			if (visibleColumns) {
 				return visibleColumns
@@ -37,6 +51,7 @@ export const CommunityTable: React.FC<ICommunityTableProps> = memo(
 			}
 			return Object.keys(entities[0].attrs)
 		}, [entities, minimize, visibleColumns])
+
 		const [
 			headerVariant,
 			subheaderVariant,
@@ -85,6 +100,8 @@ export const CommunityTable: React.FC<ICommunityTableProps> = memo(
 							attrs={attrKeys}
 							index={i}
 							styles={styles}
+							selected={isSelected(entity)}
+							onEntityClick={onSelectionChange}
 						/>
 					))}
 				</TableBody>
@@ -110,6 +127,7 @@ const Bold = styled.div`
 
 const Table = styled.table`
 	width: 100%;
+	border-collapse: collapse;
 `
 const HeaderCell = styled.th`
 	width: 16%;