Verified Commit ec3192c5 authored by Marek Veselý's avatar Marek Veselý
Browse files

feat: add detail dialog to cause and effect view

parent ca1a2caa

analyst/src/components/ActionDetailDialog/index.tsx

0 → 100644
+33 −0
Original line number Diff line number Diff line 
import { Dialog, DialogBody } from '@blueprintjs/core'

import { css, cx } from '@emotion/css'

import { dialog, dialogBody } from '@inject/shared'

import type { Dispatch, SetStateAction } from 'react'

import { type FC } from 'react'

import ActionDetail from '../Overview/ActionDetail'



const dialogContainer = css`

  z-index: 2000;

`



interface ActionDetailDialogProps {

  selectedActionLogId?: string

  setSelectedActionLogId: Dispatch<SetStateAction<string | undefined>>

}



export const ActionDetailDialog: FC<ActionDetailDialogProps> = ({

  setSelectedActionLogId,

  selectedActionLogId,

}) => (

  <Dialog

    className={cx(dialogContainer, dialog)}

    isOpen={!!selectedActionLogId}

    onClose={() => setSelectedActionLogId(undefined)}

    title='Action Detail'

  >

    <DialogBody className={dialogBody}>

      {selectedActionLogId && (

        <ActionDetail actionLogId={selectedActionLogId} />

      )}

    </DialogBody>

  </Dialog>

)

analyst/src/components/CauseAndEffectTree/Node.tsx

+13 −2
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ import { Colors } from '@blueprintjs/colors' 
import { Classes } from '@blueprintjs/core'

import { css } from '@emotion/css'

import type { HierarchyNode } from 'd3-hierarchy'

import type { FC } from 'react'

import type { Dispatch, FC, SetStateAction } from 'react'

import type { TreeNode } from '../dataHooks/useActionLogsRoot'

import { NodeDetail } from './NodeDetail'

import { NodeTitle } from './NodeTitle'
@@ -36,9 +36,14 @@ const rectStyles = css` 
interface NodeProps {

  node: HierarchyNode<TreeNode>

  nodeIndex: number

  setSelectedActionLogId: Dispatch<SetStateAction<string | undefined>>

}



export const Node: FC<NodeProps> = ({ node, nodeIndex }) => {

export const Node: FC<NodeProps> = ({

  node,

  nodeIndex,

  setSelectedActionLogId,

}) => {

  const hasDetail = typeof node.data.data !== 'string'

  const totalHeight = MIN_HEIGHT + (hasDetail ? DETAIL_HEIGHT : 0)
@@ -62,6 +67,12 @@ export const Node: FC<NodeProps> = ({ node, nodeIndex }) => { 
        height={totalHeight}

        x={-NODE_WIDTH / 2 + TEXT_PADDING}

        y={-totalHeight / 2}

        cursor={typeof node.data.data !== 'string' ? 'pointer' : undefined}

        onClick={() => {

          if (typeof node.data.data !== 'string') {

            setSelectedActionLogId(node.data.data.id)

          }

        }}

      >

        <div className={internalNode}>

          <NodeTitle nodeData={node.data.data} />

analyst/src/components/CauseAndEffectTree/index.tsx

+31 −14
Original line number Diff line number Diff line
@@ -8,7 +8,8 @@ import { select } from 'd3-selection' 
import type { D3ZoomEvent, ZoomBehavior } from 'd3-zoom'

import { zoom, zoomIdentity } from 'd3-zoom'

import type { FC } from 'react'

import { useEffect, useRef } from 'react'

import { useEffect, useRef, useState } from 'react'

import { ActionDetailDialog } from '../ActionDetailDialog'

import type { TreeNode } from '../dataHooks/useActionLogsRoot'

import useActionLogsRoot from '../dataHooks/useActionLogsRoot'

import { Link } from './Link'
@@ -68,7 +69,12 @@ export const CauseAndEffectTree: FC<CauseAndEffectTreeProps> = ({ teamId }) => { 
    )

  }, [rootNode])



  const [selectedActionLogId, setSelectedActionLogId] = useState<

    string | undefined

  >()



  return (

    <>

      <svg

        ref={svgRef}

        style={{ width: '100%', height: '100%', display: 'block' }}
@@ -78,9 +84,20 @@ export const CauseAndEffectTree: FC<CauseAndEffectTreeProps> = ({ teamId }) => { 
            <Link key={`link-${i}`} link={link} />

          ))}

          {nodes.map((node, nodeIndex) => (

          <Node key={`node-${nodeIndex}`} node={node} nodeIndex={nodeIndex} />

            <Node

              key={`node-${nodeIndex}`}

              node={node}

              nodeIndex={nodeIndex}

              setSelectedActionLogId={setSelectedActionLogId}

            />

          ))}

        </g>

      </svg>



      <ActionDetailDialog

        selectedActionLogId={selectedActionLogId}

        setSelectedActionLogId={setSelectedActionLogId}

      />

    </>

  )

}

analyst/src/components/RoomView/ActionLogChildren.tsx

+8 −20
Original line number Diff line number Diff line 
import { Colors, Dialog, DialogBody } from '@blueprintjs/core'

import { css, cx } from '@emotion/css'

import { Colors } from '@blueprintjs/core'

import { css } from '@emotion/css'

import type { IAnalystActionLogSimple } from '@inject/graphql'

import { dialog, dialogBody, Timestamp } from '@inject/shared'

import { Timestamp } from '@inject/shared'

import { useState, type FC } from 'react'

import { ActionDetailDialog } from '../ActionDetailDialog'

import { ActionLogContent } from '../ActionLogTitle/ActionLogContent'

import { ActionLogIcon } from '../ActionLogTitle/ActionLogIcon'

import { ActionLogPopover } from '../ActionLogTitle/ActionLogPopover'

import ActionDetail from '../Overview/ActionDetail'



const mainContainer = css`

  display: flex;
@@ -32,10 +32,6 @@ const content = css` 
  white-space: nowrap;

`



const dialogContainer = css`

  z-index: 2000;

`



interface ActionLogChildrenProps {

  actionLogs: IAnalystActionLogSimple[]

}
@@ -76,18 +72,10 @@ export const ActionLogChildren: FC<ActionLogChildrenProps> = ({ 
        </ActionLogPopover>

      ))}



      <Dialog

        className={cx(dialogContainer, dialog)}

        isOpen={!!selectedActionLogId}

        onClose={() => setSelectedActionLogId(undefined)}

        title='Action Detail'

      >

        <DialogBody className={dialogBody}>

          {selectedActionLogId && (

            <ActionDetail actionLogId={selectedActionLogId} />

          )}

        </DialogBody>

      </Dialog>

      <ActionDetailDialog

        selectedActionLogId={selectedActionLogId}

        setSelectedActionLogId={setSelectedActionLogId}

      />

    </main>

  )

}