different galleries

app.py

@@ -24,9 +24,9 @@ app = Flask(__name__)
 motifs_id = "motifs_bb"
 MOTIF_PATH = os.path.join("static", motifs_id)
 
-def get_parents(this_motif):
+def get_parents(motif_type, this_motif):
     this_motif = ms.Multiset(map(int,this_motif.split("-")))
-    motif_ids = os.listdir(MOTIF_PATH)
+    motif_ids = os.listdir(os.path.join("static", motif_type))
     parents = []
     for motif in motif_ids:
         that_motif = ms.Multiset(map(int, motif.split("-")))
@@ -36,12 +36,13 @@ def get_parents(this_motif):
 
     return parents
 
-@app.route("/")
-def home():
-    motif_ids = os.listdir(MOTIF_PATH)
+@app.route("/gallery/<motif_type>")
+def gallery(motif_type):
+    motif_path = os.path.join("static", motif_type)
+    motif_ids = os.listdir(motif_path)
     motif_dict = defaultdict(list)
     for mot in motif_ids:
-        if len(os.listdir(f"{MOTIF_PATH}/{mot}")) < 1:
+        if len(os.listdir(os.path.join(motif_path, mot))) < 1:
             continue
         size = len(mot.split("-"))
         motif_dict[size].append(mot)
@@ -49,7 +50,13 @@ def home():
     for size in sorted(motif_dict.keys()):
         sorted_dict[size] = motif_dict[size]
 
-    return render_template("home.html", motifs_id=motifs_id, motif_dict=sorted_dict)
+    return render_template("gallery.html",
+                           motif_type=motif_type,
+                           motif_dict=sorted_dict)
+
+@app.route("/")
+def home():
+    return render_template("home.html")
 
 @app.route("/hmp")
 def hmp():
@@ -62,15 +69,15 @@ def motif_json(motif_id):
         return render_template("graph.html", instance_paths=instance_paths)
 
 
-@app.route('/motif_page/<motif_id>')
-def motif_page(motif_id):
-        parents = get_parents(motif_id)
+@app.route('/motif_page/<motif_type>/<motif_id>')
+def motif_page(motif_type, motif_id):
+        parents = get_parents(motif_type, motif_id)
         motif_path = os.path.join(MOTIF_PATH, motif_id)
-        instance_paths = [os.path.join(motifs_id, motif_id, inst) for inst in os.listdir(motif_path)]
+        instance_paths = [os.path.join(motif_type, motif_id, inst) for inst in os.listdir(motif_path)]
         return render_template("motif_page.html",
                                instance_paths=instance_paths,
                                parents=parents,
-                               motifs_id=motifs_id)
+                               motif_type=motif_type)
 
 @app.route('/graphlets')
 def graphlets():

templates/home.html

@@ -8,47 +8,23 @@
 
 {% block body %}
 
+<p>
+
 <b> vernal </b> | \ ˈvər-nᵊl  \ <br>
 1: of, relating to, or occurring in the spring <br>
 2: fresh or new like the spring <br><br>
 
-Click on a motif drawing to see other instances.
-
-<p>
-
-{% for size, motifs in motif_dict.items() %}
+Select a motif gallery:
 
 
-<button onclick="toggleShow({{ size  }})"> {{ size }}-motifs </button>
+<ul>
+	<li><a href="{{ url_for('gallery', motif_type='motifs_bb') }}">Linear Motifs</a>: Nodes aggregated along a single chain.</li>
+	<li><a href="{{ url_for('gallery', motif_type='motifs') }}">General Motifs</a>: Nodes aggregated can span multiple chains.</li>
+</ul>
 
-<table id="{{ size  }}" style="display:none" > <br>
+Cite <br>
 
-	{% for m in motifs %}
-
-
-		<tr>
-		<td> 
-		 <a href="{{url_for('motif_page', motif_id='{}'.format(m)) }}">
-             <img src="{{ url_for('static', filename='{}/{}/0.png'.format(motifs_id, m)) }}" width="450px" id="border">
-		 </a></td>
-		</tr>
-
-	  {% endfor %}
-</table>
-
-{% endfor %}
 </p>
 
-<script>
-function toggleShow(id) {
-  var x = document.getElementById(id);
-  if (x.style.display === "none") {
-    x.style.display = "block";
-  } else {
-    x.style.display = "none";
-  }
-}
-</script>
-
 
 {% endblock %}

templates/motif_page.html

@@ -24,7 +24,7 @@ Parent Motifs <br>
 
 {% for p in parents %}
 
-<a href="{{url_for('motif_page', motif_id='{}'.format(p)) }}">
+<a href="{{url_for('motif_page', motif_type=motif_type, motif_id='{}'.format(p)) }}">
     <img src="{{ url_for('static', filename='{}/{}/0.png'.format(motifs_id, p)) }}" style="width:200px">
 </a>