Merge pull request #3 from alpaca-tc/modulee-to-diver_down-web

Module management by diver_down-web

Gemfile.lock

@@ -4,6 +4,7 @@ PATH
     diver_down (0.1.0)
       activesupport (>= 7.0.0)
       msgpack (>= 1.7.0)
+      rack-contrib (>= 2.3.0)
 
 GEM
   remote: https://rubygems.org/
@@ -42,6 +43,8 @@ GEM
       nio4r (~> 2.0)
     racc (1.7.3)
     rack (3.0.9.1)
+    rack-contrib (2.4.0)
+      rack (< 4)
     rack-proxy (0.7.7)
       rack
     rack-test (2.1.0)

config.ru

@@ -3,7 +3,12 @@
 require 'diver_down'
 require 'diver_down/web'
 require 'rack/reloader'
+require 'rack/contrib'
+
+definition_dir = ENV.fetch('DIVER_DOWN_DIR')
+module_store = DiverDown::Web::ModuleStore.new(ENV.fetch('DIVER_DOWN_MODULE_STORE'))
 
 use Rack::Reloader
+use Rack::JSONBodyParser
 use DiverDown::Web::DevServerMiddleware, host: 'localhost', port: 5173 # Proxy to vite(pnpm run dev)
-run DiverDown::Web.new(definition_dir: ENV.fetch('DIVER_DOWN_DIR'))
+run DiverDown::Web.new(definition_dir:, module_store:)

diver_down.gemspec

@@ -27,4 +27,5 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency 'activesupport', '>= 7.0.0'
   spec.add_dependency 'msgpack', '>= 1.7.0'
+  spec.add_dependency 'rack-contrib', '>= 2.3.0'
 end

exe/diver_down_web

@@ -2,11 +2,17 @@
 # frozen_string_literal: true
 
 require 'bundler/setup'
+require 'rack/contrib'
 require 'webrick'
 require 'diver_down'
 require 'diver_down-web'
 
-app = DiverDown::Web.new(definition_dir: ENV.fetch('DIVER_DOWN_DIR'))
+definition_dir = ENV.fetch('DIVER_DOWN_DIR')
+module_store = DiverDown::Web::ModuleStore.new(ENV.fetch('DIVER_DOWN_MODULE_STORE'))
+
+app = Rack::JSONBodyParser.new(
+  DiverDown::Web.new(definition_dir:, module_store:)
+)
 
 begin
   # Rack 2.0

frontend/components/ui/index.ts

