Explorer: very basic way of linking to a rule line

trefle/config.py

@@ -95,11 +95,13 @@ def load_financements(data, output=None, properties=None, namespace=None):
 def load_rules(path):
     with path.open() as rules_file:
         data = rules_file.read()
-        RAW_RULES[path.stem] = {
+        id_ = str(path.relative_to(ROOT))
+        RAW_RULES[id_] = {
             'data': data,
-            'path': str(path.relative_to(ROOT)),
+            'path': id_,
+            'name': path.name,
         }
-        return Rule.load(data.splitlines(), path.stem)
+        return Rule.load(data.splitlines(), id_)
 
 
 # TODO: move in utils?

trefle/explorer/components/rule.tag.html

@@ -25,6 +25,29 @@
       font-family: 'mono';
       font-weight: 600;
     }
+    pre code {
+      display: block;
+      padding-left: 1em;
+      font-family: mono;
+    }
+    a.line {
+      display: none;
+    }
+    :scope.with-lines a.line {
+      display: inline-block;
+      background-color: #ddd;
+      cursor: pointer;
+      text-align: center;
+      vertical-align: middle;
+    }
+    :scope.with-lines a:target, :scope.with-lines a:target + code {
+      font-weight: bold;
+      background-color: #ccc;
+    }
+    :scope.with-lines pre {
+      display: grid;
+      grid-template-columns: 2em auto;
+    }
   </style>
   <script>
     this.raw = opts.content.replace(/Si /g, '<strong>Si </strong>')
@@ -51,6 +74,12 @@
         this.raw = this.raw.replace(new RegExp(`(${schema.label})`, 'g'), replace)
       }
     }
-    this.on('mount', () => this.refs.pre.innerHTML = this.raw)
+    const lines = this.raw.split('\n')
+    let raw = '', id, hash = window.location.hash.split('#')[1]
+    for (var i = 0; i < lines.length; i++) {
+      id = hash.split('~')[0] + '~' + (i+1)
+      raw += `<a href="#${id}" id="${id}" class=line>${i+1}</a><code>${lines[i]}</code>`
+    }
+    this.on('mount', () => this.refs.pre.innerHTML = raw)
   </script>
 </rule>

trefle/explorer/components/rules.tag.html

 <rules>
-  <div each={ props, name in items }>
-    <h3>{ name } <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/{ props.path } target=_blank> <i class="icon">edit</i></a></h3>
-    <rule content={ props.data }></rule>
+  <ul>
+    <li each={ props, id in this.rules }><a href="#rules/{ id }" class='{ on: this.opts.id.startsWith(id) }' title={ id }>{ props.name }</a></li>
+  </ul>
+  <div if={ this.rule }>
+    <h3>{ this.rule.path } <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/{ this.rule.path } target=_blank> <i class="icon">edit</i></a></h3>
+    <rule content={ this.rule.data } class=with-lines></rule>
+  </div>
+  <div if={ !this.rule }>
+    <p>Sélectionner une règle dans le menu.</p>
   </div>
 
   <script>
-    this.items = []
+    this.rules = []
+    this.rule = null
 
     this.on('mount', () => this.load())
 
+    this.load_data = (data) => {
+      RULES = data
+      this.rules = data
+      if (this.opts.id) this.rule = data[this.opts.id.split('~')[0]]
+      this.update()
+      // Force element target after DOM has been rebuilt
+      // (eg. if we have a ~line in the URL, to highlight it).
+      window.location.hash = window.location.hash
+    }
+
     this.load = () => {
+      if (RULES) return this.load_data(RULES)
       fetch('/explore/rules')
       .then((response) => response.json())
-      .then((data) => {
-        this.items = data
-        this.update()
-      })
+      .then(this.load_data)
     }
 
     this.mixin(View)
   </script>
 
   <style scoped>
-    :scope {
-      /* Prevent huge comments to overflow */
-      overflow-x: hidden;
+    :scope.tools {
       min-width: 1200px;
+      grid-template-columns: 1fr 4fr;
     }
     h3 {
       font-variant: small-caps;
     }
+    .on {
+      font-weight: bold;
+    }
   </style>
 
 </rules>

trefle/explorer/index.html

@@ -19,7 +19,7 @@
 <main>
   <schema class=full></schema>
   <glossary class=full></glossary>
-  <rules class=full></rules>
+  <rules class=tools></rules>
   <simulate class=tools></simulate>
   <tools></tools>
 </main>
@@ -27,12 +27,14 @@
 <script>
   riot.mount('navbar')
   route('/schema', () => riot.mount('schema'))
+  route('/rules/(.+)', (id) => riot.mount('rules', {id: id}))
   route('/rules', () => riot.mount('rules'))
   route('/simulate', () => riot.mount('simulate'))
   route('/tools', () => riot.mount('tools'))
   route('/glossary', () => riot.mount('glossary'))
 
   let SCHEMA
+  let RULES
 
   fetch('/explore/schema')
   .then((response) => response.json())