add rna logo

src/components/logo/RNALogo.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { A, C, G, U } from "../glyphs";
+import { Logo, LogoProps } from "./Logo";
+import { UserDefinedAlphabet } from "../../types";
+
+/**
+ * Represents the RNA alphabet, with the four nucleotides colored
+ * in a similar scheme to the MEME default.
+ */
+export const RNAAlphabet = [
+  { component: A, regex: "A", color: "red" },
+  { component: C, regex: "C", color: "blue" },
+  { component: G, regex: "G", color: "orange" },
+  { component: U, regex: "U", color: "seagreen" },
+];
+
+export type RNALogoProps = Omit<LogoProps, "alphabet"> & {
+  /** The DNA alphabet to use for the logo. */
+  alphabet?: UserDefinedAlphabet;
+};
+
+/**
+ * Renders a logo with the RNA alphabet, with nucleotides colored similarly to the MEME default.
+ */
+export const RNALogo = (props: RNALogoProps) => (
+  <Logo alphabet={RNAAlphabet} {...props} />
+);

src/index.js

@@ -1,8 +1,8 @@
 import { Logo } from "./components/logo/Logo";
 import { RawLogo } from "./components/logo/RawLogo";
-import ProteinLogo, { ProteinAlphabet } from "./components/logo/ProteinLogo";
-import DNALogo, { DNAAlphabet } from "./components/logo/DNALogo";
-import RNALogo, { RNAAlphabet } from "./components/logo/rnalogo";
+import { ProteinLogo, ProteinAlphabet } from "./components/logo/ProteinLogo";
+import { DNALogo, DNAAlphabet } from "./components/logo/DNALogo";
+import { RNALogo, RNAAlphabet } from "./components/logo/RNALogo";
 import CompleteLogo from "./components/logo/completelogo";
 import { CompleteAlphabet } from "./common/alphabet";
 import { xrange } from "./common/utils";

src/js/embed.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
-import DNALogo from "../components/logo/DNALogo";
-import RNALogo from "../components/logo/rnalogo";
-import ProteinLogo from "../components/logo/ProteinLogo";
+import { DNALogo } from "../components/logo/DNALogo";
+import { RNALogo } from "../components/logo/RNALogo";
+import { ProteinLogo } from "../components/logo/ProteinLogo";
 import { Logo } from "../components/logo/Logo";
 import { RawLogo } from "../components/logo/RawLogo";
 
@@ -56,4 +56,3 @@ export const embedLogo = (div, props) => {
 export const embedRawLogo = (container, props) => {
   container.innerHTML = renderToStaticMarkup(<RawLogo {...props} />);
 };
-

src/stories/RNALogo.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { RNALogo } from "../components/logo/RNALogo";
+import { DataType } from "../types";
+
+const meta = {
+  title: "RNALogo",
+  component: RNALogo,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+} satisfies Meta<typeof RNALogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    data: [
+      [0.7, 0.1, 0.1, 0.1],
+      [0, 1, 0, 0],
+      [0, 0, 0, 1],
+      [1, 0, 0, 0],
+      [1, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0.3, 0.2, 0.3, 0.2],
+    ],
+    dataType: DataType.PPM,
+    width: 700,
+  },
+};