@truedat/bg 5.13.1 → 5.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "5.13.1",
+  "version": "5.13.3",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.13.1",
-    "@truedat/df": "5.13.1",
-    "@truedat/lm": "5.13.1",
+    "@truedat/core": "5.13.3",
+    "@truedat/df": "5.13.3",
+    "@truedat/lm": "5.13.3",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "59eb6f428c3489a2ae689381d2f239378284be8c"
+  "gitHead": "93c1576f82fedd1d9b607cd0c9053279763877bc"
 }

package/src/concepts/relations/components/ConceptRelations.js

@@ -2,16 +2,27 @@ import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Segment, Grid, Icon, Table } from "semantic-ui-react";
+import {
+  Button,
+  Dropdown,
+  Segment,
+  Grid,
+  Icon,
+  Popup,
+  Table,
+} from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { RelationGraph } from "@truedat/lm/components";
 import { linkTo } from "@truedat/core/routes";
 import {
-  selectMaxDepth,
-  selectLimitedGraph,
-} from "@truedat/lm/selectors/relationGraphTraversal";
+  anyTraversalTags,
+  findMaxDepth,
+  pruneGraph,
+  graphDistinctTags,
+  EMPTY,
+} from "@truedat/lm/services/relationGraphTraversal";
 import { RelationGraphDepth } from "@truedat/lm/components";
 import { getConceptToConceptRelations } from "../selectors/getConceptRelations";
 
