Skip to content

Commit

Permalink
Use inline SVG instead of asset file for evidence icon
Browse files Browse the repository at this point in the history
  • Loading branch information
pkalita-lbl committed Jan 7, 2025
1 parent 0c78ea7 commit 5467502
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 41 deletions.
Binary file removed src/components/genes-panel/assets/newspaper.png
Binary file not shown.
37 changes: 0 additions & 37 deletions src/components/genes-panel/assets/newspaper.svg

This file was deleted.

4 changes: 3 additions & 1 deletion src/components/genes-panel/genes-panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,10 @@
}

.node-evidence {
text-align: right;
.icon {
margin-right: 0.25em;
margin-left: 0.25em;
height: 1em;
width: 1em;
}
}
16 changes: 13 additions & 3 deletions src/components/genes-panel/genes-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import { Component, Prop, Element, Event, EventEmitter, Watch, h, Method } from
import { State } from '@stencil/core';
import { Activity, ActivityNode, Cam, Evidence, noctuaFormConfig } from '../../globals/@noctua.form';

import newspaperPNG from './assets/newspaper.png';

/**
* @part process - Process containers
* @part activity - Activity containers
Expand Down Expand Up @@ -104,6 +102,18 @@ export class GenesPanel {
}
}

renderReferenceIcon() {
// SVG originally from https://icons.getbootstrap.com/icons/newspaper/
// Modified to remove the width and height attributes in order to allow the size to be
// controlled via CSS
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-newspaper icon" viewBox="0 0 16 16">
<path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z"/>
<path d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z"/>
</svg>
)
}

/**
* Render the references for a biological context
* @param context a biological context (see graphHandler)
Expand All @@ -115,7 +125,7 @@ export class GenesPanel {
evidences.map(evidence => {
return <a href={evidence.referenceEntity?.url} target='_blank'
title={"Source: " + evidence.reference + "\nEvidence: " + evidence.evidence.label}>
<img class="icon" src={newspaperPNG} alt="newspaper" />
{ this.renderReferenceIcon() }
</a>
})
}
Expand Down

0 comments on commit 5467502

Please sign in to comment.