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 55a8265 commit b5bda9c
Show file tree
Hide file tree
Showing 13 changed files with 107 additions and 101 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
4 changes: 3 additions & 1 deletion app/graph/GraphView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ import TableView from "./TableView";
const ForceGraph = dynamic(() => import("../components/ForceGraph"), { ssr: false });
const EditorComponent = dynamic(() => import("../components/EditorComponent"), { ssr: false })

function GraphView({ graph, selectedElement, setSelectedElement, runQuery, historyQuery, historyQueries, fetchCount, session }: {
function GraphView({ graph, selectedElement, setSelectedElement, runQuery, historyQuery, historyQueries, setHistoryQueries, fetchCount, session }: {
graph: Graph
selectedElement: Node | Link | undefined
setSelectedElement: Dispatch<SetStateAction<Node | Link | undefined>>
runQuery: (query: string) => Promise<void>
historyQuery: string
historyQueries: string[]
setHistoryQueries: (queries: string[]) => void
fetchCount: () => void
session: Session | null
}) {
Expand Down Expand Up @@ -224,6 +225,7 @@ function GraphView({ graph, selectedElement, setSelectedElement, runQuery, histo
maximize={maximize}
currentQuery={query}
historyQueries={historyQueries}
setHistoryQueries={setHistoryQueries}
runQuery={handleRunQuery}
setCurrentQuery={setQuery}
data={session}
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
1 change: 1 addition & 0 deletions app/graph/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export default function Page() {
runQuery={runQuery}
historyQuery={historyQuery}
historyQueries={queries.map(({ text }) => text)}
setHistoryQueries={(queriesArr) => setQueries(queries.map((query, i) => ({ text: queriesArr[i], metadata: query.metadata } as Query)))}
fetchCount={fetchCount}
session={session}
/>
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
Loading

0 comments on commit b5bda9c

Please sign in to comment.