@truedat/dd 8.10.2 → 8.10.3

package/src/components/LineageForm.js

@@ -1,17 +1,11 @@
 import _ from "lodash/fp";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
-import {
-  Accordion,
-  Form,
-  Icon,
-  Segment,
-  Header,
-  Button,
-} from "semantic-ui-react";
+import { Accordion, Form, Icon, Header, Button } from "semantic-ui-react";
 import { DomainSelector } from "@truedat/core/components";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import {
   clearNodes,
   selectGroup,
@@ -26,53 +20,95 @@ import {
   lineageLevels,
 } from "../selectors";
 import LineageDownloadButton from "./LineageDownloadButton";
+import { LineageResourceToggle } from "./LineageResourceToggle";
+import LineageDomainSelectorSkeleton from "./LineageDomainSelectorSkeleton";
+import {
+  LINEAGE_DOMAIN_CACHE_KEY,
+  LINEAGE_DOMAIN_CACHE_TTL,
+  checkDomainsLineage,
+  readDomainAvailabilityCache,
+  writeDomainAvailabilityCache,
+} from "./lineageDomainCache";
+
+const singleOptionValue = (options = []) =>
+  options.length === 1 ? options[0]?.value : undefined;
 
 export const LineageForm = ({
+  autoCollapse = true,
+  collapsible = true,
   createGraph,
   clearNodes,
+  domainAvailabilityChecker = checkDomainsLineage,
   fetchNodes,
   graph,
   graphLoading,
-  groupOptions,
+  groupOptions = [],
   levelsSelection,
   lineageLevels,
   loading,
-  resourceOptions,
+  onGraphSubmit,
+  resourceOptions = [],
   selectGroup,
   selectResources,
-  selectedGroups,
-  selectedResources,
+  selectedGroups = [],
+  selectedResources = [],
+  showDownloadButton = true,
 }) => {
   const [domainId, setDomainId] = useState(null);
   const [open, setOpen] = useState(true);
   const [selectLevels, setSelectLevels] = useState(levelsSelection);
+  const [unavailableDomainIds, setUnavailableDomainIds] = useState([]);
   const [levels, setLevels] = useState(lineageLevels);
+  const availabilityRequestId = useRef(0);
+  const resourceValues = _.map("value")(resourceOptions);
+  const allResourcesSelected =
+    !_.isEmpty(resourceValues) &&
+    _.isEmpty(_.difference(resourceValues, selectedResources || []));
   const handleSubmit = (type) => () => {
-    _.isNil(levels)
-      ? createGraph({
+    const graphParams = _.isNil(levels)
+      ? {
           ids: selectedResources,
           type,
           isRedirected: true,
-        })
-      : createGraph({
+        }
+      : {
           ids: selectedResources,
           type,
           levels,
           isRedirected: true,
-        });
+        };
+
+    createGraph(graphParams);
+    setOpen(false);
+    onGraphSubmit && onGraphSubmit();
   };
   const disabled = _.isEmpty(selectedResources);
   useEffect(() => {
-    setOpen(!graphLoading && _.isEmpty(graph));
-  }, [graph, graphLoading]);
+    if (autoCollapse) setOpen(!graphLoading && _.isEmpty(graph));
+  }, [autoCollapse, graph, graphLoading]);
   useEffect(() => {
     selectLevels === "all" && setLevels();
   }, [selectLevels]);
   useEffect(() => {
-    domainId && _.isEmpty(groupOptions) && fetchNodes({ domain_id: domainId });
-  }, [domainId, fetchNodes, groupOptions]);
+    domainId && fetchNodes({ domain_id: domainId });
+  }, [domainId, fetchNodes]);
+  useEffect(() => {
+    const nextGroupLevel = groupOptions.findIndex((options, level) => {
+      const selectedGroup = _.nth(level, selectedGroups);
+      const optionValues = _.map("value")(options);
+
+      return !_.includes(selectedGroup)(optionValues);
+    });
+    const value = singleOptionValue(groupOptions[nextGroupLevel]);
+
+    if (value !== undefined) {
+      selectGroup({ id: value, domain_id: domainId });
+    }
+  }, [domainId, groupOptions, selectGroup, selectedGroups]);
+
   useEffect(() => {
     return () => {
+      availabilityRequestId.current += 1;
       clearNodes();
     };
   }, [clearNodes]);
