Passive active choice

.eslintrc.cjs

@@ -21,7 +21,7 @@ module.exports = {
   },
 
   // Base config
-  extends: ["eslint:recommended"],
+  extends: ["eslint:recommended", "plugin:storybook/recommended"],
 
   overrides: [
     // React

.gitignore

@@ -21,3 +21,5 @@ Caddyfile
 /playwright-report/
 /blob-report/
 /playwright
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: [{ from: "../stories/assets", to: "/assets" }],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,28 @@
+import type { Preview } from "@storybook/react";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { ThemeProvider } from "remix-themes";
+import "../app/tailwind.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
+
+export const decorators = [
+  withThemeFromJSXProvider({
+    themes: {
+      light: "light" as any,
+      dark: "dark" as any,
+    },
+    defaultTheme: "light",
+    Provider: ThemeProvider,
+  }),
+];

app/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "~/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

app/components/ui/spinner.tsx

@@ -0,0 +1,54 @@
+/* From https://shadcnui-expansions.typeart.cc/docs/spinner */
+import React from "react";
+
+import { cn } from "~/lib/utils";
+import { VariantProps, cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+
+const spinnerVariants = cva("flex-col items-center justify-center", {
+  variants: {
+    show: {
+      true: "flex",
+      false: "hidden",
+    },
+  },
+  defaultVariants: {
+    show: true,
+  },
+});
+
+const loaderVariants = cva("animate-spin text-primary", {
+  variants: {
+    size: {
+      small: "size-6",
+      medium: "size-8",
+      large: "size-12",
+    },
+  },
+  defaultVariants: {
+    size: "small",
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+  children?: React.ReactNode;
+  title?: string;
+}
+
+export function Spinner({
+  size,
+  show,
+  children,
+  className,
+  title = "Loading...",
+}: SpinnerContentProps) {
+  return (
+    <span className={spinnerVariants({ show })} title={title}>
+      <Loader2 className={cn(loaderVariants({ size }), className)} />
+      {children}
+    </span>
+  );
+}

app/components/ui/toggle-group.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { VariantProps } from "class-variance-authority";
+
+import { cn } from "~/lib/utils";
+import { toggleVariants } from "~/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

app/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "~/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

app/haddock3-restraints-client/schema.d.ts

@@ -31,7 +31,10 @@ export interface paths {
     };
     get?: never;
     put?: never;
-    /** Calculate Actpass To Ambig */
+    /**
+     * Calculate Actpass To Ambig
+     * @description Get the passive residues.
+     */
     post: operations["calculate_actpass_to_ambig_actpass_to_ambig_post"];
     delete?: never;
     options?: never;
@@ -48,7 +51,10 @@ export interface paths {
     };
     get?: never;
     put?: never;
-    /** Restrain Bodies */
+    /**
+     * Restrain Bodies
+     * @description Create distance restraints to lock several chains together.
+     */
     post: operations["restrain_bodies_restrain_bodies_post"];
     delete?: never;
     options?: never;
@@ -65,7 +71,10 @@ export interface paths {
     };
     get?: never;
     put?: never;
-    /** Calculate Accessibility */
+    /**
+     * Calculate Accessibility
+     * @description Calculate the accessibility of the side chains and apply a cutoff.
+     */
     post: operations["calculate_accessibility_calc_accessibility_post"];
     delete?: never;
     options?: never;
@@ -108,6 +117,12 @@ export interface paths {
      *     ```shell
      *     cat pdb | pdb_tidy -strict | pdb_selchain -<from_chain> | pdb_chain -<to_chain> | pdb_fixinsert | pdb_selaltloc | pdb_tidy -strict
      *     ```
+     *
+     *     or with `delhetatm` and `keepcoord` set to true:
+     *
+     *     ```shell
+     *     cat pdb | pdb_tidy -strict | pdb_selchain -<from_chain> | pdb_chain -<to_chain> | pdb_delhetatm |         pdb_fixinsert | pdb_keepcoord | pdb_selaltloc | pdb_tidy -strict
+     *     ```
      */
     post: operations["preprocess_pdb_preprocess_pdb_post"];
     delete?: never;
@@ -227,6 +242,12 @@ export interface components {
        * @default []
        */
       surface: number[];
+      /**
+       * Radius
+       * @description The radius from active.
+       * @default 6.5
+       */
+      radius: number;
     };
     /** RestrainBodiesRequest */
     RestrainBodiesRequest: {

app/routes/scenarios.antibody-antigen.tsx

@@ -16,7 +16,6 @@ import {
   ActPassSelection,
   MoleculeSubForm,
 } from "~/scenarios/MoleculeSubForm.client";
-import { AntigenSubForm, Flavour } from "~/scenarios/Antigen.client";
 import { PDBFileInput } from "~/scenarios/PDBFileInput.client";
 import {
   generateAmbiguousRestraintsFile,
@@ -158,43 +157,32 @@ export default function AntibodyAntigenScenario() {
   const [antibodyActPass, seAntibodyActPass] = useState<ActPassSelection>({
     active: [],
     passive: [],
+    neighbours: [],
     chain: "",
     bodyRestraints: "",
   });
   const [antigenActPass, setAntigen2ActPass] = useState<ActPassSelection>({
     active: [],
     passive: [],
+    neighbours: [],
     chain: "",
     bodyRestraints: "",
   });
-  const [antigenFlavour, setAntigenFlavour] = useState<Flavour>("actpass");
 
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const form = event.currentTarget;
     const formData = new FormData(form);
 
-    let antigenSelection = antigenActPass;
-    if (antigenFlavour === "pass") {
-      // in the ResidueSubForm the user selected residues are stored as active
-      // and the computed surface neighbouring residues are stored as passive
-      // here we store all those residues as passive
-      antigenSelection = {
-        active: [],
-        passive: [...antigenActPass.active, ...antigenActPass.passive],
-        chain: antigenActPass.chain,
-        bodyRestraints: antigenActPass.bodyRestraints,
-      };
-    }
     const ambig_fname = await generateAmbiguousRestraintsFile(
       antibodyActPass,
-      antigenSelection,
+      antigenActPass,
     );
     formData.set("ambig_fname", ambig_fname);
 
     const unambig_fname = generateUnAmbiguousRestraintsFile(
       antibodyActPass.bodyRestraints,
-      antigenSelection.bodyRestraints,
+      antigenActPass.bodyRestraints,
     );
     if (unambig_fname) {
       formData.set("unambig_fname", unambig_fname);
@@ -237,7 +225,7 @@ export default function AntibodyAntigenScenario() {
                 accessibilityCutoff={0.15}
               />
               <div>
-                <AntigenSubForm
+                <MoleculeSubForm
                   name="antigen"
                   legend="Antigen"
                   description="In tutorial named pdbs/4I1B_clean.pdb"
@@ -246,8 +234,6 @@ export default function AntibodyAntigenScenario() {
                   targetChain="B"
                   preprocessPipeline="delhetatmkeepcoord"
                   accessibilityCutoff={0.15}
-                  antigenFlavour={antigenFlavour}
-                  onFlavourChange={setAntigenFlavour}
                 />
               </div>
             </div>