Fix /modules

frontend/constants/path.ts

@@ -32,7 +32,7 @@ export const path = {
     },
     modules: {
       index: () => '/api/modules.json',
-      show: (moduleName: string) => `/api/modules/${moduleName}.json`,
+      show: (moduleNames: string[]) => `/api/modules/${moduleNames.join('/')}.json`,
     },
   },
 }

frontend/main.tsx

@@ -19,7 +19,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
           <Route path={path.sources.index()} element={<SourceIndex />} />
           <Route path={path.sources.show(':sourceName')} element={<SourceShow />} />
           <Route path={path.modules.index()} element={<ModuleIndex />} />
-          <Route path={path.modules.show([':moduleName+'])} element={<ModuleShow />} />
+          <Route path={path.modules.show(['*'])} element={<ModuleShow />} />
           <Route path={path.licenses.index()} element={<LicenseIndex />} />
           <Route path="*" element={<NotFound />} />
         </Route>

frontend/models/module.ts

@@ -3,7 +3,9 @@ export type Module = {
 }
 
 export type SpecificModule = {
-  moduleName: string
+  modules: Array<{
+    moduleName: string
+  }>
   sources: Array<{
     sourceName: string
   }>

frontend/pages/Home/components/DefinitionSources/DefinitionSources.tsx

@@ -2,27 +2,13 @@ import { FC, useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
 import { Link } from '@/components/Link'
-import {
-  Aside,
-  Button,
-  Cluster,
-  EmptyTableBody,
-  FaPencilIcon,
-  FaXmarkIcon,
-  Table,
-  TableReel,
-  Td,
-  Text,
-  Th,
-} from '@/components/ui'
+import { Aside, Button, Cluster, EmptyTableBody, FaPencilIcon, Table, TableReel, Td, Text, Th } from '@/components/ui'
 import { path } from '@/constants/path'
 import { color } from '@/constants/theme'
 import { CombinedDefinition } from '@/models/combinedDefinition'
 
 import { SourceModulesComboBox } from '../SourceModulesComboBox'
 
-import type { DialogProps } from '../dialog'
-
 type Props = {
   combinedDefinition: CombinedDefinition
   mutateCombinedDefinition: () => void

frontend/pages/Modules/Show.tsx

@@ -13,8 +13,8 @@ import { encode, idsToBitId } from '@/utils/bitId'
 import { stringify } from '@/utils/queryString'
 
 export const Show: React.FC = () => {
-  const moduleName = useParams().moduleName ?? ''
-  const { specificModule, isLoading } = useModule(moduleName)
+  const pathModules = (useParams()['*'] ?? '').split('/')
+  const { data: specificModule, isLoading } = useModule(pathModules)
 
   const relatedDefinitionIds = useMemo(() => {
     if (specificModule) {
@@ -27,7 +27,18 @@ export const Show: React.FC = () => {
   return (
     <StyledSection>
       <Stack>
-        <Heading type="screenTitle">{moduleName}</Heading>
+        <Heading type="screenTitle">
+          <Cluster>
+            <Link to={path.modules.index()}>Module List</Link>
+            &gt;
+            {pathModules.map((moduleName, index) => (
+              <React.Fragment key={index}>
+                {index !== 0 && <Text> / </Text>}
+                <Link to={path.modules.show(pathModules.slice(0, index + 1))}>{moduleName}</Link>
+              </React.Fragment>
+            ))}
+          </Cluster>
+        </Heading>
 
         <Section>
           {specificModule && !isLoading ? (

frontend/repositories/moduleRepository.ts

@@ -19,7 +19,9 @@ export const useModules = () => {
 }
 
 type SpecificModuleResponse = {
-  module_name: string
+  modules: Array<{
+    module_name: string
+  }>
   related_definitions: Array<{
     id: number
     title: string
@@ -29,16 +31,18 @@ type SpecificModuleResponse = {
   }>
 }
 
-export const useModule = (moduleName: string) => {
-  const { data, isLoading } = useSWR<SpecificModule>(path.api.modules.show(moduleName), async (): Promise<SpecificModule> => {
-    const response = await get<SpecificModuleResponse>(path.api.modules.show(moduleName))
+export const useModule = (moduleNames: string[]) => {
+  const { data, isLoading } = useSWR<SpecificModule>(path.api.modules.show(moduleNames), async (): Promise<SpecificModule> => {
+    const response = await get<SpecificModuleResponse>(path.api.modules.show(moduleNames))
 
     return {
-      moduleName: response.module_name,
+      modules: response.modules.map((mod) => ({
+        moduleName: mod.module_name,
+      })),
       sources: response.sources.map((source) => ({ sourceName: source.source_name })),
       relatedDefinitions: response.related_definitions.map((definition) => ({ id: definition.id, title: definition.title })),
     }
   })
 
-  return { specificModule: data, isLoading }
+  return { data, isLoading }
 }

lib/diver_down/web.rb

@@ -49,9 +49,9 @@ def call(env)
         action.sources
       in ['GET', %r{\A/api/modules\.json\z}]
         action.modules
-      in ['GET', %r{\A/api/modules/(?<module_name>.+)\.json\z}]
-        module_name = Regexp.last_match[:module_name]
-        action.module(module_name)
+      in ['GET', %r{\A/api/modules/(?<module_names>.+)\.json\z}]
+        module_names = Regexp.last_match[:module_names].split('/')
+        action.module(module_names)
       in ['GET', %r{\A/api/definitions/(?<bit_id>\d+)\.json\z}]
         bit_id = Regexp.last_match[:bit_id].to_i
         compound = request.params['compound'] == '1'

lib/diver_down/web/action.rb

@@ -68,18 +68,18 @@ def modules
       end
 
       # GET /api/modules/:module_name.json
-      # @param module_name [String]
-      def module(module_name)
+      # @param module_names [Array<String>]
+      def module(module_names)
         # Hash{ DiverDown::Definition::Modulee => Set<Integer> }
         related_definition_store_ids = Set.new
         source_names = Set.new
 
         # rubocop:disable Style/HashEachMethods
         @store.each do |_, definition|
           definition.sources.each do |source|
-            modules = @module_store.get(source.source_name)
+            source_module_names = @module_store.get(source.source_name)
 
-            next if modules.none? { _1 == module_name }
+            next unless source_module_names[0..module_names.size - 1] == module_names
 
             source_names.add(source.source_name)
             related_definition_store_ids.add(definition.store_id)
@@ -94,7 +94,11 @@ def module(module_name)
         related_definitions = related_definition_store_ids.map { @store.get(_1) }
 
         json(
-          module_name:,
+          modules: module_names.map do
+            {
+              module_name: _1,
+            }
+          end,
           sources: source_names.sort.map do |source_name|
             {
               source_name:,

spec/diver_down/web_spec.rb

@@ -341,23 +341,59 @@ def assert_source(source, expected_ids)
       )
 
       ids = store.set(definition_1, definition_2)
-      module_store.set('a.rb', ['A', 'B'])
+      module_store.set('a.rb', ['A'])
+      module_store.set('b.rb', ['A', 'B'])
 
       get '/api/modules/A.json'
 
       expect(last_response.status).to eq(200)
       expect(JSON.parse(last_response.body)).to eq({
-        'module_name' => 'A',
+        'modules' => [
+          {
+            'module_name' => 'A',
+          },
+        ],
         'sources' => [
           {
             'source_name' => 'a.rb',
           },
+          {
+            'source_name' => 'b.rb',
+          },
         ],
         'related_definitions' => [
           {
             'id' => ids[0],
             'title' => 'title',
           },
+          {
+            'id' => ids[1],
+            'title' => 'title 2',
+          },
+        ],
+      })
+
+      get '/api/modules/A/B.json'
+
+      expect(last_response.status).to eq(200)
+      expect(JSON.parse(last_response.body)).to eq({
+        'modules' => [
+          {
+            'module_name' => 'A',
+          }, {
+            'module_name' => 'B',
+          },
+        ],
+        'sources' => [
+          {
+            'source_name' => 'b.rb',
+          },
+        ],
+        'related_definitions' => [
+          {
+            'id' => ids[1],
+            'title' => 'title 2',
+          },
         ],
       })
     end