@genspectrum/dashboard-components 1.7.0 → 1.8.1

package/README.md

@@ -179,6 +179,26 @@ Node.js [subpath imports](https://nodejs.org/api/packages.html#subpath-imports),
 from [storybook](https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules). This ensures
 that when importing the worker in the component, the mock worker is used inside Storybook instead of the real worker.
 
-### Exporting types into the final build
+### How The Release Build Works
 
-This project uses `vite build`. The release config is `vite.release.config.ts`. In there, the lib export entrypoints are defined. If you want to export a utility type for your component, re-export it inside of `utilEntrypoint.ts`.
+The `"exports"` field in `package.json` defines which files a user of the package can import using the normal module systems.
+`"files"` defines which files are included in the package when it is published to npm.
+Obviously, `"files"` must include everything that is referenced in `"exports"`,
+but we also include `src/` for best practice so that users can see non-built files if they want to.
+
+We use Vite to build the entry point files that are referenced in `"exports"`: [vite.release.config.ts](./vite.release.config.ts).
+Important points to note:
+
+- We need to build the code since we need to convert TypeScript to JavaScript.
+- We also include type declarations.
+- We do not minify the code. That's up to the user of the package.
+- We exclude dependencies. Users should download them via their own package manager. Our libraries should not be in the build output.
+- We also build a ["standalone" version](vite.release-standalone.config.ts) of the components that includes all dependencies.
+  This can be used without a package manager (and it's not supposed to be used if you are using a package manager).
+
+If you add code that's supposed to be used by the users of the package,
+you need to make sure that it is exported from one of the entry points defined in `"exports"`.
+Currently, we have two entry points:
+
+- [components](src/componentsEntrypoint.ts): Supposed to be used in the browser. This file registers all web components when it's imported.
+- [util](src/utilEntrypoint.ts): Can also be used in a non-browser environment. Exports some code and types so that users can reuse some of our logic.

package/custom-elements.json

@@ -110,6 +110,14 @@
           },
           "default": "{ ...Template, args: { lapis: 'https://url.to.lapis-definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(async () => { await expect( canvas.getByText('Error in gs-app: Cannot fetch reference genome.', { exact: false }), ).toBeVisible(); }); }, }"
         },
+        {
+          "kind": "variable",
+          "name": "ProvidesMutationLinkTemplateToChildren",
+          "type": {
+            "text": "StoryObj<StoryProps>"
+          },
+          "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(async () => { await expect(canvas.getByText('http://foo.com/query?nucMut={{mutation}}', { exact: false })).toBeVisible(); await expect(canvas.getByText('http://foo.com/query?aaMut={{mutation}}', { exact: false })).toBeVisible(); }); }, }"
+        },
         {
           "kind": "class",
           "description": "",
@@ -138,6 +146,14 @@
                 "text": "MutationAnnotations"
               },
               "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "mutationLinkTemplate",
+              "type": {
+                "text": "MutationLinkTemplate"
+              },
+              "default": "{}"
             }
           ],
           "superclass": {
@@ -189,6 +205,14 @@
             "module": "src/web-components/gs-app.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "ProvidesMutationLinkTemplateToChildren",
+          "declaration": {
+            "name": "ProvidesMutationLinkTemplateToChildren",
+            "module": "src/web-components/gs-app.stories.ts"
+          }
+        },
         {
           "kind": "custom-element-definition",
           "name": "gs-app-display",
@@ -227,6 +251,16 @@
               "default": "[]",
               "description": "Supply lists of mutations that are especially relevant for the current organism.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.",
               "attribute": "mutationAnnotations"
+            },
+            {
+              "kind": "field",
+              "name": "mutationLinkTemplate",
+              "type": {
+                "text": "{\n        nucleotideMutation?: string;\n        aminoAcidMutation?: string;\n    }"
+              },
+              "default": "{ nucleotideMutation: undefined, aminoAcidMutation: undefined, }",
+              "description": "Supply a link template for nucleotide and amino acid mutations.\nThe template should include '{{mutation}}' where the mutation code will be inserted, for example:\n\n    https://my-site.org/query?nucleotideMutation={{mutation}}",
+              "attribute": "mutationLinkTemplate"
             }
           ],
           "attributes": [
@@ -247,6 +281,15 @@
               "default": "[]",
               "description": "Supply lists of mutations that are especially relevant for the current organism.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.",
               "fieldName": "mutationAnnotations"
+            },
+            {
+              "name": "mutationLinkTemplate",
+              "type": {
+                "text": "{\n        nucleotideMutation?: string;\n        aminoAcidMutation?: string;\n    }"
+              },
+              "default": "{ nucleotideMutation: undefined, aminoAcidMutation: undefined, }",
+              "description": "Supply a link template for nucleotide and amino acid mutations.\nThe template should include '{{mutation}}' where the mutation code will be inserted, for example:\n\n    https://my-site.org/query?nucleotideMutation={{mutation}}",
+              "fieldName": "mutationLinkTemplate"
             }
           ],
           "superclass": {
@@ -1798,12 +1841,50 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/mutation-link-template-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "mutationLinkTemplateSchema"
+        },
+        {
+          "kind": "variable",
+          "name": "mutationLinkTemplateContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mutationLinkTemplateSchema",
+          "declaration": {
+            "name": "mutationLinkTemplateSchema",
+            "module": "src/web-components/mutation-link-template-context.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mutationLinkTemplateContext",
+          "declaration": {
+            "name": "mutationLinkTemplateContext",
+            "module": "src/web-components/mutation-link-template-context.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/mutationAnnotations.mdx",
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/mutationLinks.mdx",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/reference-genome-context.ts",