Published
Edited
Jun 12, 2019
2 forks
4 stars
ajaxMatches = (ajaxSearchResult.messages && ajaxSearchResult.messages.matches.map(match => ({...match, ajax:true}))) || []
exportSearchResult = (search && messages.filter(message => message.text && message.text.includes(search))) || []
combinedSearchResult = ajaxMatches.concat(exportSearchResult.filter(message => !ajaxMatches.find(match => match.ts == message.ts)))
d3 = require('d3')
axios = require('https://bundle.run/axios@0.19.0')
slack_zip = axios.get("https://gist.githubusercontent.com/stevekrouse/fd2e70db41849946d5077a494f04349f/raw/f6f92551de6ffe4743e40f29f987258279487cc6/foc-slack-export.zip", {responseType: 'blob'})
jszip = require("jszip@3.1.5/dist/jszip.min.js")
archive = jszip.loadAsync(slack_zip.data)
channelFiles = Object.keys(archive.files).filter(name => name.endsWith(".json"))
parse = file => {
return archive.file(file).async("text").then(JSON.parse).then(json => json.map(obj => ({...obj, channelName: file.split("/")[0]})))
}
parsedChannelFiles = Promise.all(channelFiles.map(parse))
messages = parsedChannelFiles.reduce((a,b) => a.concat(b), [])
users = archive.file("users.json").async("text").then(JSON.parse)
ts = queryParams.substring(4) - 0
findUser = userID => {
return users.find(user => user.id == userID)
}
renderMessage = message => {
return html`
<div class="message">
${displayTopLine(message.user, message.ts, message.username)}
<div>${renderMessageText(message.text)}</div>
</div>`
}
renderMessageText = messageText => md`${emoji.replace_colons(_.unescape(messageText)).replace(search, `<span style="background-color: #fcf5de">${search}</span>`).replace(/<@(.{9})>/g, (match, p1) => `<span style="background-color:#e8f5fa">@${findUser(p1).real_name}</span>`)}`
_ = require("lodash")
emojiJS = require("emoji-js")
emoji = {
let e = new emojiJS()
e.replace_mode = 'unified'
return e
}
displayTopLine = (user, ts, username) => `<div>
${findUser(user) ? `<img src="${findUser(user).profile.image_24}"></img>` : ``}
<b>${findUser(user) ? findUser(user).real_name : username}</b>
<a href="?ts=${ts}">
<span style="padding-left: 5px; font-size:12px;color:grey">
${new Date(ts * 1000).toLocaleString()}
</span>
</a>
</div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
