Skip to content

Commit d07be4d

Browse files
authored
Update schema view styling + filter graph to selected module (#376)
1 parent edb67ea commit d07be4d

File tree

11 files changed

+85
-124
lines changed

11 files changed

+85
-124
lines changed

shared/common/ui/splitView/splitView.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
min-height: 0;
2323
flex-shrink: 0;
2424
flex-grow: 0;
25-
background: var(--app-panel-bg);
25+
background: var(--app_panel_background);
2626

2727
&:first-child {
2828
border-top-left-radius: 8px;

shared/common/ui/switcherButton/switcherButton.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.switcherButton {
44
position: relative;
55
z-index: 110;
6-
--buttonBg: #e6e6e6;
6+
--buttonBg: var(--Grey99);
77
--buttonTextColour: #5e5e5e;
88

99
@include darkTheme {

shared/schemaGraph/components/schemaGraph/index.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {observer} from "mobx-react-lite";
44
import styles from "./schemaGraph.module.scss";
55
import {useSchemaState} from "../../state/provider";
66
import {useDragHandler, Position} from "@edgedb/common/hooks/useDragHandler";
7-
import {useDBRouter} from "@edgedb/studio/hooks/dbRoute";
87

98
import SchemaNode from "./SchemaNode";
109
import SchemaLink from "./SchemaLink";
@@ -98,8 +97,6 @@ export default observer(function SchemaGraph({
9897
const schemaState = useSchemaState();
9998
const schemaGraphState = schemaState.graph;
10099

101-
const {navigate, currentPath} = useDBRouter();
102-
103100
const viewportRef = useRef<HTMLDivElement>(null);
104101

105102
const viewport = schemaGraphState.viewport;
@@ -166,7 +163,6 @@ export default observer(function SchemaGraph({
166163
const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
167164
if (event.target === event.currentTarget) {
168165
schemaState.deselectAll();
169-
navigate(`${currentPath[0]}/schema`);
170166
}
171167
};
172168

shared/schemaGraph/components/schemaGraph/schemaGraph.module.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,12 @@
7070
.object {
7171
background: var(--schemagraph-object-background);
7272
width: 240px;
73-
border-radius: 4px;
74-
font-family: "Roboto Mono";
73+
border-radius: 6px;
74+
font-family: "Roboto Mono Variable", monospace;
7575
overflow: hidden;
7676
color: var(--schemagraph-object-colour);
7777
padding-bottom: 8px;
78+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
7879
pointer-events: auto;
7980
opacity: 1;
8081
transition: opacity 0.2s, transform 0.3s;
@@ -90,7 +91,7 @@
9091
height: 32px;
9192
text-align: center;
9293
line-height: 32px;
93-
font-weight: bold;
94+
font-weight: 500;
9495
font-size: 14px;
9596
color: var(--schemagraph-object-header-colour);
9697
overflow: hidden;

shared/schemaGraph/state/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export const Schema = types
6666
self.constraints = constraints;
6767
self.scalars = scalars;
6868

69+
self.graph.hideAllLinks = true;
6970
self.graph.updateGraphNodesAndLinks(objects);
7071
return self.graph.autoLayoutNodes();
7172
},

shared/studio/tabs/schema/renderers/module.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export function ModuleRenderer({
3333
{threshold: [1]}
3434
);
3535

36-
observer.observe(ref.current!);
36+
setTimeout(() => observer.observe(ref.current!), 0);
3737

3838
return () => {
3939
observer.disconnect();
4040
};
4141
}
42-
}, []);
42+
}, [ref.current]);
4343

4444
return (
4545
<div

shared/studio/tabs/schema/schema.module.scss

+15-7
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,22 @@
55
flex-grow: 1;
66
min-width: 0;
77
flex-direction: column;
8-
margin-bottom: -16px;
8+
margin-bottom: -8px;
99

10-
& > * {
11-
border-radius: 8px;
10+
& > :first-child {
11+
border-radius: 12px;
12+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06);
13+
14+
@include darkTheme {
15+
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2),
16+
0px 0px 4px 0px rgba(0, 0, 0, 0.3);
17+
}
1218
}
1319

1420
@include breakpoint(mobile) {
1521
margin-bottom: 0;
1622

17-
& > * {
23+
& > :first-child {
1824
border-radius: 0;
1925
}
2026
}
@@ -32,7 +38,7 @@
3238
--schemagraph-linkprop-background: #ededed;
3339
--schemagraph-link-stroke: #d685a2;
3440
--schemagraph-link-selected-stroke: #d685a2;
35-
--schemagraph-link-inherit-stroke: #9a9a9a;
41+
--schemagraph-link-inherit-stroke: #b3b3b3;
3642

3743
// Schema Sidepanel
3844
--schemasidepanel-background: #f0f0f0;
@@ -125,10 +131,12 @@
125131
position: relative;
126132
display: flex;
127133
overflow: hidden;
128-
background-image: url(data:png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgB7cyhEQAgDEPRgur+Q2aGOFAIuIMcRdJvol4KgGbBqj2UeImkhfCAp4Mtdvdpr7CCEqt+xB0XnQzPyC3maAAAAABJRU5ErkJggg==);
134+
background: var(--Grey93);
135+
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='1.25' fill='%23e1e1e1'/%3E%3C/svg%3E%0A");
129136

130137
@include darkTheme {
131-
background-image: url(data:png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgB7cwhDgAgDEPRQbKb9P4XrACFgAQahmTfVL0WAM2CVXso8RJJC+EBTwdb7O7TXmEFJVb9iDsGOAqJmekB+AAAAABJRU5ErkJggg==);
138+
background: var(--Grey12);
139+
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='1.25' fill='%23292929'/%3E%3C/svg%3E%0A");
132140
}
133141
}
134142

shared/studio/tabs/schema/state/index.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,8 @@ export class Schema extends Model({
2929
const schemaData = dbCtx.get(this)!.schemaData;
3030
if (schemaData) {
3131
this.schemaState.updateSchema(
32-
[...schemaData.objects.values()]
33-
.filter(
34-
(o) =>
35-
!o.builtin && !o.insectionOf && !o.unionOf && !o.from_alias
36-
)
32+
this.textViewState.moduleGroupItems
33+
.filter((type) => type.schemaType === "Object")
3734
.map((o) => ({
3835
name: o.name,
3936
is_abstract: o.abstract,

0 commit comments

Comments
 (0)