@@ -41,34 +52,6 @@ export const ConceptRelations = ({
   relationsGraph,
   initialDepth,
 }) => {
-  const [depth, setDepth] = useState(initialDepth || Infinity);
-  const [maxDepth, setMaxDepth] = useState();
-  const [currentId, setCurrentId] = useState();
-  const [limitedRelationGraph, setLimitedRelationGraph] =
-    useState(relationsGraph);
-
-  useEffect(() => {
-    !_.isEmpty(concept) &&
-      setCurrentId(`business_concept:${concept.business_concept_id}`);
-  }, [concept]);
-
-  useEffect(() => {
-    if (!_.isEmpty(relationsGraph) && currentId) {
-      const useEffectMaxDepth = selectMaxDepth({ relationsGraph }, currentId);
-
-      setMaxDepth(useEffectMaxDepth);
-      if (depth === Infinity) {
-        setDepth(useEffectMaxDepth);
-      }
-    }
-  }, [relationsGraph, currentId]);
-
-  useEffect(() => {
-    setLimitedRelationGraph(
-      selectLimitedGraph({ relationsGraph }, currentId, depth)
-    );
-  }, [relationsGraph, currentId, depth]);
-
   const { formatMessage } = useIntl();
   const history = useHistory();
   const location = useLocation();
@@ -87,79 +70,177 @@ export const ConceptRelations = ({
     );
   };
 
+  const onTraversalTagsChange = (event, { value }) => {
+    setAllowedTags(value);
+  };
+
+  const [depth, setDepth] = useState(initialDepth || Infinity);
+  const [maxDepth, setMaxDepth] = useState(0);
+  const [currentId, setCurrentId] = useState();
+  const [tagOptions, setTagsOptions] = useState([]);
+  const [limitedRelationGraph, setLimitedRelationGraph] =
+    useState(relationsGraph);
+  const [traversalTags, setAllowedTags] = useState([]);
+
+  const nonDefaultOptions = (ids, depth, maxDepth) => {
+    return !_.isEmpty(ids) || depth !== maxDepth;
+  };
+
+  useEffect(() => {
+    !_.isEmpty(concept) &&
+      setCurrentId(`business_concept:${concept.business_concept_id}`);
+  }, [concept]);
+
+  useEffect(() => {
+    if (!_.isEmpty(relationsGraph) && currentId) {
+      const newMaxDepth = findMaxDepth(
+        relationsGraph,
+        currentId,
+        traversalTags
+      );
+
+      setMaxDepth(newMaxDepth);
+      setDepth(newMaxDepth);
+    }
+  }, [relationsGraph, currentId, traversalTags]);
+
+  useEffect(() => {
+    /* just a little optimization to avoid generating a graph if no limitations
+     * (tags, depth) are set
+     */
+    if (nonDefaultOptions(traversalTags, depth, maxDepth)) {
+      const limitedGraph = pruneGraph(
+        relationsGraph,
+        currentId,
+        depth,
+        traversalTags
+      );
+
+      setLimitedRelationGraph(limitedGraph);
+    } else setLimitedRelationGraph(relationsGraph);
+  }, [relationsGraph, currentId, depth, traversalTags, maxDepth]);
+
+  useEffect(() => {
+    const tagsToOptions = (tags) =>
+      _.map(
+        ({ id, value }) => ({
+          text: formatMessage({
+            id: `source.${value.type}`,
+            defaultMessage: value.type,
+          }),
+          value: id,
+        }),
+        [
+          {
+            id: EMPTY,
+            value: { target_type: "business_concept", type: "_empty" },
+          },
+          ...tags,
+        ]
+      );
+
+    // eslint-disable-next-line prettier/prettier
+    _.flow(
+      graphDistinctTags,
+      tagsToOptions,
+      setTagsOptions
+    )(relationsGraph);
+  }, [relationsGraph]);
+
   return (
     <Segment attached="bottom">
-      <Grid>
+      <div className="traversal-tags-container">
+        <div>
+          <b>
+            <label>
+              {formatMessage({
+                id: "relations.tags.label",
+              })}
+            </label>
+          </b>
+        </div>
+        <div>
+          <Dropdown
+            className="traversal-tags"
+            placeholder={formatMessage({
+              id: `relations.tags.placeholder`,
+            })}
+            multiple
+            search
+            selection
+            options={tagOptions}
+            onChange={onTraversalTagsChange}
+            clearable
+          />
+        </div>
+      </div>
+      <div className="implementation-actions">
+        {_.negate(_.isEmpty)(conceptRelations) ? (
+          <Button.Group>
+            <Button
+              active={graphRender}
+              icon
+              data-tooltip={formatMessage({
+                id: "relations.actions.maps.tooltip",
+              })}
+              onClick={() => setGraphRender(true)}
+            >
+              <Icon name="sitemap" />
+            </Button>
+            <Button
+              active={!graphRender}
+              icon
+              data-tooltip={formatMessage({
+                id: "relations.actions.list.tooltip",
+              })}
+              onClick={() => setGraphRender(false)}
+            >
+              <Icon name="list ul" />
+            </Button>
+          </Button.Group>
+        ) : null}
+        <ConceptRelationActions />
+      </div>
+
+      {conceptRelations ? (
+        <>
+          {graphRender && !_.isEmpty(currentId) ? (
+            <>
+              <RelationGraphDepth
+                onClick={(_e) => setDepth(maxDepth)}
+                onChange={(newDepth) => setDepth(parseInt(newDepth))}
+                depth={depth}
+                maxDepth={maxDepth}
+              />
+              <RelationGraph
+                navigate={navigate}
+                currentId={currentId}
+                relationsGraph={limitedRelationGraph}
+              />
+            </>
+          ) : (
+            <Table selectable>
+              <Table.Body>
+                {_.flow(
+                  _.filter(({ tags }) => anyTraversalTags(traversalTags, tags)),
+                  _.map((relation) => (
+                    <ConceptRelationRow
+                      key={relation.id}
+                      relationContext={relation.context}
+                      {...relation}
+                    />
+                  ))
+                )(conceptRelations)}
+              </Table.Body>
+            </Table>
+          )}
+        </>
+      ) : null}
+      {_.isEmpty(conceptRelations) ? (
         <Grid.Row>
-          <Grid.Column>
-            <div className="implementation-actions">
-              {_.negate(_.isEmpty)(conceptRelations) && (
-                <Button.Group>
-                  <Button
-                    active={graphRender}
-                    icon
-                    data-tooltip={formatMessage({
-                      id: "relations.actions.maps.tooltip",
-                    })}
-                    onClick={() => setGraphRender(true)}
-                  >
-                    <Icon name="sitemap" />
-                  </Button>
-                  <Button
-                    active={!graphRender}
-                    icon
-                    data-tooltip={formatMessage({
-                      id: "relations.actions.list.tooltip",
-                    })}
-                    onClick={() => setGraphRender(false)}
-                  >
-                    <Icon name="list ul" />
-                  </Button>
-                </Button.Group>
-              )}
-              <ConceptRelationActions />
-            </div>
-          </Grid.Column>
+          <FormattedMessage id="conceptRelations.empty" />
         </Grid.Row>
-        {conceptRelations && (
-          <Grid.Row>
-            <Grid.Column>
-              {graphRender && !_.isEmpty(currentId) ? (
-                <>
-                  <RelationGraphDepth
-                    onClick={(_e) => setDepth(maxDepth)}
-                    onChange={(newDepth) => setDepth(parseInt(newDepth))}
-                    depth={depth}
-                    maxDepth={maxDepth}
-                  />
-                  <RelationGraph
-                    navigate={navigate}
-                    currentId={currentId}
-                    relationsGraph={limitedRelationGraph}
-                  />
-                </>
-              ) : (
-                <Table selectable>
-                  <Table.Body>
-                    {conceptRelations.map((relation, index) => (
-                      <ConceptRelationRow
-                        key={`${relation.id}.${index}`}
-                        relationContext={relation.context}
-                        {...relation}
-                      />
-                    ))}
-                  </Table.Body>
-                </Table>
-              )}
-            </Grid.Column>
-          </Grid.Row>
-        )}
-        {_.isEmpty(conceptRelations) && (
-          <Grid.Row>
-            <FormattedMessage id="conceptRelations.empty" />
-          </Grid.Row>
-        )}
-      </Grid>
+      ) : null}
     </Segment>
   );
 };

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptRelations.spec.js.snap

