add title controls to the views

#36 Add title controls

Author: manicprogrammer

diagrams/vc-spec-map/kumu-vc-spec-map-definition.json

@@ -282,22 +282,22 @@
     {
       "_id": "pers-juiNKbbA",
       "name": "Full Map",
-      "style": "@settings {\n  template: systems;\n  element-color: categorize(\"Element Type\", olympic);\n  layout-preset: dense;\n  same-label: \"\";\n  opposite-label: \"\";\n}\n\n"
+      "style": "@controls {\n  bottom-right {\n    filter {\n      target: element;\n      by: \"element type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n\n    filter {\n      target: connection;\n      by: \"connection type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n\n  top {\n    title {\n      value: \"Verifiable Credentials Specification Map\";\n    }\n  }\n  \n  top {\n    text {\n      value: \"https://github.com/decentralized-identity/vc-spec-map\";\n      width: 400;\n      color: #000000;\n    }\n  }\n}\n@settings {\n  template: systems;\n  element-color: categorize(\"Element Type\", olympic);\n  layout-preset: dense;\n  same-label: \"\";\n  opposite-label: \"\";\n}\n\n"
     },
     {
       "_id": "pers-YCmf78hh",
       "name": "Full Map Text Block",
-      "style": "@controls {\n  bottom-right {\n    filter {\n      target: element;\n      by: \"element type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n\n  bottom-right {\n    filter {\n      target: connection;\n      by: \"connection type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n}\n\n@settings {\n  template: causal-loop;\n  layout-preset: hairball;\n  layout: force;\n  same-label: \"\";\n  opposite-label: \"\";\n  font-size: 47;\n}\n\n/* depends */\nconnection[\"connection type\"=\"depends\"] {\n  size: 15;\n  color: #000000;\n}\n\n/* implements */\nconnection[\"connection type\"=\"implements\"] {\n  color: #56B4E9;\n}\n\n/* references */\nconnection[\"connection type\"=\"references\"] {\n  color: #0072B2;\n}\n\n/* extends */\nconnection[\"connection type\"=\"extends\"] {\n  color: #E69F00;\n}\n\n/* related */\nconnection[\"connection type\"=\"related\"] {\n  color: #CC79A7;\n}\n\n/* elements: intermediate */\n[\"Element Type\"=\"intermediate\"] {\n  color: #E69F00;\n}\n\n/* core */\nelement[\"element type\"=\"core\"] {\n  color: #0AD2F1;\n}\n\n/* non-core */\nelement[\"element type\"=\"non-core\"] {\n  color: #F7E81F;\n}"
+      "style": "@controls {\n  bottom-right {\n    filter {\n      target: element;\n      by: \"element type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n\n    filter {\n      target: connection;\n      by: \"connection type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n\n  top {\n    title {\n      value: \"Verifiable Credentials Specification Map\";\n    }\n  }\n  \n  top {\n    text {\n      value: \"https://github.com/decentralized-identity/vc-spec-map\";\n      width: 400;\n      color: #000000;\n    }\n  }\n}\n\n@settings {\n  template: causal-loop;\n  layout-preset: hairball;\n  layout: force;\n  same-label: \"\";\n  opposite-label: \"\";\n  font-size: 47;\n}\n\n/* depends */\nconnection[\"connection type\"=\"depends\"] {\n  size: 15;\n  color: #000000;\n}\n\n/* implements */\nconnection[\"connection type\"=\"implements\"] {\n  color: #56B4E9;\n}\n\n/* references */\nconnection[\"connection type\"=\"references\"] {\n  color: #0072B2;\n}\n\n/* extends */\nconnection[\"connection type\"=\"extends\"] {\n  color: #E69F00;\n}\n\n/* related */\nconnection[\"connection type\"=\"related\"] {\n  color: #CC79A7;\n}\n\n/* elements: intermediate */\n[\"Element Type\"=\"intermediate\"] {\n  color: #E69F00;\n}\n\n/* core */\nelement[\"element type\"=\"core\"] {\n  color: #0AD2F1;\n}\n\n/* non-core */\nelement[\"element type\"=\"non-core\"] {\n  color: #F7E81F;\n}"
     },
     {
       "_id": "pers-roGGZvV4",
-      "name": "Text Map All Nodes",
-      "style": "@settings {\n  template: causal-loop;\n}\n\n"
+      "name": "Text Map",
+      "style": "@controls {\n  bottom-right {\n    filter {\n      target: element;\n      by: \"element type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n\n    filter {\n      target: connection;\n      by: \"connection type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n\n  top {\n    title {\n      value: \"Verifiable Credentials Specification Map\";\n    }\n  }\n  \n  top {\n    text {\n      value: \"https://github.com/decentralized-identity/vc-spec-map\";\n      width: 400;\n      color: #000000;\n    }\n  }\n}\n@settings {\n  template: causal-loop;\n}\n\n"
     },
     {
       "_id": "pers-eu538HBr",
       "name": "playground",
-      "style": "@controls {\n  bottom-right {\n    filter {\n      target: element;\n      by: \"element type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n\n  bottom-right {\n    filter {\n      target: connection;\n      by: \"connection type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n}\n\n@settings {\n  template: causal-loop;\n  layout-preset: hairball;\n  layout: force;\n  same-label: \"\";\n  opposite-label: \"\";\n  font-size: 47;\n}\n\n/* depends */\nconnection[\"connection type\"=\"depends\"] {\n  size: 15;\n  color: #000000;\n}\n\n/* implements */\nconnection[\"connection type\"=\"implements\"] {\n  color: #56B4E9;\n}\n\n/* references */\nconnection[\"connection type\"=\"references\"] {\n  color: #0072B2;\n}\n\n/* extends */\nconnection[\"connection type\"=\"extends\"] {\n  color: #E69F00;\n}\n\n/* related */\nconnection[\"connection type\"=\"related\"] {\n  color: #CC79A7;\n}\n\n/* elements: intermediate */\n[\"Element Type\"=\"intermediate\"] {\n  color: #E69F00;\n}\n\n/* core */\nelement[\"element type\"=\"core\"] {\n  color: #0AD2F1;\n}\n\n/* non-core */\nelement[\"element type\"=\"non-core\"] {\n  color: #F7E81F;\n}\n\n"
+      "style": "@controls {\n  bottom-right {\n    filter {\n      target: element;\n      by: \"element type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n\n    filter {\n      target: connection;\n      by: \"connection type\";\n      as: buttons;\n      multiple: true;\n      default: show-all;\n    }\n  }\n\n  top {\n    title {\n      value: \"Verifiable Credentials Specification Map\";\n    }\n  }\n  \n  top {\n    text {\n      value: \"https://github.com/decentralized-identity/vc-spec-map\";\n      width: 400;\n      color: #000000;\n    }\n  }\n}\n\n@settings {\n  template: causal-loop;\n  layout-preset: hairball;\n  layout: force;\n  same-label: \"\";\n  opposite-label: \"\";\n  font-size: 47;\n}\n\n/* depends */\nconnection[\"connection type\"=\"depends\"] {\n  size: 15;\n  color: #000000;\n}\n\n/* implements */\nconnection[\"connection type\"=\"implements\"] {\n  color: #56B4E9;\n}\n\n/* references */\nconnection[\"connection type\"=\"references\"] {\n  color: #0072B2;\n}\n\n/* extends */\nconnection[\"connection type\"=\"extends\"] {\n  color: #E69F00;\n}\n\n/* related */\nconnection[\"connection type\"=\"related\"] {\n  color: #CC79A7;\n}\n\n/* elements: intermediate */\n[\"Element Type\"=\"intermediate\"] {\n  color: #E69F00;\n}\n\n/* core */\nelement[\"element type\"=\"core\"] {\n  color: #0AD2F1;\n}\n\n/* non-core */\nelement[\"element type\"=\"non-core\"] {\n  color: #F7E81F;\n}\n\n"
     }
   ]
 }