Render title

frontend/models/combinedDefinition.ts

@@ -1,6 +1,6 @@
 export type CombinedDefinition = {
   ids: number[]
-  title: string
+  titles: string[]
   dot: string
   sources: Array<{ sourceName: string }>
 }

frontend/pages/Home/Show.tsx

@@ -22,18 +22,20 @@ export const Show: React.FC = () => {
           <DefinitionList selectedDefinitionIds={selectedDefinitionIds} setSelectedDefinitionIds={setSelectedDefinitionIds} />
         </StyledAside>
         <StyledSection>
-          <StyledStack>
-            {isLoading ? (
+          {isLoading ? (
+            <CenterStack>
               <Loading text="Loading..." alt="Loading" />
-            ) : !combinedDefinition ? (
+            </CenterStack>
+          ) : !combinedDefinition ? (
+            <CenterStack>
               <p>No data</p>
-            ) : (
-              <>
-                <StyledDefinitionGraph combinedDefinition={combinedDefinition} />
-                <StyledDefinitionSources combinedDefinition={combinedDefinition} />
-              </>
-            )}
-          </StyledStack>
+            </CenterStack>
+          ) : (
+            <StyledStack>
+              <DefinitionGraph combinedDefinition={combinedDefinition} />
+              <StyledDefinitionSources combinedDefinition={combinedDefinition} />
+            </StyledStack>
+          )}
         </StyledSection>
       </StyledSidebar>
     </Wrapper>
@@ -65,14 +67,16 @@ const StyledSection = styled(Section)`
   height: inherit;
 `
 
-const StyledStack = styled(Stack)`
+const CenterStack = styled(Stack)`
   display: flex;
   flex-direction: row;
   height: inherit;
   justify-content: center;
 `
 
-const StyledDefinitionGraph = styled(DefinitionGraph)`
+const StyledStack = styled(Stack)`
+  display: flex;
+  flex-direction: row;
   height: inherit;
 `
 

frontend/pages/Home/components/DefinitionGraph/DefinitionGraph.tsx

@@ -1,5 +1,8 @@
 import { FC, useEffect, useState } from 'react'
+import styled from 'styled-components'
 
+import { Heading, LineClamp, Section, Text } from '@/components/ui'
+import { color } from '@/constants/theme'
 import { CombinedDefinition } from '@/models/combinedDefinition'
 import { renderDot } from '@/utils/renderDot'
 
@@ -25,5 +28,41 @@ export const DefinitionGraph: FC<Props> = ({ combinedDefinition }) => {
     loadSvg()
   }, [combinedDefinition.dot, setSvg])
 
-  return <ScrollableSvg svg={svg} />
+  return (
+    <WrapperSection>
+      <FixedHeightHeading type="sectionTitle">
+        <LineClamp>
+          {combinedDefinition.titles.map((title, index) => (
+            <BlockText key={index} size="XXS">
+              {title}
+            </BlockText>
+          ))}
+        </LineClamp>
+      </FixedHeightHeading>
+      <FlexHeightSvgWrapper>
+        <ScrollableSvg svg={svg} />
+      </FlexHeightSvgWrapper>
+    </WrapperSection>
+  )
 }
+
+const WrapperSection = styled(Section)`
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  flex-grow: 1;
+`
+
+const FixedHeightHeading = styled(Heading)`
+  min-height: 60px;
+  overflow: scroll;
+  border-bottom: ${color.BORDER} 1px solid;
+`
+
+const FlexHeightSvgWrapper = styled.div`
+  height: calc(100% - 60px);
+`
+
+const BlockText = styled(Text)`
+  display: block;
+`

frontend/pages/Home/components/DefinitionGraph/ScrollableSvg.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useCallback, useState } from 'react'
 import { ReactSVGPanZoom, TOOL_PAN } from 'react-svg-pan-zoom'
 import { ReactSvgPanZoomLoader } from 'react-svg-pan-zoom-loader'
 import styled from 'styled-components'
