8000 refactor(ui): simplify chip/qubit controls and date navigation by orangekame3 · Pull Request #513 · oqtopus-team/qdash · GitHub
[go: up one dir, main page]
Skip to content

refactor(ui): simplify chip/qubit controls and date navigation #513

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
orangekame3 merged 1 commit into from
Dec 13, 2025
+213 −295
Merged

refactor(ui): simplify chip/qubit controls and date navigation #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
82 changes: 24 additions & 58 deletions ui/src/app/(auth)/chip/[chipId]/qubit/[qubitsId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,11 @@ function QubitDetailPageContent() {
}
}, [isInitialized, chipId, selectedChip, setSelectedChip]);

const {
navigateToPreviousDay,
navigateToNextDay,
canNavigatePrevious,
canNavigateNext,
formatDate,
} = useDateNavigation(chipId, selectedDate, setSelectedDate);
const { formatDate } = useDateNavigation(
chipId,
selectedDate,
setSelectedDate,
);

// Get filtered tasks for qubit type
const filteredTasks = (taskInfoData?.data?.tasks || []).filter(
Expand Down Expand Up @@ -218,61 +216,29 @@ function QubitDetailPageContent() {

{/* Controls */}
<div className="flex gap-4">
<div className="flex flex-col gap-1">
<div className="flex justify-center gap-1 opacity-0">
<button className="btn btn-xs btn-ghost invisible">←</button>
<button className="btn btn-xs btn-ghost invisible">→</button>
</div>
<ChipSelector
selectedChip={chipId}
onChipSelect={(newChipId) => {
// Navigate to the new chip's qubit detail page
window.location.href = `/chip/${newChipId}/qubit/${qubitId}`;
}}
/>
</div>
<ChipSelector
selectedChip={chipId}
onChipSelect={(newChipId) => {
// Navigate to the new chip's qubit detail page
window.location.href = `/chip/${newChipId}/qubit/${qubitId}`;
}}
/>

{viewMode !== "history" && (
<div className="flex flex-col gap-1">
<div className="flex justify-center gap-1">
<button
onClick={navigateToPreviousDay}
disabled={!canNavigatePrevious}
className="btn btn-xs btn-ghost"
title="Previous Day"
>
←
</button>
<button
onClick={navigateToNextDay}
disabled={!canNavigateNext}
className="btn btn-xs btn-ghost"
title="Next Day"
>
→
</button>
</div>
<DateSelector
chipId={chipId}
selectedDate={selectedDate}
onDateSelect={setSelectedDate}
disabled={!chipId}
/>
</div>
<DateSelector
chipId={chipId}
selectedDate={selectedDate}
onDateSelect={setSelectedDate}
disabled={!chipId}
/>
)}

<div className="flex flex-col gap-1">
<div className="flex justify-center gap-1 opacity-0">
<button className="btn btn-xs btn-ghost invisible">←</button>
<button className="btn btn-xs btn-ghost invisible">→</button>
</div>
<TaskSelector
tasks={filteredTasks}
selectedTask={selectedTask}
onTaskSelect={setSelectedTask}
disabled={false}
/>
</div>
<TaskSelector
tasks={filteredTasks}
selectedTask={selectedTask}
onTaskSelect={setSelectedTask}
disabled={false}
/>
</div>
</div>

Expand Down
10 changes: 2 additions & 8 deletions ui/src/components/features/analysis/TimeSeriesView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,10 +700,7 @@ export function TimeSeriesView() {
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
<div className="space-y-1">
<label className="text-sm font-medium text-base-content/70">
Chip
</label>
<div>
<ChipSelector
selectedChip={selectedChip}
onChipSelect={setSelectedChip}
Expand Down Expand Up @@ -755,10 +752,7 @@ export function TimeSeriesView() {
}}
/>
</div>
<div className="space-y-1">
<label className="text-sm font-medium text-base-content/70">
Tag
</label>
<div>
<TagSelector
tags={tags}
selectedTag={selectedTag}
Expand Down
35 changes: 3 additions & 32 deletions ui/src/components/features/chip/ChipPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,40 +402,14 @@ export function ChipPageContent() {
{/* Selection Controls */}
<div className="flex flex-col md:flex-row md:justify-between md:items-end gap-4">
<div className="flex flex-col sm:flex-row gap-4 flex-shrink-0">
<div className="flex flex-col gap-1 w-full sm:w-auto">
<label className="text-xs text-base-content/60 font-medium">
Chip
</label>
<div className="w-full sm:w-auto">
<ChipSelector
selectedChip={selectedChip}
onChipSelect={setSelectedChip}
/>
</div>

<div className="flex flex-col gap-1 w-full sm:w-auto">
<div className="flex items-center justify-between">
<label className="text-xs text-base-content/60 font-medium">
Date
</label>
67E6 <div className="flex gap-1">
<button
onClick={navigateToPreviousDay}
disabled={!canNavigatePrevious}
className="btn btn-xs btn-ghost px-1"
title="Previous Day"
>
←
</button>
<button
onClick={navigateToNextDay}
disabled={!canNavigateNext}
className="btn btn-xs btn-ghost px-1"
title="Next Day"
>
→
</button>
</div>
</div>
<div className="w-full sm:w-auto">
<DateSelector
chipId={selectedChip}
selectedDate={selectedDate}
Expand All @@ -444,10 +418,7 @@ export function ChipPageContent() {
/>
</div>

<div className="flex flex-col gap-1 w-full sm:w-auto">
<label className="text-xs text-base-content/60 font-medium">
Task
</label>
<div className="w-full sm:w-auto">
<TaskSelector
tasks={filteredTasks}
selectedTask={selectedTask}
Expand Down
17 changes: 5 additions & 12 deletions ui/src/components/features/chip/CouplingGrid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type { Task } from "@/schemas";

import { TaskFigure } from "@/components/charts/TaskFigure";
import { CouplingTaskHistoryModal } from "@/components/features/chip/modals/CouplingTaskHistoryModal";
import { RegionZoomToggle } from "@/components/ui/RegionZoomToggle";
import { useCouplingTaskResults } from "@/hooks/useCouplingTaskResults";
import { useTopologyConfig } from "@/hooks/useTopologyConfig";
import {
Expand Down Expand Up @@ -232,19 +233,11 @@ export function CouplingGrid({
<div ref={containerRef} className="space-y-4 px-4">
{/* Zoom mode toggle - only show in full view mode for square grids */}
{zoomMode === "full" && gridRows === gridCols && (
<div className="flex items-center gap-2 px-4">
<label className="text-sm font-medium">Region Zoom:</label>
<input
type="checkbox"
checked={regionSelectionEnabled}
onChange={(e) => setRegionSelectionEnabled(e.target.checked)}
className="toggle toggle-sm toggle-primary"
<div className="px-4">
<RegionZoomToggle
enabled={regionSelectionEnabled}
onToggle={setRegionSelectionEnabled}
/>
<span className="text-xs text-base-content/70">
{regionSelectionEnabled
? "Enabled - Click a region to zoom"
: "Disabled"}
</span>
</div>
)}

Expand Down
17 changes: 5 additions & 12 deletions ui/src/components/features/chip/TaskResultGrid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type { Task } from "@/schemas";

import { TaskFigure } from "@/components/charts/TaskFigure";
import { TaskHistoryModal } from "@/components/features/chip/modals/TaskHistoryModal";
import { RegionZoomToggle } from "@/components/ui/RegionZoomToggle";
import { useQubitTaskResults } from "@/hooks/useQubitTaskResults";
import { useTopologyConfig } from "@/hooks/useTopologyConfig";
import {
Expand Down Expand Up @@ -195,19 +196,11 @@ export function TaskResultGrid({
<div className="space-y-4">
{/* Zoom mode toggle - only show in full view mode for square grids */}
{zoomMode === "full" && gridRows === gridCols && (
<div className="flex items-center gap-2 px-4">
<label className="text-sm font-medium">Region Zoom:</label>
<input
type="checkbox"
checked={regionSelectionEnabled}
onChange={(e) => setRegionSelectionEnabled(e.target.checked)}
className="toggle toggle-sm toggle-primary"
<div className="px-4">
<RegionZoomToggle
enabled={regionSelectionEnabled}
onToggle={setRegionSelectionEnabled}
/>
<span className="text-xs text-base-content/70">
{regionSelectionEnabled
? "Enabled - Click a region to zoom"
: "Disabled"}
</span>
</div>
)}

Expand Down
56 changes: 12 additions & 44 deletions ui/src/components/features/execution/ExecutionPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,8 @@ export function ExecutionPageContent() {
// Track if we've already set the default chip to prevent race conditions
const hasSetDefaultChip = useRef(false);

// Use custom hook for date navigation
const {
navigateToPreviousDay,
navigateToNextDay,
canNavigatePrevious,
canNavigateNext,
} = useDateNavigation(selectedChip || "", selectedDate, setSelectedDate);
// Use custom hook for date navigation (unused but kept for potential future use)
useDateNavigation(selectedChip || "", selectedDate, setSelectedDate);

// Get list of chips to set default
const { data: chipsData } = useListChips();
Expand Down Expand Up @@ -226,43 +221,16 @@ export function ExecutionPageContent() {
</p>
</div>
<div className="px-3 sm:px-10 pb-4 sm:pb-6 flex flex-col sm:flex-row gap-3 sm:gap-4">
<div className="flex flex-col gap-1">
<div className="flex justify-center gap-1 opacity-0">
<button className="btn btn-xs btn-ghost invisible">←</button>
<button className="btn btn-xs btn-ghost invisible">→</button>
</div>
<ChipSelector
selectedChip={selectedChip || ""}
onChipSelect={handleChipChange}
/>
</div>

<div className="flex flex-col gap-1">
<div className="flex justify-center gap-1">
<button
onClick={navigateToPreviousDay}
disabled={!canNavigatePrevious}
className="btn btn-xs btn-ghost"
title="Previous Day"
>
←
</button>
<button
onClick={navigateToNextDay}
disabled={!canNavigateNext}
className="btn btn-xs btn-ghost"
title="Next Day"
>
→
</button>
</div>
<DateSelector
chipId={selectedChip || ""}
selectedDate={selectedDate}
onDateSelect={setSelectedDate}
disabled={!selectedChip}
/>
</div>
<ChipSelector
selectedChip={selectedChip || ""}
onChipSelect={handleChipChange}
/>
<DateSelector
chipId={selectedChip || ""}
selectedDate={selectedDate}
onDateSelect={setSelectedDate}
disabled={!selectedChip}
/>
</div>
{/* Statistics display */}
<ExecutionStats
Expand Down
60 changes: 5 additions & 55 deletions ui/src/components/features/metrics/CouplingMetricsGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, {
useState,
} from "react";

import { RegionZoomToggle } from "@/components/ui/RegionZoomToggle";
import { useTopologyConfig } from "@/hooks/useTopologyConfig";
import {
getQubitGridPosition,
Expand Down Expand Up @@ -328,61 +329,10 @@ export function CouplingMetricsGrid({
<div className="flex flex-col h-full space-y-4" ref={containerRef}>
{/* Zoom mode toggle - only show in full view mode for square grids */}
{zoomMode === "full" && isSquareGrid && (
<div
className={`flex items-center gap-3 p-3 rounded-lg border-2 transition-all duration-200 cursor-pointer select-none ${
regionSelectionEnabled
? "bg-primary/10 border-primary"
: "bg-base-200/50 border-base-300 hover:border-primary/50"
}`}
onClick={() => setRegionSelectionEnabled(!regionSelectionEnabled)}
>
<div
className={`p-2 rounded-lg ${
regionSelectionEnabled
? "bg-primary text-primary-content"
: "bg-base-300"
}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
<path d="M11 8v6" />
<path d="M8 11h6" />
</svg>
</div>
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">Region Zoom</span>
{regionSelectionEnabled && (
<span className="badge badge-primary badge-xs">Active</span>
)}
</div>
<p className="text-xs text-base-content/60">
{regionSelectionEnabled
? "Click any 2×2 region on the grid to zoom in"
: "Enable to zoom into specific regions"}
</p>
</div>
<input
type="checkbox"
checked={regionSelectionEnabled}
onChange={(e) => {
e.stopPropagation();
setRegionSelectionEnabled(e.target.checked);
}}
className="toggle toggle-primary"
/>
</div>
<RegionZoomToggle
enabled={regionSelectionEnabled}
onToggle={setRegionSelectionEnabled}
/>
)}

{/* Back button when in region mode */}
Expand Down
Loading
0