🔎 samply.lens 🔍

samply.lens is a front-end library, that provides common functionalities necessary for building search-, exploration and visualization applications. The primary target of this library is to deliver a good amount of building blocks, while also being open to user specific extensions.

Important Notice

The library is currently undergoing a change in the technological stack. Because of this, the current api is not completly finalized and is subject to changes in the next months.

Our main reasons for doing a complete rewrite of the samply.lens are that we wanted to make the provided components more adjustable for users and allow an framework independent usage. Because of this, we switched from writting a PrimeNG based Angular component library, to writting a web components library based on Svelte and plain CSS.

The old version of the library, will be no longer maintained. If you want to take a look at the source code, you can still find it here.

Development Setup

If you want to setup a development environment for the samply.lens library, you will need a recent version of Node.js and npm installed on your system.

After that, you will need to clone this repository

git clone https://github.com/samply/lens.git

and then install all dependencies with npm.

npm install

With this, you can now run

npm start

to start a development server, that will typically be available at http://localhost:5173. For further available npm scripts, you can review the package.json

Building the Library locally

If you want to make changes to the lens library while integrating those changes directly in the local development version of your application, you need to tell npm to make lens locally available. For this use-case, we prepared to npm scripts:

Run npm run watch, to start building the library on changes
Open a second terminal
Run npm run link which will make the library available locally
In your own applications repository run npm link @samply/lens

To controll that the linking of the local version worked, run npm ls | grep lens in your applications repository and verify that it refers to your local lens repository.

Style Integration

To import the default stylings, use

@import "path_to_node_modules/@samply/lens/dist/style.css";

in your main css file.

Web components use "part" instead of "class". Here is how you can overwrite style properties:

lens-info-button::part(info-button-icon) {
  width: 20px;
}

Roadmap

On a short term, we plan on publishing the library on npmjs. We plan to make it available as @samply/lens
After making the library available on npm, we will move the AppCCP.svelte, AppBBMRI.svelte and AppGBA.svelte to their separate repositories that are just using this library.
On the long term, we plan to stabilize the api and configuration options the library offers and will document them here.

Build With

Svelte

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

samply / lens