Skip to content

Fix(UI): Reactive to topbar buttons ; Enlarge doc list line height #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zjp-CN merged 4 commits into from
Jan 28, 2026
Merged

Fix(UI): Reactive to topbar buttons ; Enlarge doc list line height #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c274174
ui: fix doc line-height
zjp-CN Jan 28, 2026
6fc7a77
fix(ui): watch flowOpts reactive
zjp-CN Jan 28, 2026
1b26a1e
ui(topbar): hide edge type selection
zjp-CN Jan 28, 2026
eb73e43
ui(topbar): button styling adjustment
zjp-CN Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ui/app/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,8 @@ html, body {

@layer components {
.prose-tight-list li {
line-height: 0.5 !important;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
line-height: 1.5 !important;
margin-top: 0.1rem !important;
margin-bottom: 0.1rem !important;
}
}
24 changes: 12 additions & 12 deletions ui/app/components/Flow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,21 +78,21 @@ onNodeClick(event => {
adtOpts.value = {}
})

watch(
() => ({ caller: item.value, opts: flowOpts.value, tags: props.tags, ch: chPx.value }),
async ({ caller, opts, tags, ch }) => {
// This should be a caller or adt, but currently only caller is supported.
if (!caller.name) return;
// () => ({ caller: item.value, opts: flowOpts.value, tags: props.tags, ch: chPx.value }),
watchEffect(async () => {
const caller = item.value
// This should be a caller or adt, but currently only caller is supported.
if (!caller.name) return;

const px = Math.ceil(ch);
const plotConfig = new PlotConfig(tags, px, opts);
const px = Math.ceil(chPx.value);
const plotConfig = new PlotConfig(props.tags, px, flowOpts.value);

const plot = new Plot(plotConfig, elk);
await plot.plot(caller);
const plot = new Plot(plotConfig, elk);
await plot.plot(caller);

const { nodes, edges, config } = plot;
data.value = { nodes, edges, id_to_item: config.id_to_item };
})
const { nodes, edges, config } = plot;
data.value = { nodes, edges, id_to_item: config.id_to_item };
})

watch(() => flowOpts.value.fit, val => {
if (val) { fitView(); flowOpts.value.fit = false; }
Expand Down
2 changes: 1 addition & 1 deletion ui/app/components/code/Adt.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const groupedFieldAccess = computed<{ [key: string]: AdtPanelItem[] }>(() => {

// Constructors
const constructors = computed<AdtPanelItem>(() =>
gen(props.adt?.constructors, "Constructors", `All Constructors of ${props.adt?.name ?? ''}`)
gen(props.adt?.constructors, "Constructors", `All Constructors of \`${props.adt?.name ?? ''}\``)
)

// As arguments
Expand Down
25 changes: 13 additions & 12 deletions ui/app/components/widget/TopBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</template>
</UModal>

<USlideover side="left" title="Navigation">
<USlideover side="left" title="Navigation Tree">
<UTooltip text="Navigation">
<UButton icon="tabler:sitemap" variant="ghost" />
</UTooltip>
Expand All @@ -33,22 +33,23 @@
</UTooltip>

<UModal :ui="{ content: 'w-[70vw] max-w-none' }">
<UTooltip text="Safety Tags (Safety Properties)">
<UButton icon="tabler:tag" variant="ghost" :ui="{ leadingIcon: 'text-orange-600 dark:text-orange-400' }" />
<UTooltip text="Safety Properties Specs & Stats">
<UButton icon="tabler:tag" variant="ghost" label="Safety Tags"
:ui="{ leadingIcon: 'text-orange-600 dark:text-orange-400', label: 'text-orange-600 dark:text-orange-400' }" />
</UTooltip>
<template #content>
<WidgetTag :tags="tags" />
</template>
</UModal>

<UTooltip v-if="false" text="Layout Algorithm">
<USelect v-model="flowOpts.layout" placeholder="Layout" :items="ELK_LAYOUTS" class="w-31"
icon="tabler:layout-board-split-filled" />
</UTooltip>

<UTooltip text="Edge Type">
<USelect v-model="flowOpts.edge" placeholder="Edge Type" :items="EDGE_TYPES" class="w-30" icon="tabler:line" />
</UTooltip>
<!-- <UTooltip v-if="false" text="Layout Algorithm"> -->
<!-- <USelect v-model="flowOpts.layout" placeholder="Layout" :items="ELK_LAYOUTS" class="w-31" -->
<!-- icon="tabler:layout-board-split-filled" /> -->
<!-- </UTooltip> -->
<!---->
<!-- <UTooltip text="Edge Type"> -->
<!-- <USelect v-model="flowOpts.edge" placeholder="Edge Type" :items="EDGE_TYPES" class="w-30" icon="tabler:line" /> -->
<!-- </UTooltip> -->

<UTooltip text="Fit To Screen">
<UButton icon="tabler:arrow-autofit-height" color="neutral" variant="ghost" @click="fitViewHandle" />
Expand All @@ -67,7 +68,7 @@
<script setup lang="ts">
import type { TreeItem } from '@nuxt/ui';
import { getTag, type DataTags } from '~/lib/output/tag';
import { VIEW_TYPES, NAVI, naviTreeURL, ELK_LAYOUTS, EDGE_TYPES, CRATES, } from '~/lib/topbar';
import { VIEW_TYPES, NAVI, naviTreeURL, CRATES, } from '~/lib/topbar';
import type { Navi, FlowOpts, Crate, Search, SearchFnItem } from '~/lib/topbar';

// Props values are passed in, and never mutated here.
Expand Down
2 changes: 1 addition & 1 deletion ui/app/lib/panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const enum Panel {
Adt = "Adt Exogenous Fn",
}

export const PANELS: Panel[] = [Panel.Tag, Panel.Adt, Panel.Doc, Panel.Src, Panel.Mir];
export const PANELS: Panel[] = [Panel.Adt, Panel.Tag, Panel.Doc, Panel.Src, Panel.Mir];

export type PanelContent = {
nodeItem: string
Expand Down