Skip to content

Commit a009fa2

Browse files
joeldevelopsjoeldevelops
committed
Improve the way we handle checking the current view, improve details pane
1 parent 0c84e0f commit a009fa2

File tree

9 files changed

+289
-280
lines changed

9 files changed

+289
-280
lines changed

‎packages/app/src/components/FileDetailsPane.tsx‎

Lines changed: 125 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { Link } from "react-router";
2-
import {
3-
Button,
4-
Callout,
5-
ScrollArea,
6-
Separator,
7-
Text,
8-
Box,
9-
} from "@radix-ui/themes";
2+
import { Button, Callout, ScrollArea, Separator, Text } from "@radix-ui/themes";
103
import {
114
LuX,
125
LuCircleX,
@@ -30,9 +23,9 @@ import {
3023
// Subcomponent for section headings
3124
function SectionHeading({ children }: { children: React.ReactNode }) {
3225
return (
33-
<Box className="font-semibold text-lg mt-4 mb-2 flex items-center gap-2">
26+
<div className="font-semibold text-lg mt-4 mb-2 flex items-center gap-2">
3427
{children}
35-
</Box>
28+
</div>
3629
);
3730
}
3831

@@ -72,7 +65,7 @@ function MetricItem({
7265
// Alert badge component
7366
function AlertBadge({ count }: { count: number }) {
7467
return (
75-
<div className="flex items-center gap-1">
68+
<div className="flex items-center space-x-1">
7669
<LuTriangle
7770
className={`text-lg ${count > 0 ? "text-amber-500" : "text-gray-400"}`}
7871
/>
@@ -109,7 +102,10 @@ function SymbolSection({
109102
return (
110103
<div className="mb-4">
111104
<div className="flex justify-between items-center">
112-
<Text as="span" className="font-semibold">
105+
<Text
106+
as="span"
107+
className="font-semibold break-words text-wrap max-w-[300px]"
108+
>
113109
{symbolData.type}: {symbol.id}
114110
</Text>
115111
<AlertBadge count={alerts.length} />
@@ -155,139 +151,132 @@ export default function FileDetailsPane(props: {
155151
);
156152

157153
return (
158-
<div className="relative h-full flex justify-end z-1">
159-
<div
160-
style={{
161-
width: open ? "400px" : "0px",
162-
opacity: open ? 1 : 0,
163-
}}
164-
className="z-20 h-full flex flex-col gap-5 bg-background-light dark:bg-background-dark shadow-xl p-6 rounded-l-lg transition-all duration-300 ease-in-out overflow-hidden"
165-
>
166-
<ScrollArea className="h-full pr-5" scrollbars="vertical">
167-
{/* Header */}
168-
<div className="flex flex-col gap-2">
169-
<div className="flex justify-between items-center">
170-
<h2 className="text-xl font-semibold font-mono break-words text-wrap">
171-
{fileName}
172-
</h2>
173-
<Button
174-
onClick={() => setOpen(false)}
175-
variant="ghost"
176-
className="text-xl text-text-light dark:text-text-dark"
177-
>
178-
<LuX />
179-
</Button>
180-
</div>
181-
<Separator className="w-full" />
182-
</div>
154+
<div
155+
className={`fixed top-[6%] right-0 h-[92%] w-[400px] rounded-l-lg bg-background-light dark:bg-secondaryBackground-dark shadow-xl z-[8888] transition-transform duration-300 translate-x-0 ${
156+
open ? "translate-x-0" : "translate-x-[400px]"
157+
}`}
158+
>
159+
<ScrollArea className="h-full p-6" scrollbars="vertical">
160+
{/* Header */}
161+
<div className="flex justify-between items-center my-4 max-w-[388px]">
162+
<h2 className="text-xl font-semibold font-mono break-words text-wrap max-w-[310px]">
163+
{fileName}
164+
</h2>
165+
<button
166+
onClick={() => setOpen(false)}
167+
className="text-xl text-gray-light hover:text-black dark:text-gray-dark dark:hover:text-white"
168+
>
169+
<LuX />
170+
</button>
171+
</div>
172+
<Separator className="w-full" />
183173

184-
{/* File Metrics with Alerts */}
185-
<SectionHeading>
186-
<div className="w-full flex justify-between items-center">
187-
<div className="flex items-center gap-2">
188-
<LuFileText />
189-
<div>File Metrics</div>
190-
</div>
191-
<AlertBadge count={fileAlerts.length} />
174+
{/* File Metrics with Alerts */}
175+
<SectionHeading>
176+
<div className="w-full flex justify-between items-center">
177+
<div className="flex items-center gap-2">
178+
<LuFileText />
179+
<div>File Metrics</div>
192180
</div>
193-
</SectionHeading>
194-
<div className="rounded-md bg-gray-100 dark:bg-gray-800 p-3">
195-
<MetricItem
196-
label="Lines Total"
197-
value={fileDependencyManifest.metrics[metricLinesCount]}
198-
alert={alertsByMetric[metricLinesCount]}
199-
/>
200-
<MetricItem
201-
label="Lines of Code"
202-
value={fileDependencyManifest.metrics[metricCodeLineCount]}
203-
alert={alertsByMetric[metricCodeLineCount]}
204-
/>
205-
<MetricItem
206-
label="Characters"
207-
value={fileDependencyManifest.metrics[metricCharacterCount]}
208-
alert={alertsByMetric[metricCharacterCount]}
209-
/>
210-
<MetricItem
211-
label="Code Characters"
212-
value={fileDependencyManifest.metrics[metricCodeCharacterCount]}
213-
alert={alertsByMetric[metricCodeCharacterCount]}
214-
/>
215-
<MetricItem
216-
label="Cyclomatic Complexity"
217-
value={fileDependencyManifest.metrics[metricCyclomaticComplexity]}
218-
alert={alertsByMetric[metricCyclomaticComplexity]}
219-
/>
220-
<MetricItem
221-
label="Dependencies"
222-
value={fileDependencyManifest.metrics[metricDependencyCount]}
223-
alert={alertsByMetric[metricDependencyCount]}
224-
/>
225-
<MetricItem
226-
label="Dependents"
227-
value={fileDependencyManifest.metrics[metricDependentCount]}
228-
alert={alertsByMetric[metricDependentCount]}
229-
/>
181+
<AlertBadge count={fileAlerts.length} />
230182
</div>
183+
</SectionHeading>
184+
<div className="rounded-md bg-gray-100 dark:bg-gray-800 p-3">
185+
<MetricItem
186+
label="Lines Total"
187+
value={fileDependencyManifest.metrics[metricLinesCount]}
188+
alert={alertsByMetric[metricLinesCount]}
189+
/>
190+
<MetricItem
191+
label="Lines of Code"
192+
value={fileDependencyManifest.metrics[metricCodeLineCount]}
193+
alert={alertsByMetric[metricCodeLineCount]}
194+
/>
195+
<MetricItem
196+
label="Characters"
197+
value={fileDependencyManifest.metrics[metricCharacterCount]}
198+
alert={alertsByMetric[metricCharacterCount]}
199+
/>
200+
<MetricItem
201+
label="Code Characters"
202+
value={fileDependencyManifest.metrics[metricCodeCharacterCount]}
203+
alert={alertsByMetric[metricCodeCharacterCount]}
204+
/>
205+
<MetricItem
206+
label="Cyclomatic Complexity"
207+
value={fileDependencyManifest.metrics[metricCyclomaticComplexity]}
208+
alert={alertsByMetric[metricCyclomaticComplexity]}
209+
/>
210+
<MetricItem
211+
label="Dependencies"
212+
value={fileDependencyManifest.metrics[metricDependencyCount]}
213+
alert={alertsByMetric[metricDependencyCount]}
214+
/>
215+
<MetricItem
216+
label="Dependents"
217+
value={fileDependencyManifest.metrics[metricDependentCount]}
218+
alert={alertsByMetric[metricDependentCount]}
219+
/>
220+
</div>
231221

232-
{/* Symbols with their metrics and alerts */}
233-
<SectionHeading>
234-
<LuCode /> Symbols
235-
</SectionHeading>
222+
{/* Symbols with their metrics and alerts */}
223+
<SectionHeading>
224+
<LuCode /> Symbols
225+
</SectionHeading>
236226

237-
{/* Total symbols count */}
238-
<div className="mb-3">
239-
<MetricItem
240-
label="Total Symbols"
241-
value={Object.keys(fileDependencyManifest.symbols).length}
242-
/>
243-
<div className="mt-2">
244-
<ul className="list-inside list-disc">
245-
{Object.entries(
246-
Object.values(fileDependencyManifest.symbols).reduce(
247-
(acc, symbol) => {
248-
acc[symbol.type] = (acc[symbol.type] || 0) + 1;
249-
return acc;
250-
},
251-
{} as Record<string, number>,
252-
),
253-
).map(([type, count]) => (
254-
<li key={type} className="text-sm">
255-
<span className="font-medium">{type}:</span> {count}
256-
</li>
257-
))}
258-
</ul>
259-
</div>
227+
{/* Total symbols count */}
228+
<div className="mb-3">
229+
<MetricItem
230+
label="Total Symbols"
231+
value={Object.keys(fileDependencyManifest.symbols).length}
232+
/>
233+
<div className="mt-2">
234+
<ul className="list-inside list-disc">
235+
{Object.entries(
236+
Object.values(fileDependencyManifest.symbols).reduce(
237+
(acc, symbol) => {
238+
acc[symbol.type] = (acc[symbol.type] || 0) + 1;
239+
return acc;
240+
},
241+
{} as Record<string, number>,
242+
),
243+
).map(([type, count]) => (
244+
<li key={type} className="text-sm">
245+
<span className="font-medium">{type}:</span> {count}
246+
</li>
247+
))}
248+
</ul>
260249
</div>
250+
</div>
261251

262-
{/* Individual symbols with their metrics and alerts */}
263-
<div className="mt-3">
264-
{Object.values(fileAuditManifest.symbols).map((symbol) => (
265-
<SymbolSection
266-
key={symbol.id}
267-
symbol={symbol}
268-
fileDependencyManifest={fileDependencyManifest}
269-
/>
270-
))}
271-
</div>
252+
{/* Individual symbols with their metrics and alerts */}
253+
<div className="mt-3">
254+
{Object.values(fileAuditManifest.symbols).map((symbol) => (
255+
<SymbolSection
256+
key={symbol.id}
257+
symbol={symbol}
258+
fileDependencyManifest={fileDependencyManifest}
259+
/>
260+
))}
261+
</div>
272262

273-
{/* Action Buttons */}
274-
<div className="mt-5 grow flex flex-col justify-end">
275-
<Link
276-
to={`/audit/${encodeURIComponent(fileDependencyManifest.filePath)}`}
277-
className="block"
263+
{/* Action Buttons */}
264+
<div className="mt-5 grow flex flex-col justify-end">
265+
<Link
266+
to={`/audit/${encodeURIComponent(fileDependencyManifest.filePath)}`}
267+
className="block"
268+
>
269+
<Button
270+
variant="ghost"
271+
size="3"
272+
className="flex justify-center gap-2 text-text-light dark:text-text-dark w-full"
278273
>
279-
<Button
280-
variant="ghost"
281-
size="3"
282-
className="flex justify-center gap-2 text-text-light dark:text-text-dark w-full"
283-
>
284-
<LuSearchCode className="text-xl my-auto" />
285-
<span className="my-auto">Inspect file interactions</span>
286-
</Button>
287-
</Link>
288-
</div>
289-
</ScrollArea>
290-
</div>
274+
<LuSearchCode className="text-xl my-auto" />
275+
<span className="my-auto">Inspect file interactions</span>
276+
</Button>
277+
</Link>
278+
</div>
279+
</ScrollArea>
291280
</div>
292281
);
293282
}

‎packages/app/src/components/FileExplorer/FileExplorer.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -706,6 +706,15 @@ function ExtractionElement(props: {
706706
);
707707
}
708708

709+
// If a file is unchecked, remove all symbols from the extraction
710+
if (fileChecked === false) {
711+
props.updateExtractionNodes(
712+
props.node.filePath,
713+
props.node.symbols,
714+
"remove",
715+
);
716+
}
717+
709718
//Finally, update the checkedSymbols to remove the unchecked symbols
710719
setCheckedSymbols((prev) => {
711720
const newMap = new Map<string, boolean>();

0 commit comments

Comments
 (0)