Skip to content

Commit ce59e86

Browse files
ericwang401ericwang401
committed
Add
1 parent ca1d905 commit ce59e86

26 files changed

+492
-46
lines changed

‎.prettierrc

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"bracketSameLine": false,
44
"bracketSpacing": true,
55
"embeddedLanguageFormatting": "auto",
6-
"htmlWhitespaceSensitivity": "ignore",
76
"insertPragma": false,
87
"jsxSingleQuote": true,
98
"printWidth": 100,

‎src/lib/components/interfaces/settings/SettingsPanel.svelte

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script lang="ts">
2+
import * as Sheet from '$lib/components/ui/sheet'
3+
import CogButton from '$lib/components/ui/CogButton.svelte'
4+
import { Button } from '$lib/components/ui/button'
5+
import { Icon, InformationCircle } from 'svelte-hero-icons'
6+
import { Input } from '$lib/components/ui/input'
7+
import { Label } from '$lib/components/ui/label'
8+
import * as Tooltip from '$lib/components/ui/tooltip'
9+
import { Switch } from '$lib/components/ui/switch'
10+
11+
12+
let toleranceMultiplier = 2.0
13+
let shouldRemoveNACalculations = true
14+
15+
</script>
16+
17+
<Sheet.Root>
18+
<Sheet.Trigger>
19+
<CogButton />
20+
</Sheet.Trigger>
21+
<Sheet.Content side="right">
22+
<Sheet.Header>
23+
<Sheet.Title>Advanced Settings</Sheet.Title>
24+
<Sheet.Description>
25+
For power users 🤠
26+
</Sheet.Description>
27+
</Sheet.Header>
28+
<div class="flex flex-col space-y-4 py-6">
29+
<div class="flex flex-col space-y-1.5">
30+
<div class="flex items-center space-x-2">
31+
<Switch id="should-remove-na-calculations" bind:checked={shouldRemoveNACalculations} />
32+
<Label for="should-remove-na-calculations">Avoid N/A Calculations</Label>
33+
<Tooltip.Root>
34+
<Tooltip.Trigger>
35+
<Icon src={InformationCircle} mini class='w-4 h-4' />
36+
</Tooltip.Trigger>
37+
<Tooltip.Content class='max-w-md'>
38+
<p>Removes samples with no detected peaks from the input for a given peptide to avoid "-nan(ind)"
39+
calculations. This doesn't get rid of all "-nan(ind)" calculations but helps mitigate them.</p>
40+
</Tooltip.Content>
41+
</Tooltip.Root>
42+
</div>
43+
</div>
44+
<div class="flex flex-col space-y-1.5">
45+
<Label class="flex items-center gap-2" for="tolerance-multiplier">Tolerance Multiplier
46+
<Tooltip.Root>
47+
<Tooltip.Trigger>
48+
<Icon src={InformationCircle} mini class='w-4 h-4' />
49+
</Tooltip.Trigger>
50+
<Tooltip.Content class='max-w-md'>
51+
<p>SRM heuristically detects data pertaining to different charges for a given peptide. It uses
52+
standard deviation times this multipler to determine which mass-charge ratio don't belong in
53+
the
54+
same group. Adjust to what works, but 2.0 is recommended.</p>
55+
</Tooltip.Content>
56+
</Tooltip.Root>
57+
</Label>
58+
<Input id="tolerance-multiplier" type="number" step=".1" bind:value={toleranceMultiplier} />
59+
</div>
60+
</div>
61+
<Sheet.Footer>
62+
<Sheet.Close asChild let:builder>
63+
<Button builders={[builder]} type="submit">Save changes</Button>
64+
</Sheet.Close>
65+
</Sheet.Footer>
66+
</Sheet.Content>
67+
</Sheet.Root>

‎src/lib/components/ui/CogButton.svelte

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from 'svelte/elements'
3+
import { cn } from '$lib/utils'
4+
import { Icon, Cog6Tooth } from 'svelte-hero-icons'
5+
6+
7+
interface $$props extends HTMLAttributes<HTMLButtonElement> {
8+
}
9+
10+
</script>
11+
12+
<button {...$$props} class={cn('grid items-center p-1 transition hover:rotate-45 focus:outline-none', $$props.class)}>
13+
<Icon src={Cog6Tooth} mini class="w-5 h-5 text-foreground" />
14+
</button>

‎src/lib/components/ContentContainer.svelte ‎src/lib/components/ui/ContentContainer.svelte

