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.
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.
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:https://localhost:5173. For further available npm scripts, you can review the package.json
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.
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;
}
- 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
andAppGBA.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.
Copyright 2019 - 2023 The Samply Community
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:https://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.