@@ -4,33 +4,60 @@ exports[`<ConceptRelations /> matches the latest snapshot 1`] = `
 <Segment
   attached="bottom"
 >
-  <Grid>
-    <GridRow>
-      <GridColumn>
-        <div
-          className="implementation-actions"
-        >
-          <Connect(ConceptRelationActions) />
-        </div>
-      </GridColumn>
-    </GridRow>
-    <GridRow>
-      <GridColumn>
-        <Table
-          as="table"
-          selectable={true}
-        >
-          <TableBody
-            as="tbody"
-          />
-        </Table>
-      </GridColumn>
-    </GridRow>
-    <GridRow>
-      <MemoizedFormattedMessage
-        id="conceptRelations.empty"
+  <div
+    className="traversal-tags-container"
+  >
+    <div>
+      <b>
+        <label>
+          relations.tags.label
+        </label>
+      </b>
+    </div>
+    <div>
+      <Dropdown
+        additionLabel="Add "
+        additionPosition="top"
+        className="traversal-tags"
+        clearable={true}
+        closeOnBlur={true}
+        closeOnEscape={true}
+        deburr={false}
+        icon="dropdown"
+        minCharacters={1}
+        multiple={true}
+        noResultsMessage="No results found."
+        onChange={[Function]}
+        openOnFocus={true}
+        options={[]}
+        placeholder="relations.tags.placeholder"
+        renderLabel={[Function]}
+        search={true}
+        searchInput="text"
+        selectOnBlur={true}
+        selectOnNavigation={true}
+        selection={true}
+        wrapSelection={true}
       />
-    </GridRow>
-  </Grid>
+    </div>
+  </div>
+  <div
+    className="implementation-actions"
+  >
+    <Connect(ConceptRelationActions) />
+  </div>
+  <Table
+    as="table"
+    selectable={true}
+  >
+    <TableBody
+      as="tbody"
+    />
+  </Table>
+  <GridRow>
+    <MemoizedFormattedMessage
+      id="conceptRelations.empty"
+    />
+  </GridRow>
 </Segment>
 `;

package/src/messages/en.js

@@ -284,7 +284,10 @@ export default {
   "relations.actions.implementation.delete.confirmation.content":
     "Link between implementation and concept will be deleted. Are you sure?",
   "relations.actions.implementation.delete.confirmation.header": "Delete link",
+  "relations.tags.label": "Filter by relation types",
+  "relations.tags.placeholder": "Relation types",
   "ruleImplementations.props.business_concepts": "Concepts",
+  "source._empty": "Empty",
   "source.bc_caculo": "Calculated from",
   "source.bc_padre": "Children",
   "source.bc_parent": "Children",

package/src/messages/es.js

@@ -288,8 +288,11 @@ export default {
     "Se eliminará la vinculación entre la implementación y el concepto. ¿Estás seguro?",
   "relations.actions.implementation.delete.confirmation.header":
     "Borrar vínculación",
+  "relations.tags.label": "Filtrar por tipos de relación",
+  "relations.tags.placeholder": "Tipos de relación",
   "ruleImplementations.props.business_concepts": "Conceptos",
   "saveConceptFilters.error.name.unique": "Nombre duplicado",
+  "source._empty": "Vacío",
   "source.bc_caculo": "Cálculado en base a",
   "source.bc_padre": "Hijos",
   "source.bc_parent": "Hijos",

package/src/taxonomy/api.js

@@ -5,7 +5,7 @@ const API_DOMAIN_MEMBER = "/api/acl_entries/:id";
 const API_DOMAINS = "/api/domains";
 const API_DOMAIN_CONCEPT_CHILDREN =
   "/api/domains/:domain_id/business_concepts/:user_name/count";
-const API_RESOURCE_ACL_ENTRIES = "/api/:resource_type/:resource_id/acl_entries";
+const API_RESOURCE_ACL_ENTRIES = "/api/acl_entries/domains/:resource_id";
 
 export {
   API_ACL_ENTRY,

package/src/taxonomy/sagas/__tests__/addDomainMember.spec.js

@@ -8,7 +8,7 @@ describe("sagas: addDomainMemberSaga", () => {
   const acl_entry = { id: 1, name: "foo" };
   const payload = { acl_entry, resource_id };
   const meta = { resource_id };
-  const url = "/api/domains/123/acl_entries"; // Note resource_type is "domains"
+  const url = "/api/acl_entries/domains/123"; // Note resource_type is "domains"
 
   it("should put a success action when a response is returned", () => {
     const data = [];

package/src/taxonomy/sagas/addDomainMember.js

@@ -9,7 +9,7 @@ const toApiPath = compile(API_RESOURCE_ACL_ENTRIES);
 export function* addDomainMemberSaga({ payload }) {
   try {
     const { resource_id, acl_entry } = payload;
-    const url = toApiPath({ resource_id, resource_type: "domains" });
+    const url = toApiPath({ resource_id });
     const requestData = { acl_entry };
     const meta = { resource_id };
     yield put({ meta, ...addDomainMember.request() });