Skip to content

Instantly share code, notes, and snippets.

@mikeyoon

mikeyoon/index.html

Created May 2, 2018 00:00
Show Gist options
  • Save mikeyoon/3ff00852eff8fbf2ac4a9146e90291d1 to your computer and use it in GitHub Desktop.
Save mikeyoon/3ff00852eff8fbf2ac4a9146e90291d1 to your computer and use it in GitHub Desktop.
Download ZIP
Naive Collection Selectors Naive Selector Example // source https://jsbin.com/jujamuc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Naive Selector Example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Naive Collection Selectors</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/reselect/3.0.1/reselect.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
body {
font-size: 24px;
}
</style>
</head>
<body>
<button onclick="updateDate()">Update Chart Date</button>
<button onclick="clearResults()">Reset</button>
<p id="container"></p>
<ul id="output">
</ul>
<script type="text/javascript">
var $output = $('#output');
</script>
<script id="jsbin-javascript">
// State Setup
let normState = {
charts: {
tokens: Immutable.OrderedSet([1,2,3]),
encodings: Immutable.Map([
[1,'encoding1'],
[2,'encoding2'],
[3,'encoding3']
]),
titles: Immutable.Map([
[1,'Chart Title 1'],
[2,'Chart Title 2'],
[3,'Chart Title 3']
]),
createDates: Immutable.Map([
[1, new Date()],
[2, new Date()],
[3, new Date()]
])
}
};
function output(out) {
$output.append('<li>' + out + '</li>');
}
let stateSubject = new Rx.BehaviorSubject(normState);
function select(selector) {
return stateSubject.map(selector).distinctUntilChanged();
}
// Selector and the subscriber
let chartsSelector = Reselect.createSelector(
state => state.charts.tokens,
state => state.charts.encodings,
state => state.charts.titles,
state => state.charts.createDates,
(tokens, encodings, titles, dates) => {
return tokens.map(t => ({
token: t,
encoding: encodings.get(t),
title: titles.get(t),
date: dates.get(t)
}));
}
)
// Using the selectors
select(chartsSelector)
.switchMap(charts => Rx.Observable.merge(
...charts.map(c => Rx.Observable.of(c)).toArray())
).subscribe(c => output(c.token + ': ' + c.date.getTime()))
// Updates a single chart's created date
function updateDate() {
let newState = Object.assign({}, {
charts: Object.assign({}, normState.charts, {
createDates: normState.charts.createDates.set(1, new Date())
})
});
stateSubject.next(newState);
}
function clearResults() {
stateSubject.next({ charts: {
tokens: Immutable.OrderedSet([]),
encodings: Immutable.Map([]),
titles: Immutable.Map([]),
createDates: Immutable.Map([])
}});
$output.html('');
stateSubject.next(normState);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// State Setup
let normState = {
charts: {
tokens: Immutable.OrderedSet([1,2,3]),
encodings: Immutable.Map([
[1,'encoding1'],
[2,'encoding2'],
[3,'encoding3']
]),
titles: Immutable.Map([
[1,'Chart Title 1'],
[2,'Chart Title 2'],
[3,'Chart Title 3']
]),
createDates: Immutable.Map([
[1, new Date()],
[2, new Date()],
[3, new Date()]
])
}
};
function output(out) {
$output.append('<li>' + out + '</li>');
}
let stateSubject = new Rx.BehaviorSubject(normState);
function select(selector) {
return stateSubject.map(selector).distinctUntilChanged();
}
// Selector and the subscriber
let chartsSelector = Reselect.createSelector(
state => state.charts.tokens,
state => state.charts.encodings,
state => state.charts.titles,
state => state.charts.createDates,
(tokens, encodings, titles, dates) => {
return tokens.map(t => ({
token: t,
encoding: encodings.get(t),
title: titles.get(t),
date: dates.get(t)
}));
}
)
// Using the selectors
select(chartsSelector)
.switchMap(charts => Rx.Observable.merge(
...charts.map(c => Rx.Observable.of(c)).toArray())
).subscribe(c => output(c.token + ': ' + c.date.getTime()))
// Updates a single chart's created date
function updateDate() {
let newState = Object.assign({}, {
charts: Object.assign({}, normState.charts, {
createDates: normState.charts.createDates.set(1, new Date())
})
});
stateSubject.next(newState);
}
function clearResults() {
stateSubject.next({ charts: {
tokens: Immutable.OrderedSet([]),
encodings: Immutable.Map([]),
titles: Immutable.Map([]),
createDates: Immutable.Map([])
}});
$output.html('');
stateSubject.next(normState);
}</script></body>
</html>
Raw
jsbin.jujamuc.js
// State Setup
let normState = {
charts: {
tokens: Immutable.OrderedSet([1,2,3]),
encodings: Immutable.Map([
[1,'encoding1'],
[2,'encoding2'],
[3,'encoding3']
]),
titles: Immutable.Map([
[1,'Chart Title 1'],
[2,'Chart Title 2'],
[3,'Chart Title 3']
]),
createDates: Immutable.Map([
[1, new Date()],
[2, new Date()],
[3, new Date()]
])
}
};
function output(out) {
$output.append('<li>' + out + '</li>');
}
let stateSubject = new Rx.BehaviorSubject(normState);
function select(selector) {
return stateSubject.map(selector).distinctUntilChanged();
}
// Selector and the subscriber
let chartsSelector = Reselect.createSelector(
state => state.charts.tokens,
state => state.charts.encodings,
state => state.charts.titles,
state => state.charts.createDates,
(tokens, encodings, titles, dates) => {
return tokens.map(t => ({
token: t,
encoding: encodings.get(t),
title: titles.get(t),
date: dates.get(t)
}));
}
)
// Using the selectors
select(chartsSelector)
.switchMap(charts => Rx.Observable.merge(
...charts.map(c => Rx.Observable.of(c)).toArray())
).subscribe(c => output(c.token + ': ' + c.date.getTime()))
// Updates a single chart's created date
function updateDate() {
let newState = Object.assign({}, {
charts: Object.assign({}, normState.charts, {
createDates: normState.charts.createDates.set(1, new Date())
})
});
stateSubject.next(newState);
}
function clearResults() {
stateSubject.next({ charts: {
tokens: Immutable.OrderedSet([]),
encodings: Immutable.Map([]),
titles: Immutable.Map([]),
createDates: Immutable.Map([])
}});
$output.html('');
stateSubject.next(normState);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment