Skip to content

Minor fixes #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
2 commits merged into from
Aug 18, 2023
Merged

Minor fixes #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6bdd27
Fixed minor issues
maximiliani Aug 18, 2023
48eccb9
reformatting
maximiliani Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kit-data-manager/pid-component",
"version": "0.0.1",
"version": "0.0.2",
"license": "Apache-2.0",
"description": "The PID-Component is a web component that can be used to display PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.",
"author": "Maximilian Inckmann <maximilian.inckmann@kit.edu> (https://orcid.org/0009-0005-2800-4833)",
Expand Down
4 changes: 2 additions & 2 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export namespace Components {
/**
* An optional custom link to use instead of the default one which links to the FAIR DO Scope.
*/
"linkTo": "disable" | "fairdoscope" | "resolveRef";
"linkTo": 'disable' | 'fairdoscope' | 'resolveRef';
}
interface IntelligentHandle {
/**
Expand Down Expand Up @@ -339,7 +339,7 @@ declare namespace LocalJSX {
/**
* An optional custom link to use instead of the default one which links to the FAIR DO Scope.
*/
"linkTo"?: "disable" | "fairdoscope" | "resolveRef";
"linkTo"?: 'disable' | 'fairdoscope' | 'resolveRef';
}
interface IntelligentHandle {
/**
Expand Down
2 changes: 1 addition & 1 deletion src/components/beautiful-orcid/beautiful-orcid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export class BeautifulOrcid {
return <Host>
<a href={`https://orcid.org/${this.orcid}`}
class={"bg-white hover:bg-gray-50 border shadow-md rounded-md inline-flex flex-row flex-nowrap items-center text-clip align-bottom"}
target={"_blank"}>
target={"_blank"} rel={"noopener noreferrer"}>
<span class={"border-r px-0.5 rounded bg-white"}>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
class={"h-5 p-0.5 items-center self-stretch"}>
Expand Down
268 changes: 134 additions & 134 deletions src/components/display-magic/display-magic.tsx
View file
Open in desktop

Large diffs are not rendered by default.

127 changes: 60 additions & 67 deletions src/components/foldable-component/foldable-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, Host, h, State, Prop} from '@stencil/core';
import {PID} from "../../utils/PID";
import { Component, Host, h, State, Prop } from '@stencil/core';
import { PID } from '../../utils/PID';

export type FoldableItem = {
keyTitle: string,
Expand All @@ -13,7 +13,7 @@ export type FoldableItem = {
export type FoldableAction = {
title: string,
link: string,
style: "primary" | "secondary" | "danger"
style: 'primary' | 'secondary' | 'danger'
}

@Component({
Expand All @@ -23,9 +23,9 @@ export type FoldableAction = {
})
export class FoldableComponent {

@Prop() items: FoldableItem[] = []
@Prop() items: FoldableItem[] = [];

@Prop() actions: FoldableAction[] = []
@Prop() actions: FoldableAction[] = [];

/**
* The private state of whether the subcomponents in the table should be loaded.
Expand Down Expand Up @@ -61,95 +61,87 @@ export class FoldableComponent {
private toggleSubcomponents = () => {
// console.log(`currentLevelOfSubcomponents: ${this.currentLevelOfSubcomponents}, levelOfSubcomponents: ${this.levelOfSubcomponents}, showSubcomponents: ${this.showSubcomponents}`);
if (this.showSubcomponents && this.levelOfSubcomponents - this.currentLevelOfSubcomponents > 0) this.loadSubcomponents = !this.loadSubcomponents;
}
};

private showTooltip = (event: Event) => {
let target = event.target as HTMLElement;
do {
target = target.parentElement as HTMLElement;
} while (target !== null && target.tagName !== "A")
if (target !== null) target.children[1].classList.remove("hidden");
}
} while (target !== null && target.tagName !== 'A');
if (target !== null) target.children[1].classList.remove('hidden');
};

private hideTooltip = (event: Event) => {
let target = event.target as HTMLElement;
do {
target = target.parentElement as HTMLElement;
} while (target !== null && target.tagName !== "A")
if (target !== null) target.children[1].classList.add("hidden");
}
} while (target !== null && target.tagName !== 'A');
if (target !== null) target.children[1].classList.add('hidden');
};

render() {
return (
<Host class="inline-flex flex-grow max-w-screen-lg font-sans flex-wrap">
<Host class='inline-flex flex-grow max-w-screen-lg font-sans flex-wrap'>
{
this.items.length === 0 && this.actions.length === 0
? <div
class="rounded-md shadow-md border inline-flex flex-grow max-w-screen-lg font-sans p-0.5 mx-2 select-none list-inside bg-white text-clip overflow-x-clip">
<slot name="preview"/>
class='rounded-md shadow-md border inline-flex flex-grow max-w-screen-lg font-sans p-0.5 mx-2 select-none list-inside bg-white text-clip overflow-x-clip'>
<slot name='preview' />
</div>
:
<details
class={"rounded-md shadow-md bg-white border text-clip inline-flex flex-grow max-w-screen-lg font-sans p-0.5 open:p-1 open:align-top"}
class={'rounded-md shadow-md bg-white border text-clip inline-flex flex-grow max-w-screen-lg font-sans p-0.5 open:p-1 open:align-top'}
open={this.openStatus}
onToggle={this.toggleSubcomponents}>
<summary class="px-2 select-none list-inside bg-white text-clip overflow-x-hidden mb-1 inline flex-nowrap">
<slot/>
<summary
class='px-2 select-none list-inside bg-white text-clip overflow-x-hidden mb-1 inline flex-nowrap'>
<slot />
{/*<slot name="previw"/>*/}
</summary>
{
this.items.length > 0
? <div
class="divide-y text-sm leading-6 bg-gray-100 m-1 p-0.5 max-h-72 overflow-y-scroll border rounded">
<table class="text-left w-full text-sm font-sans">
<thead class="bg-slate-600 flex text-slate-200 w-full rounded-t">
<tr class="flex w-full rounded font-semibold">
<th class="px-1 w-1/4">Key</th>
<th class="px-1 w-3/4">Value</th>
class='divide-y text-sm leading-6 bg-gray-100 m-1 p-0.5 max-h-72 overflow-y-scroll border rounded'>
<table class='text-left w-full text-sm font-sans'>
<thead class='bg-slate-600 flex text-slate-200 w-full rounded-t'>
<tr class='flex w-full rounded font-semibold'>
<th class='px-1 w-1/4'>Key</th>
<th class='px-1 w-3/4'>Value</th>
</tr>
</thead>
<tbody
class="bg-grey-100 flex flex-col items-center justify-between overflow-y-scroll w-full max-h-64 rounded-b">
class='bg-grey-100 flex flex-col items-center justify-between overflow-y-scroll w-full max-h-64 rounded-b'>
{
this.items.map((value) => {
return (
<tr class={this.changingColors ? "odd:bg-slate-200 flex w-full" : "flex w-full"}>
<td class={"overflow-x-scroll p-1 w-1/4 font-mono"}>
<a role="link"
class="right-0 focus:outline-none focus:ring-gray-300 rounded-md focus:ring-offset-2 focus:ring-2 focus:bg-gray-200 relative md:mt-0 inline flex-wrap"
<tr class={this.changingColors ? 'odd:bg-slate-200 flex w-full' : 'flex w-full'}>
<td class={'overflow-x-scroll p-1 w-1/4 font-mono'}>
<a role='link'
class='right-0 focus:outline-none focus:ring-gray-300 rounded-md focus:ring-offset-2 focus:ring-2 focus:bg-gray-200 relative md:mt-0 inline flex-wrap'
onMouseOver={this.showTooltip} onFocus={this.showTooltip}
onMouseOut={this.hideTooltip}>
<div class="cursor-pointer align-top justify-between flex">
<div class='cursor-pointer align-top justify-between flex'>
<a href={value.keyLink}
target={"_blank"}
class={"mr-2 text-blue-400 justify-start"}>{value.keyTitle}</a>
<svg aria-haspopup="true" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-info-circle justify-end" width="25"
height="25" viewBox="0 0 24 24"
stroke-width="1.5" stroke="#A0AEC0" fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="9"/>
<line x1="12" y1="8" x2="12.01" y2="8"/>
<polyline points="11 12 12 12 12 16 13 16"/>
target={'_blank'} rel={'noopener noreferrer'}
class={'mr-2 text-blue-400 justify-start'}>{value.keyTitle}</a>
<svg aria-haspopup='true' xmlns='http://www.w3.org/2000/svg'
class='icon icon-tabler icon-tabler-info-circle justify-end' width='25'
height='25' viewBox='0 0 24 24'
stroke-width='1.5' stroke='#A0AEC0' fill='none'
stroke-linecap='round'
stroke-linejoin='round'>
<path stroke='none' d='M0 0h24v24H0z' />
<circle cx='12' cy='12' r='9' />
<line x1='12' y1='8' x2='12.01' y2='8' />
<polyline points='11 12 12 12 12 16 13 16' />
</svg>
</div>
<p role="tooltip"
class="hidden z-20 mt-1 transition duration-100 ease-in-out shadow-md bg-white rounded text-xs text-gray-600 p-1 flex-wrap overflow-clip"
<p role='tooltip'
class='hidden z-20 mt-1 transition duration-100 ease-in-out shadow-md bg-white rounded text-xs text-gray-600 p-1 flex-wrap overflow-clip'
>{value.keyTooltip}</p>
</a>
</td>
<td class={"align-top text-clip text-sm overflow-x-scroll p-1 w-3/4"}>
{/*{*/}
{/* this.loadSubcomponents && !value.valueIsFoldable ?*/}
{/* <display-magic value={value.value} changingColors={this.changingColors}*/}
{/* levelOfSubcomponents={this.levelOfSubcomponents}*/}
{/* currentLevelOfSubcomponents={this.currentLevelOfSubcomponents + 1}*/}
{/* />*/}
{/* : value.value*/}
{/*}*/}

<td class={'align-top text-clip text-sm overflow-x-scroll p-1 w-3/4'}>
{
PID.isPID(value.value) ?
(this.loadSubcomponents ?
Expand All @@ -163,45 +155,46 @@ export class FoldableComponent {
}
</td>
</tr>
)
);
})
}

</tbody>
</table>
</div>
: ""
: ''
}
{/*<slot name="body"/>*/}
{
this.actions.length > 0 ?
<span class={"m-0.5 flex justify-between gap-1"}>
<span class={'m-0.5 flex justify-between gap-1'}>
{
this.actions.map((action) => {
let style = "p-1 font-semibold text-sm rounded border ";
let style = 'p-1 font-semibold text-sm rounded border ';
switch (action.style) {
case "primary":
style += "bg-blue-500 text-white";
case 'primary':
style += 'bg-blue-500 text-white';
break;
case "secondary":
style += "bg-slate-200 text-blue-500";
case 'secondary':
style += 'bg-slate-200 text-blue-500';
break;
case "danger":
style += "bg-red-500 text-white";
case 'danger':
style += 'bg-red-500 text-white';
break;
}

return (
<a
href={action.link}
class={style}
target={"_blank"}>
target={'_blank'}>
rel={'noopener noreferrer'}
{action.title}
</a>
)
);
})
}
</span> : ""
</span> : ''
}
</details>
}
Expand Down
49 changes: 24 additions & 25 deletions src/components/handle-highlight/handle-highlight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {Component, Host, h, Prop, State} from '@stencil/core';
// import {HSLColor, generateColor} from '../../utils/utils';
import {PID} from "../../utils/PID";
import {HSLColor} from "../../utils/HSLColor";
import { Component, Host, h, Prop, State } from '@stencil/core';
import { PID } from '../../utils/PID';
import { HSLColor } from '../../utils/HSLColor';

