Implement trope editing, fix detail panel header CSS

src/config/ToastData.ts

@@ -5,18 +5,19 @@ import { AppSettings } from "./Variables";
 export const ToastData: { [Key in keyof typeof enToast]: ToastType } = {
   lookingForRelationshipsOrProperties: { repeatable: false },
   diagramsClosedByDefault: { repeatable: false },
+  newFunctionEditTrope: { repeatable: false }
 };
 
 export type ToastType = {
   variant?:
-    | "primary"
-    | "secondary"
-    | "success"
-    | "danger"
-    | "warning"
-    | "info"
-    | "light"
-    | "dark";
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "light"
+  | "dark";
   dismissDelay?: number;
   action?: Function;
   repeatable?: boolean;

src/locale/cstoast.ts

@@ -17,4 +17,8 @@ export const csToast: {
     content:
       "V nové verzi OntoGrapheru byly uzavřeny všechny diagramy. Pro jejich znovuotevření použijte tlačítko Otevřít diagram, které se zobrazí při najetí myší na položku diagramu v domovské kartě.",
   },
+  newFunctionEditTrope: {
+    header: "Nyní dostupné: úprava vlastností",
+    content: "V nové verzi OntoGrapheru můžete upravovat vlastnosti (jejich definice a synonyma) pojmů v detailu daného pojmu. Stačí v seznamu vlastností pojmu kliknout na Info ikonku, která se zobrazí při najetí myší na danou vlastnost."
+  }
 };

src/locale/entoast.ts

@@ -11,4 +11,8 @@ export const enToast: {
     content:
       "In the new version of OntoGrapher, all diagrams have been closed for performance reasons. To open them again, use the Open diagram button when hovering over a diagram in the list on the Home tab.",
   },
+  newFunctionEditTrope: {
+    header: "Trope editing now available",
+    content: "In the new version of OntoGrapher, you can edit tropes (their definitions and synonyms) within the detail panel of the parent term. In the list of tropes, click the info icon that shows when you point the mouse at a trope."
+  }
 };

src/main/App.tsx

@@ -160,7 +160,7 @@ export default class App extends React.Component<
         s.mainViewMode = MainViewMode.MANAGER;
       });
       this.handleWorkspaceReady();
-      callToast("diagramsClosedByDefault");
+      callToast("newFunctionEditTrope");
     };
     if (Environment.debug && loadDebugData()) finishUp();
     else

src/panels/detail/DetailElement.tsx

@@ -12,6 +12,7 @@ import ConnectionOverlay from "./components/element/ConnectionOverlay";
 import { DetailElementDescriptionCard } from "./components/element/DetailElementDescriptionCard";
 import { DetailElementDiagramCard } from "./components/element/DetailElementDiagramCard";
 import { DetailElementLinksCard } from "./components/element/DetailElementLinksCard";
