Update guide

Author: craquet

.github/workflows/deploy-github-pages.yml

@@ -1,35 +1,35 @@
-## Workflow name
-#name: Build and Publish Storybook to GitHub Pages
-#
-#on:
-#  # Event for the workflow to run on
-#  push:
-#    branches:
-#      - 'main' # Replace with the branch you want to deploy from
-#
-#permissions:
-#  contents: read
-#  pages: write
-#  id-token: write
-#
-## List of jobs
-#jobs:
-#  deploy:
-#    runs-on: ubuntu-latest
-#    # Job steps
-#    steps:
-#      # Manual Checkout
-#      - uses: actions/checkout@v4
-#        with:
-#          fetch-depth: 0
-#      # Set up Node
-#      - uses: actions/setup-node@v4
-#        with:
-#          node-version: '20'
-#      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
-#      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
-#        with:
-#          install_command: npm ci # default: npm ci
-#          build_command: npm run storybook:build # default: npm run build-storybook
-#          path: storybook-static # default: dist/storybook
-#          checkout: false # default: true
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  # Event for the workflow to run on
+  push:
+    branches:
+      - 'main' # Replace with the branch you want to deploy from
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# List of jobs
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # Manual Checkout
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      # Set up Node
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: npm ci # default: npm ci
+          build_command: npm run storybook:build # default: npm run build-storybook
+          path: storybook-static # default: dist/storybook
+          checkout: false # default: true

src/stories/0 Getting Started.mdx

@@ -42,12 +42,12 @@ export default function Home() {
             host: <elastic host>,
             indices: [
                 {
-                    name: "index1",
+                    name: "index-name-here",
                     facets: [
                         {
                             key: "hadPrimarySource.keyword",
                             label: "Source",
-                            prettyPrintURLs: true
+                            prettyPrintURLs: true // Will remove https://www.
                         },
                         {
                             key: "licenseURL.keyword",
@@ -89,22 +89,22 @@ export default function Home() {
                 invertImageInDarkMode // Not recommended for colorful images
                 tags={[
                     {
-                        icon: <GraduationCap className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        icon: <GraduationCap />,
                         label: "Resource Type",
                         field: "resourceType"
                     },
                     {
-                        icon: <GlobeIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        icon: <GlobeIcon />,
                         field: "hadPrimarySource",
                         valueMapper: tryURLPrettyPrint
                     },
                     {
-                        icon: <ScaleIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        icon: <ScaleIcon />,
                         field: "licenseURL",
                         valueMapper: tryURLPrettyPrint
                     },
                     {
-                        icon: <AtomIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        icon: <AtomIcon />,
                         field: "Compound"
                     }
                 ]}

src/stories/FairDOElasticSearch.stories.tsx

@@ -20,7 +20,7 @@ const demoConfig: FairDOConfig = {
     alwaysSearchOnInitialLoad: true,
     // host: "https://matwerk.datamanager.kit.edu/search-proxy/api/v1",
     host: "https://ddaa9283-f114-4496-b6ed-af12ee34b107.ka.bw-cloud-instance.org:9200",
-    apiKey: "VG9NNFNwUUJyWWdtamJ6UGExcjY6aXhKUkk1M0xTT1dTS2xzN3daQjA3UQ==",
+    apiKey: "UGNoTW1KUUJ3WmluUHBTcEVpalo6cGloOUVKZ0tTdnlMYVlpTzV4SXBrUQ==",
     indices: [
         {
             name: "fdo-test-3",
@@ -68,6 +68,44 @@ const demoConfig: FairDOConfig = {
     disjunctiveFacets: ["NMR_Method.keyword"]
 }
 
+const demoConfigWithCompound: FairDOConfig = {
+    debug: false,
+    alwaysSearchOnInitialLoad: true,
+    // host: "https://matwerk.datamanager.kit.edu/search-proxy/api/v1",
+    host: "https://ddaa9283-f114-4496-b6ed-af12ee34b107.ka.bw-cloud-instance.org:9200",
+    apiKey: "UGNoTW1KUUJ3WmluUHBTcEVpalo6cGloOUVKZ0tTdnlMYVlpTzV4SXBrUQ==",
+    indices: [
+        {
+            name: "fdo-test-4",
+            facets: [
+                {
+                    key: "Compound.keyword",
+                    label: "Compound"
+                }
+            ],
+            resultFields: [], // Leave empty to get all fields
+            searchFields: ["name", "pid", "hasMetadata", "isMetadataFor", "NMR_Method"]
+        }
+    ],
+    initialState: {
+        sortList: [
+            {
+                field: "_score",
+                direction: "desc"
+            },
+            {
+                field: "name.keyword",
+                direction: "asc"
+            },
+            {
+                field: "locationPreview/Sample.keyword",
+                direction: "asc"
+            }
+        ]
+    },
+    disjunctiveFacets: ["NMR_Method.keyword"]
+}
+
 export const NoResultRenderer: Story = {
     args: {
         config: demoConfig,
@@ -117,3 +155,46 @@ export const GenericResultRenderer: Story = {
         )
     }
 }
+
+export const CompoundSlider: Story = {
+    args: {
+        config: demoConfigWithCompound,
+        resultView: (props) => (
+            <GenericResultView
+                result={props.result}
+                invertImageInDarkMode
+                tags={[
+                    {
+                        icon: <GraduationCap className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        label: "Resource Type",
+                        field: "resourceType"
+                    },
+                    {
+                        icon: <GlobeIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        field: "hadPrimarySource",
+                        valueMapper: tryURLPrettyPrint
+                    },
+                    {
+                        icon: <ScaleIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        field: "licenseURL",
+                        valueMapper: tryURLPrettyPrint
+                    },
+                    {
+                        icon: <AtomIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
+                        field: "Compound"
+                    }
+                ]}
+                titleField="name"
+                creationDateField="dateCreatedRfc3339"
+                additionalIdentifierField="identifier"
+                digitalObjectLocationField="digitalObjectLocation"
+                imageField="locationPreview/Sample"
+                parentItemPidField="hasMetadata"
+                relatedItemPidsField="isMetadataFor"
+                pidField="pid"
+                relatedItemsPrefetch={{ prefetchAmount: 20, searchFields: { pid: {}, isMetadataFor: {}, hasMetadata: {} } }}
+                showOpenInFairDoScope
+            />
+        )
+    }
+}