Skip to content

Commit

Permalink
commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anchel123
Anchel123 committed Feb 3, 2025
1 parent 51bc929 commit 9c866a8
Show file tree
Hide file tree
Showing 11 changed files with 103 additions and 100 deletions.
54 changes: 22 additions & 32 deletions app/api/graph/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ export type DataRow = {
export type Data = DataRow[]

export const DEFAULT_COLORS = [
"#7466FF",
"#FF66B3",
"#FF804D",
"#80E6E6"
"hsl(246, 100%, 70%)",
"hsl(330, 100%, 70%)",
"hsl(20, 100%, 65%)",
"hsl(180, 66%, 70%)"
]

export interface Query {
Expand Down Expand Up @@ -152,7 +152,7 @@ export class Graph {
this.labelsMap = labelsMap;
this.nodesMap = nodesMap;
this.linksMap = edgesMap;
this.COLORS_ORDER_VALUE = colors || DEFAULT_COLORS
this.COLORS_ORDER_VALUE = [...(colors || DEFAULT_COLORS)]
}

get Id(): string {
Expand Down Expand Up @@ -272,30 +272,6 @@ export class Graph {
Object.entries(cell.properties).forEach(([key, value]) => {
currentNode.data[key] = isSchema ? getSchemaValue(value) : value;
});

// remove empty category if there are no more empty nodes category
if (Array.from(this.nodesMap.values()).every(n => n.category.some(c => c !== ""))) {
this.categories = this.categories.filter(l => l.name !== "").map(c => {
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
if (this.categoriesMap.get("")?.index! < c.index) {
c.index -= 1
this.categoriesMap.get(c.name)!.index = c.index
}
return c
})
this.labels = this.labels.map(l => {
if (this.labelsMap.get(l.name)!.index! < l.index) {
l.index -= 1
this.labelsMap.get(l.name)!.index = l.index
}
return l
})
this.categoriesMap.delete("")
this.colorIndex -= 1
this.elements.nodes.forEach(n => {
n.color = this.getCategoryColorValue(this.categoriesMap.get(n.category[0])?.index)
})
}
}

return currentNode
Expand Down Expand Up @@ -463,6 +439,13 @@ export class Graph {

link.curve = curve * 0.1
})

// remove empty category if there are no more empty nodes category
if (Array.from(this.nodesMap.values()).every(n => n.category.some(c => c !== ""))) {
this.categories = this.categories.filter(c => c.name !== "")
this.categoriesMap.delete("")
}

return newElements
}

Expand Down Expand Up @@ -548,7 +531,14 @@ export class Graph {
}
}

public getCategoryColorValue(index = 0): string {
return this.COLORS_ORDER_VALUE[index % this.COLORS_ORDER_VALUE.length]
public getCategoryColorValue(index = 0) {
if (index < this.COLORS_ORDER_VALUE.length) {
return this.COLORS_ORDER_VALUE[index];
}

const newColor = `hsl(${(index - 4) * 20}, 100%, 70%)`
this.COLORS_ORDER_VALUE.push(newColor)
DEFAULT_COLORS.push(newColor)
return newColor
}
}
}
10 changes: 3 additions & 7 deletions app/components/ForceGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from "react"
import ForceGraph2D from "react-force-graph-2d"
import { lightenColor, securedFetch } from "@/lib/utils"
import { securedFetch } from "@/lib/utils"
import { useToast } from "@/components/ui/use-toast"
import { Graph, GraphData, Link, Node } from "../api/graph/model"

