@@ -18,7 +18,7 @@ export interface NodeObject {
1818 support : string ;
1919 url : string ;
2020 datasets : number ;
21- standard : string [ ] ; // define type of standard property
21+ standard : string [ ] ;
2222}
2323
2424const NeuroJsonGraph : React . FC < {
@@ -71,14 +71,7 @@ const NeuroJsonGraph: React.FC<{
7171 return `rgb(${ avgR } ${ avgG } ${ avgB } ;
7272 } ;
7373
74- // Function to determine color and size based on node size
75- // const size2colorAndSize = (size: number) => {
76- // if (size > 32) return { color: Colors.primary.dark, size: 10 };
77- // if (size > 3) return { color: Colors.primary.main, size: 7 };
78- // return { color: Colors.primary.light, size: 5 };
79- // };
80-
81- // Custom random number generator
74+ // Custom random number generator for link connection usage
8275 const mulberry32 = ( a : number ) => {
8376 return function ( ) {
8477 let t = ( a += 0x6d2b79f5 ) ;
@@ -102,33 +95,30 @@ const NeuroJsonGraph: React.FC<{
10295 return ;
10396 }
10497
105- let colorlist : { brightness : number ; index : number } [ ] = registry . map (
106- ( db , index ) => {
98+ // create a colorlist after blend colors for nodes
99+ let colorlist : { brightness : number ; index : number ; color : string } [ ] =
100+ registry . map ( ( db , index ) => {
107101 const colorStr = blendColors ( db . datatype ) ; // Get color in "rgb(R,G,B)" format
108-
109- // Extract RGB values from the string
110102 const match = colorStr . match ( / \d + / g) ; // Get numbers from "rgb(R,G,B)"
111- if ( ! match ) return { brightness : 255 , index } ; // Default to white if extraction fails
103+ if ( ! match )
104+ return { brightness : 255 , index, color : "rgb(255, 255, 255)" } ; // Default to white if extraction fails
112105
113106 const [ r , g , b ] = match . map ( Number ) ; // Convert to numbers
114107 const brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b ; // Compute brightness
115108
116- return { brightness, index } ;
117- }
118- ) ;
109+ return { brightness, index, color : colorStr } ;
110+ } ) ;
119111
120112 // Sort nodes by brightness
121113 colorlist . sort ( ( a , b ) => a . brightness - b . brightness ) ;
122114
123115 // Prepare graph data
124116 const graphData = {
125117 nodes : registry . map ( ( db ) => {
126- // const { color, size } = size2colorAndSize(db.datasets);
127118 const color = blendColors ( db . datatype ) ;
128- // const size = db.datasets > 32 ? 10 : db.datasets > 3 ? 7 : 5;
129-
130- let size = db . datasets > 100 ? Math . log ( db . datasets ) : db . datasets / 5 ;
131- size = Math . max ( size , 2 ) ;
119+ let size =
120+ db . datasets > 100 ? Math . log ( db . datasets ) * 2.5 : db . datasets / 6 ;
121+ size = Math . max ( size , 4 ) ;
132122
133123 return {
134124 id : db . id ,
@@ -144,13 +134,13 @@ const NeuroJsonGraph: React.FC<{
144134 } ;
145135 } ) ,
146136
147- links : registry . flatMap ( ( db , index ) => {
148- const coloridx = index ;
149- const i = colorlist [ coloridx ] . index ; // Get shuffled node index
150- const node = registry [ i ] ; // Get actual node
151-
152- // Determine number of connections (proportional to dataset size)
153- const conn = 1 + Math . round ( rngfun ( ) * Math . max ( 1 , node . datasets / 20 ) ) ;
137+ links : colorlist . flatMap ( ( { index, color } , colorIdx ) => {
138+ const node = registry [ index ] ;
139+ // Determine number of connections
140+ const scaledDatasets =
141+ node . datasets > 100 ? Math . log ( node . datasets ) : node . datasets ;
142+ const conn =
143+ 1 + Math . round ( rngfun ( ) * Math . max ( 1 , scaledDatasets / 20 ) ) ;
154144
155145 const connections : {
156146 source : string ;
@@ -159,17 +149,19 @@ const NeuroJsonGraph: React.FC<{
159149 visible : boolean ;
160150 } [ ] = [ ] ;
161151
162- for ( let j = 1 ; j <= conn ; j ++ ) {
163- if ( index + j >= registry . length ) break ; // Prevent out-of-bounds errors
164-
165- const targetIdx = colorlist [ index + j ] . index ; // Get next closest in brightness
166- const targetNode = registry [ targetIdx ] ;
152+ for ( let j = - conn ; j <= conn ; j ++ ) {
153+ if ( j === 0 ) continue ;
154+ const targetColorIdx = colorIdx + j ;
155+ if ( targetColorIdx < 0 || targetColorIdx >= colorlist . length )
156+ continue ; // Prevent out-of-bounds errors
157+ const targetIdx = colorlist [ targetColorIdx ] . index ; // Get registry node index in colorlist order
158+ const targetNode = registry [ targetIdx ] ; // Get target node info in registry
167159
168160 connections . push ( {
169161 source : node . id ,
170162 target : targetNode . id ,
171- color : blendColors ( node . datatype ) , // Keep consistent coloring
172- visible : true , // Make links visible
163+ color : blendColors ( node . datatype ) ,
164+ visible : true ,
173165 } ) ;
174166 }
175167
@@ -180,7 +172,7 @@ const NeuroJsonGraph: React.FC<{
180172 // Initialize 3D Force Graph
181173 const Graph = new ForceGraph3D ( graphRef . current )
182174 . graphData ( graphData )
183- . nodeRelSize ( 2 )
175+ . nodeRelSize ( 1 )
184176 . nodeColor ( ( node ) => ( node as NodeObject ) . color )
185177 . linkWidth ( 1 )
186178 . backgroundColor ( "rgba(0,0,0,0)" )
@@ -239,8 +231,8 @@ const NeuroJsonGraph: React.FC<{
239231 // Add label as CSS2DObject
240232 const label = new CSS2DObject ( document . createElement ( "div" ) ) ;
241233 label . element . textContent = castNode . dbname || "Unnamed" ;
242- label . element . style . color = Colors . white ;
243- label . element . style . fontSize = "12px " ;
234+ label . element . style . color = Colors . lightYellow ;
235+ label . element . style . fontSize = "16px " ;
244236 label . element . style . pointerEvents = "none" ;
245237 label . position . set ( 0 , 10 , 0 ) ;
246238 group . add ( label ) ;
0 commit comments