@kit-data-manager/react-search-component

All-in-one component for rendering an elastic search UI for searching anything. Includes an interactive graph of related records and unique identifier resolving.

https://github.com/kit-data-manager/react-search-component

Science Score: 52.0%

This score indicates how likely this project is to be science-related based on various indicators:

✓
CITATION.cff file
Found CITATION.cff file
✓
codemeta.json file
Found codemeta.json file
✓
.zenodo.json file
Found .zenodo.json file
○
DOI references
○
Academic publication links
○
Academic email domains
✓
Institutional organization owner
Organization kit-data-manager has institutional domain (www.scc.kit.edu)
○
JOSS paper metadata
○
Scientific vocabulary similarity
Low similarity (13.9%) to scientific vocabulary

Keywords

react-component

Last synced: 4 months ago · JSON representation ·

Repository

All-in-one component for rendering an elastic search UI for searching anything. Includes an interactive graph of related records and unique identifier resolving.

Basic Info

Host: GitHub
Owner: kit-data-manager
License: apache-2.0
Language: TypeScript
Default Branch: main
Homepage: https://kit-data-manager.github.io/react-search-component/
Size: 1.45 MB

Statistics

Stars: 1
Watchers: 2
Forks: 0
Open Issues: 16
Releases: 13

Topics

react-component

Created 12 months ago · Last pushed 4 months ago

Metadata Files

Readme License Citation Codemeta

react-search-component

All-in-one, highly configurable React component for rendering an elastic search UI based on the provided configuration. Includes an interactive graph of related records and unique identifier resolving.

Fair Digital Objects\ This component includes some useful (optional) features for FAIR DOs

This is an ESM Module intended for use in modern React applications. Make sure your bundler supports importing CSS files in JavaScript/TypeScript. Next.js is supported out of the box.

Installation

bash npm install @kit-data-manager/react-search-component

Docs

Visit the Storybook for examples and some documentation. For more documentation, consult the TypeScript typings.

Quick Start

Refer to the Getting Started Guide in the Storybook

Customization

Result View

Most notably, the result view component should be customized. A GenericResultView Component is provided that should work for some scenarious out of the box. Otherwise, you should implement your own Result View in React. For a starting point, feel free to copy the code of GenericResultView.ts, though most of the customization should be thrown out to make it more lightweight.

Generic Result View

Each field of the generic result view can be mapped to a field in the elastic search index. Additionally, you can specify multiple tags from multiple different fields in the elastic index. Take a look at the Storybook for an example.

To map (parts of) the result before feeding it to the GenericResultView, you can define you own component that itself uses the GenericResultView with modified data:

```typescript jsx import { useMemo } from "react" import { GenericResultView, ResultViewProps } from "@kit-data-manager/react-search-component"

export function MyResultView(props: ResultViewProps) { const mappedResult = useMemo(() => { const copy = structuredClone(props.result) copy.someProperty = copy.something + copy.somethingElse return copy }, [props.result])

return <GenericResultView result={mappedResult} titleField={"someProperty"} />

} ```

Then simply pass your custom component to the search component.

Styling

Styling is done using tailwind and css variables. Feel free to override these variables in your own CSS. More information can be found in the Storybook.

Contributing

Feedback and issue reports are welcome, simply create an issue here on GitHub.

Development

Install dependencies with

bash npm install

Run development server with

bash npm run storybook:dev

Owner

Name: KIT Data Manager
Login: kit-data-manager
Kind: organization
Email: webmaster@datamanger.kit.edu
Location: Karlsruhe, Germany

Website: https://www.scc.kit.edu/ueberuns/dem.php
Repositories: 56
Profile: https://github.com/kit-data-manager

Generic software and recommendations for FAIR research data management by DEM.

Citation (CITATION.cff)

cff-version: 1.2.0
message: If you use this software, please cite it using these metadata.
type: software
title: '@kit-data-manager/react-search-component'
abstract: All-in-one component for rendering an elastic search UI for searching anything.
  Built-in support for visualizing related items in a graph and resolving unique identifiers.
version: 0.2.1
keywords:
  - react
  - reactjs
  - component
  - elastic
  - search
  - elasticsearch
  - kit-data-manager
  - typescript
  - storybook
  - tailwindcss
  - fair
  - fairdata
  - fairdo
  - fairdigitalobject
  - kit
  - data
  - manager
authors:
  - email: christopher.raquet@kit.edu
    family-names: Raquet
    orcid: https://orcid.org/0009-0003-2196-9187
    given-names: Christopher
    affiliation: Karlsruhe Institute of Technology (KIT)