/**
* This component highlights a handle and links to the FAIR DO Scope.
Expand All @@ -22,7 +21,7 @@ export class HandleHighlight {
/**
* The private state where this component should link to.
*/
@State() link: string = "";
@State() link: string = '';

/**
* The Handle to highlight and link in this component.
Expand All @@ -32,7 +31,7 @@ export class HandleHighlight {
/**
* An optional custom link to use instead of the default one which links to the FAIR DO Scope.
*/
@Prop() linkTo: "disable" | "fairdoscope" | "resolveRef" = "fairdoscope";
@Prop() linkTo: 'disable' | 'fairdoscope' | 'resolveRef' = 'fairdoscope';

/**
* Whether the component should use the filled or the outlined design.
Expand All @@ -52,63 +51,63 @@ export class HandleHighlight {
this.parts = [{
text: pid.prefix,
color: await HSLColor.generateColor(pid.prefix),
nextExists: true
nextExists: true,
}, {
text: pid.suffix,
color: await HSLColor.generateColor(pid.suffix),
nextExists: false
}]
nextExists: false,
}];

if (this.linkTo === "fairdoscope") this.link = `https://kit-data-manager.github.io/fairdoscope/?pid=${this.handle}`;
else if (this.linkTo === "resolveRef") this.link = `https://hdl.handle.net/${this.handle}#resolve`;
else if (this.linkTo === "disable") this.link = "";
if (this.linkTo === 'fairdoscope') this.link = `https://kit-data-manager.github.io/fairdoscope/?pid=${this.handle}`;
else if (this.linkTo === 'resolveRef') this.link = `https://hdl.handle.net/${this.handle}#resolve`;
else if (this.linkTo === 'disable') this.link = '';

console.log(this.link)
console.log(this.linkTo)
console.log(this.link);
console.log(this.linkTo);
}

render() {
return (
<Host>
<a href={this.link} onClick={(el) => {
if (this.link === "" || this.linkTo === "disable") el.preventDefault()
}} target={"_blank"}>
if (this.link === '' || this.linkTo === 'disable') el.preventDefault();
}} target={'_blank'} rel={'noopener noreferrer'}>
{this.filled ?
<span class={"inline p-0.5 bg-gray-100 shadow-sm rounded-md text-clip align-baseline leading-relaxed"}>
<span class={'inline p-0.5 bg-gray-100 shadow-sm rounded-md text-clip align-baseline leading-relaxed'}>
{
this.parts.map((element) => {
return (
<span>
<span
style={{
backgroundColor: "hsl(" + element.color.hue + "," + element.color.sat + "%," + element.color.lum + "%)",
backgroundColor: 'hsl(' + element.color.hue + ',' + element.color.sat + '%,' + element.color.lum + '%)',
}}
class={`font-mono p-0.5 rounded-md ${element.color.lum > 50 ? "text-gray-800" : "text-gray-200"}`}>
class={`font-mono p-0.5 rounded-md ${element.color.lum > 50 ? 'text-gray-800' : 'text-gray-200'}`}>
{element.text}
</span>
<span class={"font-mono text-gray-800"}>{element.nextExists ? "/" : ""}</span>
<span class={'font-mono text-gray-800'}>{element.nextExists ? '/' : ''}</span>
</span>
)
);
})
}
</span>
:
<span
class={"border bg-gray-100 rounded-md shadow-sm inline p-0.5 text-clip align-baseline leading-relaxed"}>
class={'border bg-gray-100 rounded-md shadow-sm inline p-0.5 text-clip align-baseline leading-relaxed'}>
{
this.parts.map((element) => {
return (
<span>
<span
style={{
backgroundColor: "hsl(" + element.color.hue + "," + element.color.sat + "%," + element.color.lum + "%)",
backgroundColor: 'hsl(' + element.color.hue + ',' + element.color.sat + '%,' + element.color.lum + '%)',
}}
class={`font-mono font-bold p-0.5 rounded-md text-transparent bg-clip-text`}>
{element.text}
</span>
<span class={"font-bold text-gray-800"}>{element.nextExists ? "/" : ""}</span>
<span class={'font-bold text-gray-800'}>{element.nextExists ? '/' : ''}</span>
</span>
)
);
})
}
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/handle-highlight/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ It automatically generates colors for the parts of the handle (prefix and suffix
| --------------------- | --------- | ------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------- |
| `filled` | `filled` | Whether the component should use the filled or the outlined design. | `boolean` | `false` |
| `handle` _(required)_ | `handle` | The Handle to highlight and link in this component. | `string` | `undefined` |
| `linkTo` | `link-to` | An optional custom link to use instead of the default one which links to the FAIR DO Scope. | `"disable" \| "fairdoscope" \| "resolveRef"` | `"fairdoscope"` |
| `linkTo` | `link-to` | An optional custom link to use instead of the default one which links to the FAIR DO Scope. | `"disable" \| "fairdoscope" \| "resolveRef"` | `'fairdoscope'` |


## Dependencies
Expand Down
Loading