Skip to content

Commit

Permalink
Configure public URL for github page
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaohk
xiaohk committed Mar 25, 2021
1 parent 63a9469 commit f00ec56
Show file tree
Hide file tree
Showing 14 changed files with 56 additions and 52 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-replace": "^2.4.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.18.0",
"eslint-plugin-svelte3": "^3.0.0",
Expand Down
3 changes: 3 additions & 0 deletions rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import replace from '@rollup/plugin-replace';

const production = !process.env.ROLLUP_WATCH;

Expand Down Expand Up @@ -48,6 +49,8 @@ export default {
preprocess: sveltePreprocess()
}),

replace({ PUBLIC_URL: production ? '/dodrio' : '' }),

// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
Expand Down
26 changes: 13 additions & 13 deletions src/Atlas.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,7 +452,7 @@
.style('visibility', 'hidden');
badge.select('.icon-wrapper > img')
.attr('src', '/figures/map-marked-alt-solid.svg');
.attr('src', 'PUBLIC_URL/figures/map-marked-alt-solid.svg');
}, 400);
} else {
dispatch('open');
Expand All @@ -478,7 +478,7 @@
.style('visibility', 'visible');
badge.select('.icon-wrapper > img')
.attr('src', '/figures/chevron-right-solid.svg');
.attr('src', 'PUBLIC_URL/figures/chevron-right-solid.svg');
}, 400);
}
};
Expand All @@ -487,17 +487,17 @@
// Load the attention and atlas data
if (attentions == null || atlasData == null || saliencies == null) {
initData(
`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-atlas.json'
`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-atlas.json'
);
}
});
instanceIDStore.subscribe(async value => {
if (value !== instanceID) {
instanceID = value;
saliencies = await d3.json('/data/sst2-saliency-list-grad-l1.json');
saliencies = await d3.json('PUBLIC_URL/data/sst2-saliency-list-grad-l1.json');
saliencies = saliencies[instanceID];
tokenSize = saliencies.tokens.length;
svg.select('*').remove();
Expand All @@ -521,9 +521,9 @@
// Load the attention and atlas data
if (attentions == null || atlasData == null || saliencies == null) {
initData(
`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-atlas.json'
`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-atlas.json'
).then(createGraph);
} else {
createGraph();
Expand Down Expand Up @@ -695,7 +695,7 @@
<div class='relation-container' on:click={closeClicked}>
<div class='expand-button'>
<div class='icon-wrapper'>
<img src='/figures/arrow-forward-outline.svg' alt='expanding icon'>
<img src='PUBLIC_URL/figures/arrow-forward-outline.svg' alt='expanding icon'>
</div>
</div>
</div>
Expand All @@ -714,11 +714,11 @@

<div class='legend-container'>
<div>
<img src='/figures/click.png' width='180px' alt='click guide'>
<img src='PUBLIC_URL/figures/click.png' width='180px' alt='click guide'>
</div>
<div class='bottom-images'>
<img src='/figures/size-legend.png' width='160px' alt='size legend'>
<img src='/figures/legend.png' width='200px' alt='color legend'>
<img src='PUBLIC_URL/figures/size-legend.png' width='160px' alt='size legend'>
<img src='PUBLIC_URL/figures/legend.png' width='200px' alt='color legend'>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/CircleView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@
onMount(async () => {
console.log('loading matrix');
graphData = await d3.json('/data/twitter_graph_800_9_7.json');
graphData = await d3.json('PUBLIC_URL/data/twitter_graph_800_9_7.json');
console.log('loaded matrix');
drawGraph();
Expand Down
2 changes: 1 addition & 1 deletion src/EmbeddingView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@
const renderEmbeddings = async () => {
// console.log('loading embeddings');
embeddingData = await d3.json('/data/embedding-list-sst2.json');
embeddingData = await d3.json('PUBLIC_URL/data/embedding-list-sst2.json');
// console.log('loaded embeddings');
drawEmbeddingsPlot();
Expand Down
12 changes: 6 additions & 6 deletions src/GraphView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1274,33 +1274,33 @@
// Load data from files if they have not been loaded
if (attentionData == null) {
attentionData = await d3.json(`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`);
attentionData = await d3.json(`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`);
}
if (saliencyData == null) {
saliencyData = await d3.json('/data/sst2-saliency-list-grad-l1.json');
saliencyData = await d3.json('PUBLIC_URL/data/sst2-saliency-list-grad-l1.json');
tokenSize = saliencyData[instanceID].tokens.length;
}
// Create graph data
graphData = createGraphData(curLayer, curHead);
// graphData = await d3.json('/data/twitter_graph_800_9_7.json');
// graphData = await d3.json('PUBLIC_URL/data/twitter_graph_800_9_7.json');
// console.log('loaded matrix');
drawGraph();
};
onMount(async() => {
if (attentionData == null) {
attentionData = await d3.json(`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`);
attentionData = await d3.json(`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`);
}
if (saliencyData == null) {
saliencyData = await d3.json('/data/sst2-saliency-list-grad-l1.json');
saliencyData = await d3.json('PUBLIC_URL/data/sst2-saliency-list-grad-l1.json');
tokenSize = saliencyData[instanceID].tokens.length;
}
// gradSortedIndexes = await d3.json('/data/sst2-sorted-grad-heads.json');
// gradSortedIndexes = await d3.json('PUBLIC_URL/data/sst2-sorted-grad-heads.json');
// gradSortedIndexes = gradSortedIndexes[instanceID];
// relevantAttentions = loadAttentionMatrix();
// console.log(relevantAttentions, saliencyData);
Expand Down
2 changes: 1 addition & 1 deletion src/GridView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,7 @@
onMount(async () => {
console.log('loading matrix');
graphData = await d3.json('/data/twitter_graph_800_9_7.json');
graphData = await d3.json('PUBLIC_URL/data/twitter_graph_800_9_7.json');
console.log('loaded matrix');
drawGraph();
Expand Down
16 changes: 8 additions & 8 deletions src/LowerAtlas.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,9 +380,9 @@
// Load the attention and atlas data
if (attentions == null || atlasData == null || saliencies == null) {
initData(
`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-atlas.json'
`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-atlas.json'
);
}
});
Expand All @@ -401,9 +401,9 @@
// Load the attention and atlas data
if (attentions == null || atlasData == null || saliencies == null) {
initData(
`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-atlas.json'
`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`,
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-atlas.json'
).then(createGraph);
} else {
createGraph();
Expand Down Expand Up @@ -539,15 +539,15 @@
<div class='relation-container' on:click={() => dispatch('open')}>
<div class='expand-button'>
<div class='icon-wrapper'>
<img src='/figures/expand-outline.svg' alt='expanding icon'>
<img src='PUBLIC_URL/figures/expand-outline.svg' alt='expanding icon'>
</div>
Show Detail
</div>
</div>
</div>

<div class='color-legend'>
<img src='/figures/color-legend.png' alt='expanding icon'>
<img src='PUBLIC_URL/figures/color-legend.png' alt='expanding icon'>
</div>

</div>
Expand Down
2 changes: 1 addition & 1 deletion src/RadialView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -551,7 +551,7 @@
onMount(async () => {
console.log('loading matrix');
graphData = await d3.json('/data/twitter_graph_800_9_7.json');
graphData = await d3.json('PUBLIC_URL/data/twitter_graph_800_9_7.json');
console.log('loaded matrix');
drawGraph();
Expand Down
2 changes: 1 addition & 1 deletion src/Saliency.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@
onMount(async () => {
console.log('loading');
saliencies = await d3.json('/data/saliency_list.json');
saliencies = await d3.json('PUBLIC_URL/data/saliency_list.json');
console.log('loaded');
drawSaliencies(saliencies, saliencyKey);
Expand Down
2 changes: 1 addition & 1 deletion src/SmallMatrix.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function resample_single(canvas, width, height, resize_canvas) {
onMount(async () => {
console.log('loading matrix');
matrixData = await d3.json('/data/sample_attention_top_10.json');
matrixData = await d3.json('PUBLIC_URL/data/sample_attention_top_10.json');
console.log('loaded matrix');
drawMatrix();
Expand Down
10 changes: 5 additions & 5 deletions src/TableView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
onMount(async () => {
// console.log('loading table');
tableData = await d3.json('/data/table-list-sst2.json');
tableData = await d3.json('PUBLIC_URL/data/table-list-sst2.json');
// console.log('loaded table');
});
Expand Down Expand Up @@ -256,7 +256,7 @@
<th class='sentence' on:click={sort('sentence')}>
<div class='sentence-div'>
Sentence
<img src={sortState.sentence.up ? '/figures/up.svg' : '/figures/down.svg'}
<img src={sortState.sentence.up ? 'PUBLIC_URL/figures/up.svg' : 'PUBLIC_URL/figures/down.svg'}
class:selected={sortState.sentence.selected}
alt='sort logo'
>
Expand All @@ -266,7 +266,7 @@
<th class='true' on:click={sort('true_label')}>
<div class='true-div'>
True
<img src={sortState['true_label'].up ? '/figures/up.svg' : '/figures/down.svg'}
<img src={sortState['true_label'].up ? 'PUBLIC_URL/figures/up.svg' : 'PUBLIC_URL/figures/down.svg'}
class:selected={sortState['true_label'].selected}
alt='sort logo'
>
Expand All @@ -276,7 +276,7 @@
<th class='predicted' on:click={sort('predicted_label')}>
<div class='predicted-div'>
Predicted
<img src={sortState['predicted_label'].up ? '/figures/up.svg' : '/figures/down.svg'}
<img src={sortState['predicted_label'].up ? 'PUBLIC_URL/figures/up.svg' : 'PUBLIC_URL/figures/down.svg'}
class:selected={sortState['predicted_label'].selected}
alt='sort logo'
>
Expand All @@ -286,7 +286,7 @@
<th class='error' on:click={sort('logit_distance')}>
<div class='error-div'>
Error
<img src={sortState['logit_distance'].up ? '/figures/up.svg' : '/figures/down.svg'}
<img src={sortState['logit_distance'].up ? 'PUBLIC_URL/figures/up.svg' : 'PUBLIC_URL/figures/down.svg'}
class:selected={sortState['logit_distance'].selected}
alt='sort logo'
>
Expand Down
24 changes: 12 additions & 12 deletions src/dependency-view/Dependency.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,7 @@
inComparisonView = true;
if (attentions == null) {
initAttentionData(
`/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`
`PUBLIC_URL/data/sst2-attention-data/attention-${padZeroLeft(instanceID, 4)}.json`
).then(() => drawDependencyComparison(topHeads, svg, SVGPadding, data,
attentions, saliencies, SVGHeight, existingLinkSet, tokenXs,
textTokenPadding, textTokenWidths, wordToSubwordMap, initWordToSubwordMap));
Expand Down Expand Up @@ -711,9 +711,9 @@
onMount(async () => {
// Load the dependency and saliency data
if (data == null || saliencies == null) {
initData('/data/sst2-dependencies.json',
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-sorted-syntactic-heads.json');
initData('PUBLIC_URL/data/sst2-dependencies.json',
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-sorted-syntactic-heads.json');
}
bindSelect();
Expand Down Expand Up @@ -771,9 +771,9 @@
// Load the dependency and saliency data
if (data == null || saliencies == null) {
initData('/data/sst2-dependencies.json',
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-sorted-syntactic-heads.json')
initData('PUBLIC_URL/data/sst2-dependencies.json',
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-sorted-syntactic-heads.json')
.then(createGraph);
} else {
createGraph();
Expand Down Expand Up @@ -801,9 +801,9 @@
saliencyViewInitialized = false;
treeViewInitialized = false;
instanceID = value;
initData('/data/sst2-dependencies.json',
'/data/sst2-saliency-list-grad-l1.json',
'/data/sst2-sorted-syntactic-heads.json').then(createGraph);
initData('PUBLIC_URL/data/sst2-dependencies.json',
'PUBLIC_URL/data/sst2-saliency-list-grad-l1.json',
'PUBLIC_URL/data/sst2-sorted-syntactic-heads.json').then(createGraph);
}
});
Expand Down Expand Up @@ -1268,7 +1268,7 @@
<div class='relation-container' on:click={editButtonClicked}>
<div class='comparison-button'>
<div class='icon-wrapper'>
<img src='/figures/edit.svg' alt='editing icon'>
<img src='PUBLIC_URL/figures/edit.svg' alt='editing icon'>
</div>
</div>
</div>
Expand Down Expand Up @@ -1303,7 +1303,7 @@
</div>

<div class='gradient-guide'>
<img src='/figures/gradient.png' alt='gradient guide'>
<img src='PUBLIC_URL/figures/gradient.png' alt='gradient guide'>
</div>

<!-- Control panel after syntactic relation item is selected -->
Expand Down
4 changes: 2 additions & 2 deletions src/dependency-view/comparison-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,7 @@ const addButtons = (nameGroup, attentions, tokens, layer, head) => {
.on('click', e => radialButtonClicked(e, attentions, tokens, layer, head));

radialSymbol.append('image')
.attr('href', '/figures/radial-symbol.svg')
.attr('href', 'PUBLIC_URL/figures/radial-symbol.svg')
.attr('x', 2)
.attr('y', 2)
.attr('height', 16)
Expand All @@ -668,7 +668,7 @@ const addButtons = (nameGroup, attentions, tokens, layer, head) => {
.on('click', arcButtonClicked);

arcSymbol.select('image')
.attr('href', '/figures/arc-symbol.svg');
.attr('href', 'PUBLIC_URL/figures/arc-symbol.svg');

};

Expand Down

0 comments on commit f00ec56

Please sign in to comment.