mirror of
https://github.com/datahub-project/datahub.git
synced 2025-11-09 07:53:33 +00:00
122 lines
57 KiB
HTML
122 lines
57 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-datahub-web-react/README" data-has-hydrated="false">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="generator" content="Docusaurus v2.4.3">
|
|||
|
|
<title data-rh="true">datahub-web-react | DataHub</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://docs.datahub.com/docs/datahub-web-react"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="datahub-web-react | DataHub"><meta data-rh="true" name="description" content="About"><meta data-rh="true" property="og:description" content="About"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.datahub.com/docs/datahub-web-react"><link data-rh="true" rel="alternate" href="https://docs.datahub.com/docs/datahub-web-react" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.datahub.com/docs/datahub-web-react" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://RK0UG797F3-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/learn/rss.xml" title="DataHub RSS Feed">
|
|||
|
|
<link rel="alternate" type="application/atom+xml" href="/learn/atom.xml" title="DataHub Atom Feed">
|
|||
|
|
|
|||
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|||
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|||
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PKGVLETT4C"></script>
|
|||
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-PKGVLETT4C",{})</script>
|
|||
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|||
|
|
<script>window.dataLayer=window.dataLayer||[]</script>
|
|||
|
|
<script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-5M8T9HNN",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link rel="search" type="application/opensearchdescription+xml" title="DataHub" href="/opensearch.xml">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<meta httpequiv="Content-Security-Policy" content="frame-ancestors 'self' https://*.acryl.io https://acryldata.io http://localhost:*">
|
|||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap">
|
|||
|
|
<script src="https://tools.luckyorange.com/core/lo.js?site-id=28ea8a38" async defer="defer"></script>
|
|||
|
|
<script src="/scripts/rb2b.js" async defer="defer"></script>
|
|||
|
|
<script src="https://app.revenuehero.io/scheduler.min.js"></script>
|
|||
|
|
<script src="https://tag.clearbitscripts.com/v1/pk_2e321cabe30432a5c44c0424781aa35f/tags.js" referrerpolicy="strict-origin-when-cross-origin"></script>
|
|||
|
|
<script src="/scripts/reo.js"></script>
|
|||
|
|
<script id="runllm-widget-script" type="module" src="https://widget.runllm.com" crossorigin="true" runllm-name="DataHub" runllm-assistant-id="81" runllm-position="BOTTOM_RIGHT" runllm-keyboard-shortcut="Mod+j" runllm-preset="docusaurus" runllm-theme-color="#1890FF" runllm-brand-logo="https://docs.datahub.com/img/datahub-logo-color-mark.svg" runllm-community-url="https://datahub.com/slack" runllm-community-type="slack" runllm-disable-ask-a-person="true" async></script><link rel="stylesheet" href="/assets/css/styles.1e47f27f.css">
|
|||
|
|
<link rel="preload" href="/assets/js/runtime~main.76cdbaa9.js" as="script">
|
|||
|
|
<link rel="preload" href="/assets/js/main.b7ce4b14.js" as="script">
|
|||
|
|
</head>
|
|||
|
|
<body class="navigation-with-keyboard">
|
|||
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8T9HNN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|||
|
|
|
|||
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus">
|
|||
|
|
<div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_mb4j" style="background-color:transparent;color:#ffffff" role="banner"><div class="content_knG7 announcementBarContent_xLdY"><div class="shimmer-banner"><p><strong>CONTEXT:</strong> The Future of Agentic AI is On Demand</p><a href="https://datahub.com/resources/context/?utm_source=event&utm_medium=&utm_campaign=16839686-FY25-Q4-EVENT-CONTEXT-MAIS&utm_term=docs" target="_blank" class="button"><div>Watch Now<span> →</span></div></a></div></div></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://datahub.com" target="_blank" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/img/datahub-logo-color-light-horizontal.svg" alt="DataHub Logo" class="themedImage_ToTc themedImage--light_HNdA"><img src="/img/datahub-logo-color-dark-horizontal.svg" alt="DataHub Logo" class="themedImage_ToTc themedImage--dark_i4oU"></div></a><div class="navbar__item dropdown dropdown--hoverable"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link versionNavItem_cbn8">Next</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/datahub-web-react">Next</a></li><li><a class="dropdown__link" href="/docs/1.1.0/datahub-web-react">1.1.0</a></li><li><hr class="dropdown-separator" style="margin: 0.4rem;"></li><li><div class="dropdown__link"><b>Archived versions</b></div></li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-t9sv4w3gr-acryldata.vercel.app/docs/features">1.0.0
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-t9sv4w3gr-acryldata.vercel.app/docs/0.15.0/features">0.15.0
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-8jkm4uler-acryldata.vercel.app/docs/0.14.1/features">0.14.1
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-eue2qafvn-acryldata.vercel.app/docs/features">0.14.0
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-psat3nzgi-acryldata.vercel.app/docs/features">0.13.1
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-lzxh86531-acryldata.vercel.app/docs/features">0.13.0
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-2uuxmgza2-acryldata.vercel.app/docs/features">0.12.1
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-irpoe2osc-acryldata.vercel.app/docs/features">0.11.0
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li><li>
|
|||
|
|
<a class="dropdown__link" href="https://docs-website-1gv2yzn9d-acryldata.vercel.app/docs/features">0.10.5
|
|||
|
|
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
|
|||
|
|
</a>
|
|||
|
|
</li></ul></div></div><div class="navbar__items navbar__items--right"><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Docs</a><a class="navbar__item navbar__link" href="/integrations">Integrations</a><a href="https://datahub.com/slack?utm_source=docs&utm_medium=header&utm_campaign=docs_header" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">
|
|||
|
|
<style>
|
|||
|
|
.slack-logo:hover {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<img class="slack-logo" src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg" , alt="slack" , height="20px" style="margin: 10px 0 0 0;">
|
|||
|
|
</a><a href="https://github.com/datahub-project/datahub" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">
|
|||
|
|
<style>
|
|||
|
|
.github-logo:hover {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<img class="github-logo" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" , alt="slack" , height="20px" style="margin: 10px 0 0 0;">
|
|||
|
|
</a><div class="searchBox_ZlJk"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menuHtmlItem_M9Kj menu__list-item"><div>Getting Started</div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/docs/features">What Is DataHub?</a><button aria-label="Toggle the collapsible sidebar category 'What Is DataHub?'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/docs/category/features">Features</a><button aria-label="Toggle the collapsible sidebar category 'Features'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menuHtmlItem_M9Kj menu__list-item"><div>DataHub Cloud</div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/managed-datahub/managed-datahub-overview">DataHub Cloud vs. DataHub OSS</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/managed-datahub/welcome-acryl">Getting Started with DataHub Cloud</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/managed-datahub/upgrade_core_to_cloud">Upgrading from DataHub Core to Cloud</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/docs/authentication/guides/sso/initialize-oidc">Configure Single Sign-On</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/docs/managed-datahub/remote-executor/about">Remote Executor</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/docs/managed-datahub/datahub-api/entity-events-api">DataHub API</a></div></li><li class
|
|||
|
|
from organizations operating DataHub. Two themes have emerged to serve as guideposts:</p><ol><li><strong>Configurability</strong>: The client experience should be configurable, such that deploying organizations can tailor certain
|
|||
|
|
aspects to their needs. This includes theme / styling configurability, showing and hiding specific functionality,
|
|||
|
|
customizing copy & logos, etc.</li><li><strong>Extensibility</strong>: Extending the <em>functionality</em> of DataHub should be as simple as possible. Making changes like
|
|||
|
|
extending an existing entity & adding a new entity should require minimal effort and should be well covered in detailed
|
|||
|
|
documentation.</li></ol><h2 class="anchor anchorWithStickyNavbar_LWe7" id="starting-the-application">Starting the Application<a href="#starting-the-application" class="hash-link" aria-label="Direct link to Starting the Application" title="Direct link to Starting the Application"></a></h2><h3 class="anchor anchorWithStickyNavbar_LWe7" id="quick-start">Quick Start<a href="#quick-start" class="hash-link" aria-label="Direct link to Quick Start" title="Direct link to Quick Start"></a></h3><p>Follow the instructions <a href="/docs/developers#building-the-project">here</a> to build and deploy your project locally. The initial build might take a while. You will be able to navigate to the application at <code>http://localhost:9002</code>.</p><p>If you want to make changes to the UI see them live without having to rebuild the <code>datahub-frontend-react</code> docker image, you
|
|||
|
|
can run the following in this directory:</p><p><code>yarn install && yarn run start</code></p><p>which will start a forwarding server at <code>localhost:3000</code>. Note that to fetch real data, <code>datahub-frontend</code> server will also
|
|||
|
|
need to be deployed, still at <code>http://localhost:9002</code>, to service GraphQL API requests.</p><p>Optionally you could also start the app with the mock server without running the docker containers by executing <code>yarn start:mock</code>. See <a href="https://github.com/datahub-project/datahub/blob/master/datahub-web-react/src/graphql-mock/fixtures/searchResult/userSearchResult.ts#L6" target="_blank" rel="noopener noreferrer">here</a> for available login users.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="testing-your-customizations">Testing your customizations<a href="#testing-your-customizations" class="hash-link" aria-label="Direct link to Testing your customizations" title="Direct link to Testing your customizations"></a></h3><p>There is two options to test your customizations:</p><ul><li><strong>Option 1</strong>: Initialize the docker containers with the <code>quickstart.sh</code> script (or if any custom docker-compose file) and then run <code>yarn start</code> in this directory. This will start a forwarding server at <code>localhost:3000</code> that will use the <code>datahub-frontend</code> server at <code>http://localhost:9002</code> to fetch real data.</li><li><strong>Option 2</strong>: Change the environment variable <code>REACT_APP_PROXY_TARGET</code> in the <code>.env</code> file to point to your <code>datahub-frontend</code> server (ex: https://my_datahub_host.com) and then run <code>yarn start</code> in this directory. This will start a forwarding server at <code>localhost:3000</code> that will use the <code>datahub-frontend</code> server at some domain to fetch real data.</li></ul><p>The option 2 is useful if you want to test your React customizations without having to run the hole DataHub stack locally. However, if you changed other components of the DataHub stack, you will need to run the hole stack locally (building the docker images) and use the option 1.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="functional-testing">Functional testing<a href="#functional-testing" class="hash-link" aria-label="Direct link to Functional testing" title="Direct link to Functional testing"></a></h3><p>In order to start a server and run frontend unit tests using react-testing-framework, run:</p><p><code>yarn test :e2e</code></p><p>There are also more automated tests using Cypress in the <code>smoke-test</code> folder of the repository root.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting"></a></h4><p><code>Error: error:0308010C:digital envelope routines::unsupported</code>: This error message shows up when using Node 17, due to an OpenSSL update related to md5.<br>
|
|||
|
|
<!-- -->The best workaround is to revert to the Active LTS version of Node, 16.13.0 with the command <code>nvm install 16.13.0</code> and if necessary reinstall yarn <code>npm install --global yarn</code>.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="theming">Theming<a href="#theming" class="hash-link" aria-label="Direct link to Theming" title="Direct link to Theming"></a></h3><h4 class="anchor anchorWithStickyNavbar_LWe7" id="customizing-your-app-without-rebuilding-assets">Customizing your App without rebuilding assets<a href="#customizing-your-app-without-rebuilding-assets" class="hash-link" aria-label="Direct link to Customizing your App without rebuilding assets" title="Direct link to Customizing your App without rebuilding assets"></a></h4><p>To see the results of any change to a theme, you will need to rebuild your datahub-frontend-react container. While this may work for some users, if you don't want to rebuild your container
|
|||
|
|
you can change two things without rebuilding.</p><ol><li>You customize the logo on the homepage & the search bar header by setting the <code>REACT_APP_LOGO_URL</code> env variable when deploying GMS.</li><li>You can customize the favicon (the icon on your browser tab) by setting the <code>REACT_APP_FAVICON_URL</code> env var when deploying GMS.</li></ol><h4 class="anchor anchorWithStickyNavbar_LWe7" id="selecting-a-theme">Selecting a theme<a href="#selecting-a-theme" class="hash-link" aria-label="Direct link to Selecting a theme" title="Direct link to Selecting a theme"></a></h4><p>Theme configurations are defined in <code>./src/conf/theme/themes.ts</code>. By default, the theme is chosen based on the <code>REACT_APP_CUSTOM_THEME_ID</code> env variable in GMS. If no theme is specified, the default themes <code>themeV2</code> or <code>themeV1</code> are used based on whether the V2 UI is enabled, which is controlled by environment variables <code>THEME_V2_ENABLED</code>, <code>THEME_V2_DEFAULT</code>, and <code>THEME_V2_TOGGLEABLE</code> in GMS. See <code>metadata-service/configuration/src/main/resources/application.yaml</code> for more details.</p><p>For quick local development, you can set env variable <code>REACT_APP_THEME</code> in <code>.env</code> to any of the themes defined in <code>themes.ts</code>.</p><p>We are transitioning away from Ant theming, but still depend on it for some styling. The Ant theme is stored in json files, in <code>./src/conf/theme</code>. To select the Ant theme, choose a json file and set env variable <code>ANT_THEME_CONFIG</code> in <code>.env</code> to the theme's filename, including <code>.json</code>, then re-run <code>yarn start</code> from <code>datahub/datahub-web-react</code>.</p><h4 class="anchor anchorWithStickyNavbar_LWe7" id="editing-a-theme">Editing a theme<a href="#editing-a-theme" class="hash-link" aria-label="Direct link to Editing a theme" title="Direct link to Editing a theme"></a></h4><p>To edit an existing theme, the recommendation is to clone one of the existing themes into a new file with the name <code><your_themes_name>.ts</code>, then update <code>themes.ts</code> by importing your theme and adding it to the <code>themes</code> object. You can also create a json theme by creating a new file in <code>./src/conf/theme</code> with the name <code><your_themes_name>.config.json</code>. The theme interface is defined in <code>./src/conf/theme/types.ts</code> and has four sections:</p><p><code>colors</code> configures semantic color tokens.
|
|||
|
|
These are not yet widely used but will be the primary way to configure colors in the app going forward.</p><p><code>styles</code> configures overrides for the app's deprecated theming variables and for Ant components.</p><p><code>assets</code> configures the logo url.</p><p><code>content</code> specifies customizable text fields.</p><p>While developing on your theme, all changes to assets and content are seen immediately in your local app. However, changes to styles require
|
|||
|
|
you to terminate and re-run <code>yarn start</code> to see updated styles.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="design-details">Design Details<a href="#design-details" class="hash-link" aria-label="Direct link to Design Details" title="Direct link to Design Details"></a></h2><h3 class="anchor anchorWithStickyNavbar_LWe7" id="package-organization">Package Organization<a href="#package-organization" class="hash-link" aria-label="Direct link to Package Organization" title="Direct link to Package Organization"></a></h3><p>The <code>src</code> dir of the app is broken down into the following modules</p><p><strong>conf</strong> - Stores global configuration flags that can be referenced across the app. For example, the number of
|
|||
|
|
search results shown per page, or the placeholder text in the search bar box. It serves as a location where levels
|
|||
|
|
for functional configurability should reside.</p><p><strong>app</strong> - Contains all important components of the app. It has a few sub-modules:</p><ul><li><p><code>auth</code>: Components used to render the user authentication experience.</p></li><li><p><code>browse</code>: Shared components used to render the 'browse-by-path' experience. The experience is akin to navigating a filesystem hierarchy.</p></li><li><p><code>preview</code>: Shared components used to render Entity 'preview' views. These can appear in search results, browse results,
|
|||
|
|
and within entity profile pages.</p></li><li><p><code>search</code>: Shared components used to render the full-text search experience.</p></li><li><p><code>shared</code>: Misc. shared components</p></li><li><p><code>entity</code>: Contains Entity definitions, where entity-specific functionality resides.
|
|||
|
|
Configuration is provided by implementing the 'Entity' interface. (See DatasetEntity.tsx for example)
|
|||
|
|
There are 2 visual components each entity should supply:</p><ul><li><p><code>profiles</code>: display relevant details about an individual entity. This serves as the entity's 'profile'.</p></li><li><p><code>previews</code>: provide a 'preview', or a smaller details card, containing the most important information about an entity instance.</p><p> When rendering a preview, the entity's data and the type of preview (SEARCH, BROWSE, PREVIEW) are provided. This
|
|||
|
|
allows you to optionally customize the way an entities preview is rendered in different views.</p></li><li><p><code>entity registry</code>: There's another very important piece of code living within this module: the <strong>EntityRegistry</strong>. This is a layer
|
|||
|
|
of abstraction over the intimate details of rendering a particular entity. It is used
|
|||
|
|
to render a view associated with a particular entity type (user, dataset, etc.).</p></li></ul></li></ul><p align="center"><img loading="lazy" width="70%" src="https://raw.githubusercontent.com/datahub-project/static-assets/main/imgs/entity-registry.png" class="img_ev3q"></p><p><strong>graphql</strong> - The React App talks to the <code>dathub-frontend</code> server using GraphQL. This module is where the <em>queries</em> issued
|
|||
|
|
against the server are defined. Once defined, running <code>yarn run generate</code> will code-gen TypeScript objects to make invoking
|
|||
|
|
these queries extremely easy. An example can be found at the top of <code>SearchPage.tsx.</code></p><p><strong>images</strong> - Images to be displayed within the app. This is where one would place a custom logo image.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="adding-an-entity">Adding an Entity<a href="#adding-an-entity" class="hash-link" aria-label="Direct link to Adding an Entity" title="Direct link to Adding an Entity"></a></h2><p>The following outlines a series of steps required to introduce a new entity into the React app:</p><ol><li><p>Declare the GraphQL Queries required to display the new entity</p><ul><li>If search functionality should be supported, extend the "search" query within <code>search.graphql</code> to fetch the new
|
|||
|
|
entity data.</li><li>If browse functionality should be supported, extend the "browse" query within <code>browse.graphql</code> to fetch the new
|
|||
|
|
entity data.</li><li>If display a 'profile' should be supported (most often), introduce a new <code><entity-name>.graphql</code> file that contains a
|
|||
|
|
<code>get</code> query to fetch the entity by primary key (urn).</li></ul><p>Note that your new entity <em>must</em> implement the <code>Entity</code> GraphQL type interface, and thus must have a corresponding
|
|||
|
|
<code>EntityType</code>.</p></li><li><p>Implement the <code>Entity</code> interface</p><ul><li>Create a new folder under <code>src/components/entity</code> corresponding to your entity</li><li>Create a class that implements the <code>Entity</code> interface (example: <code>DatasetEntity.tsx</code>)</li><li>Provide an implementation each method defined on the interface.<ul><li>This class specifies whether your new entity should be searchable & browsable, defines the names used to
|
|||
|
|
identify your entity when instances are rendered in collection / when entity appears
|
|||
|
|
in the URL path, and provides the ability to render your entity given data returned by the GQL API.</li></ul></li></ul></li><li><p>Register the new entity in the <code>EntityRegistry</code></p><ul><li>Update <code>App.tsx</code> to register an instance of your new entity. Now your entity will be accessible via the registry
|
|||
|
|
and appear in the UI. To manually retrieve the info about your entity or others, simply use an instance
|
|||
|
|
of the <code>EntityRegistry</code>, which is provided via <code>ReactContext</code> to <em>all</em> components in the hierarchy.
|
|||
|
|
For example<div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">entityRegistry.getCollectionName(EntityType.YOUR_NEW_ENTITY)</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li></ul></li></ol><p>That's it! For any questions, do not hesitate to reach out on the DataHub Slack community in #datahub-react.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="slackUtm_uoBr"><div class="slackUtm_uoBr"><hr>Need more help? Join the conversation in <a href="https://datahub.com/slack?utm_source=docs&utm_medium=footer&utm_campaign=docs_footer&utm_content=datahub-web-react/README">Slack!</a></div></div><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/datahub-project/datahub/blob/master/datahub-web-react/README.md" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_VsjB"></div></div></footer><div class="feedbackWrapper_mUHF"><div class="feedbackWidget_PX4d"><div class="feedbackButtons_wn3V"><strong>Is this page helpful?</strong><div><button class="feedbackButton_UgQs"><span role="img" aria-label="like" class="anticon anticon-like"><svg viewBox="64 64 896 896" focusable="false" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></span></button><button class="feedbackButton_UgQs"><span role="img" aria-label="dislike" class="anticon anticon-dislike"><svg viewBox="64 64 896 896" focusable="false" data-icon="dislike" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 00-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-
|
|||
|
|
<script src="/assets/js/runtime~main.76cdbaa9.js"></script>
|
|||
|
|
<script src="/assets/js/main.b7ce4b14.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|