fix: Loading diagrams with unloaded vocabularies no longer crashes

Author: bindeali

src/main/DiagramManager.tsx

@@ -1,11 +1,11 @@
+import * as _ from "lodash";
 import { useStoreState } from "pullstate";
 import React, { useEffect, useState } from "react";
 import { Container, Row } from "react-bootstrap";
 import { StoreSettings } from "../config/Store";
+import { Diagrams, WorkspaceVocabularies } from "../config/Variables";
 import { DiagramManagerDetails } from "./manager/details/DiagramManagerDetails";
 import { DiagramManagerList } from "./manager/list/DiagramManagerList";
-import * as _ from "lodash";
-import { Diagrams } from "../config/Variables";
 
 type Props = {
   projectLanguage: string;
@@ -29,7 +29,9 @@ export const DiagramManager: React.FC<Props> = (props: Props) => {
       setAvailableVocabs(
         _.compact(
           _.uniq(
-            Object.keys(Diagrams).flatMap((diag) => Diagrams[diag].vocabularies)
+            Object.keys(Diagrams)
+              .flatMap((diag) => Diagrams[diag].vocabularies)
+              .filter((voc) => voc in WorkspaceVocabularies)
           )
         )
       ),

src/main/manager/list/DiagramManagerListItem.tsx

@@ -48,14 +48,16 @@ export const DiagramManagerListItem: React.FC<Props> = (props: Props) => {
           <span className="name">{Diagrams[props.diagram].name}</span>
           &nbsp;
           <span className="vocabularies">
-            {Diagrams[props.diagram].vocabularies?.map((v) => (
-              <VocabularyBadge
-                key={v}
-                text={getVocabularyLabel(v)}
-                color={WorkspaceVocabularies[v].color}
-                cancellable={false}
-              />
-            ))}
+            {Diagrams[props.diagram].vocabularies
+              ?.filter((voc) => voc in WorkspaceVocabularies)
+              .map((v) => (
+                <VocabularyBadge
+                  key={v}
+                  text={getVocabularyLabel(v)}
+                  color={WorkspaceVocabularies[v].color}
+                  cancellable={false}
+                />
+              ))}
           </span>
         </span>
         {(props.selected || hovered) && (

src/main/manager/list/DiagramManagerSearch.tsx

@@ -1,11 +1,11 @@
-import Select, { MultiValue } from "react-select";
+import SearchIcon from "@mui/icons-material/Search";
 import _ from "lodash";
 import React from "react";
-import { InputGroup, Form } from "react-bootstrap";
+import { Form, InputGroup } from "react-bootstrap";
+import Select, { MultiValue } from "react-select";
 import { Locale } from "../../../config/Locale";
 import { AppSettings, WorkspaceVocabularies } from "../../../config/Variables";
 import { getLabelOrBlank } from "../../../function/FunctionGetVars";
-import SearchIcon from "@mui/icons-material/Search";
 
 type VocabularyOptions = MultiValue<{
   label: string;