Skip to content

Commit

Permalink
Merge pull request #68 from alpaca-tc/render-module-dependencies
Browse files Browse the repository at this point in the history 
Render dependencies and reverse dependencies
  • Loading branch information
@alpaca-tc
alpaca-tc authored Jul 1, 2024
2 parents 1851eae + 366be0d commit 0ea1b6e
Show file tree
Hide file tree
Showing 8 changed files with 383 additions and 113 deletions.
22 changes: 19 additions & 3 deletions frontend/models/module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,29 @@
import { MethodId } from './methodId'

export type Module = string

export type SpecificModule = {
module: Module
moduleDependencies: Module[]
moduleReverseDependencies: Module[]
sources: Array<{
sourceName: string
module: Module
memo: string
dependencies: Array<{
sourceName: string
module: Module | null
methodIds: MethodId[]
}>
}>
relatedDefinitions: Array<{
id: number
title: string
sourceReverseDependencies: Array<{
sourceName: string
module: Module | null
memo: string
dependencies: Array<{
sourceName: string
module: Module
methodIds: MethodId[]
}>
}>
}
180 changes: 141 additions & 39 deletions frontend/pages/Modules/Show.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'
import React from 'react'
import { useParams } from 'react-router-dom'
import styled from 'styled-components'

Expand All @@ -7,22 +7,11 @@ import { Loading } from '@/components/Loading'
import { Cluster, EmptyTableBody, Heading, Section, Stack, Table, Td, Text, Th } from '@/components/ui'
import { path } from '@/constants/path'
import { spacing } from '@/constants/theme'
import { KEY } from '@/hooks/useBitIdHash'
import { useModule } from '@/repositories/moduleRepository'
import { encode, idsToBitId } from '@/utils/bitId'
import { stringify } from '@/utils/queryString'

export const Show: React.FC = () => {
const pathModule = useParams()['*'] ?? ''
const { data: specificModule, isLoading } = useModule(pathModule)

const relatedDefinitionIds = useMemo(() => {
if (specificModule) {
return specificModule.relatedDefinitions.map(({ id }) => id)
} else {
return []
}
}, [specificModule])
const { data, isLoading } = useModule(pathModule)

return (
<StyledSection>
Expand All @@ -44,32 +33,30 @@ export const Show: React.FC = () => {
</Stack>
</Section>

{specificModule && !isLoading ? (
{data && !isLoading ? (
<>
<Section>
<Stack gap={0.5}>
<Heading type="sectionTitle">Sources</Heading>
<Heading type="sectionTitle">Module Dependencies ({data.moduleDependencies.length})</Heading>
<div style={{ overflow: 'clip' }}>
<Table fixedHead>
<thead>
<tr>
<Th>Source Name</Th>
<Th>Memo</Th>
<Th>Module</Th>
</tr>
</thead>
{specificModule.sources.length === 0 ? (
{data.sources.length === 0 ? (
<EmptyTableBody>
<Text>no sources</Text>
<Text>No module dependencies</Text>
</EmptyTableBody>
) : (
<tbody>
{specificModule.sources.map((source) => (
<tr key={source.sourceName}>
<Td>
<Link to={path.sources.show(source.sourceName)}>{source.sourceName}</Link>
</Td>
{data.moduleDependencies.map((module) => (
<tr key={module}>
<Td>
<Text>{source.memo}</Text>
<Text as="div" whiteSpace="nowrap">
<Link to={path.modules.show(module)}>{module}</Link>
</Text>
</Td>
</tr>
))}
Expand All @@ -82,31 +69,26 @@ export const Show: React.FC = () => {

<Section>
<Stack gap={0.5}>
<Cluster>
<Heading type="sectionTitle">Related Definitions</Heading>
<Link to={`${path.home()}?${stringify({ [KEY]: encode(idsToBitId(relatedDefinitionIds)) })}`}>
Select All
</Link>
</Cluster>
<Heading type="sectionTitle">Module Reverse Dependencies ({data.moduleReverseDependencies.length})</Heading>
<div style={{ overflow: 'clip' }}>
<Table fixedHead>
<thead>
<tr>
<Th>Title</Th>
<Th>Module</Th>
</tr>
</thead>
{specificModule.relatedDefinitions.length === 0 ? (
{data.sources.length === 0 ? (
<EmptyTableBody>
<Text>no related definitions</Text>
<Text>No module reverse dependencies</Text>
</EmptyTableBody>
) : (
<tbody>
{specificModule.relatedDefinitions.map((relatedDefinition) => (
<tr key={relatedDefinition.id}>
{data.moduleReverseDependencies.map((module) => (
<tr key={module}>
<Td>
<Link to={`${path.home()}?${stringify({ [KEY]: encode(idsToBitId([relatedDefinition.id])) })}`}>
{relatedDefinition.title}
</Link>
<Text as="div" whiteSpace="nowrap">
<Link to={path.modules.show(module)}>{module}</Link>
</Text>
</Td>
</tr>
))}
Expand All @@ -116,6 +98,126 @@ export const Show: React.FC = () => {
</div>
</Stack>
</Section>

<Section>
<Stack gap={0.5}>
<Heading type="sectionTitle">Sources ({data.sources.length})</Heading>
<div style={{ overflow: 'clip' }}>
<Table fixedHead>
<thead>
<tr>
<Th>Source</Th>
<Th>Dependency Module</Th>
<Th>Dependency</Th>
<Th>Method Id</Th>
<Th>Path</Th>
</tr>
</thead>
{data.sources.length === 0 ? (
<EmptyTableBody>
<Text>No sources</Text>
</EmptyTableBody>
) : (
<tbody>
{data.sources.map((source) =>
source.dependencies.map((dependency) =>
dependency.methodIds.map((methodId) => (
<tr key={`${source.sourceName}-${dependency.sourceName}-${methodId.context}-${methodId.name}`}>
<Td>
<Text as="div" whiteSpace="nowrap">
<Link to={path.sources.show(source.sourceName)}>{source.sourceName}</Link>
</Text>
</Td>
<Td>
{dependency.module && (
<Text as="div" whiteSpace="nowrap">
<Link to={path.modules.show(dependency.module)}>{dependency.module}</Link>
</Text>
)}
</Td>
<Td>
<Text as="div" whiteSpace="nowrap">
<Link to={path.sources.show(dependency.sourceName)}>{dependency.sourceName}</Link>
</Text>
</Td>
<Td>{`${methodId.context === 'class' ? '.' : '#'}${methodId.name}`}</Td>
<Td>
{methodId.paths.map((methodIdPath) => (
<div key={methodIdPath}>
<Text>{methodIdPath}</Text>
</div>
))}
</Td>
</tr>
)),
),
)}
</tbody>
)}
</Table>
</div>
</Stack>
</Section>

<Section>
<Stack gap={0.5}>
<Heading type="sectionTitle">Source Reverse Dependencies ({data.sourceReverseDependencies.length})</Heading>
<div style={{ overflow: 'clip' }}>
<Table fixedHead>
<thead>
<tr>
<Th>Source</Th>
<Th>Dependency Module</Th>
<Th>Dependency</Th>
<Th>Method Id</Th>
<Th>Path</Th>
</tr>
</thead>
{data.sourceReverseDependencies.length === 0 ? (
<EmptyTableBody>
<Text>No sources</Text>
</EmptyTableBody>
) : (
<tbody>
{data.sourceReverseDependencies.map((source) =>
source.dependencies.map((dependency) =>
dependency.methodIds.map((methodId) => (
<tr key={`${source.sourceName}-${dependency.sourceName}`}>
<Td>
<Text as="div" whiteSpace="nowrap">
<Link to={path.sources.show(source.sourceName)}>{source.sourceName}</Link>
</Text>
</Td>
<Td>
{dependency.module && (
<Text as="div" whiteSpace="nowrap">
<Link to={path.modules.show(dependency.module)}>{dependency.module}</Link>
</Text>
)}
</Td>
<Td>
<Text as="div" whiteSpace="nowrap">
<Link to={path.sources.show(dependency.sourceName)}>{dependency.sourceName}</Link>
</Text>
</Td>
<Td>{`${methodId.context === 'class' ? '.' : '#'}${methodId.name}`}</Td>
<Td>
{methodId.paths.map((methodIdPath) => (
<div key={methodIdPath}>
<Text>{methodIdPath}</Text>
</div>
))}
</Td>
</tr>
)),
),
)}
</tbody>
)}
</Table>
</div>
</Stack>
</Section>
</>
) : (
<Loading />
Expand Down
6 changes: 3 additions & 3 deletions frontend/pages/Sources/Show.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const Show: React.FC = () => {
<Table fixedHead>
<thead>
<tr>
<Th>Module Name</Th>
<Th>Module</Th>
</tr>
</thead>
{specificSource.module === null ? (
Expand Down Expand Up @@ -100,7 +100,7 @@ export const Show: React.FC = () => {
<Table fixedHead>
<thead>
<tr>
<Th>Module Name</Th>
<Th>Module</Th>
</tr>
</thead>
{specificSource.module === null ? (
Expand Down Expand Up @@ -169,7 +169,7 @@ export const Show: React.FC = () => {
<Table fixedHead>
<thead>
<tr>
<Th>Module Name</Th>
<Th>Module</Th>
<Th>Source Name</Th>
<Th>Method Id</Th>
<Th>Path</Th>
Expand Down
58 changes: 51 additions & 7 deletions frontend/repositories/moduleRepository.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,35 @@ export const useModules = () => {

type SpecificModuleResponse = {
module: string
related_definitions: Array<{
id: number
title: string
}>
module_dependencies: string[]
module_reverse_dependencies: string[]
sources: Array<{
source_name: string
module: string
memo: string
dependencies: Array<{
source_name: string
module: string | null
method_ids: Array<{
context: 'instance' | 'class'
name: string
paths: string[]
}>
}>
}>
source_reverse_dependencies: Array<{
source_name: string
module: string | null
memo: string
dependencies: Array<{
source_name: string
module: string
method_ids: Array<{
context: 'instance' | 'class'
name: string
paths: string[]
}>
}>
}>
}

Expand All @@ -36,13 +58,35 @@ export const useModule = (module: string) => {

return {
module: response.module,
moduleDependencies: response.module_dependencies,
moduleReverseDependencies: response.module_reverse_dependencies,
sources: response.sources.map((source) => ({
sourceName: source.source_name,
module: source.module,
memo: source.memo,
dependencies: source.dependencies.map((dependency) => ({
sourceName: dependency.source_name,
module: dependency.module,
methodIds: dependency.method_ids.map((methodId) => ({
context: methodId.context,
name: methodId.name,
paths: methodId.paths,
})),
})),
})),
relatedDefinitions: response.related_definitions.map((definition) => ({
id: definition.id,
title: definition.title,
sourceReverseDependencies: response.source_reverse_dependencies.map((source) => ({
sourceName: source.source_name,
module: source.module,
memo: source.memo,
dependencies: source.dependencies.map((dependency) => ({
sourceName: dependency.source_name,
module: dependency.module,
methodIds: dependency.method_ids.map((methodId) => ({
context: methodId.context,
name: methodId.name,
paths: methodId.paths,
})),
})),
})),
}
})
Expand Down
Loading

0 comments on commit 0ea1b6e

Please sign in to comment.