feat/COMPASS-9656 add field selected state and field click handler (#112)

Author: Anemy

src/components/canvas/canvas.tsx

@@ -21,6 +21,7 @@ import { MarkerList } from '@/components/markers/marker-list';
 import { ConnectionLine } from '@/components/line/connection-line';
 import { convertToExternalNode, convertToExternalNodes, convertToInternalNodes } from '@/utilities/convert-nodes';
 import { convertToExternalEdge, convertToExternalEdges, convertToInternalEdges } from '@/utilities/convert-edges';
+import { FieldSelectionProvider } from '@/hooks/use-field-selection';
 
 const MAX_ZOOM = 3;
 const MIN_ZOOM = 0.1;
@@ -56,6 +57,7 @@ export const Canvas = ({
   edges: externalEdges,
   onConnect,
   id,
+  onFieldClick,
   onNodeContextMenu,
   onNodeDrag,
   onNodeDragStop,
@@ -139,40 +141,42 @@ export const Canvas = ({
   );
 
   return (
-    <ReactFlowWrapper>
-      <ReactFlow
-        id={id}
-        deleteKeyCode={null}
-        proOptions={PRO_OPTIONS}
-        maxZoom={MAX_ZOOM}
-        minZoom={MIN_ZOOM}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        nodes={nodes}
-        onlyRenderVisibleElements={true}
-        edges={edges}
-        connectionLineComponent={ConnectionLine}
-        connectionMode={ConnectionMode.Loose}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        selectionMode={SelectionMode.Partial}
-        nodesDraggable={true}
-        onConnect={onConnect}
-        onNodeContextMenu={_onNodeContextMenu}
-        onNodeDrag={_onNodeDrag}
-        onNodeDragStop={_onNodeDragStop}
-        onSelectionDragStop={_onSelectionDragStop}
-        onEdgeClick={_onEdgeClick}
-        onNodeClick={_onNodeClick}
-        onSelectionContextMenu={_onSelectionContextMenu}
-        onSelectionChange={_onSelectionChange}
-        {...rest}
-      >
-        <MarkerList />
-        <Background id={id} />
-        <Controls title={title} />
-        <MiniMap />
-      </ReactFlow>
-    </ReactFlowWrapper>
+    <FieldSelectionProvider onFieldClick={onFieldClick}>
+      <ReactFlowWrapper>
+        <ReactFlow
+          id={id}
+          deleteKeyCode={null}
+          proOptions={PRO_OPTIONS}
+          maxZoom={MAX_ZOOM}
+          minZoom={MIN_ZOOM}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          nodes={nodes}
+          onlyRenderVisibleElements={true}
+          edges={edges}
+          connectionLineComponent={ConnectionLine}
+          connectionMode={ConnectionMode.Loose}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          selectionMode={SelectionMode.Partial}
+          nodesDraggable={true}
+          onConnect={onConnect}
+          onNodeContextMenu={_onNodeContextMenu}
+          onNodeDrag={_onNodeDrag}
+          onNodeDragStop={_onNodeDragStop}
+          onSelectionDragStop={_onSelectionDragStop}
+          onEdgeClick={_onEdgeClick}
+          onNodeClick={_onNodeClick}
+          onSelectionContextMenu={_onSelectionContextMenu}
+          onSelectionChange={_onSelectionChange}
+          {...rest}
+        >
+          <MarkerList />
+          <Background id={id} />
+          <Controls title={title} />
+          <MiniMap />
+        </ReactFlow>
+      </ReactFlowWrapper>
+    </FieldSelectionProvider>
   );
 };

src/components/diagram.stories.tsx

@@ -5,6 +5,7 @@ import { EMPLOYEE_TERRITORIES_NODE, EMPLOYEES_NODE, ORDERS_NODE } from '@/mocks/
 import { EMPLOYEES_TO_EMPLOYEES_EDGE, ORDERS_TO_EMPLOYEES_EDGE } from '@/mocks/datasets/edges';
 import { DiagramStressTestDecorator } from '@/mocks/decorators/diagram-stress-test.decorator';
 import { DiagramConnectableDecorator } from '@/mocks/decorators/diagram-connectable.decorator';
+import { DiagramSelectableFieldsDecorator } from '@/mocks/decorators/diagram-selectable-fields.decorator';
 
 const diagram: Meta<typeof Diagram> = {
   title: 'Diagram',
@@ -33,6 +34,54 @@ export const DiagramWithConnectableNodes: Story = {
   },
 };
 
+let idAccumulator: string[];
+let lastDepth = 0;
+// Used to build a string array id based on field depth.
+function idFromDepthAccumulator(name: string, depth?: number) {
+  if (!depth) {
+    idAccumulator = [name];
+  } else if (depth > lastDepth) {
+    idAccumulator.push(name);
+  } else if (depth === lastDepth) {
+    idAccumulator[idAccumulator.length - 1] = name;
+  } else {
+    idAccumulator = idAccumulator.slice(0, depth);
+    idAccumulator[depth] = name;
+  }
+  lastDepth = depth ?? 0;
+  return [...idAccumulator];
+}
+export const DiagramWithSelectableFields: Story = {
+  decorators: [DiagramSelectableFieldsDecorator],
+  args: {
+    title: 'MongoDB Diagram',
+    isDarkMode: true,
+    edges: [],
+    nodes: [
+      {
+        ...ORDERS_NODE,
+        fields: [
+          ...ORDERS_NODE.fields.map(field => ({
+            ...field,
+            id: idFromDepthAccumulator(field.name, field.depth),
+            selectable: true,
+          })),
+        ],
+      },
+      {
+        ...EMPLOYEES_NODE,
+        fields: [
+          ...EMPLOYEES_NODE.fields.map(field => ({
+            ...field,
+            id: idFromDepthAccumulator(field.name, field.depth),
+            selectable: true,
+          })),
+        ],
+      },
+    ],
+  },
+};
+
 export const DiagramStressTest: Story = {
   decorators: [DiagramStressTestDecorator],
   args: {

src/components/field/field-list.tsx

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import { Field } from '@/components/field/field';
 import { NodeField, NodeType } from '@/types';
 import { DEFAULT_PREVIEW_GROUP_AREA, getPreviewGroupArea, getPreviewId } from '@/utilities/get-preview-group-area';
 import { DEFAULT_FIELD_PADDING } from '@/utilities/constants';
+import { useFieldSelection } from '@/hooks/use-field-selection';
+import { getSelectedFieldGroupHeight, getSelectedId } from '@/utilities/get-selected-field-group-height';
 
 const NodeFieldWrapper = styled.div`
   padding: ${DEFAULT_FIELD_PADDING}px ${spacing[400]}px;
@@ -14,21 +17,29 @@ const NodeFieldWrapper = styled.div`
 interface Props {
   nodeType: NodeType;
   isHovering?: boolean;
+  nodeId: string;
   fields: NodeField[];
 }
 
-export const FieldList = ({ fields, nodeType, isHovering }: Props) => {
+export const FieldList = ({ fields, nodeId, nodeType, isHovering }: Props) => {
+  const { enabled: isFieldSelectionEnabled } = useFieldSelection();
+
   const spacing = Math.max(0, ...fields.map(field => field.glyphs?.length || 0));
-  const previewGroupArea = getPreviewGroupArea(fields);
+  const previewGroupArea = useMemo(() => getPreviewGroupArea(fields), [fields]);
+  const selectedGroupHeight = useMemo(() => {
+    return isFieldSelectionEnabled ? getSelectedFieldGroupHeight(fields) : undefined;
+  }, [fields, isFieldSelectionEnabled]);
   return (
     <NodeFieldWrapper>
       {fields.map(({ name, type: fieldType, ...rest }, i) => (
         <Field
           key={i}
           name={name}
+          nodeId={nodeId}
           nodeType={nodeType}
           isHovering={isHovering}
           previewGroupArea={previewGroupArea[getPreviewId(i, name)] || DEFAULT_PREVIEW_GROUP_AREA}
+          selectedGroupHeight={selectedGroupHeight?.[getSelectedId(i, name)]}
           type={fieldType}
           spacing={spacing}
           {...rest}

src/components/field/field.test.tsx

@@ -2,13 +2,21 @@ import { palette } from '@leafygreen-ui/palette';
 import { ComponentProps } from 'react';
 
 import { render, screen } from '@/mocks/testing-utils';
-import { Field } from '@/components/field/field';
+import { Field as FieldComponent } from '@/components/field/field';
 import { DEFAULT_PREVIEW_GROUP_AREA } from '@/utilities/get-preview-group-area';
+import { FieldSelectionProvider } from '@/hooks/use-field-selection';
+
+const Field = (props: React.ComponentProps<typeof FieldComponent>) => (
+  <FieldSelectionProvider>
+    <FieldComponent {...props} />
+  </FieldSelectionProvider>
+);
 
 describe('field', () => {
   const DEFAULT_PROPS: ComponentProps<typeof Field> = {
     nodeType: 'collection',
     name: 'ordersId',
+    nodeId: 'pineapple',
     type: 'objectId',
     glyphs: ['key', 'link'],
     previewGroupArea: DEFAULT_PREVIEW_GROUP_AREA,

src/components/field/field.tsx

@@ -4,12 +4,14 @@ import { palette } from '@leafygreen-ui/palette';
 import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { useTheme } from '@emotion/react';
+import { MouseEvent as ReactMouseEvent, useMemo } from 'react';
 
 import { animatedBlueBorder, ellipsisTruncation } from '@/styles/styles';
 import { DEFAULT_DEPTH_SPACING, DEFAULT_FIELD_HEIGHT } from '@/utilities/constants';
 import { FieldDepth } from '@/components/field/field-depth';
 import { NodeField, NodeGlyph, NodeType } from '@/types';
 import { PreviewGroupArea } from '@/utilities/get-preview-group-area';
+import { useFieldSelection } from '@/hooks/use-field-selection';
 
 const FIELD_BORDER_ANIMATED_PADDING = spacing[100];
 const FIELD_GLYPH_SPACING = spacing[400];
@@ -19,12 +21,44 @@ const GlyphToIcon: Record<NodeGlyph, string> = {
   link: 'Link',
 };
 
-const FieldWrapper = styled.div<{ color: string }>`
+const SELECTED_FIELD_BORDER_PADDING = spacing[100];
+
+const FieldWrapper = styled.div<{
+  color: string;
+  selectableHoverBackgroundColor?: string;
+  selectable?: boolean;
+  selected?: boolean;
+  selectedGroupHeight: number;
+}>`
   display: flex;
   align-items: center;
   width: auto;
   height: ${DEFAULT_FIELD_HEIGHT}px;
   color: ${props => props.color};
+  ${props =>
+    props.selectable &&
+    `&:hover {
+    cursor: pointer;
+    background-color: ${props.selectableHoverBackgroundColor};
+    box-shadow: -${spacing[100]}px 0px 0px 0px ${props.selectableHoverBackgroundColor}, ${spacing[100]}px 0px 0px 0px ${props.selectableHoverBackgroundColor};
+  }`}
+  ${props =>
+    props.selected &&
+    `
+    position: relative;
+
+    &::before {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      outline: 2px solid ${palette.blue.base};
+      width: calc(100% + ${SELECTED_FIELD_BORDER_PADDING * 2}px);
+      border-radius: ${spacing[50]}px;
+      height: ${props.selectedGroupHeight * DEFAULT_FIELD_HEIGHT}px;
+      left: -${SELECTED_FIELD_BORDER_PADDING}px;
+      top: 0px;
+    }
+`}
 `;
 
 const InnerFieldWrapper = styled.div<{ width: number }>`
@@ -90,31 +124,56 @@ const IconWrapper = styled(Icon)`
 `;
 
 interface Props extends NodeField {
+  nodeId: string;
   nodeType: NodeType;
   spacing: number;
   isHovering?: boolean;
   previewGroupArea: PreviewGroupArea;
+  selectedGroupHeight?: number;
 }
 
 export const Field = ({
   hoverVariant,
   isHovering = false,
   name,
+  nodeId,
+  id = name,
   depth = 0,
   type,
   nodeType,
   glyphs = [],
+  selectedGroupHeight = 0,
   previewGroupArea,
   glyphSize = LGSpacing[300],
   spacing = 0,
+  selectable = false,
+  selected = false,
   variant,
 }: Props) => {
   const { theme } = useDarkMode();
 
+  const { fieldProps } = useFieldSelection();
+
   const internalTheme = useTheme();
 
   const isDisabled = variant === 'disabled' && !(hoverVariant === 'default' && isHovering);
 
+  const getSelectableHoverBackgroundColor = () => {
+    return fieldSelectionProps?.selectable ? color[theme].background.primary.hover : undefined;
+  };
+
+  /**
+   * Create the field selection props when the field is selectable.
+   */
+  const fieldSelectionProps = useMemo(() => {
+    return selectable && fieldProps
+      ? {
+          selectable: true,
+          onClick: (event: ReactMouseEvent) => fieldProps.onClick(event, { id, nodeId }),
+        }
+      : undefined;
+  }, [fieldProps, selectable, id, nodeId]);
+
   const getTextColor = () => {
     if (isDisabled) {
       return internalTheme.node.disabledColor;
@@ -188,7 +247,13 @@ export const Field = ({
   const previewBorderLeft = `${depth * DEFAULT_DEPTH_SPACING - previewWidthGlyphOffset}px`;
 
   return (
-    <FieldWrapper color={getTextColor()}>
+    <FieldWrapper
+      selected={selected}
+      color={getTextColor()}
+      selectableHoverBackgroundColor={getSelectableHoverBackgroundColor()}
+      selectedGroupHeight={selectedGroupHeight}
+      {...fieldSelectionProps}
+    >
       <InnerFieldWrapper width={spacing}>
         {glyphs.map(glyph => (
           <IconWrapper key={glyph} color={getIconColor(glyph)} glyph={GlyphToIcon[glyph]} size={glyphSize} />