Rework visualizer to provide separate views of schema and relationships and update those views - #108
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
a88be8b to
ed86700
Compare
ed86700 to
915c9dd
Compare
915c9dd to
bf7fd08
Compare
|
|
||
| import { PanelProps } from "./base/common"; | ||
|
|
||
| declare module "@tanstack/react-router" { |
There was a problem hiding this comment.
I removed the history state binding, so this went away.
| } | ||
| } | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => |
There was a problem hiding this comment.
Styling is tailwind now
| RESOURCE_ID_REGEX, | ||
| SUBJECT_ID_REGEX, | ||
| } from "../../parsing"; | ||
| } from "@/spicedb-common/parsing"; |
There was a problem hiding this comment.
I moved these components, so I updated their imports to be non-relative
| <EdgeLabelRenderer> | ||
| <div | ||
| style={{ | ||
| position: "absolute", |
There was a problem hiding this comment.
I'd like to make these use tailwind instead.
There was a problem hiding this comment.
I had a go at making these use native tooltip behavior, but react-flow is using a canvas which makes shadcn tooltip stuff less useful, and the tooltip functionality built into react-flow doesn't look as good imo
| const handleMouseMove = useCallback((event: React.MouseEvent) => { | ||
| setMousePosition({ x: event.clientX, y: event.clientY }); | ||
| }, []); |
There was a problem hiding this comment.
I'm a little worried this will have performance implications but I can't say how it'll manifest off the top of my head.
|
|
||
| const definitions = useMemo( | ||
| () => | ||
| schema.definitions.filter((def): def is ParsedObjectDefinition => def.kind === "objectDef"), |
There was a problem hiding this comment.
I didn't know that you could inline a type assertion like this - TIL
There was a problem hiding this comment.
Everything based on visjs has been removed
There was a problem hiding this comment.
I'm not sure why this was ever in here
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> |
There was a problem hiding this comment.
Getting rid of the visjs include
bf7fd08 to
f0a3c40
Compare
f0a3c40 to
9a5cb13
Compare
| {/* Toggle for view mode */} | ||
| <div className="absolute top-4 left-4 z-10 bg-background rounded-md shadow-sm"> | ||
| <ToggleGroup value={viewMode} variant="outline" type="single" onValueChange={setViewMode}> | ||
| <ToggleGroupItem value="relationships" title="Relationship Graph"> |
There was a problem hiding this comment.
These two buttons could use cursor: pointer.
9a5cb13 to
067f1d4
Compare
067f1d4 to
0a7f07f
Compare
2 participants
Fixes #98
Description
We've gotten feedback that the schema visualizer is hard to grok and follow and doesn't provide a ton of value. This is an attempt at reworking it to make it more useful.
TODO
These are bugs that aren't solved by this PR, but will be solved in future work/issues:
Previous functionality that was removed, which may or may not be re-added in the future:
Changes
Will annotate.
Testing
Review. Click around in the UI and see that it updates/behaves as expected.