File renamed without changes.

‎src/lib/components/Spinner.svelte ‎src/lib/components/ui/Spinner.svelte

File renamed without changes.

‎src/lib/components/ui/button/button.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Button as ButtonPrimitive } from 'bits-ui'
33
import { cn } from '$lib/utils'
44
import { buttonVariants, type Props, type Events } from '.'
5-
import Spinner from '$lib/components/Spinner.svelte'
5+
import Spinner from '$lib/components/ui/Spinner.svelte'
66
77
type $$Props = Props
88
type $$Events = Events

‎src/lib/components/ui/sheet/index.ts

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { Dialog as SheetPrimitive } from "bits-ui";
2+
import { type VariantProps, tv } from "tailwind-variants";
3+
4+
import Portal from "./sheet-portal.svelte";
5+
import Overlay from "./sheet-overlay.svelte";
6+
import Content from "./sheet-content.svelte";
7+
import Header from "./sheet-header.svelte";
8+
import Footer from "./sheet-footer.svelte";
9+
import Title from "./sheet-title.svelte";
10+
import Description from "./sheet-description.svelte";
11+
12+
const Root = SheetPrimitive.Root;
13+
const Close = SheetPrimitive.Close;
14+
const Trigger = SheetPrimitive.Trigger;
15+
16+
export {
17+
Root,
18+
Close,
19+
Trigger,
20+
Portal,
21+
Overlay,
22+
Content,
23+
Header,
24+
Footer,
25+
Title,
26+
Description,
27+
//
28+
Root as Sheet,
29+
Close as SheetClose,
30+
Trigger as SheetTrigger,
31+
Portal as SheetPortal,
32+
Overlay as SheetOverlay,
33+
Content as SheetContent,
34+
Header as SheetHeader,
35+
Footer as SheetFooter,
36+
Title as SheetTitle,
37+
Description as SheetDescription,
38+
};
39+
40+
export const sheetVariants = tv({
41+
base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
42+
variants: {
43+
side: {
44+
top: "inset-x-0 top-0 border-b",
45+
bottom: "inset-x-0 bottom-0 border-t",
46+
left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
47+
right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
48+
},
49+
},
50+
defaultVariants: {
51+
side: "right",
52+
},
53+
});
54+
55+
export const sheetTransitions = {
56+
top: {
57+
in: {
58+
y: "-100%",
59+
duration: 500,
60+
opacity: 1,
61+
},
62+
out: {
63+
y: "-100%",
64+
duration: 300,
65+
opacity: 1,
66+
},
67+
},
68+
bottom: {
69+
in: {
70+
y: "100%",
71+
duration: 500,
72+
opacity: 1,
73+
},
74+
out: {
75+
y: "100%",
76+
duration: 300,
77+
opacity: 1,
78+
},
79+
},
80+
left: {
81+
in: {
82+
x: "-100%",
83+
duration: 500,
84+
opacity: 1,
85+
},
86+
out: {
87+
x: "-100%",
88+
duration: 300,
89+
opacity: 1,
90+
},
91+
},
92+
right: {
93+
in: {
94+
x: "100%",
95+
duration: 500,
96+
opacity: 1,
97+
},
98+
out: {
99+
x: "100%",
100+
duration: 300,
101+
opacity: 1,
102+
},
103+
},
104+
};
105+
106+
export type Side = VariantProps<typeof sheetVariants>["side"];

‎src/lib/components/ui/sheet/sheet-content.svelte

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import { Dialog as SheetPrimitive } from "bits-ui";
3+
import X from "lucide-svelte/icons/x";
4+
import { fly } from "svelte/transition";
5+
import {
6+
SheetOverlay,
7+
SheetPortal,
8+
type Side,
9+
sheetTransitions,
10+
sheetVariants,
11+
} from "./index.js";
12+
import { cn } from "$lib/utils.js";
13+
14+
type $$Props = SheetPrimitive.ContentProps & {
15+
side?: Side;
16+
};
17+
18+
let className: $$Props["class"] = undefined;
19+
export let side: $$Props["side"] = "right";
20+
export { className as class };
21+
export let inTransition: $$Props["inTransition"] = fly;
22+
export let inTransitionConfig: $$Props["inTransitionConfig"] =
23+
sheetTransitions[side ?? "right"].in;
24+
export let outTransition: $$Props["outTransition"] = fly;
25+
export let outTransitionConfig: $$Props["outTransitionConfig"] =
26+
sheetTransitions[side ?? "right"].out;
27+
</script>
28+
29+
<SheetPortal>
30+
<SheetOverlay />
31+
<SheetPrimitive.Content
32+
{inTransition}
33+
{inTransitionConfig}
34+
{outTransition}
35+
{outTransitionConfig}
36+
class={cn(sheetVariants({ side }), className)}
37+
{...$$restProps}
38+
>
39+
<slot />
40+
<SheetPrimitive.Close
41+
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
42+
>
43+
<X class="h-4 w-4" />
44+
<span class="sr-only">Close</span>
45+
</SheetPrimitive.Close>
46+
</SheetPrimitive.Content>
47+
</SheetPortal>