contact:
  - email: christopher.raquet@kit.edu
    family-names: Raquet
    orcid: https://orcid.org/0009-0003-2196-9187
    given-names: Christopher
    affiliation: Karlsruhe Institute of Technology (KIT)
license: Apache-2.0
url: https://kit-data-manager.github.io/react-search-component/
repository-code: https://github.com/kit-data-manager/react-search-component

CodeMeta (codemeta.json)

{
  "@context": [
    "https://doi.org/10.5063/schema/codemeta-2.0",
    "https://w3id.org/software-iodata",
    "https://raw.githubusercontent.com/jantman/repostatus.org/master/badges/latest/ontology.jsonld",
    "https://schema.org",
    "https://w3id.org/software-types"
  ],
  "@type": "SoftwareSourceCode",
  "author": [
    {
      "@type": "Person",
      "givenName": "Christopher",
      "familyName": "Raquet",
      "email": "christopher.raquet@kit.edu",
      "@id": "https://orcid.org/0009-0003-2196-9187",
      "identifier": "https://orcid.org/0009-0003-2196-9187",
      "affiliation": "Karlsruhe Institute of Technology (KIT)"
    }
  ],
  "name": "@kit-data-manager/react-search-component",
  "description": "All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.",
  "version": "0.2.1",
  "keywords": [
    "react",
    "reactjs",
    "component",
    "elastic",
    "search",
    "elasticsearch",
    "kit-data-manager",
    "typescript",
    "storybook",
    "tailwindcss",
    "fair",
    "fairdata",
    "fairdo",
    "fairdigitalobject",
    "kit",
    "data",
    "manager"
  ],
  "maintainer": [
    {
      "@type": "Person",
      "givenName": "Christopher",
      "familyName": "Raquet",
      "email": "christopher.raquet@kit.edu",
      "@id": "https://orcid.org/0009-0003-2196-9187",
      "identifier": "https://orcid.org/0009-0003-2196-9187",
      "affiliation": "Karlsruhe Institute of Technology (KIT)"
    }
  ],
  "license": [
    "https://spdx.org/licenses/Apache-2.0"
  ],
  "softwareHelp": "https://kit-data-manager.github.io/react-search-component/",
  "codeRepository": "https://github.com/kit-data-manager/react-search-component",
  "buildInstructions": "https://kit-data-manager.github.io/react-search-component/",
  "url": "https://kit-data-manager.github.io/react-search-component/"
}

GitHub Events

Total

Create event: 60
Issues event: 2
Release event: 3
Watch event: 1
Delete event: 50
Issue comment event: 8
Push event: 123
Pull request event: 108

Last Year

Create event: 60
Issues event: 2
Release event: 3
Watch event: 1
Delete event: 50
Issue comment event: 8
Push event: 123
Pull request event: 108

Issues and Pull Requests

Last synced: 4 months ago

All Time

Total issues: 31
Total pull requests: 108
Average time to close issues: 4 days
Average time to close pull requests: 13 days
Total issue authors: 2
Total pull request authors: 3
Average comments per issue: 0.29
Average comments per pull request: 0.11
Merged pull requests: 23
Bot issues: 0
Bot pull requests: 92

Past Year

Issues: 31
Pull requests: 108
Average time to close issues: 4 days
Average time to close pull requests: 13 days
Issue authors: 2
Pull request authors: 3
Average comments per issue: 0.29
Average comments per pull request: 0.11
Merged pull requests: 23
Bot issues: 0
Bot pull requests: 92

View more stats

Top Authors

Issue Authors

https-toni (1)

Pull Request Authors

renovate[bot] (97)
craquet (13)
dependabot[bot] (8)

Top Labels

Issue Labels

Pull Request Labels

dependencies (8) javascript (8)

Packages

Total packages: 1
Total downloads:
- npm 20 last-month

Total dependent packages: 0
Total dependent repositories: 0
Total versions: 4
Total maintainers: 1

npmjs.org: @kit-data-manager/react-search-component

All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.

Homepage: https://kit-data-manager.github.io/react-search-component/
License: Apache-2.0
Latest release: 0.2.1
published 7 months ago

Versions: 4
Dependent Packages: 0
Dependent Repositories: 0
Downloads: 20 Last month

Rankings

Dependent repos count: 24.9%

Average: 30.4%

Dependent packages count: 36.0%

Maintainers (1)

jejkal