Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Render dependencies and reverse dependencies #68

Merged
merged 1 commit into from
Jul 1, 2024
+383 −113
Merged

Render dependencies and reverse dependencies #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions frontend/models/module.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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