From b47d2750b3ff54138ce78f1241375780a30fc8cd Mon Sep 17 00:00:00 2001
From: bindeali <56399637+bindeali@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:30:18 +0200
Subject: [PATCH] =?UTF-8?q?Vlastnosti=20by=20m=C4=9Bly=20m=C3=ADt=20barvu?=
 =?UTF-8?q?=20pozad=C3=AD=20dle=20slovn=C3=ADku,=20ze=20kter=C3=A9ho=20jso?=
 =?UTF-8?q?u=20#537?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VocabularyBadge.tsx            |  6 +++-
 src/function/FunctionGraph.ts                 | 29 +++++++++----------
 .../components/IntrinsicTropeControls.tsx     | 16 ++++++++++
 .../components/element/ModalAddTrope.tsx      | 17 +++++++++++
 src/scss/style.scss                           |  4 +++
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/components/VocabularyBadge.tsx b/src/components/VocabularyBadge.tsx
index 98d57ff5..d5ddf9ac 100644
--- a/src/components/VocabularyBadge.tsx
+++ b/src/components/VocabularyBadge.tsx
@@ -5,11 +5,15 @@ type Props = {
   cancellable: boolean;
   onCancel?: Function;
   color: string;
+  small?: boolean;
 };
 
 export const VocabularyBadge: React.FC<Props> = (props: Props) => {
   return (
-    <span className="chip" style={{ backgroundColor: props.color }}>
+    <span
+      className={"chip" + (props.small ? " small" : "")}
+      style={{ backgroundColor: props.color }}
+    >
       {props.text}
       &nbsp;
       {props.cancellable && props.onCancel && (
diff --git a/src/function/FunctionGraph.ts b/src/function/FunctionGraph.ts
index 58357b50..019f9297 100644
--- a/src/function/FunctionGraph.ts
+++ b/src/function/FunctionGraph.ts
@@ -93,11 +93,11 @@ export function centerElementInView(id: string) {
     paper.translate(0, 0);
     paper.translate(
       -elem.position().x * scale +
-        paper.getComputedSize().width / 2 -
-        elem.getBBox().width,
+      paper.getComputedSize().width / 2 -
+      elem.getBBox().width,
       -elem.position().y * scale +
-        paper.getComputedSize().height / 2 -
-        elem.getBBox().height
+      paper.getComputedSize().height / 2 -
+      elem.getBBox().height
     );
     updateDiagramPosition(AppSettings.selectedDiagram);
   }
@@ -416,8 +416,7 @@ export function setRepresentation(
       ) {
         const cell = g.getCell(id);
         if (cell) {
-          WorkspaceElements[id].hidden[diag] = true;
-          cell.remove();
+          storeElement(cell);
           del = true;
         }
       }
@@ -538,9 +537,9 @@ export function setupLink(
   if (restoreConnectionPosition) {
     WorkspaceLinks[link].vertices[AppSettings.selectedDiagram].length > 0
       ? setLinkVertices(
-          lnk,
-          WorkspaceLinks[link].vertices[AppSettings.selectedDiagram]
-        )
+        lnk,
+        WorkspaceLinks[link].vertices[AppSettings.selectedDiagram]
+      )
       : findLinkSelfLoop(lnk);
     return undefined;
   } else {
@@ -578,10 +577,10 @@ export function restoreHiddenElem(
       (representation === Representation.FULL
         ? WorkspaceLinks[link].iri in Links
         : !(WorkspaceLinks[link].iri in Links) ||
-          (WorkspaceLinks[link].iri in Links &&
-            Links[WorkspaceLinks[link].iri].inScheme.startsWith(
-              AppSettings.ontographerContext
-            )))
+        (WorkspaceLinks[link].iri in Links &&
+          Links[WorkspaceLinks[link].iri].inScheme.startsWith(
+            AppSettings.ontographerContext
+          )))
     ) {
       const oldPos = setupLink(link, restoreSimpleConnectionPosition, g);
       if (oldPos)
@@ -620,9 +619,9 @@ export function restoreHiddenElem(
           if (
             WorkspaceElements[relID].position[AppSettings.selectedDiagram] &&
             WorkspaceElements[relID].position[AppSettings.selectedDiagram].x !==
-              0 &&
+            0 &&
             WorkspaceElements[relID].position[AppSettings.selectedDiagram].y !==
-              0 &&
+            0 &&
             restoreFullConnectionPosition
           ) {
             relationship.position(
diff --git a/src/panels/detail/components/IntrinsicTropeControls.tsx b/src/panels/detail/components/IntrinsicTropeControls.tsx
index 30e09129..2756e732 100644
--- a/src/panels/detail/components/IntrinsicTropeControls.tsx
+++ b/src/panels/detail/components/IntrinsicTropeControls.tsx
@@ -5,8 +5,10 @@ import { Button, Form, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { Locale } from "../../../config/Locale";
 import {
   AppSettings,
+  WorkspaceElements,
   WorkspaceLinks,
   WorkspaceTerms,
+  WorkspaceVocabularies,
 } from "../../../config/Variables";
 import {
   getListClassNamesObject,
@@ -15,6 +17,7 @@ import {
 import {
   getIntrinsicTropeTypeIDs,
   getLabelOrBlank,
+  getVocabularyLabel,
 } from "../../../function/FunctionGetVars";
 import { deleteLink } from "../../../function/FunctionLink";
 import { ModalAddTrope } from "./element/ModalAddTrope";
@@ -23,6 +26,7 @@ import { setLabels } from "../../../function/FunctionGraph";
 import { graph } from "../../../graph/Graph";
 import { addToSelection } from "../../../function/FunctionDiagram";
 import InfoIcon from "@mui/icons-material/Info";
+import { VocabularyBadge } from "../../../components/VocabularyBadge";
 
 interface Props {
   performTransaction: (...queries: string[]) => void;
@@ -75,6 +79,18 @@ export const IntrinsicTropeControls: React.FC<Props> = (props: Props) => {
         >
           <span>
             {getLabelOrBlank(WorkspaceTerms[iri].labels, props.projectLanguage)}
+            &nbsp;
+            {WorkspaceElements[iri].vocabulary && (
+              <VocabularyBadge
+                text={getVocabularyLabel(WorkspaceElements[iri].vocabulary!)}
+                cancellable={false}
+                color={
+                  WorkspaceVocabularies[WorkspaceElements[iri].vocabulary!]
+                    .color
+                }
+                small={true}
+              />
+            )}
           </span>
           <span
             className={classNames("controls", {
diff --git a/src/panels/detail/components/element/ModalAddTrope.tsx b/src/panels/detail/components/element/ModalAddTrope.tsx
index 774ff05c..780d92a6 100644
--- a/src/panels/detail/components/element/ModalAddTrope.tsx
+++ b/src/panels/detail/components/element/ModalAddTrope.tsx
@@ -16,6 +16,7 @@ import {
   WorkspaceElements,
   WorkspaceLinks,
   WorkspaceTerms,
+  WorkspaceVocabularies,
 } from "../../../../config/Variables";
 import { CellColors } from "../../../../config/visual/CellColors";
 import { createTerm } from "../../../../function/FunctionCreateElem";
@@ -34,11 +35,13 @@ import { filterEquivalent } from "../../../../function/FunctionEquivalents";
 import {
   getLabelOrBlank,
   getVocabularyFromScheme,
+  getVocabularyLabel,
   isTermReadOnly,
 } from "../../../../function/FunctionGetVars";
 import { saveNewLink } from "../../../../function/FunctionLink";
 import { graph } from "../../../../graph/Graph";
 import { updateProjectElementDiagram } from "../../../../queries/update/UpdateElementQueries";
+import { VocabularyBadge } from "../../../../components/VocabularyBadge";
 
 interface Props {
   modalTropes: boolean;
@@ -234,6 +237,20 @@ export const ModalAddTrope: React.FC<Props> = (props: Props) => {
                           WorkspaceTerms[t].labels,
                           props.selectedLanguage
                         )}
+                        &nbsp;
+                        {WorkspaceElements[t].vocabulary && (
+                          <VocabularyBadge
+                            text={getVocabularyLabel(
+                              WorkspaceElements[t].vocabulary!
+                            )}
+                            cancellable={false}
+                            color={
+                              WorkspaceVocabularies[
+                                WorkspaceElements[t].vocabulary!
+                              ].color
+                            }
+                          />
+                        )}
                       </ListGroup.Item>
                     ))}
                 </ListGroup>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 07acc28e..0671e1a8 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -24,6 +24,10 @@ body {
   margin-right: 5px;
   font-size: 1rem;
   font-weight: 500;
+
+  &.small {
+    font-size: 0.8rem;
+  }
 }
 
 .wrap {