-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adds dependency graph page (#114)
* dep graph * working but not useful * 3d dep graph * imporve search / filter imporve search / filter imporve search / filter * remove comments / gitignore bundle analysis * remove dummy data file blocks.json --------- Co-authored-by: Kris Stern <[email protected]>
- Loading branch information
1 parent
9a38909
commit 9d85aad
Showing
12 changed files
with
2,229 additions
and
437 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,3 +25,6 @@ dist-ssr | |
|
|
||
| # infra-statistics | ||
| src/data/infra-statistics | ||
|
|
||
| # bundle analyzer | ||
| bundle-analysis.html | ||
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react' | ||
| import { Button, Box } from '@mui/material' | ||
|
|
||
| const BackToHome: React.FC = () => ( | ||
| <Box sx={{ width: '100%', marginBottom: '12px' }}> | ||
| <Button | ||
| size="small" | ||
| onClick={() => (window.location.href = '/')} | ||
| sx={{ | ||
| color: 'white', | ||
| '&:hover': { | ||
| color: '#2196f3', | ||
| }, | ||
| }} | ||
| > | ||
| ← Back to Home | ||
| </Button> | ||
| </Box> | ||
| ) | ||
|
|
||
| export default BackToHome |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from 'react' | ||
| import { Box, Button, TextField, Typography } from '@mui/material' | ||
| import BackToHome from './BackToHome' | ||
|
|
||
| interface GraphToolsProps { | ||
| searchTerm: string | ||
| // eslint-disable-next-line no-unused-vars | ||
| handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void | ||
| // eslint-disable-next-line no-unused-vars | ||
| setSearchTerm: (value: string) => void | ||
| } | ||
|
|
||
| const GraphTools: React.FC<GraphToolsProps> = ({ searchTerm, handleSearchChange, setSearchTerm }) => { | ||
| return ( | ||
| <> | ||
| <BackToHome /> | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <TextField | ||
| label="Filter Plugins by Name / Maintainer" | ||
| variant="outlined" | ||
| value={searchTerm} | ||
| onChange={handleSearchChange} | ||
| sx={{ | ||
| width: '300px', | ||
| marginRight: '10px', | ||
| '& .MuiOutlinedInput-root': { | ||
| '& fieldset': { | ||
| borderColor: 'rgba(255, 255, 255, 0.2)', | ||
| borderRadius: '8px', | ||
| }, | ||
| '&:hover fieldset': { | ||
| borderColor: '#2196f3', | ||
| }, | ||
| '&.Mui-focused fieldset': { | ||
| borderColor: '#2196f3', | ||
| }, | ||
| backgroundColor: 'rgba(255, 255, 255, 0.1)', | ||
| }, | ||
| '& .MuiInputLabel-root': { | ||
| color: 'white', | ||
| }, | ||
| '& .MuiInputBase-input': { | ||
| color: 'white', | ||
| }, | ||
| }} | ||
| InputLabelProps={{ | ||
| style: { color: 'white' }, | ||
| }} | ||
| InputProps={{ | ||
| style: { color: 'white' }, | ||
| }} | ||
| /> | ||
| <Button | ||
| onClick={() => setSearchTerm('')} | ||
| sx={{ | ||
| backgroundColor: 'rgba(255, 255, 255, 0.1)', | ||
| color: 'white', | ||
| border: '1px solid rgba(255, 255, 255, 0.2)', | ||
| padding: '10px', | ||
| borderRadius: '8px', | ||
| cursor: 'pointer', | ||
| '&:hover': { | ||
| backgroundColor: 'rgba(255, 255, 255, 0.2)', | ||
| borderColor: '#2196f3', | ||
| }, | ||
| }} | ||
| > | ||
| Clear | ||
| </Button> | ||
| </Box> | ||
| <Typography | ||
| sx={{ | ||
| color: 'white', | ||
| marginTop: '10px', | ||
| marginLeft: '10px', | ||
| }} | ||
| > | ||
| drag / drop / hover / click any node... | ||
| </Typography> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default GraphTools |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { useState, useEffect } from 'react' | ||
| import { PluginData, PluginNode } from '../types/types' | ||
|
|
||
| const usePluginData = () => { | ||
| const [plugins, setPlugins] = useState<PluginNode[]>([]) | ||
| const [loading, setLoading] = useState<boolean>(true) | ||
| const [error, setError] = useState<string | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| const fetchPlugins = async () => { | ||
| try { | ||
| const fileUrl = new URL(`../data/infra-statistics/update-center.actual.json`, import.meta.url).href | ||
| const response = await fetch(fileUrl) | ||
| if (!response.ok) { | ||
| throw new Error('Network response was not ok') | ||
| } | ||
| const data: PluginData = (await response.json()) as PluginData | ||
|
|
||
| const pluginArray = Object.keys(data.plugins).map((key) => { | ||
| const plugin = data.plugins[key] | ||
| return { | ||
| ...plugin, | ||
| defaultBranch: plugin.defaultBranch || 'N/A', | ||
| scm: plugin.scm || 'N/A', | ||
| issueTrackers: plugin.issueTrackers || [], | ||
| } | ||
| }) | ||
|
|
||
| setPlugins(pluginArray) | ||
| } catch (error) { | ||
| setError((error as Error).message) | ||
| } finally { | ||
| setLoading(false) | ||
| } | ||
| } | ||
|
|
||
| fetchPlugins() | ||
| }, []) | ||
|
|
||
| return { plugins, loading, error } | ||
| } | ||
|
|
||
| export default usePluginData |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.