@@ -38,6 +38,8 @@ import componentCSS from './recommender-view.css?inline';
3838import iconHIndex from '../../images/icon-hindex-c.svg?raw' ;
3939import iconFile from '../../images/icon-file-c.svg?raw' ;
4040import iconCiteTimes from '../../images/icon-cite-times-c.svg?raw' ;
41+ import iconExternal from '../../images/icon-external-link.svg?raw' ;
42+ import iconClick from '../../images/icon-click.svg?raw' ;
4143
4244const DEV_MODE = true ;
4345const MAX_RECOMMENDER_NUM = 500 ;
@@ -84,6 +86,8 @@ interface SliderRange {
8486 initialValue : number ;
8587}
8688
89+ let descriptionTooltipTimer : number | null = null ;
90+
8791/**
8892 * Recommender view element.
8993 */
@@ -181,12 +185,18 @@ export class RecRecRecommenderView extends LitElement {
181185 @query ( '#paper-overlay' )
182186 paperOverlayElement : HTMLElement | undefined ;
183187
188+ @query ( '#description-overlay' )
189+ descriptionOverlayElement : HTMLElement | undefined ;
190+
184191 @state ( )
185192 overlayPaperCounts : [ string , number ] [ ] ;
186193
187194 @state ( )
188195 overlayPaperCountsType : 'citeTimes' | 'paperCount' = 'citeTimes' ;
189196
197+ @state ( )
198+ overlayDescriptionType : 'citeTimes' | 'paperCount' | 'hIndex' = 'citeTimes' ;
199+
190200 curClickedCiteTimeAuthorID : string | null = null ;
191201 overlayCleanup = ( ) => { } ;
192202
@@ -514,7 +524,7 @@ export class RecRecRecommenderView extends LitElement {
514524 let maxHIndex = - Infinity ;
515525
516526 for ( const [ i , chunk ] of authorIDChunks . entries ( ) ) {
517- console . log ( `Chunk: ${ i } ) ;
527+ // console.log(`Chunk: ${i}`);
518528 const startTime = performance . now ( ) ;
519529
520530 let retry = 3 ;
@@ -759,6 +769,9 @@ export class RecRecRecommenderView extends LitElement {
759769 return ;
760770 }
761771
772+ // Hide the description tooltip
773+ this . citeTimeButtonMouseLeft ( e ) ;
774+
762775 if ( this . curClickedCiteTimeAuthorID === recommender . authorID ) {
763776 // This overlay is already shown. We hide it if the user clicks the button (again)
764777 this . paperOverlayElement . classList . add ( 'hidden' ) ;
@@ -801,6 +814,57 @@ export class RecRecRecommenderView extends LitElement {
801814 this . paperOverlayElement . classList . remove ( 'hidden' ) ;
802815 }
803816
817+ citeTimeButtonMouseEntered (
818+ e : MouseEvent ,
819+ type : 'paperCount' | 'citeTimes' | 'hIndex'
820+ ) {
821+ e . stopPropagation ( ) ;
822+ e . preventDefault ( ) ;
823+
824+ if ( ! this . descriptionOverlayElement ) {
825+ console . error ( 'descriptionOverlayElement are not initialized yet.' ) ;
826+ return ;
827+ }
828+
829+ const anchor = e . currentTarget as HTMLElement ;
830+
831+ if ( descriptionTooltipTimer ) {
832+ clearTimeout ( descriptionTooltipTimer ) ;
833+ }
834+
835+ descriptionTooltipTimer = setTimeout ( async ( ) => {
836+ this . overlayDescriptionType = type ;
837+ await this . updateComplete ;
838+
839+ updatePopperOverlay (
840+ this . descriptionOverlayElement ! ,
841+ anchor ,
842+ 'top' ,
843+ true ,
844+ 10 ,
845+ 300
846+ ) ;
847+
848+ this . descriptionOverlayElement ! . classList . remove ( 'hidden' ) ;
849+ } , 500 ) ;
850+ }
851+
852+ citeTimeButtonMouseLeft ( e : MouseEvent ) {
853+ e . stopPropagation ( ) ;
854+ e . preventDefault ( ) ;
855+
856+ if ( ! this . descriptionOverlayElement ) {
857+ console . error ( 'descriptionOverlayElement are not initialized yet.' ) ;
858+ return ;
859+ }
860+
861+ if ( descriptionTooltipTimer ) {
862+ clearTimeout ( descriptionTooltipTimer ) ;
863+ }
864+
865+ this . descriptionOverlayElement . classList . add ( 'hidden' ) ;
866+ }
867+
804868 citeTimeBlurred ( ) {
805869 if ( ! this . paperOverlayElement ) {
806870 console . error ( 'paperOverlayElement are not initialized yet.' ) ;
@@ -914,6 +978,11 @@ export class RecRecRecommenderView extends LitElement {
914978 tabindex = "0"
915979 @click = ${ ( e : MouseEvent ) =>
916980 this . citeTimeButtonClicked ( e , recommender , 'paperCount' ) }
981+ @mouseenter = ${ ( e : MouseEvent ) =>
982+ this . citeTimeButtonMouseEntered ( e , 'paperCount' ) }
983+ @mouseleave = ${ ( e : MouseEvent ) => {
984+ this . citeTimeButtonMouseLeft ( e ) ;
985+ } }
917986 @touchstart = ${ ( e : TouchEvent ) => {
918987 e . stopPropagation ( ) ;
919988 } }
@@ -928,6 +997,11 @@ export class RecRecRecommenderView extends LitElement {
928997 tabindex = "0"
929998 @click = ${ ( e : MouseEvent ) =>
930999 this . citeTimeButtonClicked ( e , recommender , 'citeTimes' ) }
1000+ @mouseenter = ${ ( e : MouseEvent ) =>
1001+ this . citeTimeButtonMouseEntered ( e , 'citeTimes' ) }
1002+ @mouseleave = ${ ( e : MouseEvent ) => {
1003+ this . citeTimeButtonMouseLeft ( e ) ;
1004+ } }
9311005 @touchstart = ${ ( e : TouchEvent ) => {
9321006 e . stopPropagation ( ) ;
9331007 } }
@@ -940,6 +1014,11 @@ export class RecRecRecommenderView extends LitElement {
9401014 <a
9411015 class= "info-block info-icon"
9421016 href = "${ recommender . url ! }
1017+ @mouseenter = ${ ( e : MouseEvent ) =>
1018+ this . citeTimeButtonMouseEntered ( e , 'hIndex' ) }
1019+ @mouseleave = ${ ( e : MouseEvent ) => {
1020+ this . citeTimeButtonMouseLeft ( e ) ;
1021+ } }
9431022 target= "_blank"
9441023 >
9451024 <span class= "svg-icon" > ${ unsafeHTML ( iconHIndex ) } / span>
@@ -1104,6 +1183,28 @@ export class RecRecRecommenderView extends LitElement {
11041183 </ div>
11051184 ` ;
11061185
1186+ // Compile the description overlay
1187+ let description = 'Papers by this recommender citing my work' ;
1188+ let descriptionIcon = html `<span class= "svg-icon"
1189+ > ${ unsafeHTML ( iconClick ) } / span
1190+ > ` ;
1191+
1192+ if ( this . overlayDescriptionType === 'citeTimes' ) {
1193+ description = 'Total citations by this recommender' ;
1194+ } else if ( this . overlayDescriptionType === 'hIndex' ) {
1195+ description = 'H-Index' ;
1196+ descriptionIcon = html `<span class= "svg-icon external-icon"
1197+ > ${ unsafeHTML ( iconExternal ) } / span
1198+ > ` ;
1199+ }
1200+
1201+ const descriptionOverlay = html `
1202+ <div class= "description" >
1203+ <span> ${ description } / span>
1204+ ${ descriptionIcon }
1205+ </ div>
1206+ ` ;
1207+
11071208 return html `
11081209 <div class= "recommender-view" >
11091210 ${ progressRing } ${ MOBILE_MODE ? controlPopBar : controlSideBar }
@@ -1149,6 +1250,15 @@ export class RecRecRecommenderView extends LitElement {
11491250 </ div>
11501251 <div class= "popper-arrow" > </ div>
11511252 </ div>
1253+
1254+ <div
1255+ id= "description-overlay"
1256+ class = "popper- to oltip hidden"
1257+ role= "to oltip"
1258+ >
1259+ <div class= "popper-content" > ${ descriptionOverlay } / div>
1260+ <div class= "popper-arrow" > </ div>
1261+ </ div>
11521262 </ div>
11531263 ` ;
11541264 }
0 commit comments