Skip to content

Commit

Permalink
Merge pull request cBioPortal#4685 from alisman/news
Browse files Browse the repository at this point in the history 
Replace twitter with news feed
  • Loading branch information
@alisman
alisman authored Aug 21, 2023
2 parents 43faab5 + af6bbcc commit 85a5af3
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 77 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,6 @@
"react-toastify": "^9.1.2",
"react-tooltip": "^3.2.2",
"react-transition-group": "^2.5.1",
"react-twitter-widgets": "^1.7.1",
"react-virtualized": "^9.20.1",
"react-zeroclipboard": "^3.2.2",
"reactable": "^0.14.1",
Expand Down
35 changes: 35 additions & 0 deletions src/globalStyles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -761,3 +761,38 @@ h2.divider {
.marching-ants {
@include marching-ants();
}

.newsContent {
height: 300px;
width: 300px;
padding: 10px;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid $borderColor;
> ul {
padding-inline-start: 0;
}
img {
max-width: 250px;
margin: 5px 0;
}
doc-anchor-trigger {
display: none;
}
h2 {
font-size: 14px;
border-top: 1px dashed $borderColor;
padding-top: 10px;
}
doc-anchor-target:first-of-type {
h2 {
padding-top: 0;
border: none;
}
}
.newsLoader {
position: relative;
top: 45%;
left: 40%;
}
}
105 changes: 50 additions & 55 deletions src/shared/components/rightbar/RightBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import { Link } from 'react-router-dom';
import LoadingIndicator from '../loadingIndicator/LoadingIndicator';
import { buildCBioPortalPageUrl } from '../../api/urls';
import { ResultsViewTab } from '../../../pages/resultsView/ResultsViewPageHelpers';
import { mockOrder } from 'pages/patientView/vafPlot/mockData';
import { remoteData } from 'cbioportal-frontend-commons';
import { sleep } from 'shared/lib/TimeUtils';
import parseNews from 'shared/lib/parseNews';

interface IRightBarProps {
queryStore: QueryStore;
}
interface IRightBarState {
twitterLoading: boolean;
}
interface IRightBarState {}

@observer
export default class RightBar extends React.Component<
Expand All @@ -24,9 +26,6 @@ export default class RightBar extends React.Component<
> {
constructor(props: IRightBarProps) {
super(props);
this.state = {
twitterLoading: true, // only used for default what's new
};
}

get studyStore() {
Expand All @@ -44,6 +43,17 @@ export default class RightBar extends React.Component<
);
}

public newsContent = remoteData(async () => {
await sleep(3000);
return fetch(
'https://www.cbioportal.org/proxy/docs.cbioportal.org/news/'
)
.then(d => d.text())
.then(d => {
return parseNews(d);
});
});

private CancerTypeDescendantStudy({
cancerType,
}: {
Expand Down Expand Up @@ -85,7 +95,6 @@ export default class RightBar extends React.Component<
</div>
);
} else {
let Timeline = require('react-twitter-widgets').Timeline;
return (
<div
className="rightBarSection"
Expand All @@ -104,61 +113,47 @@ export default class RightBar extends React.Component<
></i>
</a>
</h3>
{
// TODO this is a temporary workaround to limit the vertical size of the Timeline container
// ideally this should be fixed within the corresponding react component
// we should revisit this once there is a newer and properly working version of the library
// another alternative is to directly use the twitter generated code
// (https://publish.twitter.com/?maxheight=200&query=%40cbioportal&widget=Timeline)
// but then we lose the "onLoad" functionality
}

{this.newsContent.isPending && (
<div className={'newsContent'}>
<LoadingIndicator
className={'newsLoader'}
isLoading={this.newsContent.isPending}
size={'small'}
/>
</div>
)}

{this.newsContent.isComplete && (
<div
className={'newsContent'}
dangerouslySetInnerHTML={{
__html: this.newsContent.result!,
}}
></div>
)}

<div
style={{
marginTop: 3,
maxHeight: 200,
overflowY: 'scroll',
}}
>
<Timeline
dataSource={{
sourceType: 'profile',
screenName: 'cbioportal',
}}
options={{
username: 'cbioportal',
// TODO height option does not seem to work anymore
// (see the workaround and comments above)
height: '200',
chrome: 'noheader%20nofooter',
}}
onLoad={() =>
this.setState({ twitterLoading: false })
}
/>
</div>
></div>
<div>
{(this.state.twitterLoading && (
<span style={{ textAlign: 'center' }}>
<LoadingIndicator
isLoading={true}
small={true}
/>
</span>
)) || (
<div style={{ paddingTop: 5 }}>
<p style={{ textAlign: 'center' }}>
Sign up for low-volume email news alerts
</p>
<a
target="_blank"
className="btn btn-default btn-sm"
href="http://groups.google.com/group/cbioportal-news/boxsubscribe"
style={{ width: '100%' }}
>
Subscribe
</a>
</div>
)}
<div style={{ paddingTop: 5 }}>
<p style={{ textAlign: 'center' }}>
Sign up for low-volume email news alerts
</p>
<a
target="_blank"
className="btn btn-default btn-sm"
href="http://groups.google.com/group/cbioportal-news/boxsubscribe"
style={{ width: '100%' }}
>
Subscribe
</a>
</div>
</div>
</div>
);
Expand Down
18 changes: 18 additions & 0 deletions src/shared/lib/parseNews.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export default function parseNews(html: string) {
const contentItems = $(html)
.find('#docs-content')
.children()
.filter((i, el) => {
return /^...-\d{1,2}-\d\d\d\d/.test(el.id) || el.tagName === 'UL';
});

contentItems.each((i, el) => {
$(el)
.find('a')
.attr('target', '_blank');
});

return $('<div/>')
.append(contentItems)
.html();
}
22 changes: 1 addition & 21 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10507,11 +10507,6 @@ execa@^5.0.0:
signal-exit "^3.0.3"
strip-final-newline "^2.0.0"

exenv@^1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=

[email protected], [email protected], exit@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
Expand Down Expand Up @@ -19450,7 +19445,7 @@ [email protected]:
dependencies:
fbjs "^0.8.9"

[email protected], [email protected], prop-types@^15.0.0, prop-types@^15.3.0, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
[email protected], [email protected], prop-types@^15.0.0, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -20450,16 +20445,6 @@ react-transition-group@^4.3.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"

react-twitter-widgets@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/react-twitter-widgets/-/react-twitter-widgets-1.7.1.tgz#60061f37a8c4f361c27f3d1d7ceba98d3cd80a40"
integrity sha512-bAcR/NKqRbVRJav981bHrm2+xka7NA2nQJB6Urtj9BARqP7aeGHPC0CrrC7wdYIaluOqiF8MiTtURqIJjFs2ZA==
dependencies:
exenv "^1.2.1"
lodash "^4.17.4"
prop-types "^15.3.0"
scriptjs "^2.5.8"

react-virtualized@^9.20.1:
version "9.21.0"
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
Expand Down Expand Up @@ -21799,11 +21784,6 @@ script-loader@^0.7.0:
dependencies:
raw-loader "~0.5.1"

scriptjs@^2.5.8:
version "2.5.9"
resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==

[email protected]:
version "1.0.1"
resolved "https://registry.yarnpkg.com/scroll-smooth/-/scroll-smooth-1.0.1.tgz#77be38594dc0ae4af58851383927b60ad9f3f842"
Expand Down

0 comments on commit 85a5af3

Please sign in to comment.