Skip to content

Commit

Permalink
Add button tooltips
Browse files Browse the repository at this point in the history 
Signed-off-by: Jay Wang <[email protected]>
  • Loading branch information
@xiaohk
xiaohk committed Jul 8, 2024
1 parent 0af49ef commit fa6adb7
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 6 deletions.
2 changes: 1 addition & 1 deletion src/components/page/page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
background-size: 15px 15px; */

background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23EDEEE7' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='hsl%28232%2C%20100%25%2C%2094%25%29'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23EDEEE7' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='hsl%28232%2C%20100%25%2C%2094%25%29'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E"); */
}

.headline {
Expand Down
2 changes: 1 addition & 1 deletion src/components/paper-view/paper-view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export class RecRecPaperView extends LitElement {
this.notifyParentPapers(this.papers);

this.isCompleted = true;
console.log(this.papers);
// console.log(this.papers);
}

formatPaperAuthor(paper: SemanticPaper) {
Expand Down
28 changes: 28 additions & 0 deletions src/components/recommender-view/recommender-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,10 +444,24 @@ button {
opacity 150ms linear,
transform 150ms linear;

&#description-overlay {
transition:
opacity 100ms linear,
transform 100ms linear;
}

&[placement='right'] {
transform-origin: left center;
}

&[placement='bottom'] {
transform-origin: top center;
}

&[placement='top'] {
transform-origin: bottom center;
}

&.hidden {
opacity: 0;
pointer-events: none;
Expand All @@ -472,6 +486,20 @@ button {
flex-flow: column;
}

.description {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;

.external-icon {
margin-top: 2px;
width: 0.7em;
height: 0.7em;
color: var(--gray-400);
}
}

.table-title {
padding: 0 2px;
display: flex;
Expand Down
112 changes: 111 additions & 1 deletion src/components/recommender-view/recommender-view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ import componentCSS from './recommender-view.css?inline';
import iconHIndex from '../../images/icon-hindex-c.svg?raw';
import iconFile from '../../images/icon-file-c.svg?raw';
import iconCiteTimes from '../../images/icon-cite-times-c.svg?raw';
import iconExternal from '../../images/icon-external-link.svg?raw';
import iconClick from '../../images/icon-click.svg?raw';

const DEV_MODE = true;
const MAX_RECOMMENDER_NUM = 500;
Expand Down Expand Up @@ -84,6 +86,8 @@ interface SliderRange {
initialValue: number;
}

let descriptionTooltipTimer: number | null = null;

/**
* Recommender view element.
*/
Expand Down Expand Up @@ -181,12 +185,18 @@ export class RecRecRecommenderView extends LitElement {
@query('#paper-overlay')
paperOverlayElement: HTMLElement | undefined;

@query('#description-overlay')
descriptionOverlayElement: HTMLElement | undefined;

@state()
overlayPaperCounts: [string, number][];

@state()
overlayPaperCountsType: 'citeTimes' | 'paperCount' = 'citeTimes';

@state()
overlayDescriptionType: 'citeTimes' | 'paperCount' | 'hIndex' = 'citeTimes';

curClickedCiteTimeAuthorID: string | null = null;
overlayCleanup = () => {};

Expand Down Expand Up @@ -514,7 +524,7 @@ export class RecRecRecommenderView extends LitElement {
let maxHIndex = -Infinity;

for (const [i, chunk] of authorIDChunks.entries()) {
console.log(`Chunk: ${i}`);
// console.log(`Chunk: ${i}`);
const startTime = performance.now();

let retry = 3;
Expand Down Expand Up @@ -759,6 +769,9 @@ export class RecRecRecommenderView extends LitElement {
return;
}

// Hide the description tooltip
this.citeTimeButtonMouseLeft(e);

if (this.curClickedCiteTimeAuthorID === recommender.authorID) {
// This overlay is already shown. We hide it if the user clicks the button (again)
this.paperOverlayElement.classList.add('hidden');
Expand Down Expand Up @@ -801,6 +814,57 @@ export class RecRecRecommenderView extends LitElement {
this.paperOverlayElement.classList.remove('hidden');
}

citeTimeButtonMouseEntered(
e: MouseEvent,
type: 'paperCount' | 'citeTimes' | 'hIndex'
) {
e.stopPropagation();
e.preventDefault();

if (!this.descriptionOverlayElement) {
console.error('descriptionOverlayElement are not initialized yet.');
return;
}

const anchor = e.currentTarget as HTMLElement;

if (descriptionTooltipTimer) {
clearTimeout(descriptionTooltipTimer);
}

descriptionTooltipTimer = setTimeout(async () => {
this.overlayDescriptionType = type;
await this.updateComplete;

updatePopperOverlay(
this.descriptionOverlayElement!,
anchor,
'top',
true,
10,
300
);

this.descriptionOverlayElement!.classList.remove('hidden');
}, 500);
}

citeTimeButtonMouseLeft(e: MouseEvent) {
e.stopPropagation();
e.preventDefault();

if (!this.descriptionOverlayElement) {
console.error('descriptionOverlayElement are not initialized yet.');
return;
}

if (descriptionTooltipTimer) {
clearTimeout(descriptionTooltipTimer);
}

this.descriptionOverlayElement.classList.add('hidden');
}

citeTimeBlurred() {
if (!this.paperOverlayElement) {
console.error('paperOverlayElement are not initialized yet.');
Expand Down Expand Up @@ -914,6 +978,11 @@ export class RecRecRecommenderView extends LitElement {
tabindex="0"
@click=${(e: MouseEvent) =>
this.citeTimeButtonClicked(e, recommender, 'paperCount')}
@mouseenter=${(e: MouseEvent) =>
this.citeTimeButtonMouseEntered(e, 'paperCount')}
@mouseleave=${(e: MouseEvent) => {
this.citeTimeButtonMouseLeft(e);
}}
@touchstart=${(e: TouchEvent) => {
e.stopPropagation();
}}
Expand All @@ -928,6 +997,11 @@ export class RecRecRecommenderView extends LitElement {
tabindex="0"
@click=${(e: MouseEvent) =>
this.citeTimeButtonClicked(e, recommender, 'citeTimes')}
@mouseenter=${(e: MouseEvent) =>
this.citeTimeButtonMouseEntered(e, 'citeTimes')}
@mouseleave=${(e: MouseEvent) => {
this.citeTimeButtonMouseLeft(e);
}}
@touchstart=${(e: TouchEvent) => {
e.stopPropagation();
}}
Expand All @@ -940,6 +1014,11 @@ export class RecRecRecommenderView extends LitElement {
<a
class="info-block info-icon"
href="${recommender.url!}"
@mouseenter=${(e: MouseEvent) =>
this.citeTimeButtonMouseEntered(e, 'hIndex')}
@mouseleave=${(e: MouseEvent) => {
this.citeTimeButtonMouseLeft(e);
}}
target="_blank"
>
<span class="svg-icon">${unsafeHTML(iconHIndex)}</span>
Expand Down Expand Up @@ -1104,6 +1183,28 @@ export class RecRecRecommenderView extends LitElement {
</div>
`;

// Compile the description overlay
let description = 'Papers by this recommender citing my work';
let descriptionIcon = html`<span class="svg-icon"
>${unsafeHTML(iconClick)}</span
>`;

if (this.overlayDescriptionType === 'citeTimes') {
description = 'Total citations by this recommender';
} else if (this.overlayDescriptionType === 'hIndex') {
description = 'H-Index';
descriptionIcon = html`<span class="svg-icon external-icon"
>${unsafeHTML(iconExternal)}</span
>`;
}

const descriptionOverlay = html`
<div class="description">
<span>${description}</span>
${descriptionIcon}
</div>
`;

return html`
<div class="recommender-view">
${progressRing} ${MOBILE_MODE ? controlPopBar : controlSideBar}
Expand Down Expand Up @@ -1149,6 +1250,15 @@ export class RecRecRecommenderView extends LitElement {
</div>
<div class="popper-arrow"></div>
</div>
<div
id="description-overlay"
class="popper-tooltip hidden"
role="tooltip"
>
<div class="popper-content">${descriptionOverlay}</div>
<div class="popper-arrow"></div>
</div>
</div>
`;
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/recrec/recrec.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
box-sizing: border-box;

/* overflow: hidden; */
/* border: 1px solid var(--gray-400); */
border: 1px solid var(--gray-300);
overflow: hidden;
border-radius: var(--border-radius);
background: white;
box-shadow:
/* box-shadow:
0 0 2px hsla(0, 0%, 0%, 0.1),
0 0 10px hsla(0, 0%, 0%, 0.04),
0 0 15px hsla(0, 0%, 0%, 0.04),
0 0 30px hsla(0, 0%, 0%, 0.04);
0 0 30px hsla(0, 0%, 0%, 0.04); */
}

button {
Expand Down
1 change: 1 addition & 0 deletions src/images/icon-click.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/images/icon-external-link.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fa6adb7

Please sign in to comment.