@@ -9,7 +9,11 @@ export {
   DefinitionList,
   EmptyTableBody,
   FONT_FAMILY,
+  FaCirclePlusIcon,
   FaGearIcon,
+  FaPencilIcon,
+  FaTrashIcon,
+  FaXmarkIcon,
   FormControl,
   Heading,
   Input,
@@ -21,8 +25,10 @@ export {
   Section,
   SideNav,
   Sidebar,
+  SingleComboBox,
   Stack,
   Table,
+  TableReel,
   Td,
   Text,
   Th,

frontend/constants/path.ts

@@ -11,7 +11,7 @@ export const path = {
   },
   modules: {
     index: () => '/modules',
-    show: (moduleName: string) => `/modules/${moduleName}`,
+    show: (moduleNames: string[]) => `/modules/${moduleNames.join('/')}`,
   },
   licenses: {
     index: () => '/licenses',
@@ -26,10 +26,13 @@ export const path = {
     sources: {
       index: () => '/api/sources.json',
       show: (sourceName: string) => `/api/sources/${sourceName}.json`,
+      modules: {
+        update: (sourceName: string) => `/api/sources/${sourceName}/modules.json`,
+      },
     },
     modules: {
       index: () => '/api/modules.json',
-      show: (moduleName: string) => `/api/modules/${moduleName}.json`,
+      show: (moduleNames: string[]) => `/api/modules/${moduleNames.join('/')}.json`,
     },
   },
 }

frontend/constants/theme.ts

@@ -40,4 +40,13 @@ export const GlobalStyle = createGlobalStyle`
     font-size: ${fontSize.S};
     color: ${color.TEXT_BLACK};
   }
+
+  /* for smarthr-ui */
+  .smarthr-ui-ComboBox-dropdownList {
+    /* Fixed a bug that hover changes the size of item. */
+    button {
+      font-size: ${fontSize.S};
+      line-height: ${leading.NORMAL};
+    }
+  }
 `

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/combinedDefinition.ts

@@ -7,6 +7,7 @@ type BaseDotMetadata = {
 type DotSourceMetadata = {
   type: 'source'
   sourceName: string
+  modules: Module[]
 } & BaseDotMetadata
 
 type DotDependencyMetadata = {
@@ -21,7 +22,7 @@ type DotDependencyMetadata = {
 
 type DotModuleMetadata = {
   type: 'module'
-  moduleName: string
+  modules: Module[]
 } & BaseDotMetadata
 
 export type DotMetadata = DotSourceMetadata | DotDependencyMetadata | DotModuleMetadata

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/Show.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
 import { Loading } from '@/components/Loading'
@@ -8,21 +8,30 @@ import { useBitIdHash } from '@/hooks/useBitIdHash'
 import { useLocalStorage } from '@/hooks/useLocalStorage'
 import { useCombinedDefinition } from '@/repositories/combinedDefinitionRepository'
 
-import { DefinitionGraph, GraphOptions } from './components/DefinitionGraph'
+import { GraphOptions } from './components/ConfigureGraphOptionsDialog'
+import { DefinitionGraph } from './components/DefinitionGraph'
 import { DefinitionList } from './components/DefinitionList'
 import { DefinitionSources } from './components/DefinitionSources'
+import { MetadataDialog } from './components/MetadataDialog'
+
+import type { DialogProps } from './components/dialog'
 
 export const Show: React.FC = () => {
   const [selectedDefinitionIds, setSelectedDefinitionIds] = useBitIdHash()
+  const [visibleDialog, setVisibleDialog] = useState<DialogProps | null>(null)
   const [graphOptions, setGraphOptions] = useLocalStorage<GraphOptions>('HomeShow-GraphOptions', {
     compound: false,
     concentrate: false,
   })
-  const { data: combinedDefinition, isLoading } = useCombinedDefinition(
-    selectedDefinitionIds,
-    graphOptions.compound,
-    graphOptions.concentrate,
-  )
+  const {
+    data: combinedDefinition,
+    isLoading,
+    mutate: mutateCombinedDefinition,
+  } = useCombinedDefinition(selectedDefinitionIds, graphOptions.compound, graphOptions.concentrate)
+
+  const onCloseDialog = useCallback(() => {
+    setVisibleDialog(null)
+  }, [setVisibleDialog])
 
   return (
     <Wrapper>
@@ -31,6 +40,15 @@ export const Show: React.FC = () => {
           <DefinitionList selectedDefinitionIds={selectedDefinitionIds} setSelectedDefinitionIds={setSelectedDefinitionIds} />
         </StyledAside>
         <StyledSection>
+          <MetadataDialog
+            isOpen={visibleDialog?.type === 'metadataDialog'}
+            dotMetadata={visibleDialog?.type === 'metadataDialog' ? visibleDialog.metadata : null}
+            top={visibleDialog?.type === 'metadataDialog' ? visibleDialog.top : 0}
+            left={visibleDialog?.type === 'metadataDialog' ? visibleDialog.left : 0}
+            onClose={onCloseDialog}
+            setVisibleDialog={setVisibleDialog}
+            mutateCombinedDefinition={mutateCombinedDefinition}
+          />
           {isLoading ? (
             <CenterStack>
               <Loading text="Loading..." alt="Loading" />
@@ -45,8 +63,13 @@ export const Show: React.FC = () => {
                 combinedDefinition={combinedDefinition}
                 graphOptions={graphOptions}
                 setGraphOptions={setGraphOptions}
+                visibleDialog={visibleDialog}
+                setVisibleDialog={setVisibleDialog}
+              />
+              <StyledDefinitionSources
+                combinedDefinition={combinedDefinition}
+                mutateCombinedDefinition={mutateCombinedDefinition}
               />
-              <StyledDefinitionSources combinedDefinition={combinedDefinition} />
             </StyledStack>
           )}
         </StyledSection>

frontend/pages/Home/components/ConfigureGraphOptionsDialog/index.ts

@@ -0,0 +1,2 @@
+export { ConfigureGraphOptionsDialog } from './ConfigureGraphOptionsDialog'
+export type { GraphOptions } from './ConfigureGraphOptionsDialog'

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

@@ -1,32 +1,39 @@
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback } from 'react'
 import styled from 'styled-components'
 
 import { Button, FaGearIcon, Heading, LineClamp, Section, Text } from '@/components/ui'
 import { color } from '@/constants/theme'
 import { CombinedDefinition } from '@/models/combinedDefinition'
 
-import { ConfigureGraphOptionsDialog, GraphOptions } from './ConfigureGraphOptionsDialog'
+import { ConfigureGraphOptionsDialog, GraphOptions } from '../ConfigureGraphOptionsDialog'
+
 import { ScrollableSvg } from './ScrollableSvg'
 
+import type { DialogProps } from '../dialog'
+
 type Props = {
   combinedDefinition: CombinedDefinition
+  visibleDialog: DialogProps | null
+  setVisibleDialog: React.Dispatch<React.SetStateAction<DialogProps | null>>
   graphOptions: GraphOptions
   setGraphOptions: React.Dispatch<React.SetStateAction<GraphOptions>>
 }
 
-type DialogType = 'configureGraphOptionsDiaglog'
-
-export const DefinitionGraph: FC<Props> = ({ combinedDefinition, graphOptions, setGraphOptions }) => {
-  const [visibleDialog, setVisibleDialog] = useState<DialogType | null>(null)
-
+export const DefinitionGraph: FC<Props> = ({
+  combinedDefinition,
+  graphOptions,
+  setGraphOptions,
+  visibleDialog,
+  setVisibleDialog,
+}) => {
   const onClickCloseDialog = useCallback(() => {
     setVisibleDialog(null)
   }, [setVisibleDialog])
 
   return (
     <WrapperSection>
       <ConfigureGraphOptionsDialog
-        isOpen={visibleDialog === 'configureGraphOptionsDiaglog'}
+        isOpen={visibleDialog?.type === 'configureGraphOptionsDialog'}
         onClickClose={onClickCloseDialog}
         graphOptions={graphOptions}
         setGraphOptions={setGraphOptions}
@@ -42,14 +49,14 @@ export const DefinitionGraph: FC<Props> = ({ combinedDefinition, graphOptions, s
         <Button
           size="s"
           square
-          onClick={() => setVisibleDialog('configureGraphOptionsDiaglog')}
+          onClick={() => setVisibleDialog({ type: 'configureGraphOptionsDialog' })}
           prefix={<FaGearIcon alt="Open Options" />}
         >
           Open Graph Options
         </Button>
       </FixedHeightHeading>
       <FlexHeightSvgWrapper>
-        <ScrollableSvg combinedDefinition={combinedDefinition} />
+        <ScrollableSvg combinedDefinition={combinedDefinition} setVisibleDialog={setVisibleDialog} />
       </FlexHeightSvgWrapper>
     </WrapperSection>
   )