💾 Feat/25 Add Iobio components - #207

Merged
demariadaniel merged 32 commits into
iobiofrom
feat/25-add-iobio-components
Aug 30, 2024
Merged

💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom
feat/25-add-iobio-components

Conversation

@demariadaniel

@demariadanieldemariadaniel commented Jul 30, 2024•
edited
Loading

Copy link
Copy Markdown
  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing

https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25

@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel changed the title WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel mentioned this pull request Aug 28, 2024
Merged
demariadaniel
demariadaniel commented Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx Outdated
demariadaniel
demariadaniel commented Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
const dom = new JSDOM('', { url: 'http://localhost/' });

// @ts-ignore
global.window = dom.window;

@demariadanieldemariadanielAug 28, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this

@justincorrigiblejustincorrigibleAug 30, 2024•
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now

@demariadanieldemariadanielAug 30, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.

@demariadanieldemariadanielAug 30, 2024•
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.

@demariadaniel
demariadaniel changed the base branch from develop to iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible reviewed Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx Outdated
justincorrigible
justincorrigible reviewed Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx Outdated
<h2>Bam.iobio</h2>
<>
<IobioDataBroker
alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}

@justincorrigiblejustincorrigibleAug 30, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.

@demariadanieldemariadanielAug 30, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually
It's hard coded because implementation is still TBD

demariadaniel
demariadaniel commented Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
global.document = global.window.document;
global.Element = global.window.Element;
global.localStorage = global.window.localStorage;
global.navigator = global.window.navigator;

@demariadanieldemariadanielAug 30, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server

joneubank
joneubank approved these changes Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
>
<TableContextProvider>
<h2>Bam.iobio</h2>
<>

@joneubankjoneubankAug 30, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?

@demariadanieldemariadanielAug 30, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed

Comment threadcomponents/pages/explorer/BamTable.tsx Outdated

return useMemo(
() => (
<>

@joneubankjoneubankAug 30, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.

@demariadanieldemariadanielAug 30, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed

@demariadaniel
demariadaniel merged commit ae8f947 into iobioAug 30, 2024
@demariadaniel
demariadaniel deleted the feat/25-add-iobio-components branch August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
💾 Feat/25 Add Iobio components - #207
Merged
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Aug 30, 2024
Merged
💾 Feat/25 Add Iobio components#207
demariadaniel merged 32 commits into
iobiofrom 
feat/25-add-iobio-components
Conversation
@demariadaniel
@demariadanieldemariadaniel
commented
Jul 30, 2024•

edited

Loading

Copy link


Copy Markdown

  • All Iobio components rendering
  • Async Iobio Components imports for SSR page refresh (now handled in package)
  • next.config DOM shims for handling web component features
  • Extremely basic file/visuals table toggle for testing
https://app.zenhub.com/workspaces/overture-stack-5d2e058ff67cc800011fee6b/issues/gh/overture-stack/iobio-components/25
@demariadaniel
Add package
975e10e
@demariadaniel
Dependencies, types, & more
ce0b39a
@demariadaniel
Update Components
acf0904
@demariadaniel
Remove transpile, update import
a3812f4
@demariadaniel
Remove changes, bug investigation
00e2918
@demariadaniel
Remove egoJwt change
8adc6ef
@demariadaniel
Basic Table Template
f91edcc
@demariadaniel
First Draft BamTable
eaa40a0
@demariadaniel
SSR Shims for Web Components
b6bcdc7
@demariadaniel
Correct package-lock
782fc8a
@demariadaniel
Merge branch 'develop' ofhttps://github.com/overture-stack/stageint…
777263c
…o feat/25-add-iobio-components
@demariadaniel
Update import for latest package version
2c86ee3
@demariadaniel
Stable testing stage
ed673b4
@demariadaniel
Elements All Rendering
8dbc678
@demariadaniel
Fix Labels
ff16294
@demariadaniel
Dynamics Constants
7637bf2
@demariadaniel
Remove Window dependency
d862207
@demariadaniel
All Charts + Histograms
845a6c5
@demariadaniel
Move Toggle Button
9d68c75
@demariadaniel
Clean Up async const import
d2dced8
@demariadaniel
Async util function
e94f6ed
@demariadaniel
Organize Variables
170ddea
@demariadaniel
Histogram Ignore Outliers
6995501
@demariadaniel
Outliers v2
47e9147
@demariadaniel
Use published version
1cea354
@demariadaniel
Massive cleanup using function default export
52e5098
@demariadanieldemariadaniel
changed the title
WIP: Feat/25 add iobio components💾 Feat/25 Add Iobio componentsAug 28, 2024
@demariadanieldemariadaniel
mentioned this pull request
Aug 28, 2024
 Merged

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

demariadaniel
demariadaniel
commented
Aug 28, 2024
View reviewed changes
Comment threadnext.config.js
 const dom = new JSDOM('', { url: 'http://localhost/' });

 // @ts-ignore
 global.window = dom.window;
@demariadanieldemariadanielAug 28, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously ts-ignore is not ideal, I'll take a second look at this
@justincorrigiblejustincorrigibleAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this JSDOM necessary for the SSR issues? if so, perhaps it can be removed now
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I've tested this several times and it causes errors when removed. Might be worth a deep dive, there may be a better Next-centric approach.
@demariadanieldemariadanielAug 30, 2024•

edited

Loading

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, yes JSDOM is solving part of the web components / SSR issue, plus the client side async import.
@demariadaniel
demariadaniel
changed the base branch from
develop
to
iobioAugust 30, 2024 14:05
justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

justincorrigible
justincorrigible
reviewed
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated

 <h2>Bam.iobio</h2>
 <>
 <IobioDataBroker
 alignmentUrl={'https://s3.amazonaws.com/iobio/NA12878/NA12878.autsome.bam'}
@justincorrigiblejustincorrigibleAug 30, 2024

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This value should be abstracted as an env var.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes - this is a specific file URL, so it will either live in a TableContext or in the URL query eventually

It's hard coded because implementation is still TBD
demariadaniel
demariadaniel
commented
Aug 30, 2024
View reviewed changes
Comment threadnext.config.js
 global.document = global.window.document;
 global.Element = global.window.Element;
 global.localStorage = global.window.localStorage;
 global.navigator = global.window.navigator;
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These global.* values are all undefined when the iobio script is loaded on the server
joneubank
joneubank
approved these changes
Aug 30, 2024
View reviewed changes
Comment threadcomponents/pages/explorer/BamTable.tsx
 >
 <TableContextProvider>
 <h2>Bam.iobio</h2>
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this empty tag?
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily, removed
Comment threadcomponents/pages/explorer/BamTable.tsx
Outdated


	return useMemo(
 () => (
 <>
@joneubankjoneubankAug 30, 2024

Copy link


Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need this empty tag, there is an <article> tag around all the content here.
@demariadanieldemariadanielAug 30, 2024

Copy link


Copy Markdown

Author
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed
@demariadaniel
demariadaniel
merged commit ae8f947
into
iobioAug 30, 2024
@demariadaniel
demariadaniel
deleted the

feat/25-add-iobio-components

branch
August 30, 2024 18:10
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@justincorrigiblejustincorrigiblejustincorrigible left review comments
@joneubankjoneubankjoneubank approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@demariadaniel@justincorrigible@joneubank