Merge pull request #72 from takahiroanno2024/feature/report-breadcrumb

階層型クラスタリング：選択中の階層をパンくずリストで表示

Author: nanocloudx

scatter/report/components/BroadlisteningGuide.tsx

@@ -5,12 +5,12 @@ import {
   DialogHeader, DialogRoot,
   DialogTrigger
 } from '@/components/ui/dialog'
-import {Button, Heading, Text} from '@chakra-ui/react'
+import {Button, Heading, Image, Text} from '@chakra-ui/react'
 import {CircleHelpIcon} from 'lucide-react'
 
 export function BroadlisteningGuide() {
   return (
-    <DialogRoot size="lg" placement="center" motionPreset="slide-in-bottom">
+    <DialogRoot size="xl" placement="center" motionPreset="slide-in-bottom">
       <DialogTrigger asChild>
         <Button variant={'outline'}>
           <CircleHelpIcon />
@@ -19,11 +19,17 @@ export function BroadlisteningGuide() {
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <Heading as={'h2'} size={'xl'} mb={2} className={'headingColor'}>ブロードリスニングとは？</Heading>
+          <Heading as={'h2'} size={'xl'} className={'headingColor'}>ブロードリスニングとは？</Heading>
           <DialogCloseTrigger />
         </DialogHeader>
         <DialogBody>
-          ブロードリスニングとは「広く声を収集し、収集した声をAI技術で分析・可視化する手法」です。
+          <Text mb={4} fontSize={'md'}>
+            ブロードリスニングとは<b>「広く声を収集し、収集した声をAI技術で分析・可視化する手法」</b>です。
+          </Text>
+          <Image mb={4} src={'/broadlistening.png'} alt={'ブロードリスニングのイメージ'} />
+          <Text>
+            かつてラジオやテレビなど放送技術の発展により、大勢の人に声を届けることが可能になりました。しかし大勢の声を聞くことはできませんでした。2023年ごろから、大規模言語モデルの技術の発展により、大勢の意見を要約し、わかりやすく可視化したりレポートにまとめたりすることが可能になりました。この「大勢の声を聞く技術」のことをブロードリスニングと言います。
+          </Text>
         </DialogBody>
       </DialogContent>
     </DialogRoot>

scatter/report/components/ClientContainer.tsx

@@ -10,6 +10,7 @@ import {LoadingBar} from '@/components/LoadingBar'
 import {FilterSettingDialog} from '@/components/FilterSettingDialog'
 import {ClusterOverview} from '@/components/ClusterOverview'
 import {SelectChartButton} from '@/components/charts/SelectChartButton'
+import {ClusterBreadcrumb} from '@/components/ClusterBreadcrumb'
 
 type Props = {
   resultSize: number
@@ -28,6 +29,7 @@ export function ClientContainer({resultSize, meta, children}: PropsWithChildren<
   const [result, setResult] = useState<Result>()
   const [rootLevel, setRootLevel] = useState(0)
   const [filteredResult, setFilteredResult] = useState<Result>()
+  const [selectedClusters, setSelectedClusters] = useState<Cluster[]>([])
   const [openFilterSetting, setOpenFilterSetting] = useState(false)
   const [selectedChart, setSelectedChart] = useState('scatter')
 
@@ -37,11 +39,11 @@ export function ClientContainer({resultSize, meta, children}: PropsWithChildren<
 
   function onChangeFilter(lv1: string, lv2: string, lv3: string, lv4: string) {
     if (!result) return
-    const filteredClusters = getFilteredClusters(result.clusters || [], lv1, lv2, lv3, lv4)
     setRootLevel(getRootLevel(lv1, lv2, lv3, lv4))
+    setSelectedClusters(getSelectedClusters(result.clusters || [], lv1, lv2, lv3, lv4))
     setFilteredResult({
       ...result,
-      clusters: filteredClusters
+      clusters: getFilteredClusters(result.clusters || [], lv1, lv2, lv3, lv4)
     })
   }
 
@@ -83,12 +85,14 @@ export function ClientContainer({resultSize, meta, children}: PropsWithChildren<
   }
   return (
     <>
-      <FilterSettingDialog
-        result={result}
-        isOpen={openFilterSetting}
-        onClose={() => {setOpenFilterSetting(false)}}
-        onChangeFilter={onChangeFilter}
-      />
+      {openFilterSetting && (
+        <FilterSettingDialog
+          result={result}
+          selectedClusters={selectedClusters}
+          onClose={() => {setOpenFilterSetting(false)}}
+          onChangeFilter={onChangeFilter}
+        />
+      )}
       <Chart
         result={filteredResult}
         rootLevel={rootLevel}
@@ -100,6 +104,10 @@ export function ClientContainer({resultSize, meta, children}: PropsWithChildren<
         onClickSetting={() => {setOpenFilterSetting(true)}}
         isApplyFilter={result.clusters.length !== filteredResult.clusters.length}
       />
+      <ClusterBreadcrumb
+        selectedClusters={selectedClusters}
+        onChangeFilter={onChangeFilter}
+      />
       { rootLevel === 0 && children }
       { rootLevel !== 0 && (
         filteredResult.clusters.filter(c => c.level === rootLevel + 1).map(c => (
@@ -120,6 +128,15 @@ function getRootLevel(level1Id:string, level2Id:string, level3Id:string, level4I
   return 0
 }
 
+function getSelectedClusters(clusters: Cluster[], level1Id:string, level2Id:string, level3Id:string, level4Id:string): Cluster[] {
+  const results: Cluster[] = []
+  if (level1Id !== '0') results.push(clusters.find(c => c.id === level1Id)!)
+  if (level2Id !== '0') results.push(clusters.find(c => c.id === level2Id)!)
+  if (level3Id !== '0') results.push(clusters.find(c => c.id === level3Id)!)
+  if (level4Id !== '0') results.push(clusters.find(c => c.id === level4Id)!)
+  return results
+}
+
 function getFilteredClusters(clusters: Cluster[], level1Id:string, level2Id:string, level3Id:string, level4Id:string): Cluster[] {
   if (level4Id !== '0') {
     const lv1cluster = clusters.find(c => c.id === level1Id)!

scatter/report/components/ClusterBreadcrumb.tsx

@@ -0,0 +1,63 @@
+import {BreadcrumbLink, BreadcrumbRoot} from '@/components/ui/breadcrumb'
+import {Box, Text} from '@chakra-ui/react'
+import {Cluster} from '@/type'
+
+type Props = {
+  selectedClusters: Cluster[]
+  onChangeFilter: (level1: string, level2: string, level3: string, level4: string) => void
+}
+
+export function ClusterBreadcrumb({selectedClusters, onChangeFilter}: Props) {
+
+  function onChange(level: number) {
+    onChangeFilter('0', '0', '0', '0')
+    switch (level) {
+      case 0:
+        onChangeFilter('0', '0', '0', '0')
+        break
+      case 1:
+        onChangeFilter(selectedClusters[0].id, '0', '0', '0')
+        break
+      case 2:
+        onChangeFilter(selectedClusters[0].id, selectedClusters[1].id, '0', '0')
+        break
+      case 3:
+        onChangeFilter(
+          selectedClusters[0].id,
+          selectedClusters[1].id,
+          selectedClusters[2].id,
+          '0'
+        )
+        break
+      case 4:
+        // do nothing.
+        break
+    }
+  }
+
+  if (!selectedClusters.length) return <></>
+  return (
+    <Box mx={'auto'} maxW={'870px'} mb={6} display={{base: 'none', md: 'block'}}>
+      <Text fontSize={'sm'} fontWeight={'bold'}>表示中のクラスター</Text>
+      <BreadcrumbRoot
+        size="lg"
+      >
+        <BreadcrumbLink
+          fontSize={'sm'}
+          w={'30px'}
+          onClick={() => {onChange(0)}}
+          cursor={'pointer'}
+        >全て</BreadcrumbLink>
+        {selectedClusters.map((cluster, i) => (
+          <BreadcrumbLink
+            key={i}
+            fontSize={'sm'}
+            fontWeight={i === selectedClusters.length - 1 ? 'bold' : 'normal'}
+            onClick={() => {onChange(cluster.level)}}
+            cursor={'pointer'}
+          >{cluster.label}</BreadcrumbLink>
+        ))}
+      </BreadcrumbRoot>
+    </Box>
+  )
+}

scatter/report/components/ClusterOverview.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export function ClusterOverview({cluster}: Props) {
   return (
-    <Box mx={'auto'} maxW={'750px'} my={12}>
+    <Box mx={'auto'} maxW={'750px'} mb={12}>
       <Box mb={2}>
         <Heading fontSize={'2xl'} className={'headingColor'} mb={1}>{cluster.label}</Heading>
         <Text fontWeight={'bold'}><Icon mr={1}><MessageSquareIcon size={20} /></Icon>{cluster.value}コメント</Text>

scatter/report/components/FilterSettingDialog.tsx

@@ -1,7 +1,7 @@
 import {Box, Button, Text, VStack} from '@chakra-ui/react'
 import React, {useState} from 'react'
 import {NativeSelectField, NativeSelectRoot} from '@/components/ui/native-select'
-import {Result} from '@/type'
+import {Cluster, Result} from '@/type'
 import {
   DialogBody,
   DialogCloseTrigger,
@@ -15,16 +15,16 @@ import {ChevronDownIcon} from 'lucide-react'
 
 type Props = {
   result: Result
-  isOpen: boolean
+  selectedClusters: Cluster[]
   onClose: () => void
   onChangeFilter: (level1: string, level2: string, level3: string, level4: string) => void
 }
 
-export function FilterSettingDialog({result, isOpen, onClose, onChangeFilter}: Props) {
-  const [level1, setLevel1] = useState<string>('0')
-  const [level2, setLevel2] = useState<string>('0')
-  const [level3, setLevel3] = useState<string>('0')
-  const [level4, setLevel4] = useState<string>('0')
+export function FilterSettingDialog({result, selectedClusters, onClose, onChangeFilter}: Props) {
+  const [level1, setLevel1] = useState<string>(selectedClusters[0]?.id || '0')
+  const [level2, setLevel2] = useState<string>(selectedClusters[1]?.id || '0')
+  const [level3, setLevel3] = useState<string>(selectedClusters[2]?.id || '0')
+  const [level4, setLevel4] = useState<string>(selectedClusters[3]?.id || '0')
 
   function onChangeLevel(level: number, id: string) {
     switch (level) {
@@ -53,9 +53,17 @@ export function FilterSettingDialog({result, isOpen, onClose, onChangeFilter}: P
     onChangeFilter(level1, level2, level3, level4)
     onClose()
   }
+  function onReset() {
+    setLevel1('0')
+    setLevel2('0')
+    setLevel3('0')
+    setLevel4('0')
+    onChangeFilter('0', '0', '0', '0')
+    onClose()
+  }
 
   return (
-    <DialogRoot lazyMount open={isOpen} onOpenChange={onClose}>
+    <DialogRoot lazyMount open={true} onOpenChange={onClose}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>表示クラスター設定</DialogTitle>
@@ -125,6 +133,7 @@ export function FilterSettingDialog({result, isOpen, onClose, onChangeFilter}: P
           )}
         </DialogBody>
         <DialogFooter>
+          <Button variant={'outline'} onClick={onReset}>リセット</Button>
           <Button onClick={onApply}>設定を適用</Button>
         </DialogFooter>
         <DialogCloseTrigger />

scatter/report/components/charts/SelectChartButton.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 export function SelectChartButton({selected, onChange, onClickSetting, isApplyFilter}: Props) {
   return (
-    <HStack w={'100%'} justify={'center'} align={'center'}>
+    <HStack w={'100%'} justify={'center'} align={'center'} mb={10}>
       <RadioCardRoot
         orientation="horizontal"
         align="center"

scatter/report/components/ui/breadcrumb.tsx

@@ -0,0 +1,40 @@
+import { Breadcrumb, type SystemStyleObject } from '@chakra-ui/react'
+import * as React from 'react'
+
+export interface BreadcrumbRootProps extends Breadcrumb.RootProps {
+  separator?: React.ReactNode
+  separatorGap?: SystemStyleObject['gap']
+}
+
+export const BreadcrumbRoot = React.forwardRef<
+  HTMLDivElement,
+  BreadcrumbRootProps
+>(function BreadcrumbRoot(props, ref) {
+  const { separator, separatorGap, children, ...rest } = props
+
+  const validChildren = React.Children.toArray(children).filter(
+    React.isValidElement,
+  )
+
+  return (
+    <Breadcrumb.Root ref={ref} {...rest}>
+      <Breadcrumb.List gap={separatorGap}>
+        {validChildren.map((child, index) => {
+          const last = index === validChildren.length - 1
+          return (
+            <React.Fragment key={index}>
+              <Breadcrumb.Item>{child}</Breadcrumb.Item>
+              {!last && (
+                <Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
+              )}
+            </React.Fragment>
+          )
+        })}
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  )
+})
+
+export const BreadcrumbLink = Breadcrumb.Link
+export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink
+export const BreadcrumbEllipsis = Breadcrumb.Ellipsis