‎src/lib/components/ui/sheet/sheet-description.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import { Dialog as SheetPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = SheetPrimitive.DescriptionProps;
6+
7+
let className: $$Props["class"] = undefined;
8+
export { className as class };
9+
</script>
10+
11+
<SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
12+
<slot />
13+
</SheetPrimitive.Description>

‎src/lib/components/ui/sheet/sheet-footer.svelte

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = HTMLAttributes<HTMLDivElement>;
6+
7+
let className: $$Props["class"] = undefined;
8+
export { className as class };
9+
</script>
10+
11+
<div
12+
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
13+
{...$$restProps}
14+
>
15+
<slot />
16+
</div>

‎src/lib/components/ui/sheet/sheet-header.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = HTMLAttributes<HTMLDivElement>;
6+
7+
let className: $$Props["class"] = undefined;
8+
export { className as class };
9+
</script>
10+
11+
<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
12+
<slot />
13+
</div>

‎src/lib/components/ui/sheet/sheet-overlay.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Dialog as SheetPrimitive } from "bits-ui";
3+
import { fade } from "svelte/transition";
4+
import { cn } from "$lib/utils.js";
5+
6+
type $$Props = SheetPrimitive.OverlayProps;
7+
8+
let className: $$Props["class"] = undefined;
9+
export let transition: $$Props["transition"] = fade;
10+
export let transitionConfig: $$Props["transitionConfig"] = {
11+
duration: 150,
12+
};
13+
export { className as class };
14+
</script>
15+
16+
<SheetPrimitive.Overlay
17+
{transition}
18+
{transitionConfig}
19+
class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
20+
{...$$restProps}
21+
/>

‎src/lib/components/ui/sheet/sheet-portal.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import { Dialog as SheetPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = SheetPrimitive.PortalProps;
6+
7+
let className: $$Props["class"] = undefined;
8+
export { className as class };
9+
</script>
10+
11+
<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
12+
<slot />
13+
</SheetPrimitive.Portal>

‎src/lib/components/ui/sheet/sheet-title.svelte

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import { Dialog as SheetPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = SheetPrimitive.TitleProps;
6+
7+
let className: $$Props["class"] = undefined;
8+
export { className as class };
9+
</script>
10+
11+
<SheetPrimitive.Title
12+
class={cn("text-lg font-semibold text-foreground", className)}
13+
{...$$restProps}
14+
>
15+
<slot />
16+
</SheetPrimitive.Title>

‎src/lib/components/ui/tabs/index.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Tabs as TabsPrimitive } from "bits-ui";
2+
import Content from "./tabs-content.svelte";
3+
import List from "./tabs-list.svelte";
4+
import Trigger from "./tabs-trigger.svelte";
5+
6+
const Root = TabsPrimitive.Root;
7+
8+
export {
9+
Root,
10+
Content,
11+
List,
12+
Trigger,
13+
//
14+
Root as Tabs,
15+
Content as TabsContent,
16+
List as TabsList,
17+
Trigger as TabsTrigger,
18+
};

‎src/lib/components/ui/tabs/tabs-content.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Tabs as TabsPrimitive } from "bits-ui";
3+
import { cn } from "$lib/utils.js";
4+
5+
type $$Props = TabsPrimitive.ContentProps;
6+
7+
let className: $$Props["class"] = undefined;
8+
export let value: $$Props["value"];
9+
export { className as class };
10+
</script>
11+
12+
<TabsPrimitive.Content
13+
class={cn(
14+
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
15+
className
16+
)}
17+
{value}
18+
{...$$restProps}
19+
>
20+
<slot />
21+
</TabsPrimitive.Content>

0 commit comments

Comments
 (0)