tw5-graph 1.7.1

package/plugins/graph/ui/Buttons/export.tid

@@ -0,0 +1,65 @@
+description: Export graph
+caption: {{$:/core/images/export-button}} export graph
+
+\whitespace trim
+
+<%if [subfilter{$:/plugins/flibbles/graph/subfilters##messages}jsonindexes[]prefix[graph-export-]] %>
+  <$vars state=<<qualify "$:/state/flibbles/graph/popup/export">>
+    imageStore="$:/temp/flibbles/graph/export">
+    <$button
+        popup=<<state>>
+        tooltip="Export graph as image"
+        class=graph-export-button>
+      <%if [<tv-config-toolbar-icons>match[yes]] %>
+        {{$:/core/images/export-button}}
+      <%endif%>
+      <%if [<tv-config-toolbar-text>match[yes]] %>
+        <span class="tc-btn-text">
+          <$text text="export graph" />
+        </span>
+      <%endif%>
+    </$button>
+    <$reveal state=<<state>> type="popup" position="below" animate="yes">
+      <div class="tc-drop-down graph-export-button-dropdown">
+        <$list variable=type filter="[subfilter{$:/plugins/flibbles/graph/subfilters##messages}jsonindexes[]removeprefix[graph-export-]]">
+          <$button class=`tc-btn-invisible graph-export-type-$(type)$`>
+            <$action-sendmessage $message=`graph-export-$(type)$`
+              targetTiddler=<<imageStore>> />
+            <!-- We wrap our downloading inside action-createtiddler, because
+                 create-tiddler delays refreshing its contents until its
+                 invoked, which we need, since that `<%if` block depends on
+                 content made by prior actions. -->
+            <$action-createtiddler $basetitle=<<state>> $overwrite=yes>
+              <%if [<imageStore>is[image]!type[image/svg+xml]] %>
+                <!-- Don't use tm-download-raw yourself.
+                     It's a hack. A workaround. A solution for chumps.
+                     I'm scrapping it as soon as TW supports image downloads -->
+                <$action-sendmessage $message="tm-download-raw"
+                  $param=<<imageStore>>
+                  filename={{{[{!!title}removeprefix[$:/graph/]] ~[{!!title}]}}}
+                  type={{{ [<imageStore>get[type]addsuffix[;base64]] }}} />
+              <%else%>
+                <$action-sendmessage $message="tm-download-file"
+                  $param="$:/core/templates/plain-text-tiddler"
+                  currentTiddler=<<imageStore>>
+                  filename={{{[{!!title}removeprefix[$:/graph/]] ~[{!!title}]}}}
+                  type={{{ [<imageStore>get[type]] }}} />
+              <%endif%>
+            </$action-createtiddler>
+            <$action-deletetiddler $tiddler=<<imageStore>> />
+            <$action-deletetiddler $tiddler=<<state>> />
+            <$transclude $field="description" $tiddler=`$:/language/Docs/Types/image/$(type)$`>
+              <$fill $name="ts-missing">
+                <$transclude $field="description" $tiddler={{{ [[$:/tags/Exporter]tagging[]] :filter[{!!title}get[extension]removeprefix[.]match<type>] }}} >
+                  <$fill $name="ts-missing">
+                    <$text text=<<type>> />
+                  </$fill>
+                </$transclude>
+              </$fill>
+            </$transclude>
+          </$button>
+        </$list>
+      </div>
+    </$reveal>
+  </$vars>
+<%endif%>

package/plugins/graph/ui/Buttons/fullscreen.tid

@@ -0,0 +1,35 @@
+description: Toggle graph fullscreen mode
+caption: {{$:/core/images/full-screen-button}} fullscreen
+
+\procedure fs-actions()
+\whitespace trim
+<% if [<fs-state>is[tiddler]] %>
+  <$action-deletetiddler $tiddler=<<fs-state>> />
+<% else %>
+  <$action-setfield $tiddler=<<fs-state>> text=graph-fullscreen />
+<% endif %>
+\end
+\procedure fs-refocus()
+\whitespace trim
+<!--Refocus on the fullscreen button so that hitting escape will still disable fullscreen mode -->
+<$action-delay>
+  <!--The delay is necessary, because you can't focus on an element that's currently hidden, and the graph may be hidden when this is called. -->
+  <$action-sendmessage $message="tm-focus-selector" $param=".graph-fullscreen-button"/>
+\end
+
+\parameters (class:graph-fullscreen-button)
+\whitespace trim
+
+<$button
+    tooltip="Toggle graph fullscreen mode"
+    class={{{ [<class>] +[join[ ]] }}}
+    actions="<<fs-actions>><<fs-refocus>>" >
+  <%if [<tv-config-toolbar-icons>match[yes]] %>
+    {{$:/core/images/full-screen-button}}
+  <%endif%>
+  <%if [<tv-config-toolbar-text>match[yes]] %>
+    <span class="tc-btn-text">
+      <$text text="fullscreen" />
+    </span>
+  <%endif%>
+</$button>

package/plugins/graph/ui/Buttons/settings.tid

@@ -0,0 +1,28 @@
+description: Open graph settings
+caption: {{$:/core/images/options-button}} settings
+
+\procedure settingsActions()
+\whitespace trim
+<$action-navigate $to="$:/plugins/flibbles/graph/settings"/>
+<$action-setfield
+  $tiddler="$:/state/flibbles/graph/settings"
+  text="$:/plugins/flibbles/graph/ui/Settings/Graphs" />
+<$action-setfield
+  $tiddler="$:/state/flibbles/graph/settings/graphs"
+  text=<<currentTiddler>> />
+\end
+
+\whitespace trim
+<$button
+    tooltip="Open graph settings"
+    class="graph-settings-button"
+    actions=<<settingsActions>> >
+  <%if [<tv-config-toolbar-icons>match[yes]] %>
+    {{$:/core/images/options-button}}
+  <%endif%>
+  <%if [<tv-config-toolbar-text>match[yes]] %>
+    <span class="tc-btn-text">
+      <$text text="settings" />
+    </span>
+  <%endif%>
+</$button>

package/plugins/graph/ui/Buttons/tiddlywiki.files

@@ -0,0 +1,16 @@
+{
+	"directories": [
+		{
+			"path": ".",
+			"filesRegExp": "^.*\\.tid$",
+			"isTiddlerFile": true,
+			"fields": {
+				"title": {
+					"source": "basename",
+					"prefix": "$:/plugins/flibbles/graph/ui/Buttons/"
+				},
+				"tags": "$:/tags/flibbles/graph/GraphToolbar"
+			}
+		}
+	]
+}

package/plugins/graph/ui/EditTemplate/Edges.tid

@@ -0,0 +1,22 @@
+caption: Edge Types
+
+\procedure edgelist(category, default, customAllowed)
+\whitespace trim
+<$vars fieldName=`edges.$(category)$` subfilterName=`edgetypes.$(category)$`>
+  <$edit-text field=<<fieldName>> placeholder=<<default>> />
+  <br>
+  <span class="graph-tiddlers-edgelist">
+    <$vars masterFilter="[[$:/plugins/flibbles/graph/subfilters]getindex<subfilterName>] :map:flat[subfilter{!!title}sort[]]"
+           customFilter={{{ [{!!title}get<fieldName>!is[blank]else<default>]}}}>
+      <$list filter="[<customAllowed>match[yes]] :map:flat[subfilter<masterFilter>subfilter<customFilter>] [subfilter<masterFilter>]" join=", ">
+        <span class={{{ [subfilter<masterFilter>subfilter<customFilter>match{!!title}] :then[[active]] ~inactive }}}>
+          <$text text={{!!title}} />
+\end
+
+\whitespace trim
+
+Decide which of the preconfigured edge types will connect your nodes
+
+|tc-max-width tc-edit-max-width tc-table-no-border |k
+|Fields |<<edgelist fields "[all[]]" yes>> |
+|Functions |<<edgelist functions "[all[]]" no>> |

package/plugins/graph/ui/EditTemplate/Neighbors.tid

@@ -0,0 +1,35 @@
+caption: Neighbors
+
+\whitespace trim
+
+You can display all the neighbor nodes associated with the nodes in your graph.
+
+<!-- This uses 1 and 0 as values instead of yes and no, because someday, I
+     may allow for deeper depth of neighbors. Those would use 2+ -->
+
+<!-- It sets two fields, `neighbors.incoming` and `neighbors.outgoing` for
+     the same reason. Some day, we may configure those separately, and if so,
+     this will be better for backward compatibility. -->
+
+<$checkbox field="neighbors.incoming"
+	checked=1
+	unchecked=0
+	default=0
+	checkactions="""<$action-setfield $field="neighbors.outgoing" $value=1 />"""
+	uncheckactions="""<$action-setfield $field="neighbors.outgoing" />"""
+>
+&#32;Enable neighbors
+</$checkbox>
+
+<$reveal type="match"
+	text="1"
+	stateTitle={{!!title}}
+	stateField="neighbors.incoming"
+	retain="yes"
+	animate="yes">
+
+|tc-table-no-border |k
+|Allowed neighbors |<$edit-text field="neighbors.whitelist" placeholder="[!is[system]]" /> |
+|Edges between neighbors |<$checkbox field="neighbors.interedges" checked=yes unchecked=no default=no /> |
+
+</$reveal>

package/plugins/graph/ui/EditTemplate/Nodes.tid

@@ -0,0 +1,12 @@
+caption: Nodes filter
+
+\whitespace trim
+
+Configure a filter describing what nodes this graph shows
+
+<$fieldtranscriber type="application/x-tiddler-filter" field=filter>
+
+|tc-table-no-border |k
+|Nodes |<$edit-text tiddler=<<state>> /> |
+
+</$fieldtranscriber>

package/plugins/graph/ui/EditTemplate/Popups.tid

@@ -0,0 +1,27 @@
+caption: Popups
+
+\whitespace trim
+
+You can enable popups when hovering over a node.
+
+<$checkbox field="popup"
+	checked=yes
+	unchecked=no
+	default=no>
+&#32;Enable node popups
+</$checkbox>
+
+<$reveal type="match"
+	text="yes"
+	stateTitle={{!!title}}
+	stateField="popup"
+	retain="yes"
+	animate="yes">
+
+|tc-table-no-border |k
+|Popup template |<$edit-text field="popup.template" placeholder="{{!!text}}" inputActions="<%if [<actionValue>match[]] %><$action-setfield $field='popup.template' />" /> |
+|Popup delay (ms) |<$edit-text field="popup.ms" placeholder="600" type="number" /> |
+|Popup maximum width |<$edit-text field="popup.width" placeholder="300px"/> |
+|Popup maximum height |<$edit-text field="popup.height" placeholder="200px" /> |
+
+</$reveal>

package/plugins/graph/ui/EditTemplate/Properties.tid

@@ -0,0 +1,21 @@
+caption: Graph Engine Defaults
+list-after: 
+
+\whitespace trim
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/grouped-tabs"
+	tabsList="graph nodes edges"
+	default=graph
+	class=""
+	state= "$:/state/flibbles/graph/editTemplate/properties">
+
+<$fill $name=body>
+
+<$fieldtranscriber
+	type="application/json"
+	field=`graph.$(currentTab)$`>
+
+<$vars currentTiddler=<<state>>>
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/ViewTemplate/properties"
+	type=<<currentTab>> />

package/plugins/graph/ui/EditTemplate/tiddlywiki.files

@@ -0,0 +1,16 @@
+{
+	"directories": [
+		{
+			"path": ".",
+			"filesRegExp": "^.*\\.tid$",
+			"isTiddlerFile": true,
+			"fields": {
+				"title": {
+					"source": "basename",
+					"prefix": "$:/plugins/flibbles/graph/ui/EditTemplate/"
+				},
+				"tags": "$:/tags/flibbles/graph/EditTemplate"
+			}
+		}
+	]
+}

package/plugins/graph/ui/Modals/NewPropertySet.tid

@@ -0,0 +1,20 @@
+title: $:/plugins/flibbles/graph/ui/Modals/NewPropertySet
+subtitle: New Property Set
+footer: {{$:/plugins/flibbles/graph/ui/Modals/Select!!footer}}
+mask-closable: yes
+
+<p class="tc-edit-field-add">
+
+<em class="tc-edit tc-small-gap-right">
+
+<$text text="Type in the name for a new set."/>
+
+</em></p>
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/Modals/Select">
+
+<$fill $name=list-item>
+
+<div class="tc-menu-list-item">
+
+<$link overrideClass="tc-tiddlylink" />

package/plugins/graph/ui/Modals/NewView.tid

@@ -0,0 +1,20 @@
+title: $:/plugins/flibbles/graph/ui/Modals/NewGraph
+subtitle: New Graph
+footer: {{$:/plugins/flibbles/graph/ui/Modals/Select!!footer}}
+mask-closable: yes
+
+<p class="tc-edit-field-add">
+
+<em class="tc-edit tc-small-gap-right">
+
+<$text text="Type in the name for a new graph."/>
+
+</em></p>
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/Modals/Select">
+
+<$fill $name=list-item>
+
+<div class="tc-menu-list-item">
+
+<$link overrideClass="tc-tiddlylink" />

package/plugins/graph/ui/Modals/Select.tid

@@ -0,0 +1,72 @@
+title: $:/plugins/flibbles/graph/ui/Modals/Select
+footer: <$importvariables filter="[all[current]]"><$button actions=<<select-accept-actions>> >Okay</$button> <$button actions=<<select-close-actions>>>Close</$button>
+
+\procedure select-accept-actions()
+\whitespace trim
+<$action-sendmessage $message="tm-modal-finish" $param={{$:/temp/graph/select/tiddler}} />
+<$action-sendmessage $message="tm-close-tiddler" />
+<$action-deletetiddler $filter="[[$:/temp/graph/select]] [[$:/temp/graph/select/tiddler]] [[$:/temp/graph/select/selected-item]] [[$:/temp/graph/select/refresh]]" />
+\end
+
+\procedure select-click-actions()
+<$action-setfield $tiddler="$:/temp/graph/select/tiddler" text=<<navigateTo>> />
+<<select-accept-actions>>
+\end
+
+\procedure select-close-actions()
+\whitespace trim
+<$action-sendmessage $message="tm-close-tiddler" />
+<$action-deletetiddler $filter="[[$:/temp/graph/select]] [[$:/temp/graph/select/tiddler]] [[$:/temp/graph/select/selected-item]] [[$:/temp/graph/select/refresh]]" />
+\end
+
+\procedure select-cancel-actions()
+\whitespace trim
+<% if [{$:/temp/graph/select}match[]] %>
+	<<select-close-actions>>
+<% elseif [{$:/temp/graph/select}!match{$:/temp/graph/select/tiddler}] %>
+	<$action-setfield $tiddler="$:/temp/graph/select/tiddler" text={{$:/temp/graph/select}}/>
+	<$action-deletetiddler $filter="$:/temp/graph/select/selected-item" />
+	<$action-setfield $tiddler="$:/temp/graph/select/refresh" text="yes"/>
+<% else %>
+	<$action-deletetiddler $filter="[[$:/temp/graph/select]] [[$:/temp/graph/select/tiddler]] [[$:/temp/graph/select/selected-item]] [[$:/temp/graph/select/refresh]]" />
+<% endif %>
+\end
+
+\whitespace trim
+
+<div class="tc-edit-field-add-name-wrapper">
+
+<$transclude
+	$variable="keyboard-driven-input"
+	storeTitle="$:/temp/graph/select"
+	tiddler="$:/temp/graph/select/tiddler"
+	refreshTitle="$:/temp/graph/select/refresh"
+	selectionStateTitle="$:/temp/graph/select/selected-item"
+	configTiddlerFilter="[all[current]]"
+	tag="input"
+	placeholder="Type something"
+	class="tc-edit-texteditor graph-select"
+	focus=yes
+	inputCancelActions=<<select-cancel-actions>>
+	inputAcceptActions=<<select-accept-actions>>
+	$mode=inline
+/>
+
+<p>
+
+<$linkcatcher actions=<<select-click-actions>> >
+
+<$list filter={{!!first-search-filter}} >
+
+<$list-empty>
+
+<$text text="New result" />
+
+</$list-empty>
+<$list-template>
+
+<span class={{{[{$:/temp/graph/select/tiddler}match<currentTiddler>then[tc-list-item-selected]] }}}>
+
+<$slot $name=list-item>
+
+<$transclude tiddler="$:/core/ui/ListItemTemplate" mode=inline/>

package/plugins/graph/ui/Modals/SelectField.tid

@@ -0,0 +1,21 @@
+title: $:/plugins/flibbles/graph/ui/Modals/SelectField
+subtitle: Select field
+first-search-filter: [subfilter{$:/plugins/flibbles/graph/subfilters##edgetypes.fields}search:title{$:/temp/graph/select}sort[title]limit[10]]
+footer: {{$:/plugins/flibbles/graph/ui/Modals/Select!!footer}}
+mask-closable: yes
+
+<p class="tc-edit-field-add">
+
+<em class="tc-edit tc-small-gap-right">
+
+<$text text="Select an existing field, or type in the name for a new one."/>
+
+</em></p>
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/Modals/Select">
+
+<$fill $name=list-item>
+
+<div class="tc-menu-list-item">
+
+<$link overrideClass="tc-tiddlylink" />

package/plugins/graph/ui/Modals/SelectTiddler.tid

@@ -0,0 +1,15 @@
+title: $:/plugins/flibbles/graph/ui/Modals/SelectTiddler
+subtitle: Select tiddler
+first-search-filter: [!is[system]!is[draft]search:title{$:/temp/graph/select}sort[title]limit[10]]
+footer: {{$:/plugins/flibbles/graph/ui/Modals/Select!!footer}}
+mask-closable: yes
+
+<p class="tc-edit-field-add">
+
+<em class="tc-edit tc-small-gap-right">
+
+<$text text="Select an existing tiddler, or type in the name for a new one."/>
+
+</em></p>
+
+<$transclude $tiddler="$:/plugins/flibbles/graph/ui/Modals/Select" />

package/plugins/graph/ui/Modals/Tiddler.tid

@@ -0,0 +1,22 @@
+title: $:/plugins/flibbles/graph/ui/Modals/Tiddler
+subtitle: {{$:/plugins/flibbles/graph/ui/Modals/TiddlerHeader}}
+mask-closable: yes
+code-body: yes
+
+<$vars
+  tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
+  tv-config-toolbar-text={{$:/config/Toolbar/Text}}
+  tv-config-toolbar-class={{$:/config/Toolbar/ButtonClass}}>
+
+<div class=graph-modal-tiddler>
+
+<$linkcatcher actions="""\whitespace trim
+<%if [list[$:/state/flibbles/graph/modal]match<navigateTo>] %>
+  <$action-listops $tiddler='$:/state/flibbles/graph/modal' $subfilter='+[allafter:include<navigateTo>]' />
+<%else%>
+  <$action-navigate $to=<<navigateTo>> />
+""" >
+
+<$tiddler tiddler={{{ [list[$:/state/flibbles/graph/modal]] }}}>
+
+<$transclude $tiddler="$:/core/ui/StoryTiddlerTemplate" $mode=inline />

package/plugins/graph/ui/Modals/TiddlerHeader.tid

@@ -0,0 +1,15 @@
+title: $:/plugins/flibbles/graph/ui/Modals/TiddlerHeader
+
+\whitespace trim
+
+<div class=graph-modal-tiddler-breadcrumbs>
+  <$linkcatcher actions="<$action-listops $tiddler='$:/state/flibbles/graph/modal' $subfilter='+[allafter:include<navigateTo>]' />" >
+    <$list filter="[list[$:/state/flibbles/graph/modal]reverse[]]" join="{{$:/core/images/right-arrow}}">
+      <%if [list[$:/state/flibbles/graph/modal]first[]match{!!title}] %>
+        ''<$text text={{!!title}} />''
+      <%else%>
+        <$link />
+      <%endif%>
+    </$list>
+  </$linkcatcher>
+</div>

package/plugins/graph/ui/PropertyTypes/boolean.tid

@@ -0,0 +1,11 @@
+title: $:/plugins/flibbles/graph/ui/PropertyTypes/boolean
+
+\whitespace trim
+
+<$checkbox index=<<property>>
+	checked=yes
+	unchecked=no
+	default={{{ [<jsonEntry>jsonget[default]match[true]then[yes]else[no]] }}}
+/>
+&#32;
+<$text text={{{ [<jsonEntry>jsonget[label]] }}} />

package/plugins/graph/ui/PropertyTypes/color.tid

@@ -0,0 +1,16 @@
+title: $:/plugins/flibbles/graph/ui/PropertyTypes/color
+
+\whitespace trim
+
+<$edit-color
+	class="tc-edit-texteditor tc-edit-fieldeditor"
+	default={{{ [<jsonEntry>jsonget[default]] }}}
+	index=<<property>>
+/>
+
+<$edit-text
+	tag=input
+	class="tc-edit-texteditor tc-edit-fieldeditor"
+	default={{{ [<jsonEntry>jsonget[default]] }}}
+	index=<<property>>
+/>

package/plugins/graph/ui/PropertyTypes/enum.tid

@@ -0,0 +1,15 @@
+title: $:/plugins/flibbles/graph/ui/PropertyTypes/enum
+
+\whitespace trim
+
+<$select
+	multiple={{{ [<jsonEntry>jsonget[multiple]match[true]else[]] }}}
+	actions="<%if [all[current]getindex<property>match[]] %><$action-setfield $index=<<property>> $value=' '/>"
+	index=<<property>>
+	default={{{ [<jsonEntry>jsonget[multiple]match[true]then<jsonEntry>jsonget[default]format:titlelist[]join[ ]] ~[<jsonEntry>jsonget[default]] }}} >
+  <$list variable=enum filter="[<jsonEntry>jsonget[values]] -[<jsonEntry>jsonget[hidden]]">
+    <option value=<<enum>> >
+      <$text text=<<enum>> />
+    </option>
+  </$list>
+</$select>

package/plugins/graph/ui/PropertyTypes/number.tid

@@ -0,0 +1,17 @@
+title: $:/plugins/flibbles/graph/ui/PropertyTypes/number
+
+\whitespace trim
+
+<$let
+	increment={{{ [<jsonEntry>jsonget[increment]else[1]] }}}
+	default={{{ [<jsonEntry>jsonget[default]else[0]] }}}
+	min={{{ [<jsonEntry>jsonget[min]else[0]] }}}
+	max={{{ [<jsonEntry>jsonget[max]] ~[<increment>multiply[100]add<min>] }}}
+>
+<$range index=<<property>>
+	min=<<min>>
+	max=<<max>>
+	increment=<<increment>>
+	default=<<default>>
+/>
+<span><$text text={{{ [{!!title}getindex<property>else<default>] }}} />

package/plugins/graph/ui/Settings/Engine.tid

@@ -0,0 +1,23 @@
+title: $:/plugins/flibbles/graph/ui/Settings/Engine
+filter: [[graphengine]modules[]count[]compare:number:gt[1]]
+tags: $:/tags/flibbles/graph/SettingsTab
+caption: Engine
+
+\parameters (prompt: "Select a default engine for your TiddlyWiki to use.")
+
+<$transclude $variable=prompt />
+
+<div class=graph-engine-button-list>
+
+<$list filter="[subfilter{$:/plugins/flibbles/graph/subfilters##engine.list}]">
+
+<$let name={{{ [all[current]moduleproperty[name]] }}} >
+
+<$button class=graph-engine-button selectedClass=active set="$:/config/flibbles/graph/engine" setTo=<<name>> >
+
+<div class=graph-icon>
+
+<$transclude $tiddler={{{ [all[current]shadowsource[]addsuffix[/icon]is[shadow]] }}} />
+
+</div>
+<$text text=<<name>> />

package/plugins/graph/ui/Settings/Graphs/EditTemplate.tid

@@ -0,0 +1,52 @@
+title: $:/plugins/flibbles/graph/ui/Settings/Graphs/EditTemplate
+
+\procedure engineSelector()
+\whitespace trim
+<$select field=engine
+	actions="<%if [{!!engine}match[]] %><$action-deletefield $field=engine/>">
+  <option />
+  <$list filter="[{!!engine}!match[]] [subfilter{$:/plugins/flibbles/graph/subfilters##engine.list}moduleproperty[name]]">
+    <%if [{!!title}match[]] ~[subfilter{$:/plugins/flibbles/graph/subfilters##engine.list}moduleproperty[name]match{!!title}] %>
+      <option>
+        <$text text={{!!title}} />
+      </option>
+    <%else%>
+      <option disabled value={{!!title}} class="graph-tiddler-select-warning" >
+        <$text text=`$(currentTiddler)$ (not installed!)` />
+      </option>
+    <%endif%>
+  </$list>
+</$select>
+\end
+
+\procedure templateSelector()
+\whitespace trim
+<$select field=template default={{{ [[$:/tags/flibbles/graph/Template]tagging[]] }}} >
+  <$list filter="[[$:/tags/flibbles/graph/Template]tagging[]]">
+    <option value={{!!title}}>
+      <$view field=caption>
+        <$view field=title />
+      </$view>
+    </option>
+  </$list>
+</$select>
+\end
+
+! <$link><$transclude field=caption><$text text={{{ [{!!title}removeprefix[$:/graph/]] }}} /></$transclude></$link>
+
+<%if [[graphengine]modules[]count[]compare:number:gt[1]] %>
+
+Engine: <<engineSelector>>
+<%endif%>
+
+Template: <<templateSelector>>
+
+<$list variable="segment" filter="[[$:/tags/flibbles/graph/EditTemplate]tagging[]]">
+
+<div class="graph-tiddler-edit-template">
+
+!! <$transclude $tiddler=<<segment>> $field="caption"/>
+
+<$transclude $tiddler=<<segment>> />
+
+</div></$list>