+import { TropeOverlay } from "./components/element/TropeOverlay";
 
 interface Props {
   projectLanguage: string;
@@ -27,12 +28,14 @@ export const DetailElement: React.FC<Props> = (props: Props) => {
     AppSettings.canvasLanguage
   );
 
-  const [overlay, setOverlay] = useState<boolean>(false);
+  const [linkOverlay, setLinkOverlay] = useState<boolean>(false);
   const [linkID, setLinkID] = useState<string>("");
+  const [tropeOverlay, setTropeOverlay] = useState<boolean>(false);
+  const [tropeID, setTropeID] = useState<string>("");
 
   return (
     <div className="detailElement">
-      <div className={classNames("accordions", { blur: overlay })}>
+      <div className={classNames("accordions", { blur: linkOverlay })}>
         <div className={"detailTitle"}>
           <div className="top">
             <span className="languageSelect">
@@ -59,6 +62,10 @@ export const DetailElement: React.FC<Props> = (props: Props) => {
             selectedLanguage={selectedLanguage}
             performTransaction={props.performTransaction}
             save={props.save}
+            infoFunction={(trope: string) => {
+              setTropeID(trope);
+              setTropeOverlay(true);
+            }}
           />
           <DetailElementLinksCard
             freeze={props.freeze}
@@ -67,7 +74,7 @@ export const DetailElement: React.FC<Props> = (props: Props) => {
             performTransaction={props.performTransaction}
             infoFunction={(link: string) => {
               setLinkID(link);
-              setOverlay(true);
+              setLinkOverlay(true);
             }}
           />
           <DetailElementDiagramCard id={props.id} />
@@ -77,8 +84,16 @@ export const DetailElement: React.FC<Props> = (props: Props) => {
         projectLanguage={selectedLanguage}
         id={linkID}
         performTransaction={props.performTransaction}
-        visible={overlay}
-        close={() => setOverlay(false)}
+        visible={linkOverlay}
+        close={() => setLinkOverlay(false)}
+        save={props.save}
+      />
+      <TropeOverlay
+        projectLanguage={selectedLanguage}
+        id={tropeID}
+        performTransaction={props.performTransaction}
+        visible={tropeOverlay}
+        close={() => setTropeOverlay(false)}
         save={props.save}
       />
     </div>

src/panels/detail/components/IntrinsicTropeControls.tsx

@@ -22,6 +22,7 @@ import { ListItemControls } from "./items/ListItemControls";
 import { setLabels } from "../../../function/FunctionGraph";
 import { graph } from "../../../graph/Graph";
 import { addToSelection } from "../../../function/FunctionDiagram";
+import InfoIcon from "@mui/icons-material/Info";
 
 interface Props {
   performTransaction: (...queries: string[]) => void;
@@ -30,6 +31,7 @@ interface Props {
   readOnly: boolean;
   projectLanguage: string;
   save: (id: string) => void;
+  infoFunction?: (trope: string) => void;
 }
 
 export const IntrinsicTropeControls: React.FC<Props> = (props: Props) => {
@@ -79,6 +81,18 @@ export const IntrinsicTropeControls: React.FC<Props> = (props: Props) => {
               hovered: i === hoveredTrope,
             })}
           >
+            {props.infoFunction && (
+              <Button
+                className="plainButton"
+                variant="light"
+                onClick={() => {
+                  props.infoFunction!(iri);
+                  // refresh();
+                }}
+              >
+                <InfoIcon />
+              </Button>
+            )}
             <OverlayTrigger
               placement="left"
               delay={1000}

src/panels/detail/components/LinkControls.tsx

@@ -59,7 +59,7 @@ export const LinkControls: React.FC<Props> = (props: Props) => {
   const prevPropsID = useRef<string>("");
 
   const save = () => {
-    if (props.id && props.id in WorkspaceLinks) {
+    if (props.id && props.id in WorkspaceLinks && !readOnly) {
       const iri = WorkspaceLinks[props.id].iri;
       const queries: string[] = [];
       const link = graph.getLinks().find((link) => link.id === props.id);

src/panels/detail/components/element/DetailElementDescriptionCard.tsx

@@ -40,6 +40,7 @@ type Props = {
   performTransaction: (...queries: string[]) => void;
   selectedLanguage: string;
   save: (id: string) => void;
+  infoFunction?: (trope: string) => void;
 };
 
 type State = {
@@ -227,91 +228,99 @@ export class DetailElementDescriptionCard extends React.Component<
   }
 
   render() {
-    // const tropes = getIntrinsicTropeTypeIDs(this.props.id);
     return (
       <Accordion.Item eventKey="0">
         <Accordion.Header>
           {Locale[AppSettings.interfaceLanguage].description}
         </Accordion.Header>
         <Accordion.Body>
-          <h5>{Locale[AppSettings.interfaceLanguage].detailPanelAltLabel}</h5>
-          <DetailPanelAltLabels
-            altLabels={this.state.inputAltLabels}
-            selectedLabel={this.state.selectedLabel}
-            language={this.props.selectedLanguage}
-            readOnly={this.state.readOnly}
-            addAltLabel={(alt: AlternativeLabel) =>
-              this.setState((prev) => ({
-                ...prev,
-                inputAltLabels: [...prev.inputAltLabels, alt],
-                changes: true,
-              }))
-            }
-            id={this.props.id}
-            selectDisplayLabel={(name, language) =>
-              this.setState((prev) => ({
-                changes: true,
-                selectedLabel: { ...prev.selectedLabel, [language]: name },
-              }))
-            }
-            deleteAltLabel={(alt: AlternativeLabel) => {
-              this.setState((prev) => ({
-                changes: true,
-                inputAltLabels: _.without(prev.inputAltLabels, alt),
-                selectedLabel:
-                  prev.selectedLabel[this.props.selectedLanguage] === alt.label
-                    ? {
-                        ...prev.selectedLabel,
-                        [this.props.selectedLanguage]:
-                          WorkspaceTerms[this.props.id].labels[
-                            this.props.selectedLanguage
-                          ],
-                      }
-                    : prev.selectedLabel,
-              }));
-            }}
-          />
-          <h5>{Locale[AppSettings.interfaceLanguage].detailPanelStereotype}</h5>
-          <Form.Select
-            size="sm"
-            as="select"
-            className="top-item detailInput"
-            value={this.state.inputTypeType}
-            disabled={this.state.readOnly}
-            onChange={(event) => this.updateType(event.target.value)}
-          >
-            <option key={""} value={""}>
-              {this.state.readOnly
-                ? Locale[AppSettings.interfaceLanguage].noStereotypeUML
-                : Locale[AppSettings.interfaceLanguage].setStereotypeUML}
-            </option>
-            {this.getStereotypes("type").map((stereotype) => (
-              <option key={stereotype} value={stereotype}>
-                {this.getName(stereotype, this.props.selectedLanguage)}
-              </option>
-            ))}
-          </Form.Select>
-          <Form.Select
-            size="sm"
-            className="bottom-item detailInput"
-            value={this.state.inputTypeData}
-            disabled={
-              this.state.readOnly ||
-              !this.isObjectType(WorkspaceTerms[this.props.id].types)
-            }
-            onChange={(event) => this.updateStereotype(event.target.value)}
-          >
-            <option key={""} value={""}>
-              {this.state.readOnly
-                ? Locale[AppSettings.interfaceLanguage].noStereotypeData
-                : Locale[AppSettings.interfaceLanguage].setStereotypeData}
-            </option>
-            {this.getStereotypes("data").map((stereotype) => (
-              <option key={stereotype} value={stereotype}>
-                {this.getName(stereotype, this.props.selectedLanguage)}
-              </option>
-            ))}
-          </Form.Select>
+          {this.props.infoFunction && (
+            <>
+              <h5>
+                {Locale[AppSettings.interfaceLanguage].detailPanelAltLabel}
+              </h5>
+              <DetailPanelAltLabels
+                altLabels={this.state.inputAltLabels}
+                selectedLabel={this.state.selectedLabel}
+                language={this.props.selectedLanguage}
+                readOnly={this.state.readOnly}
+                addAltLabel={(alt: AlternativeLabel) =>
+                  this.setState((prev) => ({
+                    ...prev,
+                    inputAltLabels: [...prev.inputAltLabels, alt],
+                    changes: true,
+                  }))
+                }
+                id={this.props.id}
+                selectDisplayLabel={(name, language) =>
+                  this.setState((prev) => ({
+                    changes: true,
+                    selectedLabel: { ...prev.selectedLabel, [language]: name },
+                  }))
+                }
+                deleteAltLabel={(alt: AlternativeLabel) => {
+                  this.setState((prev) => ({
+                    changes: true,
+                    inputAltLabels: _.without(prev.inputAltLabels, alt),
+                    selectedLabel:
+                      prev.selectedLabel[this.props.selectedLanguage] ===
+                      alt.label
+                        ? {
+                            ...prev.selectedLabel,
+                            [this.props.selectedLanguage]:
+                              WorkspaceTerms[this.props.id].labels[
+                                this.props.selectedLanguage
+                              ],
+                          }
+                        : prev.selectedLabel,
+                  }));
+                }}
+              />
+              <h5>
+                {Locale[AppSettings.interfaceLanguage].detailPanelStereotype}
+              </h5>
+              <Form.Select
+                size="sm"
+                as="select"
+                className="top-item detailInput"
+                value={this.state.inputTypeType}
+                disabled={this.state.readOnly}
+                onChange={(event) => this.updateType(event.target.value)}
+              >
+                <option key={""} value={""}>
+                  {this.state.readOnly
+                    ? Locale[AppSettings.interfaceLanguage].noStereotypeUML
+                    : Locale[AppSettings.interfaceLanguage].setStereotypeUML}
+                </option>
+                {this.getStereotypes("type").map((stereotype) => (
+                  <option key={stereotype} value={stereotype}>
+                    {this.getName(stereotype, this.props.selectedLanguage)}
+                  </option>
+                ))}
+              </Form.Select>
+              <Form.Select
+                size="sm"
+                className="bottom-item detailInput"
+                value={this.state.inputTypeData}
+                disabled={
+                  this.state.readOnly ||
+                  !this.isObjectType(WorkspaceTerms[this.props.id].types)
+                }
+                onChange={(event) => this.updateStereotype(event.target.value)}
+              >
+                <option key={""} value={""}>
+                  {this.state.readOnly
+                    ? Locale[AppSettings.interfaceLanguage].noStereotypeData
+                    : Locale[AppSettings.interfaceLanguage].setStereotypeData}
+                </option>
+                {this.getStereotypes("data").map((stereotype) => (
+                  <option key={stereotype} value={stereotype}>
+                    {this.getName(stereotype, this.props.selectedLanguage)}
+                  </option>
+                ))}
+              </Form.Select>
+            </>
+          )}
           <h5>{Locale[AppSettings.interfaceLanguage].detailPanelDefinition}</h5>
           <Form.Control
             as={"textarea"}
@@ -334,15 +343,19 @@ export class DetailElementDescriptionCard extends React.Component<
               if (!this.state.readOnly) this.setState({ changes: true });
             }}
           />
-          {AppSettings.representation === Representation.COMPACT && (
-            <IntrinsicTropeControls
-              performTransaction={this.props.performTransaction}
-              id={this.props.id}
-              readOnly={this.state.readOnly}
-              projectLanguage={this.props.selectedLanguage}
-              save={this.props.save}
-            />
-          )}
+          {AppSettings.representation === Representation.COMPACT &&
+            this.props.infoFunction && (
+              <IntrinsicTropeControls
+                performTransaction={this.props.performTransaction}
+                id={this.props.id}
+                readOnly={this.state.readOnly}
+                projectLanguage={this.props.selectedLanguage}
+                save={this.props.save}
+                infoFunction={(trope: string) =>
+                  this.props.infoFunction!(trope)
+                }
+              />
+            )}
         </Accordion.Body>
       </Accordion.Item>
     );