@@ -13,6 +13,11 @@ type Props = {
 
 const extractSvgSize = (svg: string) => {
   const html: SVGElement = new DOMParser().parseFromString(svg, 'text/html').body.querySelector('svg')!
+
+  if (html === null) {
+    return { width: 0, height: 0 }
+  }
+
   const width = parseInt(html.getAttribute('width')!.replace(/pt/, ''), 10)!
   const height = parseInt(html.getAttribute('height')!.replace(/pt/, ''), 10)!
 
@@ -24,16 +29,23 @@ export const ScrollableSvg: FC<Props> = ({ svg }) => {
   const [value, setValue] = useState<Value>({} as Value) // NOTE: react-svg-pan-zoom supported blank object as a initial value. but types is not supported.
   const [tool, setTool] = useState<Tool>(TOOL_PAN)
 
-  if (!svg) return null
-
   const svgSize = extractSvgSize(svg)
 
+  const fitToViewerOnMount = useCallback((node: ReactSVGPanZoom) => {
+    if (node) {
+      node.fitToViewer('center', 'top')
+    }
+  }, [])
+
+  if (!svg) return null
+
   return (
     <Wrapper ref={observeRef}>
       <ReactSvgPanZoomLoader
         svgXML={svg}
         render={(content) => (
           <ReactSVGPanZoom
+            ref={fitToViewerOnMount}
             background="white"
             width={size.width ?? 1000}
             height={size.height ?? 1000}

frontend/repositories/combinedDefinitionRepository.ts

@@ -8,7 +8,7 @@ import { get } from './httpRequest'
 
 type CombinedDefinitionReponse = {
   bit_id: string
-  title: string
+  titles: string[]
   dot: string
   sources: Array<{
     source_name: string
@@ -20,7 +20,7 @@ const fetchDefinitionShow = async (requestPath: string): Promise<CombinedDefinit
 
   return {
     ids: bitIdToIds(BigInt(response.bit_id)),
-    title: response.title,
+    titles: response.titles,
     dot: response.dot,
     sources: response.sources.map((source) => ({
       sourceName: source.source_name,

frontend/types/react-svg-pan-zoom.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { ReactSVGPanZoom as original } from 'react-svg-pan-zoom'
+
+declare module 'react-svg-pan-zoom' {
+  interface ReactSVGPanZoom {
+    // @types/react-svg-pan-zoom is not supported alignX and alignY
+    fitToViewer(alignX: 'left' | 'center' | 'right', alignY: 'top' | 'center' | 'bottom'): void
+  }
+}

lib/diver_down/web/action.rb

@@ -87,12 +87,22 @@ def combine_definitions(bit_id)
           @store.key?(_1)
         end
 
-        definition = fetch_definition(valid_ids)
+        definition, titles = case valid_ids.length
+                             when 0
+                               return not_found
+                             when 1
+                               definition = @store.get(ids[0])
+                               [definition, [definition.title]]
+                             else
+                               definitions = valid_ids.map { @store.get(_1) }
+                               definition = DiverDown::Definition.combine(definition_group: nil, title: 'combined', definitions:)
+                               [definition, definitions.map(&:title)]
+                             end
 
         if definition
           json(
+            titles:,
             bit_id: DiverDown::Web::BitId.ids_to_bit_id(valid_ids).to_s,
-            title: definition.title,
             dot: DiverDown::Web::DefinitionToDot.new(definition).to_s,
             sources: definition.sources.map { { source_name: _1.source_name } }
           )
@@ -216,11 +226,6 @@ def fetch_definition(ids)
         end
       end
 
-      def combine_ids_definitions(ids)
-        definitions = ids.map { @store.get(_1) }
-        DiverDown::Definition.combine(definition_group: nil, title: 'combined', definitions:)
-      end
-
       def json(data)
         [200, { 'content-type' => 'application/json' }, [data.to_json]]
       end