Skip to content

Commit 85a5af3

Browse files
alismanalisman
authored
Merge pull request #4685 from alisman/news
Replace twitter with news feed
2 parents 43faab5 + af6bbcc commit 85a5af3

File tree

5 files changed

+104
-77
lines changed

5 files changed

+104
-77
lines changed

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,6 @@
286286
"react-toastify": "^9.1.2",
287287
"react-tooltip": "^3.2.2",
288288
"react-transition-group": "^2.5.1",
289-
"react-twitter-widgets": "^1.7.1",
290289
"react-virtualized": "^9.20.1",
291290
"react-zeroclipboard": "^3.2.2",
292291
"reactable": "^0.14.1",

‎src/globalStyles/global.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -761,3 +761,38 @@ h2.divider {
761761
.marching-ants {
762762
@include marching-ants();
763763
}
764+
765+
.newsContent {
766+
height: 300px;
767+
width: 300px;
768+
padding: 10px;
769+
overflow-y: scroll;
770+
overflow-x: hidden;
771+
border: 1px solid $borderColor;
772+
> ul {
773+
padding-inline-start: 0;
774+
}
775+
img {
776+
max-width: 250px;
777+
margin: 5px 0;
778+
}
779+
doc-anchor-trigger {
780+
display: none;
781+
}
782+
h2 {
783+
font-size: 14px;
784+
border-top: 1px dashed $borderColor;
785+
padding-top: 10px;
786+
}
787+
doc-anchor-target:first-of-type {
788+
h2 {
789+
padding-top: 0;
790+
border: none;
791+
}
792+
}
793+
.newsLoader {
794+
position: relative;
795+
top: 45%;
796+
left: 40%;
797+
}
798+
}

‎src/shared/components/rightbar/RightBar.tsx

Lines changed: 50 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ import { Link } from 'react-router-dom';
99
import LoadingIndicator from '../loadingIndicator/LoadingIndicator';
1010
import { buildCBioPortalPageUrl } from '../../api/urls';
1111
import { ResultsViewTab } from '../../../pages/resultsView/ResultsViewPageHelpers';
12+
import { mockOrder } from 'pages/patientView/vafPlot/mockData';
13+
import { remoteData } from 'cbioportal-frontend-commons';
14+
import { sleep } from 'shared/lib/TimeUtils';
15+
import parseNews from 'shared/lib/parseNews';
1216

1317
interface IRightBarProps {
1418
queryStore: QueryStore;
1519
}
16-
interface IRightBarState {
17-
twitterLoading: boolean;
18-
}
20+
interface IRightBarState {}
1921

2022
@observer
2123
export default class RightBar extends React.Component<
@@ -24,9 +26,6 @@ export default class RightBar extends React.Component<
2426
> {
2527
constructor(props: IRightBarProps) {
2628
super(props);
27-
this.state = {
28-
twitterLoading: true, // only used for default what's new
29-
};
3029
}
3130

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

46+
public newsContent = remoteData(async () => {
47+
await sleep(3000);
48+
return fetch(
49+
'https://www.cbioportal.org/proxy/docs.cbioportal.org/news/'
50+
)
51+
.then(d => d.text())
52+
.then(d => {
53+
return parseNews(d);
54+
});
55+
});
56+
4757
private CancerTypeDescendantStudy({
4858
cancerType,
4959
}: {
@@ -85,7 +95,6 @@ export default class RightBar extends React.Component<
8595
</div>
8696
);
8797
} else {
88-
let Timeline = require('react-twitter-widgets').Timeline;
8998
return (
9099
<div
91100
className="rightBarSection"
@@ -104,61 +113,47 @@ export default class RightBar extends React.Component<
104113
></i>
105114
</a>
106115
</h3>
107-
{
108-
// TODO this is a temporary workaround to limit the vertical size of the Timeline container
109-
// ideally this should be fixed within the corresponding react component
110-
// we should revisit this once there is a newer and properly working version of the library
111-
// another alternative is to directly use the twitter generated code
112-
// (https://publish.twitter.com/?maxheight=200&query=%40cbioportal&widget=Timeline)
113-
// but then we lose the "onLoad" functionality
114-
}
116+
117+
{this.newsContent.isPending && (
118+
<div className={'newsContent'}>
119+
<LoadingIndicator
120+
className={'newsLoader'}
121+
isLoading={this.newsContent.isPending}
122+
size={'small'}
123+
/>
124+
</div>
125+
)}
126+
127+
{this.newsContent.isComplete && (
128+
<div
129+
className={'newsContent'}
130+
dangerouslySetInnerHTML={{
131+
__html: this.newsContent.result!,
132+
}}
133+
></div>
134+
)}
135+
115136
<div
116137
style={{
117138
marginTop: 3,
118139
maxHeight: 200,
119140
overflowY: 'scroll',
120141
}}
121-
>
122-
<Timeline
123-
dataSource={{
124-
sourceType: 'profile',
125-
screenName: 'cbioportal',
126-
}}
127-
options={{
128-
username: 'cbioportal',
129-
// TODO height option does not seem to work anymore
130-
// (see the workaround and comments above)
131-
height: '200',
132-
chrome: 'noheader%20nofooter',
133-
}}
134-
onLoad={() =>
135-
this.setState({ twitterLoading: false })
136-
}
137-
/>
138-
</div>
142+
></div>
139143
<div>
140-
{(this.state.twitterLoading && (
141-
<span style={{ textAlign: 'center' }}>
142-
<LoadingIndicator
143-
isLoading={true}
144-
small={true}
145-
/>
146-
</span>
147-
)) || (
148-
<div style={{ paddingTop: 5 }}>
149-
<p style={{ textAlign: 'center' }}>
150-
Sign up for low-volume email news alerts
151-
</p>
152-
<a
153-
target="_blank"
154-
className="btn btn-default btn-sm"
155-
href="http://groups.google.com/group/cbioportal-news/boxsubscribe"
156-
style={{ width: '100%' }}
157-
>
158-
Subscribe
159-
</a>
160-
</div>
161-
)}
144+
<div style={{ paddingTop: 5 }}>
145+
<p style={{ textAlign: 'center' }}>
146+
Sign up for low-volume email news alerts
147+
</p>
148+
<a
149+
target="_blank"
150+
className="btn btn-default btn-sm"
151+
href="http://groups.google.com/group/cbioportal-news/boxsubscribe"
152+
style={{ width: '100%' }}
153+
>
154+
Subscribe
155+
</a>
156+
</div>
162157
</div>
163158
</div>
164159
);

‎src/shared/lib/parseNews.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default function parseNews(html: string) {
2+
const contentItems = $(html)
3+
.find('#docs-content')
4+
.children()
5+
.filter((i, el) => {
6+
return /^...-\d{1,2}-\d\d\d\d/.test(el.id) || el.tagName === 'UL';
7+
});
8+
9+
contentItems.each((i, el) => {
10+
$(el)
11+
.find('a')
12+
.attr('target', '_blank');
13+
});
14+
15+
return $('<div/>')
16+
.append(contentItems)
17+
.html();
18+
}

‎yarn.lock

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10507,11 +10507,6 @@ execa@^5.0.0:
1050710507
signal-exit "^3.0.3"
1050810508
strip-final-newline "^2.0.0"
1050910509

10510-
exenv@^1.2.1:
10511-
version "1.2.2"
10512-
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
10513-
integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
10514-
1051510510
exit@0.1.2, exit@0.1.x, exit@^0.1.2:
1051610511
version "0.1.2"
1051710512
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -19450,7 +19445,7 @@ prop-types@15.5.8:
1945019445
dependencies:
1945119446
fbjs "^0.8.9"
1945219447

19453-
prop-types@15.7.2, prop-types@15.x, 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:
19448+
prop-types@15.7.2, prop-types@15.x, 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:
1945419449
version "15.7.2"
1945519450
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
1945619451
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -20450,16 +20445,6 @@ react-transition-group@^4.3.0:
2045020445
loose-envify "^1.4.0"
2045120446
prop-types "^15.6.2"
2045220447

20453-
react-twitter-widgets@^1.7.1:
20454-
version "1.7.1"
20455-
resolved "https://registry.yarnpkg.com/react-twitter-widgets/-/react-twitter-widgets-1.7.1.tgz#60061f37a8c4f361c27f3d1d7ceba98d3cd80a40"
20456-
integrity sha512-bAcR/NKqRbVRJav981bHrm2+xka7NA2nQJB6Urtj9BARqP7aeGHPC0CrrC7wdYIaluOqiF8MiTtURqIJjFs2ZA==
20457-
dependencies:
20458-
exenv "^1.2.1"
20459-
lodash "^4.17.4"
20460-
prop-types "^15.3.0"
20461-
scriptjs "^2.5.8"
20462-
2046320448
react-virtualized@^9.20.1:
2046420449
version "9.21.0"
2046520450
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
@@ -21799,11 +21784,6 @@ script-loader@^0.7.0:
2179921784
dependencies:
2180021785
raw-loader "~0.5.1"
2180121786

21802-
scriptjs@^2.5.8:
21803-
version "2.5.9"
21804-
resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
21805-
integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
21806-
2180721787
scroll-smooth@1.0.1:
2180821788
version "1.0.1"
2180921789
resolved "https://registry.yarnpkg.com/scroll-smooth/-/scroll-smooth-1.0.1.tgz#77be38594dc0ae4af58851383927b60ad9f3f842"

0 commit comments

Comments
 (0)