@@ -94,7 +130,6 @@ export const LineageForm = ({
       clearNodes();
     } else {
       setDomainId(value);
-      fetchNodes({ domain_id: value });
     }
   };
 
@@ -104,56 +139,99 @@ export const LineageForm = ({
     }
   };
 
-  const handleDomainsLoaded = ({ domains }) => {
-    if (domains?.length == 1) {
-      setDomainId(domains[0].id);
-    }
+  const handleDomainsLoaded = useCallback(
+    async ({ domains = [] }) => {
+      const requestId = availabilityRequestId.current + 1;
+
+      availabilityRequestId.current = requestId;
+
+      const cachedChecks = readDomainAvailabilityCache(domains);
+      const checks = cachedChecks || (await domainAvailabilityChecker(domains));
+      if (availabilityRequestId.current !== requestId) return;
+
+      if (!cachedChecks) writeDomainAvailabilityCache(domains, checks);
+
+      const availableDomainIds = checks
+        .filter(([, available]) => available)
+        .map(([id]) => id);
+      const unavailableDomainIds = checks
+        .filter(([, available]) => !available)
+        .map(([id]) => id);
+      const availableDomains = domains.filter(({ id }) =>
+        availableDomainIds.includes(`${id}`),
+      );
+
+      setUnavailableDomainIds(unavailableDomainIds);
+
+      if (availableDomains.length === 1) {
+        setDomainId(availableDomains[0].id);
+      }
+    },
+    [domainAvailabilityChecker],
+  );
+
+  const isLineageDomainDisabled = ({ id }) =>
+    unavailableDomainIds.includes(`${id}`);
+
+  const toggleAllResources = (e) => {
+    e && e.preventDefault();
+    selectResources(allResourcesSelected ? [] : resourceValues);
   };
 
-  return (
-    <Segment>
-      <Accordion>
-        <Accordion.Title
-          active={open}
-          onClick={() => setOpen(!open)}
-          className="noselect"
-        >
-          <Header as="h4">
-            <Icon name="dropdown" />
-            <FormattedMessage id="lineage.form.header" />
-          </Header>
-        </Accordion.Title>
-        <Accordion.Content active={open}>
-          <Form size="small" loading={loading}>
-            <DomainSelector
-              action="viewLineage"
-              labels
-              onChange={handleDomainChange}
-              onLoad={handleDomainsLoaded}
-              value={domainId}
+  const clearSelection = () => {
+    setDomainId(null);
+    setSelectLevels(levelsSelection);
+    setLevels(lineageLevels);
+    selectResources([]);
+    clearNodes();
+  };
+
+  const form = (
+    <Form loading={loading} size="small" className="lineage-toolbar__form">
+      <div className="lineage-toolbar__fields">
+        <div className="lineage-selection-column">
+          <DomainSelector
+            action="viewLineage"
+            cacheKey={LINEAGE_DOMAIN_CACHE_KEY}
+            cacheTtl={LINEAGE_DOMAIN_CACHE_TTL}
+            className="lineage-domain-selector"
+            closeOnSelect
+            labels
+            loadingComponent={<LineageDomainSelectorSkeleton />}
+            onChange={handleDomainChange}
+            onLoad={handleDomainsLoaded}
+            optionDisabled={isLineageDomainDisabled}
+            query={DOMAINS_QUERY}
+            value={domainId}
+          />
+        </div>
+        {_.map.convert({ cap: false })((options, level) => (
+          <div className="lineage-selection-column" key={level}>
+            <Form.Dropdown
+              className="lineage-column-dropdown"
+              placeholder={formatMessage({
+                id:
+                  level == 0
+                    ? "lineage.group.placeholder"
+                    : "lineage.subgroup.placeholder",
+              })}
+              fluid
+              search
+              selection
+              options={options}
+              loading={loading}
+              value={_.nth(level, selectedGroups) || null}
+              onChange={(_e, { value: id }) =>
+                selectGroup({ id, domain_id: domainId })
+              }
             />
-            {_.map.convert({ cap: false })((options, level) => (
-              <Form.Dropdown
-                key={level}
-                placeholder={formatMessage({
-                  id:
-                    level == 0
-                      ? "lineage.group.placeholder"
-                      : "lineage.subgroup.placeholder",
-                })}
-                fluid
-                search
-                selection
-                options={options}
-                loading={loading}
-                value={_.nth(level, selectedGroups) || null}
-                onChange={(_e, { value: id }) =>
-                  selectGroup({ id, domain_id: domainId })
-                }
-              />
-            ))(groupOptions)}
-            {_.isEmpty(resourceOptions) ? null : (
+          </div>
+        ))(groupOptions)}
+        {_.isEmpty(resourceOptions) ? null : (
+          <div className="lineage-selection-column lineage-selection-column--resource">
+            <div className="lineage-resource-field">
               <Form.Dropdown
+                className="lineage-column-dropdown lineage-resource-selector"
                 placeholder={formatMessage({
                   id: "lineage.resources.placeholder",
                 })}
@@ -165,90 +243,131 @@ export const LineageForm = ({
                 value={selectedResources}
                 onChange={(_e, { value }) => selectResources(value)}
               />
-            )}
-            <Header as="h5">
-              <FormattedMessage id="lineage.form.levels.header" />
-            </Header>
-            <Form.Group>
-              <Form.Field>
-                <Form.Radio
-                  disabled={disabled}
-                  name="allLevels"
-                  label={formatMessage({
-                    id: "lineage.form.levels.all.label",
-                  })}
-                  value="all"
-                  checked={selectLevels === "all"}
-                  onChange={(e, { value }) => setSelectLevels(value)}
-                />
-              </Form.Field>
-              <Form.Field>
-                <Form.Radio
-                  disabled={disabled}
-                  name="selectLevels"
-                  checked={selectLevels === "select"}
-                  value="select"
-                  onChange={(e, { value }) => setSelectLevels(value)}
-                  label={formatMessage({
-                    id: "lineage.form.levels.select.label",
-                  })}
-                />
-              </Form.Field>
-            </Form.Group>
-            <Form.Field disabled={selectLevels === "all" || disabled}>
-              <Form.Input
-                type="number"
-                onKeyDown={handleKeyDown}
-                control="input"
-                placeholder={formatMessage({
-                  id: "lineage.form.levels.select.input",
+              <LineageResourceToggle
+                allResourcesSelected={allResourcesSelected}
+                disabled={_.isEmpty(resourceValues)}
+                onClick={toggleAllResources}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="lineage-toolbar__controls">
+        <div className="lineage-toolbar__levels">
+          <Header as="h5">
+            <FormattedMessage id="lineage.form.levels.header" />
+          </Header>
+          <Form.Group inline className="lineage-toolbar__level-options">
+            <Form.Field className="lineage-toolbar__level-option">
+              <Form.Radio
+                disabled={disabled}
+                name="allLevels"
+                label={formatMessage({
+                  id: "lineage.form.levels.all.label",
                 })}
-                value={levels || ""}
-                autoComplete="off"
-                onChange={(e) => changeLevels(e)}
-                min="1"
+                value="all"
+                checked={selectLevels === "all"}
+                onChange={(e, { value }) => setSelectLevels(value)}
               />
             </Form.Field>
-            <Button
-              secondary
-              size="small"
-              floated="right"
-              disabled={_.isEmpty(selectedGroups)}
-              onClick={() => {
-                fetchNodes({});
-                setSelectLevels(levelsSelection);
-                setLevels(lineageLevels);
-              }}
-            >
-              <FormattedMessage id="navigation.lineage.clean" />
-            </Button>
-            <Button
-              primary
-              size="small"
-              disabled={disabled}
-              onClick={handleSubmit("impact")}
-            >
-              <FormattedMessage id="navigation.lineage.impact" />
-            </Button>
-            <Button
-              primary
-              size="small"
-              disabled={disabled}
-              onClick={handleSubmit("lineage")}
-            >
-              <FormattedMessage id="navigation.lineage.lineage" />
-            </Button>
-            <LineageDownloadButton />
-          </Form>
-        </Accordion.Content>
-      </Accordion>
-    </Segment>
+            <div className="field lineage-toolbar__level-depth">
+              <Form.Radio
+                disabled={disabled}
+                name="selectLevels"
+                checked={selectLevels === "select"}
+                value="select"
+                onChange={(e, { value }) => setSelectLevels(value)}
+                label={formatMessage({
+                  id: "lineage.form.levels.select.label",
+                })}
+              />
+              <Form.Field
+                className="lineage-toolbar__level-input"
+                disabled={selectLevels === "all" || disabled}
+              >
+                <Form.Input
+                  type="number"
+                  onKeyDown={handleKeyDown}
+                  control="input"
+                  value={levels || ""}
+                  autoComplete="off"
+                  onChange={(e) => changeLevels(e)}
+                  min="1"
+                />
+              </Form.Field>
+            </div>
+          </Form.Group>
+        </div>
+        <div className="lineage-toolbar__actions">
+          <Button
+            secondary
+            size="small"
+            disabled={_.isEmpty(selectedGroups)}
+            onClick={clearSelection}
+          >
+            <FormattedMessage id="navigation.lineage.clean" />
+          </Button>
+          <Button
+            primary
+            size="small"
+            disabled={disabled}
+            onClick={handleSubmit("impact")}
+          >
+            <FormattedMessage id="navigation.lineage.impact" />
+          </Button>
+          <Button
+            primary
+            size="small"
+            disabled={disabled}
+            onClick={handleSubmit("lineage")}
+          >
+            <FormattedMessage id="navigation.lineage.lineage" />
+          </Button>
+          {showDownloadButton ? <LineageDownloadButton /> : null}
+        </div>
+      </div>
+    </Form>
+  );
+
+  if (!collapsible) {
+    return (
+      <div className="lineage-toolbar lineage-toolbar--panel">
+        <div className="lineage-events-panel">
+          <div className="lineage-events-panel__header">
+            <span>
+              <FormattedMessage id="lineage.form.panel.header" />
+            </span>
+            <Icon name="sitemap" />
+          </div>
+          {form}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Accordion className="lineage-toolbar">
+      <Accordion.Title
+        active={open}
+        onClick={() => setOpen(!open)}
+        className="noselect lineage-toolbar__title"
+      >
+        <Header as="h4">
+          <Icon name="dropdown" />
+          <FormattedMessage id="lineage.form.header" />
+        </Header>
+      </Accordion.Title>
+      <Accordion.Content active={open}>{form}</Accordion.Content>
+    </Accordion>
   );
 };
 
 LineageForm.propTypes = {
+  autoCollapse: PropTypes.bool,
+  collapsible: PropTypes.bool,
   clearNodes: PropTypes.func.isRequired,
   createGraph: PropTypes.func.isRequired,
+  domainAvailabilityChecker: PropTypes.func,
   fetchNodes: PropTypes.func,
   graph: PropTypes.object,
   graphLoading: PropTypes.bool,
@@ -256,11 +375,13 @@ LineageForm.propTypes = {
   levelsSelection: PropTypes.string,
   lineageLevels: PropTypes.number,
   loading: PropTypes.bool,
+  onGraphSubmit: PropTypes.func,
   resourceOptions: PropTypes.array,
   selectGroup: PropTypes.func.isRequired,
   selectResources: PropTypes.func.isRequired,
   selectedGroups: PropTypes.array,
   selectedResources: PropTypes.array,
+  showDownloadButton: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({

package/src/components/LineageGraph.js

@@ -253,7 +253,6 @@ export const LineageGraph = ({
               onPointerDown={onPointerDown}
               onPointerUp={onPointerUp}
               onPointerCancel={onPointerUp}
-              style={{ border: "1px solid #d4d4d5", borderRadius: "5px" }}
             >
               <LineageDefs />
               <g className="svg-pan-zoom_viewport">

package/src/components/LineageHeader.js

@@ -0,0 +1,33 @@
+import { useIntl, FormattedMessage } from "react-intl";
+import { Icon } from "semantic-ui-react";
+
+const LineageHeader = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="lineage-view__header">
+      <div className="lineage-view__header-main">
+        <div className="lineage-view__header-icon" aria-hidden="true">
+          <Icon
+            name={formatMessage({
+              id: "lineage.header.icon",
+              defaultMessage: "sitemap",
+            })}
+          />
+        </div>
+        <div className="lineage-view__header-copy">
+          <div className="lineage-view__header-title-row">
+            <h2>
+              <FormattedMessage id="navigation.lineage" />
+            </h2>
+          </div>
+          <p>
+            <FormattedMessage id="lineage.header.description" />
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LineageHeader;

package/src/components/LineageResourceToggle.js

@@ -0,0 +1,56 @@
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Icon } from "semantic-ui-react";
+
+export const LineageResourceToggle = ({
+  allResourcesSelected,
+  disabled,
+  onClick,
+}) => {
+  const { formatMessage } = useIntl();
+  const state = allResourcesSelected ? "on" : "off";
+
+  const icon = formatMessage({
+    id: `lineage.resources.toggle.${state}.icon`,
+    defaultMessage: allResourcesSelected ? "minus" : "plus",
+  }).replace("none", "");
+
+  const label = formatMessage({
+    id: `lineage.resources.toggle.${state}.label`,
+    defaultMessage: allResourcesSelected ? "remove all" : "add all",
+  }).replace("none", "");
+
+  const hoverText = formatMessage({
+    id: `lineage.resources.toggle.${state}.hover`,
+    defaultMessage: allResourcesSelected ? "remove all" : "add all",
+  }).replace("none", "");
+
+  const ariaLabel = formatMessage({
+    id: allResourcesSelected
+      ? "lineage.resources.remove_all"
+      : "lineage.resources.add_all",
+  });
+
+  if (!icon && !label) return null;
+
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      className={`lineage-resource-toggle${state === "off" ? " lineage-resource-toggle--add" : ""}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span title={hoverText} className="lineage-resource-toggle-content">
+        {icon ? <Icon name={icon} /> : null}
+        {label ? <span>{label}</span> : null}
+      </span>
+    </button>
+  );
+};
+
+LineageResourceToggle.propTypes = {
+  allResourcesSelected: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+};

package/src/components/LineageRoutes.js

@@ -1,22 +1,9 @@
 import React from "react";
 import { Routes, Route } from "react-router";
 import { ProtectedRoute } from "@truedat/core/router";
-import { GRAPH, GRAPHS, LINEAGE_EVENTS, SAMPLE } from "@truedat/core/routes";
-import LineageEvents from "./LineageEvents";
-import LineageGraph from "./LineageGraph";
-import LineageSample from "./LineageSample";
-import LineageForm from "./LineageForm";
+import { GRAPHS } from "@truedat/core/routes";
 import GraphLoader from "./GraphLoader";
-import GraphRedirector from "./GraphRedirector";
-
-const Graphs = () => (
-  <>
-    <LineageForm />
-    <GraphRedirector />
-    {/* Load LineageGraph here so that its <Loader> is already available when clicking the LinageForm */}
-    <LineageGraph />
-  </>
-);
+import Graphs from "./Graphs";
 
 export const LineageRoutes = () => {
   return (
@@ -33,22 +20,6 @@ export const LineageRoutes = () => {
           }
         />
       </Route>
-      <Route
-        path={LINEAGE_EVENTS}
-        element={
-          <ProtectedRoute authorization="lineage">
-            <LineageEvents />
-          </ProtectedRoute>
-        }
-      />
-      <Route
-        path={SAMPLE}
-        element={
-          <ProtectedRoute authorization="lineage">
-            <LineageSample />
-          </ProtectedRoute>
-        }
-      />
       <Route path="*" element={null} />
     </Routes>
   );