Skip to content

Commit ce4234d

Browse files
antfuantfu
committed
feat: adjust UI
1 parent cf529c3 commit ce4234d

5 files changed

Lines changed: 78 additions & 25 deletions

File tree

‎examples/prototype-data-inspector/src/spa/App.vue‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import type { Query, SavedQueryScope } from '../rpc-contract'
3+
import Button from '@antfu/design/components/Action/ActionButton.vue'
34
import ActionDarkToggle from '@antfu/design/components/Action/ActionDarkToggle.vue'
45
import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
56
import FormSelect from '@antfu/design/components/Form/FormSelect.vue'
@@ -16,6 +17,7 @@ import { connect, connection } from './composables/rpc'
1617
import { useSavedQueries } from './composables/saved'
1718
import { colorScheme } from './composables/scheme'
1819
import { useWorkbench } from './composables/workbench'
20+
import '@antfu/design/styles.css'
1921
2022
const wb = useWorkbench()
2123
const savedApi = useSavedQueries()
@@ -57,7 +59,6 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
5759
<div class="flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none">
5860
<span class="i-ph:tree-structure-duotone text-base color-active" />
5961
<span>Data Inspector</span>
60-
<DisplayBadge text="prototype" :color="8" />
6162
</div>
6263

6364
<div class="flex items-center gap-2">
@@ -89,6 +90,37 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
8990
<!-- The left column's sections resize with the same split-pane setup. -->
9091
<LayoutSplitPane horizontal storage-key="data-inspector-left-panes" class="h-full">
9192
<Pane :size="42" min-size="20" class="flex flex-col gap-2 p-3 pb-1.5 min-h-0">
93+
<div class="flex items-center gap-2 font-semibold text-sm select-none">
94+
<div>Jora Query</div>
95+
<a
96+
href="https://discoveryjs.github.io/jora/"
97+
target="_blank"
98+
title="Jora query language reference"
99+
class="flex items-center gap-1 color-muted hover:color-active"
100+
>
101+
<span class="i-ph:question-duotone" />
102+
</a>
103+
<div class="flex-auto" />
104+
<Button
105+
v-if="wb.query.value"
106+
:disabled="!wb.query.value"
107+
title="Clear query"
108+
icon="i-ph:trash-duotone"
109+
@click="wb.query.value = ''"
110+
>
111+
<span>Clear</span>
112+
</Button>
113+
<Button
114+
:disabled="wb.running.value"
115+
:loading="wb.running.value"
116+
title="Run query"
117+
icon="i-ph:play-duotone"
118+
@click="wb.runNow()"
119+
>
120+
<span>Run</span>
121+
</Button>
122+
</div>
123+
<!-- TODO: Query draft should be persistent in local storage per data source, on switching data sources, it should be restored/reset -->
92124
<QueryEditor
93125
v-model="wb.query.value"
94126
:syntax="wb.syntax.value"
@@ -101,14 +133,6 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
101133
/>
102134
<QuerySettings v-model="wb.settings" />
103135
</Pane>
104-
<Pane :size="33" min-size="12" class="p-3 py-1.5 min-h-0">
105-
<SkeletonPanel
106-
:skeleton="wb.skeleton.value"
107-
:error="wb.skeletonError.value"
108-
:loading="wb.skeletonLoading.value"
109-
@refresh="wb.loadSkeleton()"
110-
/>
111-
</Pane>
112136
<Pane min-size="12" class="p-3 pt-1.5 min-h-0">
113137
<SavedQueriesPanel
114138
:saved="savedApi.saved.value"
@@ -121,6 +145,15 @@ function saveCurrent(input: { title?: string, description?: string, scope: Saved
121145
@save="saveCurrent"
122146
/>
123147
</Pane>
148+
<Pane :size="33" min-size="12" class="p-3 py-1.5 min-h-0">
149+
<!-- TODO: this should be replaced with "DataSourceInfoPanel", that shows the data source title/description and simple data shape with one-level depth with normal code block (not discovery), on click the prop it would set the query -->
150+
<SkeletonPanel
151+
:skeleton="wb.skeleton.value"
152+
:error="wb.skeletonError.value"
153+
:loading="wb.skeletonLoading.value"
154+
@refresh="wb.loadSkeleton()"
155+
/>
156+
</Pane>
124157
</LayoutSplitPane>
125158
</Pane>
126159
<Pane class="min-w-0">

‎examples/prototype-data-inspector/src/spa/components/ResultViewer.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import type { QueryStats } from '../../rpc-contract'
33
import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
4+
import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
45
import DisplayBytes from '@antfu/design/components/Display/DisplayBytes.vue'
56
import DisplayDuration from '@antfu/design/components/Display/DisplayDuration.vue'
67
import { shallowRef, watch } from 'vue'
@@ -31,13 +32,20 @@ watch(() => props.result, (value) => {
3132
<div class="flex flex-col h-full min-h-0">
3233
<div class="flex items-center gap-3 px-3 py-1.5 border-b border-base min-h-9 text-xs color-muted font-mono tabular-nums" :class="{ 'op-fade': statsStale }">
3334
<template v-if="stats">
34-
<span class="flex items-center gap-1">jora <DisplayDuration :ms="stats.queryMs" colorize /></span>
35-
<span class="flex items-center gap-1">normalize <DisplayDuration :ms="stats.normalize.ms" colorize /></span>
36-
<span class="flex items-center gap-1">rpc <DisplayDuration :ms="stats.rpcMs" colorize /></span>
37-
<span class="flex items-center gap-1">payload <DisplayBytes :bytes="stats.payloadBytes" colorize /></span>
38-
<span>{{ stats.normalize.nodes }} nodes</span>
39-
<span v-if="stats.normalize.refs">{{ stats.normalize.refs }} $refs</span>
40-
<span v-if="stats.normalize.truncatedEntries || stats.normalize.truncatedDepth" class="color-amber-600 dark:color-amber-400">truncated</span>
35+
<span class="flex items-center gap-1"><span class="op50">jora</span> <DisplayDuration :ms="stats.queryMs" colorize /></span>
36+
<div class="h-full border-r border-base" />
37+
<span class="flex items-center gap-1"><span class="op50">normalize</span> <DisplayDuration :ms="stats.normalize.ms" colorize /></span>
38+
<div class="h-full border-r border-base" />
39+
<span class="flex items-center gap-1"><span class="op50">rpc</span> <DisplayDuration :ms="stats.rpcMs" colorize /></span>
40+
<div class="h-full border-r border-base" />
41+
<span class="flex items-center gap-1"><span class="op50">payload</span> <DisplayBytes :bytes="stats.payloadBytes" colorize /></span>
42+
<div class="h-full border-r border-base" />
43+
<span>{{ stats.normalize.nodes }} <span class="op50">nodes</span></span>
44+
<template v-if="stats.normalize.refs">
45+
<div class="h-full border-r border-base" />
46+
<span>{{ stats.normalize.refs }} <span class="op50">refs</span></span>
47+
</template>
48+
<DisplayBadge v-if="stats.normalize.truncatedEntries || stats.normalize.truncatedDepth" :color="12" text="truncated" />
4149
</template>
4250
<span v-else class="op-fade select-none">no query run yet</span>
4351
<div class="flex-1" />

‎examples/prototype-data-inspector/src/spa/components/SavedQueriesPanel.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ function filterBadges(entry: Query): string[] {
133133
No queries yet. Compose one and hit "Save query".
134134
</div>
135135

136+
<!-- TODO: in this save query modal, we should also show the filters -->
136137
<OverlayModal
137138
v-model:open="dialogOpen"
138139
title="Save query"

‎examples/prototype-data-inspector/src/spa/composables/discovery.ts‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
1515
// for the `.di-result-host` values that flip with `.dark`), zero out the
1616
// stock page padding, and style the type badges rendered by the annotation.
1717
const themeBridge = `
18-
:host {
18+
:host, .discovery-root {
1919
--discovery-background-color: var(--di-result-bg);
2020
--discovery-color: var(--di-result-fg);
2121
--discovery-page-padding-top: 0;
@@ -28,11 +28,11 @@ const themeBridge = `
2828
font-size: 10px;
2929
line-height: 1.4;
3030
padding: 0 5px;
31-
border-radius: 999px;
31+
border-radius: 999px !important;
3232
border: 1px solid transparent;
33-
background: color-mix(in srgb, var(--di-badge-color, #888) 14%, transparent);
34-
border-color: color-mix(in srgb, var(--di-badge-color, #888) 32%, transparent);
35-
color: var(--di-badge-color, #888);
33+
background: color-mix(in srgb, var(--di-badge-color, #888) 14%, transparent) !important;
34+
border-color: color-mix(in srgb, var(--di-badge-color, #888) 32%, transparent) !important;
35+
color: var(--di-badge-color, #888) !important;
3636
}
3737
.di-type-function { --di-badge-color: #8a63d2; }
3838
.di-type-class { --di-badge-color: #c98a1f; }
@@ -58,7 +58,7 @@ function typeAnnotation(value: unknown): AnnotationBadge | undefined {
5858
const v = value as Record<string, unknown>
5959

6060
if (typeof v.$ref === 'string') {
61-
return { place: 'after', style: 'badge', text: 'circular', className: 'di-type-badge di-type-ref' }
61+
return { place: 'after', style: 'badge', text: '#Circular', className: 'di-type-badge di-type-ref' }
6262
}
6363
if (typeof v.$type === 'string') {
6464
const type = v.$type
@@ -72,11 +72,15 @@ function typeAnnotation(value: unknown): AnnotationBadge | undefined {
7272
: type === 'Date'
7373
? 'di-type-date'
7474
: 'di-type-other'
75-
const label = type === 'function' ? 'Function' : `${type}${size}`
75+
const label = type === 'function'
76+
? (v.name && v.name !== '(anonymous)')
77+
? `fn ${v.name}`
78+
: 'Function'
79+
: `${type}${size}`
7680
return { place: 'after', style: 'badge', text: label, className: `di-type-badge ${kind}` }
7781
}
7882
if (typeof v.$class === 'string') {
79-
return { place: 'after', style: 'badge', text: v.$class, className: 'di-type-badge di-type-class' }
83+
return { place: 'after', style: 'badge', text: `class ${v.$class}`, className: 'di-type-badge di-type-class' }
8084
}
8185
return undefined
8286
}
@@ -98,7 +102,13 @@ export function useDiscoveryViewer(
98102
colorScheme: scheme.value,
99103
colorSchemePersistent: false,
100104
})
101-
vm.page.define('default', { annotations: [typeAnnotation], ...viewConfig } as never)
105+
vm.page.define(
106+
'default',
107+
{
108+
annotations: [typeAnnotation],
109+
...viewConfig,
110+
} as never,
111+
)
102112
await vm.dom.ready
103113
host.value = vm
104114
if (pendingData) {

‎examples/prototype-data-inspector/src/spa/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ body,
55
#app {
66
margin: 0;
77
height: 100%;
8+
overflow: hidden;
89
}
910

1011
/* Bridge for the discovery panel's shadow root: the --discovery-* custom

0 commit comments

Comments
 (0)