29 |
31 |
32 |
33 |
35 |
36 |
37 |
39 |
17 |
19 |
--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "",
3 | "short_name": "",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/search-panel/SearchPanel.ts:
--------------------------------------------------------------------------------
1 | import type { Writable } from 'svelte/store';
2 | import d3 from '../../utils/d3-import';
3 | import type { SearchBarStoreValue } from '../../stores';
4 | import { getSearchBarStoreDefaultValue } from '../../stores';
5 |
6 | export class SearchPanel {
7 | component: HTMLElement;
8 | SearchPanelUpdated: () => void;
9 |
10 | constructor(component: HTMLElement, SearchPanelUpdated: () => void) {
11 | this.component = component;
12 | this.SearchPanelUpdated = SearchPanelUpdated;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/imgs/icon-link-2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: build
2 |
3 | on:
4 | # Triggers the workflow on push or pull request events but only for the main branch
5 | push:
6 | branches: [main]
7 | pull_request:
8 | branches: [main]
9 | #: Run the test every week
10 | schedule:
11 | - cron: '0 12 * * 1'
12 |
13 | jobs:
14 | build:
15 | runs-on: ${{ matrix.os }}
16 |
17 | strategy:
18 | matrix:
19 | node-version: [16]
20 | os: [ubuntu-latest]
21 |
22 | steps:
23 | - uses: actions/checkout@v3
24 | - uses: actions/setup-node@v3
25 | with:
26 | node-version: ${{ matrix.node-version }}
27 | - name: Install dependencies
28 | run: npm install
29 | - name: Build
30 | run: npm run build
31 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 |
5 |
6 | - Closes
7 |
8 | ### Additional Details
9 |
13 |
14 | ### PR Tasks
15 |
19 |
20 | - [ ] Have you updated the [YAML file](https://github.com/poloclub/supernova/blob/main/src/data/supernova.yaml) with the relevant information for the VA tool?
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/svelte/tsconfig.json",
3 | "compilerOptions": {
4 | "target": "esnext",
5 | "useDefineForClassFields": true,
6 | "module": "esnext",
7 | "resolveJsonModule": true,
8 | "baseUrl": ".",
9 | "strict": true,
10 | /**
11 | * Typecheck JS in `.svelte` and `.js` files by default.
12 | * Disable checkJs if you'd like to use dynamic types in JS.
13 | * Note that setting allowJs false does not prevent the use
14 | * of JS in `.svelte` files.
15 | */
16 | "allowJs": true,
17 | "checkJs": true
18 | },
19 | "include": [
20 | "src/**/*.d.ts",
21 | "src/**/*.ts",
22 | "src/**/*.js",
23 | "src/**/*.svelte",
24 | ],
25 | "references": [{ "path": "./tsconfig.node.json" }]
26 | }
27 |
--------------------------------------------------------------------------------
/src/scripts/convert-img-format.py:
--------------------------------------------------------------------------------
1 | from glob import glob
2 | from os.path import join
3 | from PIL import Image
4 |
5 |
6 | def resize_images():
7 | """
8 | Resize all images in the folder to the target_size.
9 | """
10 | counter = 0
11 | for img_name in glob(join("../../public/images/thumbnails", "*")):
12 | img = Image.open(img_name)
13 | target_length = 300
14 |
15 | if img.size[1] / img.size[0] > 2 or img.size[1] / img.size[0] < 0.5:
16 | target_length = 600
17 |
18 | if img.size[0] > target_length or img.size[1] > target_length:
19 | img.thumbnail([target_length, target_length], Image.Resampling.LANCZOS)
20 | img.save(img_name)
21 | counter += 1
22 |
23 | print(f"Resized {counter} images.")
24 |
25 |
26 | def main():
27 | """
28 | Convert all .png and .jpg images to .webp in the subfolders.
29 | """
30 | resize_images()
31 |
32 |
33 | if __name__ == "__main__":
34 | main()
35 |
--------------------------------------------------------------------------------
/src/imgs/icon-minus.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/src/imgs/icon-github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/header/Header.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
9 |
10 |
11 |
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023, Jay Wang, David Munechika, Seongmin Lee, Polo Chau
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
1 | name: Deploy GitHub Pages
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 |
9 | jobs:
10 | deploy:
11 | runs-on: ubuntu-22.04
12 | strategy:
13 | matrix:
14 | node-version: [16]
15 | os: [ubuntu-latest]
16 | permissions:
17 | contents: write
18 | concurrency:
19 | group: ${{ github.workflow }}-${{ github.ref }}
20 | steps:
21 | - uses: actions/checkout@v3
22 |
23 | - uses: actions/setup-node@v3
24 | with:
25 | node-version: ${{ matrix.node-version }}
26 |
27 | - name: Install dependencies
28 | run: npm install
29 |
30 | - name: Build
31 | run: npm run build:github
32 |
33 | - name: Deploy with gh-pages
34 | run: |
35 | git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
36 | npx gh-pages -u "github-actions-bot
12 |
36 |
13 |
23 |
24 |
35 |
14 |
17 |
18 |
19 | A Collection of 150 Interactive Visualization Tools for Computational
20 | Notebooks
21 |
22 |
17 |
21 |
22 |
26 |
27 |
41 |
--------------------------------------------------------------------------------
/src/imgs/icon-search.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
--------------------------------------------------------------------------------
/src/imgs/icon-play.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/src/components/header/Header.scss:
--------------------------------------------------------------------------------
1 | @import '../../define.scss';
2 |
3 | .svg-icon {
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | width: 100%;
8 | height: 100%;
9 | color: currentColor;
10 |
11 | pointer-events: fill;
12 |
13 | :global(svg) {
14 | fill: currentColor;
15 | width: 100%;
16 | height: 100%;
17 | }
18 | }
19 |
20 | .header-wrapper {
21 | width: 100%;
22 | height: 100%;
23 | padding: $panel-v-padding $panel-h-padding;
24 |
25 | display: flex;
26 | flex-direction: row;
27 | justify-content: space-between;
28 | align-items: center;
29 | color: white;
30 | }
31 |
32 | .header-content {
33 | width: 100%;
34 | display: flex;
35 | flex-direction: row;
36 | justify-content: space-between;
37 | align-items: center;
38 | }
39 |
40 | .left-content {
41 | display: flex;
42 | align-items: baseline;
43 | gap: 8px;
44 |
45 | cursor: default;
46 |
47 | .app-title {
48 | font-size: 1.625rem;
49 | font-variant: small-caps;
50 | font-weight: 600;
51 | height: 27px;
52 | width: 200px;
53 | margin-top: 7px;
54 | color: white;
55 | }
56 |
57 | .app-tagline {
58 | font-size: 20px;
59 | }
60 | }
61 |
62 | .right-content {
63 | display: flex;
64 | font-size: $font-u2;
65 | gap: 16px;
66 |
67 | a {
68 | color: white;
69 |
70 | &:visited {
71 | color: white;
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import { svelte } from '@sveltejs/vite-plugin-svelte';
3 | import yaml from '@rollup/plugin-yaml';
4 |
5 | // // https://vitejs.dev/config/
6 | // export default defineConfig({
7 | // plugins: [svelte()]
8 | // });
9 |
10 | // https://vitejs.dev/config/
11 | export default defineConfig(({ command, mode }) => {
12 | if (command === 'serve') {
13 | // Development
14 | return {
15 | plugins: [yaml(), svelte()]
16 | };
17 | } else if (command === 'build') {
18 | switch (mode) {
19 | case 'production': {
20 | // Production: standard web page (default mode)
21 | return {
22 | build: {
23 | outDir: 'dist'
24 | },
25 | plugins: [yaml(), svelte()]
26 | };
27 | }
28 |
29 | case 'vercel': {
30 | // Production: for vercel demo
31 | return {
32 | build: {
33 | outDir: 'dist'
34 | },
35 | plugins: [yaml(), svelte()]
36 | };
37 | }
38 |
39 | case 'github': {
40 | // Production: github page
41 | return {
42 | base: '/supernova/',
43 | build: {
44 | outDir: 'gh-page'
45 | },
46 | plugins: [yaml(), svelte()]
47 | };
48 | }
49 |
50 | default: {
51 | console.error(`Unknown production mode ${mode}`);
52 | return null;
53 | }
54 | }
55 | }
56 | });
57 |
--------------------------------------------------------------------------------
/public/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
26 |
--------------------------------------------------------------------------------
/src/imgs/icon-check.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/src/imgs/icon-time.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/src/imgs/icon-github-2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/utils/text-width.ts:
--------------------------------------------------------------------------------
1 | // Compute the text width without adding it to DOM!
2 | // https://chrishewett.com/blog/calculating-text-width-programmatically/
3 |
4 | import latoTextWidth from './font-width-data/lato.json';
5 |
6 | const getTextWidth = (fontJson: object, text: string, fontSize = 16) => {
7 | // split the string up using the spread operator (to handle UTF-8)
8 | const letterMapSingle = new Map
28 |
40 | 
2 |
3 | [](https://github.com/poloclub/supernova/actions/workflows/build.yml)
4 | [](https://github.com/poloclub/supernova/blob/master/LICENSE)
5 | [](http://arxiv.org/abs/2305.03039)
6 | [](https://doi.org/10.1145/3613905.3650848)
7 |
8 | Design Strategies and Opportunities for Interactive Visualization in Computational Notebooks
9 |
10 |  |
13 | ||
| 🚀 Live Demo: Explore 160+ notebook visualization tools! | 17 | 18 |👨🏻🏫 Conference Talk | 19 |📖 Research Paper | 20 |
167 |
204 |
205 |
298 |
--------------------------------------------------------------------------------
/metadata/github-stars.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": 64,
6 | "metadata": {},
7 | "outputs": [],
8 | "source": [
9 | "import requests\n",
10 | "import pathlib\n",
11 | "import yaml\n",
12 | "import re\n",
13 | "import os\n",
14 | "import sys\n",
15 | "\n",
16 | "from json import load, dump\n",
17 | "from typing import Set\n",
18 | "from os.path import join, exists, basename\n",
19 | "from tqdm import tqdm"
20 | ]
21 | },
22 | {
23 | "cell_type": "code",
24 | "execution_count": 16,
25 | "metadata": {},
26 | "outputs": [],
27 | "source": [
28 | "TOKEN = input('github token')"
29 | ]
30 | },
31 | {
32 | "cell_type": "code",
33 | "execution_count": 72,
34 | "metadata": {},
35 | "outputs": [],
36 | "source": [
37 | "with open('./resources/supernova.yaml', 'r') as fp:\n",
38 | " data = yaml.safe_load(fp)"
39 | ]
40 | },
41 | {
42 | "cell_type": "code",
43 | "execution_count": 73,
44 | "metadata": {},
45 | "outputs": [],
46 | "source": [
47 | "repo_names = []\n",
48 | "repo_name_map = {}\n",
49 | "\n",
50 | "for item in data:\n",
51 | " if item['githubURL'] != '':\n",
52 | " parts = item['githubURL'].split('/')\n",
53 | " cur_repo_name = '/'.join(parts[-2:])\n",
54 | " repo_name_map[cur_repo_name] = item['name']\n",
55 | " repo_names.append(cur_repo_name)\n"
56 | ]
57 | },
58 | {
59 | "cell_type": "code",
60 | "execution_count": 70,
61 | "metadata": {},
62 | "outputs": [],
63 | "source": [
64 | "def get_star_response(search_string):\n",
65 | " # Query the stars\n",
66 | " URL = \"https://api.github.com/graphql\"\n",
67 | " USER = \"xiaohk\"\n",
68 | "\n",
69 | " query = \"\"\"\n",
70 | " query {\n",
71 | " rateLimit {\n",
72 | " limit\n",
73 | " cost\n",
74 | " remaining\n",
75 | " }\n",
76 | " search(query: \"SEARCH_STRING\", type: REPOSITORY, first: 100) {\n",
77 | " edges {\n",
78 | " node {\n",
79 | " ... on Repository {\n",
80 | " owner {\n",
81 | " login\n",
82 | " }\n",
83 | " name\n",
84 | " stargazers {\n",
85 | " totalCount\n",
86 | " }\n",
87 | " defaultBranchRef {\n",
88 | " target {\n",
89 | " ... on Commit {\n",
90 | " history(first: 1) {\n",
91 | " edges {\n",
92 | " node {\n",
93 | " committedDate\n",
94 | " }\n",
95 | " }\n",
96 | " totalCount\n",
97 | " pageInfo {\n",
98 | " endCursor\n",
99 | " }\n",
100 | " }\n",
101 | " }\n",
102 | " }\n",
103 | " }\n",
104 | " }\n",
105 | " }\n",
106 | " }\n",
107 | " }\n",
108 | " }\n",
109 | " \"\"\"\n",
110 | " query = query.replace(\"SEARCH_STRING\", search_string)\n",
111 | "\n",
112 | " response = requests.post(\n",
113 | " URL, json={\"query\": query}, auth=(USER, TOKEN), timeout=600\n",
114 | " )\n",
115 | "\n",
116 | " if not response.ok:\n",
117 | " print(\"Request error!\")\n",
118 | " print(response)\n",
119 | " print(response.text)\n",
120 | "\n",
121 | " return response"
122 | ]
123 | },
124 | {
125 | "cell_type": "code",
126 | "execution_count": 74,
127 | "metadata": {},
128 | "outputs": [],
129 | "source": [
130 | "# Create a query search string to query only related users\n",
131 | "i = 0\n",
132 | "gap = 100\n",
133 | "star_responses = []\n",
134 | "\n",
135 | "while i < len(repo_names):\n",
136 | " search_string = \"\"\n",
137 | " for name in repo_names[i: i + gap]:\n",
138 | " search_string += f\"repo:{name} \"\n",
139 | "\n",
140 | " response = get_star_response(search_string)\n",
141 | " star_responses.append(response.json())\n",
142 | " i += gap"
143 | ]
144 | },
145 | {
146 | "cell_type": "code",
147 | "execution_count": 77,
148 | "metadata": {},
149 | "outputs": [],
150 | "source": [
151 | "star_counts = {}\n",
152 | "cursor_info = {}\n",
153 | "repo_date_map = {}\n",
154 | "\n",
155 | "def parse_star_response(star_response):\n",
156 | " # Parse the query result\n",
157 | " data = star_response[\"data\"]\n",
158 | "\n",
159 | "\n",
160 | " for node in data[\"search\"][\"edges\"]:\n",
161 | " node = node[\"node\"]\n",
162 | "\n",
163 | " # Get the query results\n",
164 | " owner = node[\"owner\"][\"login\"]\n",
165 | " name = node[\"name\"]\n",
166 | " star = node[\"stargazers\"][\"totalCount\"]\n",
167 | "\n",
168 | " repo_name = f\"{owner}/{name}\"\n",
169 | " star_counts[repo_name] = star\n",
170 | "\n",
171 | " # Get the cursor info\n",
172 | " info = {\n",
173 | " 'committedDate': node[\"defaultBranchRef\"][\"target\"]['history'][\"edges\"][0][\"node\"][\"committedDate\"],\n",
174 | " 'totalCount': node[\"defaultBranchRef\"][\"target\"]['history'][\"totalCount\"],\n",
175 | " 'endCursor': node[\"defaultBranchRef\"][\"target\"]['history'][\"pageInfo\"][\"endCursor\"]\n",
176 | " }\n",
177 | " cursor_info[repo_name] = info\n",
178 | "\n",
179 | "for star_response in star_responses:\n",
180 | " parse_star_response(star_response)"
181 | ]
182 | },
183 | {
184 | "cell_type": "code",
185 | "execution_count": 81,
186 | "metadata": {},
187 | "outputs": [
188 | {
189 | "name": "stderr",
190 | "output_type": "stream",
191 | "text": [
192 | "100%|██████████| 135/135 [00:08<00:00, 15.11it/s]\n"
193 | ]
194 | }
195 | ],
196 | "source": [
197 | "# Get the first commit date\n",
198 | "query = \"\"\"\n",
199 | "query ($name: String!, $owner: String!){\n",
200 | " repository(name: $name, owner: $owner) {\n",
201 | " defaultBranchRef {\n",
202 | " target {\n",
203 | " ... on Commit {\n",
204 | " history(first: 1, after: %s) {\n",
205 | " nodes {\n",
206 | " message\n",
207 | " committedDate\n",
208 | " authoredDate\n",
209 | " oid\n",
210 | " author {\n",
211 | " email\n",
212 | " name\n",
213 | " }\n",
214 | " }\n",
215 | " totalCount\n",
216 | " pageInfo {\n",
217 | " endCursor\n",
218 | " }\n",
219 | " }\n",
220 | " }\n",
221 | " }\n",
222 | " }\n",
223 | " }\n",
224 | "}\n",
225 | "\"\"\"\n",
226 | "\n",
227 | "def getDate(cursor):\n",
228 | " r = requests.post(\"https://api.github.com/graphql\",\n",
229 | " headers = {\n",
230 | " \"Authorization\": f\"Bearer {TOKEN}\"\n",
231 | " },\n",
232 | " json = {\n",
233 | " \"query\": query % cursor,\n",
234 | " \"variables\": {\n",
235 | " \"name\": name,\n",
236 | " \"owner\": owner,\n",
237 | " }\n",
238 | " })\n",
239 | " return r.json()[\"data\"][\"repository\"][\"defaultBranchRef\"][\"target\"][\"history\"][\"nodes\"][0][\"committedDate\"]\n",
240 | "\n",
241 | "for key in tqdm(cursor_info):\n",
242 | " if key in repo_date_map:\n",
243 | " continue\n",
244 | "\n",
245 | " info = cursor_info[key]\n",
246 | " owner, name = key.split('/')\n",
247 | " totalCount = info['totalCount']\n",
248 | "\n",
249 | " if totalCount > 1:\n",
250 | " cursor = info['endCursor'].split(' ')\n",
251 | " cursor[1] = str(totalCount - 2)\n",
252 | " date = getDate(f\"\\\"{' '.join(cursor)}\\\"\")\n",
253 | " repo_date_map[key] = date\n",
254 | " else:\n",
255 | " repo_date_map[key] = info['committedDate']"
256 | ]
257 | },
258 | {
259 | "cell_type": "code",
260 | "execution_count": 85,
261 | "metadata": {},
262 | "outputs": [],
263 | "source": [
264 | "# Remap the repo name back to their data source name\n",
265 | "\n",
266 | "star_info = {}\n",
267 | "for key in star_counts:\n",
268 | " name = repo_name_map[key]\n",
269 | " star_info[name] = {\n",
270 | " 'star': star_counts[key],\n",
271 | " 'date': repo_date_map[key]\n",
272 | " }"
273 | ]
274 | },
275 | {
276 | "cell_type": "code",
277 | "execution_count": 87,
278 | "metadata": {},
279 | "outputs": [],
280 | "source": [
281 | "star_info\n",
282 | "\n",
283 | "dump(star_info, open('./resources/star_info.json', 'w'))"
284 | ]
285 | }
286 | ],
287 | "metadata": {
288 | "kernelspec": {
289 | "display_name": "nlp",
290 | "language": "python",
291 | "name": "python3"
292 | },
293 | "language_info": {
294 | "codemirror_mode": {
295 | "name": "ipython",
296 | "version": 3
297 | },
298 | "file_extension": ".py",
299 | "mimetype": "text/x-python",
300 | "name": "python",
301 | "nbconvert_exporter": "python",
302 | "pygments_lexer": "ipython3",
303 | "version": "3.9.13"
304 | }
305 | },
306 | "nbformat": 4,
307 | "nbformat_minor": 2
308 | }
309 |
--------------------------------------------------------------------------------
/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | // Author: Jay Wang (jay@zijie.wang)
2 | // License: MIT
3 |
4 | import d3 from './d3-import';
5 |
6 | // import type { SvelteComponent } from 'svelte';
7 |
8 | /**
9 | * Round a number to a given decimal.
10 | * @param {number} num Number to round
11 | * @param {number} decimal Decimal place
12 | * @returns number
13 | */
14 | export const round = (num: number, decimal: number) => {
15 | return Math.round((num + Number.EPSILON) * 10 ** decimal) / 10 ** decimal;
16 | };
17 |
18 | /**
19 | * Get a random number between [min, max], inclusive
20 | * @param {number} min Min value
21 | * @param {number} max Max value
22 | * @returns number
23 | */
24 | export const random = (min: number, max: number) => {
25 | return Math.floor(Math.random() * (max - min)) + min;
26 | };
27 |
28 | /**
29 | * Download a JSON file
30 | * @param {any} object
31 | * @param {HTMLElement | null} [dlAnchorElem]
32 | * @param {string} [fileName]
33 | */
34 |
35 | export const downloadJSON = (
36 | object: object,
37 | dlAnchorElem: HTMLElement | null = null,
38 | fileName = 'download.json'
39 | ) => {
40 | const dataStr =
41 | 'data:text/json;charset=utf-8,' +
42 | encodeURIComponent(JSON.stringify(object));
43 |
44 | // Create dlAnchor if it is not given
45 | let myDlAnchorElem = dlAnchorElem;
46 | let needToRemoveAnchor = false;
47 |
48 | if (dlAnchorElem === null) {
49 | myDlAnchorElem = document.createElement('a');
50 | myDlAnchorElem.classList.add('download-anchor');
51 | myDlAnchorElem.style.display = 'none';
52 | needToRemoveAnchor = true;
53 | }
54 |
55 | myDlAnchorElem?.setAttribute('href', dataStr);
56 | myDlAnchorElem?.setAttribute('download', `${fileName}`);
57 | myDlAnchorElem?.click();
58 |
59 | if (needToRemoveAnchor) {
60 | myDlAnchorElem?.remove();
61 | }
62 | };
63 |
64 | /**
65 | * Download a text file
66 | * @param {string} textString
67 | * @param {HTMLElement | null} [dlAnchorElem]
68 | * @param {string} [fileName]
69 | */
70 |
71 | export const downloadText = (
72 | textString: string,
73 | dlAnchorElem: HTMLElement | null,
74 | fileName = 'download.json'
75 | ) => {
76 | const dataStr =
77 | 'data:text/plain;charset=utf-8,' + encodeURIComponent(textString);
78 |
79 | // Create dlAnchor if it is not given
80 | let myDlAnchorElem = dlAnchorElem;
81 | let needToRemoveAnchor = false;
82 |
83 | if (dlAnchorElem === null) {
84 | myDlAnchorElem = document.createElement('a');
85 | myDlAnchorElem.style.display = 'none';
86 | needToRemoveAnchor = true;
87 | }
88 |
89 | myDlAnchorElem?.setAttribute('href', dataStr);
90 | myDlAnchorElem?.setAttribute('download', `${fileName}`);
91 | myDlAnchorElem?.click();
92 |
93 | if (needToRemoveAnchor) {
94 | myDlAnchorElem?.remove();
95 | }
96 | };
97 |
98 | /**
99 | * Compute the luminance of a RGB color
100 | * https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
101 | * @param color [R, G, B in 0..255]
102 | * @returns number
103 | */
104 |
105 | export const getLuminance = (color: number[]) => {
106 | const r = color[0];
107 | const g = color[1];
108 | const b = color[2];
109 |
110 | // Some strange required transformations
111 | const transformedRGB = [r, g, b].map(v => {
112 | v /= 255;
113 | return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
114 | });
115 |
116 | return (
117 | transformedRGB[0] * 0.2126 +
118 | transformedRGB[1] * 0.7152 +
119 | transformedRGB[2] * 0.0722
120 | );
121 | };
122 |
123 | /**
124 | * Compute color contrast ratio
125 | * @param color1 [r, g, b] in 255 scale
126 | * @param color2 [r, g, b] in 255 scale
127 | * @returns Contrast ratio
128 | */
129 |
130 | export const getContrastRatio = (color1: number[], color2: number[]) => {
131 | const color1L = getLuminance(color1);
132 | const color2L = getLuminance(color2);
133 | const ratio =
134 | color1L > color2L
135 | ? (color2L + 0.05) / (color1L + 0.05)
136 | : (color1L + 0.05) / (color2L + 0.05);
137 | return ratio;
138 | };
139 |
140 | /**
141 | * Check if two colors have enough contrast
142 | * @param color1 [r, g, b] in 255 scale
143 | * @param color2 [r, g, b] in 255 scale
144 | * @param condition 'AA' or 'AAA'
145 | * @param smallText If it is small text
146 | * @returns If two colors have enough contrast
147 | */
148 |
149 | export const haveContrast = (
150 | color1: number[],
151 | color2: number[],
152 | condition = 'AAA',
153 | smallText = true
154 | ) => {
155 | const ratio = getContrastRatio(color1, color2);
156 |
157 | // Compare the ratio with different thresholds
158 | if (condition === 'AA') {
159 | if (smallText) {
160 | return ratio <= 1 / 4.5;
161 | } else {
162 | return ratio <= 1 / 3;
163 | }
164 | } else {
165 | if (smallText) {
166 | return ratio <= 1 / 7;
167 | } else {
168 | return ratio <= 1 / 4.5;
169 | }
170 | }
171 | };
172 |
173 | /**
174 | * Check if two sets are the same
175 | * @param set1 Set 1
176 | * @param set2 Set 2
177 | */
178 | export const setsAreEqual =
206 |
297 |
207 |
218 |
219 | Notebook Communication
208 |
209 | {#each commClips as clip, i}
210 |
215 | {/each}
216 |
217 |
220 |
231 |
232 | Visualization Material
221 |
222 | {#each materialClips as clip, i}
223 |
228 | {/each}
229 |
230 |
233 |
244 |
245 | Visualization Presentation
234 |
235 | {#each layoutClips as clip, i}
236 |
241 | {/each}
242 |
243 |
246 |
257 |
258 | Modularity
247 |
248 | {#each modularityClips as clip, i}
249 |
254 | {/each}
255 |
256 |
259 |
270 |
271 | Targeted Users
260 |
261 | {#each userClips as clip, i}
262 |
267 | {/each}
268 |
269 |
272 |
283 |
284 | Supported Notebooks
273 |
274 | {#each notebookClips as clip, i}
275 |
280 | {/each}
281 |
282 |
285 |
296 | Implementation Method
286 |
287 | {#each implementationClips as clip, i}
288 |
293 | {/each}
294 |
295 |