Expand Down Expand Up @@ -302,12 +302,8 @@ export default function ForceGraph({
cooldownTime={2000}
linkDirectionalArrowRelPos={1}
linkDirectionalArrowLength={(link) => link.source.id === link.target.id ? 0 : 2}
linkDirectionalArrowColor={(link) => link.id === selectedElement?.id || link.id === hoverElement?.id
? link.color
: lightenColor(link.color)}
linkColor={(link) => link.id === selectedElement?.id || link.id === hoverElement?.id
? link.color
: lightenColor(link.color)}
linkDirectionalArrowColor={(link) => link.color}
linkColor={(link) => link.color}
/>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@ export default function Header({ onSetGraphName }: Props) {
<div className="flex gap-2 bg-foreground rounded-lg p-2">
<Button
label="Graphs"
className={cn("px-4 py-1 rounded-lg", pathname.includes("/graph") && "bg-background")}
className={cn("px-4 py-1 rounded-lg", pathname.includes("/graph") ? "bg-background" : "text-gray-500")}
onClick={() => router.push("/graph")}
/>
<Button
label="Schemas"
className={cn("px-4 py-1 rounded-lg", pathname.includes("/schema") && "bg-background")}
className={cn("px-4 py-1 rounded-lg", pathname.includes("/schema") ? "bg-background" : "text-gray-500")}
onClick={() => router.push("/schema")}
/>
</div>
Expand Down
2 changes: 0 additions & 2 deletions app/components/TableComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,6 @@ export default function TableComponent({ headers, rows, children, setRows, optio
setNewValue(value)
}

console.log(rows)

return (
<div className="h-full w-full flex flex-col gap-4">
<div className="flex gap-4">
Expand Down
23 changes: 4 additions & 19 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@

@font-face {
font-family: 'FiraCode';
src: url('/public/fonts/fira_code.ttf') format('truetype');
font-display: block;
src: url('/fonts/fira_code.ttf') format('truetype');
font-display: swap;
}

.tabs-trigger {
@apply !p-2 rounded-lg data-[state=active]:bg-foreground data-[state=active]:!text-white !text-white;
@apply !p-2 rounded-lg data-[state=active]:bg-foreground data-[state=active]:!text-white text-gray-500;
}

.hide-scrollbar {
Expand Down Expand Up @@ -67,23 +67,8 @@
}
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type="number"] {
-moz-appearance: textfield;

}

.monaco-editor .suggest-widget {
margin-top: 0.5rem;
}

* {
font-family: font-FiraCode, 'monospace';
font-family: 'FiraCode', 'Arial', monospace !important;
}

::-webkit-scrollbar {
Expand Down
8 changes: 5 additions & 3 deletions app/graph/Tutorial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function Tutorial({ onSetGraphName }: Props) {
<DrawerContent className="flex flex-col">
<VisuallyHidden>
<DrawerHeader>
<DrawerTitle/>
<DrawerTitle />
</DrawerHeader>
</VisuallyHidden>
<div className="flex justify-center items-center p-8">
Expand All @@ -42,8 +42,10 @@ export default function Tutorial({ onSetGraphName }: Props) {
<CarouselItem className="border text-center p-40">
<p>Our Browser allows you to visualize, manipulate and explore your data.</p>
</CarouselItem>
<CarouselItem className="border text-center p-40">
<p>Easily interact with your data in our adaptive force canvas</p>
<CarouselItem className="border text-center p-32">
<p>Interact with your data with a force-directed layout,
with features including zoom, pan,
node-drag and interactive node/link hover and click events</p>
</CarouselItem>
<CarouselItem className="border text-center p-40">
<p>Configure or export your graph with ease from the control center</p>
Expand Down
39 changes: 22 additions & 17 deletions app/graph/View.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* eslint-disable no-param-reassign */

import { Check, ChevronDown, ChevronUp, FileCheck2, PlusCircle, RotateCcw, Trash2, X } from "lucide-react"
import { Check, ChevronDown, ChevronUp, FileCheck2, Pencil, PlusCircle, RotateCcw, Trash2, X } from "lucide-react"
import { useEffect, useState } from "react"
import { cn } from "@/lib/utils"
import { cn, rgbToHSL } from "@/lib/utils"
import { DEFAULT_COLORS, Graph } from "../api/graph/model"
import Button from "../components/ui/Button"
import DialogComponent from "../components/DialogComponent"
Expand Down Expand Up @@ -91,15 +91,16 @@ export default function View({ graph, setGraph, selectedValue }: {
ref={ref => ref?.focus()}
value={editable === c ? editable : newColor}
onChange={(e) => {
const newHslColor = rgbToHSL(e.target.value);
setColorsArr(prev => {
const newArr = [...prev];
newArr[i] = e.target.value;
newArr[i] = newHslColor;
return newArr;
});
if (editable === c) {
setEditable(e.target.value)
setEditable(newHslColor)
} else {
setNewColor(e.target.value);
setNewColor(newHslColor);
}
}}
onKeyDown={(e) => {
Expand All @@ -112,10 +113,7 @@ export default function View({ graph, setGraph, selectedValue }: {
</>
: <>
<div style={{ backgroundColor: c }} className="h-6 w-6 rounded-full" />
<Button
label={c}
onClick={() => setEditable(c)}
/>
<p>{c}</p>
</>
}
{
Expand All @@ -141,14 +139,21 @@ export default function View({ graph, setGraph, selectedValue }: {
</Button>
</div>
: hover === c &&
<Button
onClick={() => {
setColorsArr(prev => [...prev.filter(color => color !== c)]);
}}
title="Delete"
>
<Trash2 />
</Button>
<div className="flex gap-2">
<Button
onClick={() => {
setColorsArr(prev => [...prev.filter(color => color !== c)]);
}}
title="Delete"
>
<Trash2 />
</Button>
<Button
onClick={() => setEditable(c)}
>
<Pencil />
</Button>
</div>
}
</li>
))
Expand Down
4 changes: 2 additions & 2 deletions app/graph/labels.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useRef, useState } from "react";
import { cn, lightenColor } from "@/lib/utils";
import { cn } from "@/lib/utils";
import { ChevronDown, ChevronUp } from "lucide-react";
import { Category, Graph } from "../api/graph/model";
import Button from "../components/ui/Button";
Expand Down Expand Up @@ -57,7 +57,7 @@ export default function Labels({ graph, categories, onClick, label, className =
setReload(prev => !prev)
}}
>
<div style={{ backgroundColor: label === "RelationshipTypes" ? lightenColor(graph.getCategoryColorValue(category.index)) : graph.getCategoryColorValue(category.index) }} className={cn("min-w-6 min-h-6 rounded-full")} />
<div style={{ backgroundColor: graph.getCategoryColorValue(category.index) }} className={cn("min-w-6 min-h-6 rounded-full")} />
</Button>
</li>
))
Expand Down
4 changes: 2 additions & 2 deletions app/settings/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ export default function Settings() {
<h1 className="text-2xl font-medium px-6">Settings</h1>
<div className="w-fit bg-foreground flex gap-2 p-2 rounded-lg">
<Button
className={cn("p-2 rounded-lg", current === "DB" && "bg-background")}
className={cn("p-2 rounded-lg", current === "DB" ? "bg-background" : "text-gray-500")}
label="DB Configuration"
onClick={() => setCurrent("DB")}
/>
<Button
className={cn("p-2 rounded-lg", current === "Users" && "bg-background")}
className={cn("p-2 rounded-lg", current === "Users" ? "bg-background" : "text-gray-500")}
label="Users"
onClick={() => setCurrent("Users")}
/>
Expand Down
2 changes: 0 additions & 2 deletions app/settings/users/Users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ export default function Users() {
const { toast } = useToast()

const handleSetRole = useCallback(async (username: string, role: string, isUndo: boolean) => {
console.log(users);

const oldRole = users.find(user => user.username === username)!.role

const result = await securedFetch(`api/user/${prepareArg(username)}/?role=${role}`, {
Expand Down
53 changes: 41 additions & 12 deletions lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,46 @@ export function prepareArg(arg: string) {

export const defaultQuery = (q?: string) => q || "MATCH (n) OPTIONAL MATCH (n)-[e]-(m) return n,e,m LIMIT 100"

export const lightenColor = (hex: string): string => {
export function rgbToHSL(hex: string): string {
// Remove the # if present
const color = hex.replace('#', '');
// Convert to RGB
const r = parseInt(color.slice(0, 2), 16);
const g = parseInt(color.slice(2, 4), 16);
const b = parseInt(color.slice(4, 6), 16);
// Mix with white (add 20% of the remaining distance to white)
const lightR = Math.min(255, r + Math.floor((255 - r) * 0.2));
const lightG = Math.min(255, g + Math.floor((255 - g) * 0.2));
const lightB = Math.min(255, b + Math.floor((255 - b) * 0.2));
// Convert back to hex
return `#${lightR.toString(16).padStart(2, '0')}${lightG.toString(16).padStart(2, '0')}${lightB.toString(16).padStart(2, '0')}`;
const formattedHex = hex.replace(/^#/, '');

// Convert hex to RGB
const r = parseInt(formattedHex.slice(0, 2), 16) / 255;
const g = parseInt(formattedHex.slice(2, 4), 16) / 255;
const b = parseInt(formattedHex.slice(4, 6), 16) / 255;

const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h = 0;
let s = 0;
const l = (max + min) / 2;

if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
default:
h = 0;
break;
}
h /= 6;
}

// Convert to degrees and percentages
const hDeg = Math.round(h * 360);
const sPct = Math.round(s * 100);
const lPct = Math.round(l * 100);

return `hsl(${hDeg}, ${sPct}%, ${lPct}%)`;
}

0 comments on commit 9c866a8

Please sign in to comment.