From 7b29e60cb3f42f33f6d40617d3352b5e7b7f06b6 Mon Sep 17 00:00:00 2001
From: Rachel TORCHET <racheltorchet@users.noreply.github.com>
Date: Fri, 17 Nov 2017 17:48:54 +0100
Subject: [PATCH] Update CompoundForm to fit the wireframes - works for one
 compound

Former-commit-id: eda0d3c904ce0767f8d9182f20446256ce4ee1a2
---
 ippisite/ippidb/forms.py                      |  17 +-
 ippisite/ippidb/static/css/ippidb.css         | 233 ++++++++++++++++++
 .../ippidb/static/images/Other/IUPACIcon.png  | Bin 0 -> 8727 bytes
 .../ippidb/static/images/Other/SMILESIcon.png | Bin 0 -> 5350 bytes
 .../ippidb/static/images/Other/SketchIcon.png | Bin 0 -> 6044 bytes
 ippisite/ippidb/static/js/ippidb.js           |  40 ++-
 .../ippidb/templates/BibliographyForm.html    |   2 +
 ippisite/ippidb/templates/CompoundForm.html   |  50 +++-
 ippisite/ippidb/templates/IdForm.html         |   2 +
 ippisite/ippidb/templates/PDBForm.html        |   4 +-
 ippisite/ippidb/templates/PpiForm.html        |  10 +-
 .../templates/ProteinDomainComplexForm.html   |   2 +
 .../ProteinDomainComplexTypeForm.html         |   4 +-
 ippisite/ippidb/templates/add.html            |   6 +-
 ippisite/ippidb/templates/compound_list.html  |   6 +-
 ippisite/ippidb/views.py                      |   4 +-
 16 files changed, 355 insertions(+), 25 deletions(-)
 create mode 100644 ippisite/ippidb/static/images/Other/IUPACIcon.png
 create mode 100644 ippisite/ippidb/static/images/Other/SMILESIcon.png
 create mode 100644 ippisite/ippidb/static/images/Other/SketchIcon.png

diff --git a/ippisite/ippidb/forms.py b/ippisite/ippidb/forms.py
index 547a4160..6f2ef677 100644
--- a/ippisite/ippidb/forms.py
+++ b/ippisite/ippidb/forms.py
@@ -96,20 +96,26 @@ class ProteinDomainComplexForm(ModelForm):
         self.fields['domain'].queryset = ProteinDomainComplex.objects.filter(id=id)
 """
 
-
 class PpiForm(ModelForm):
 
     class Meta:
         model = Ppi
         fields = ['pdb_id', 'symmetry']
 
-
 class PpiComplexForm(ModelForm):
 
     class Meta:
         model = PpiComplex
-        fields = ['complex', 'cc_nb']
+        fields = ['cc_nb',]
+
+class CompoundForm(ModelForm):
 
+    class Meta:
+        model = Compound
+        fields = ['common_name','is_macrocycle']
+        widgets = {
+        'common_name': forms.TextInput(attrs={'placeholder':'Choose a common name', 'required': 'required'}),
+        }
 
 class ActivityForm(ModelForm):
     
@@ -117,11 +123,6 @@ class ActivityForm(ModelForm):
         model=TestActivityDescription
         fields=['test_type','test_name','test_modulation_type']
 
-class CompoundForm(ModelForm):
-
-    class Meta:
-        model = Compound
-        fields = ['canonical_smile','common_name','is_macrocycle']
 
 #CompoundFormSet = modelformset_factory(
 #    Compound, exclude=('mddr_compound',), extra=0)
diff --git a/ippisite/ippidb/static/css/ippidb.css b/ippisite/ippidb/static/css/ippidb.css
index 98932a5c..c7ec807e 100644
--- a/ippisite/ippidb/static/css/ippidb.css
+++ b/ippisite/ippidb/static/css/ippidb.css
@@ -96,6 +96,10 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 	font-size: 18px;
 }
 
+.hide {
+  display: none;
+}
+
 #main-header{
 	margin-bottom: 2px;
 }
@@ -840,10 +844,19 @@ body {
     float:left;
 }
 
+#ck-button-long {
+    width:100%;
+}
+
 #ck-button label {
     width: 100%;
 }
 
+#ck-button-long label {
+    width: 100%;
+    margin-top: 5px;
+}
+
 #ck-button label span {
     text-align:center;
     padding:3px;
@@ -853,12 +866,26 @@ body {
     border-bottom: 2px solid #fff;
 }
 
+#ck-button-long label span {
+    text-align:center;
+    padding:3px;
+    display:block;
+    background-color: #E8E0E0;
+    color: #8D8888;
+}
+
 #ck-button label input {
     position:absolute;
     top:-20px;
     display:none;
 }
 
+#ck-button-long label input {
+    position:absolute;
+    top:-20px;
+    display:none;
+}
+
 #ck-button input:hover + span {
    background-color: #FFFFFF;
     color: #000000;
@@ -868,6 +895,17 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
+#ck-button-long input:hover + span {
+   background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+    background-size: contain;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+}
+
+
 #ck-button input:checked + span {
     background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
     background-size: contain;
@@ -878,6 +916,16 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
+#ck-button-long input:checked + span {
+    background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+    background-size: contain;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+}
+
 #ck-button input:checked:hover + span {
    background-color: #FFFFFF;
     color: #000000;
@@ -887,6 +935,15 @@ body {
     border-right: 1px solid #E3E9EB;
 }
 
+#ck-button-long input:checked:hover + span {
+   background-color: #FFFFFF;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+}
+
 /* ProteinDomainComplexTypeForm */
 
 #id_ProteinDomainComplexTypeForm-inhibited {
@@ -1548,6 +1605,18 @@ button, input, select, textarea {
     margin-bottom: 15px;
 }
 
+.step_title{
+    font-family: "PlayfairDisplayRed";
+    font-size: 25px;
+    padding-bottom: 10px;
+}
+
+.step_step {
+    padding-bottom: 10px;
+    color: #8D8889;
+    font-size: 15px;
+}
+
 .step_step_desc {
     padding: 15px;
     margin-bottom: 15px;
@@ -1555,6 +1624,170 @@ button, input, select, textarea {
     margin-right: -150px;
 }
 
+.compound{
+    background-color: #E3E9EB;
+    margin-left: -60%;
+    margin-right: -60%;
+    padding: 5%;
+}
+
+.compound h1 {
+    text-align: left;
+    color: #414144;
+    font-size: 42px;
+    padding-bottom: 1%;
+}
+
+.compound h2 {
+    text-align: left;
+    padding-bottom: 1%;
+}
+
+.compound_input {
+    margin-bottom: 5px;
+}
+
+#compound_mol {
+    overflow: hidden;
+    display: flex;
+    padding-bottom: 5px;
+}
+
+/* Background image classes */
+.compound_radio_smiles input {
+    display:none;
+}
+
+.compound_radio_smiles label span{
+  display: inline-block;
+  width: 350px;
+  text-align: center;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/SMILESIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 214px;
+  font-size: 12px;
+  opacity: 0.5;
+
+} 
+
+.compound_radio_smiles input:hover+label span{
+    cursor: pointer;
+    background-color: #FFFFFF;
+    background-image: url('/static/images/Other/SMILESIcon.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+    opacity: 1.0;
+}
+
+.compound_radio_smiles input[type="radio"]:checked+label span{
+    background-color: #FFFFFF;
+    background-image: url('/static/images/Other/SMILESIcon.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+    opacity: 1.0;
+}
+
+.compound_radio_iupac input {
+    display:none;
+}
+
+.compound_radio_iupac label span{
+  display: inline-block;
+  width: 350px;
+  text-align: center;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/IUPACIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 214px;
+  font-size: 12px;
+  opacity: 0.5;
+
+} 
+
+.compound_radio_iupac input:hover+label span{
+    cursor: pointer;
+    background-color: #FFFFFF;
+    background-image: url('/static/images/Other/IUPACIcon.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+    opacity: 1.0;
+}
+
+.compound_radio_iupac input[type="radio"]:checked+label span{
+    background-color: #FFFFFF;
+    background-image: url('/static/images/Other/IUPACIcon.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+    opacity: 1.0;
+}
+
+.compound_radio_sketch input {
+    display:none;
+}
+
+.compound_radio_sketch label span{
+  display: inline-block;
+  width: 350px;
+  text-align: center;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/SketchIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 214px;
+  font-size: 12px;
+  opacity: 0.5;
+
+} 
+
+.compound_radio_sketch input:hover+label span{
+    cursor: pointer;
+    background-color: #FFFFFF;
+    background-image: url('/static/images/Other/SketchIcon.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+    opacity: 1.0;
+}
+
+.compound_radio_sketch input[type="radio"]:checked+label span{
+    background-color: #FFFFFF;
+    background-image: url('/static/images/Other/SketchIcon.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    color: #000000;
+    border-bottom: 1px solid #2D96FA;
+    border-top: 1px solid #E3E9EB;
+    border-left: 1px solid #E3E9EB;
+    border-right: 1px solid #E3E9EB;
+    opacity: 1.0;
+}
 
 .small_icon {
     width:30%;
diff --git a/ippisite/ippidb/static/images/Other/IUPACIcon.png b/ippisite/ippidb/static/images/Other/IUPACIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..031fb0e44b8feca9e82da87a6182348988796e16
GIT binary patch
literal 8727
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
EKj?(t>Hq)$

literal 0
HcmV?d00001

diff --git a/ippisite/ippidb/static/images/Other/SMILESIcon.png b/ippisite/ippidb/static/images/Other/SMILESIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c03d871705e185c1bb1fa8518be6d655c6ad6b5
GIT binary patch
literal 5350
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

literal 0
HcmV?d00001

diff --git a/ippisite/ippidb/static/images/Other/SketchIcon.png b/ippisite/ippidb/static/images/Other/SketchIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0323041edf14ebd73dd534829f2e76fdce9d343b
GIT binary patch
literal 6044
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
HhuHrDd|R~i

literal 0
HcmV?d00001

diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js
index e954707f..df6776b6 100644
--- a/ippisite/ippidb/static/js/ippidb.js
+++ b/ippisite/ippidb/static/js/ippidb.js
@@ -1,10 +1,11 @@
 // Function to hide/show infos contain in a div
 
 
-// Function to hide/show architectures according to the chosen type of complex
+// ProteinDomainComplexTypeForm - Function to hide/show architectures according to the chosen type of complex
 $(document).ready(function(){
 $("select").change(function(){
-    $(this).find("option:selected").each(function(){
+    $(this).find("option:checked").each(function(){
+        console.log("test:",$(this).attr("value"));
         if($(this).attr("value")=="inhibited"){
             $(".boxs").not(".inhibited").hide();
             $(".inhibited").show();
@@ -18,6 +19,41 @@ $("select").change(function(){
 }).change();
 });
 
+// CompoundForm - Update compound name in div
+function AnEventHasOccurred() {
+    console.log("Compound "+ document.getElementById("compound_name").value);
+document.getElementById("compoundName").innerHTML = "Compound "+ document.getElementById("compound_name").value;
+}
+
+
+
+
+// CompoundForm - Function to hide/show input field according to the chosen type of molecule 
+function showSmiles(){
+  document.getElementById('divSmiles').style.display ='block';
+  document.getElementById('divIupac').style.display ='none';
+  document.getElementById('divSketch').style.display ='none';
+  document.getElementById('in-smiles').required=true;
+  document.getElementById('in-sketch').required=false;
+  document.getElementById('in-iupac').required=false;
+}
+function showIupac(){
+    document.getElementById('divSmiles').style.display ='none';
+  document.getElementById('divIupac').style.display ='block';
+  document.getElementById('divSketch').style.display ='none';
+  document.getElementById('in-smiles').required=false;
+  document.getElementById('in-iupac').required=true;
+  document.getElementById('in-sketch').required=false;
+}
+function showSketch(){
+  document.getElementById('divSmiles').style.display ='none';
+  document.getElementById('divIupac').style.display ='none';
+  document.getElementById('divSketch').style.display ='block';
+  document.getElementById('in-smiles').required=false;
+  document.getElementById('in-iupac').required=false;
+  document.getElementById('in-sketch').required=true;
+}
+
 // Function to enlarge some part of the main page
 $(document).ready(function(){
     $('.box').on('click','.box__inner',function() {
diff --git a/ippisite/ippidb/templates/BibliographyForm.html b/ippisite/ippidb/templates/BibliographyForm.html
index 5e036482..508db7e6 100644
--- a/ippisite/ippidb/templates/BibliographyForm.html
+++ b/ippisite/ippidb/templates/BibliographyForm.html
@@ -16,6 +16,8 @@
 </div>
 <div id="Form">
 	<div class="step_desc">
+		<h1 class="step_title">Bibliography informations</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
 	<p> According to the ID you gave, here are the informations that we collect. Could you complete informations contained in it. </p>
 	</div>
 	<div class="form_div">
diff --git a/ippisite/ippidb/templates/CompoundForm.html b/ippisite/ippidb/templates/CompoundForm.html
index 2de366ec..21eba349 100644
--- a/ippisite/ippidb/templates/CompoundForm.html
+++ b/ippisite/ippidb/templates/CompoundForm.html
@@ -16,7 +16,9 @@
 </div>
 <div id="Form">
 	<div class="step_desc">
-	<p> Activity test </p>
+		<h1 class="step_title">Sketch your compounds</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate felis ac augue pretium, ac blandit lectus mattis. Vestibulum iaculis consequat facilisis. Duis porttitor erat mauris, non porttitor eros feugiat eu. Pellentesque id nisl vel nisl imperdiet convallis vel sed lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dolor urna, posuere vitae leo quis, hendrerit imperdiet enim. Nunc nec euismod nisi. Phasellus ut ante ante.</p>
 	</div>
 	<div class="form_div">
 		<form action="" method="post">
@@ -33,7 +35,51 @@
 				    {{ form }}
 				{% endfor %}
 			{% else %}
-				{{ wizard.form }}
+				<div class="compound">
+					<h1 id="compoundName">Compound</h1>
+						<h2>Name your compound</h2>
+						<div class="compound_input">{{ wizard.form.common_name }}</div>
+						<div class="compound_input"><input id="compound_name" name="compound_name" type="text" placeholder="Name in bibliography" required/ onkeyup="AnEventHasOccurred()"></div>
+						<h2>Choose a format to import your molecule</h2>
+						<div id="compound_mol">
+							<div class="compound_radio_smiles">
+								<input type="radio" name="molecule" value="smiles" id="smiles" onclick="showSmiles();" checked="checked">
+								<label for="smiles">
+									<span>SMILES</span>
+								</label>
+							</div>
+							<div class="compound_radio_iupac">
+								<input type="radio" name="molecule" value="iupac" id="iupac" onclick="showIupac();">
+								<label for="iupac">
+									<span>
+										IUPAC
+									</span>
+								</label>
+							</div>
+							<div class="compound_radio_sketch">
+								<input type="radio" name="molecule" value="sketch" id="sketch" onclick="showSketch();">
+								<label for="sketch">
+									<span>
+										Sketch
+									</span>
+								</label>
+							</div>
+						</div>
+						<div id="divSmiles">
+							<input type="text" name="smiles" id="in-smiles" placeholder="Paste the SMILES of your molecule here" required>
+						</div>
+						<div id="divIupac" class="hide">		
+							<input type="text" name="iupac" id="in-iupac" placeholder="Paste the IUPAC of your molecule here">
+						</div>
+						<div id="divSketch" class="hide">
+							<input type="text" name="sketch" id="in-sketch" placeholder="Sketch your molecule here">
+						</div>
+						<div id="ck-button-long" class="compound_input">
+						<label>
+					      <input name="is_macrocycle" type="checkbox"><span>{{ wizard.form.is_macrocycle.label }}</span>
+					  </label>
+					  </div>
+				</div>
 			{% endif %}
 			</table>
 			<input type="submit" value="{% trans "Next step" %}"/>
diff --git a/ippisite/ippidb/templates/IdForm.html b/ippisite/ippidb/templates/IdForm.html
index 32012a69..5b8e04a1 100644
--- a/ippisite/ippidb/templates/IdForm.html
+++ b/ippisite/ippidb/templates/IdForm.html
@@ -16,6 +16,8 @@
 </div>
 <div id="Form">
 	<div class="step_desc">
+	<h1 class="step_title">Let's get started!</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
 	<p> Please provide a valid ID for your bibliographic source, either a PubMed ID or WIPO ID. This ID should correspond to a bibliographic source in its final format. Therefore, PubMed articles in « Just Accepted » format should not be used as a source of data as they are not considered the official version of record. </p>
 	</div>
 	<div class="form_div">
diff --git a/ippisite/ippidb/templates/PDBForm.html b/ippisite/ippidb/templates/PDBForm.html
index ca3fb8a5..12d439ac 100644
--- a/ippisite/ippidb/templates/PDBForm.html
+++ b/ippisite/ippidb/templates/PDBForm.html
@@ -16,7 +16,9 @@
 </div>
 <div id="Form">
 	<div class="step_desc">
-	<p>Please provide a valid PDB code that contains the structure of the full PPI complex for which you have data. If you have several PDB codes please list them all as they may contain information about homologous protein partners. The information within the PDB file will be used to prefill information of the corresponding proteins and domains participating to the PPI.</p>
+		<h1 class="step_title">Your PDB ID please</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
+	<p>Please provide a valid PDB code that contains the structure of the full PPI complex for which you have data. The information within the PDB file will be used to prefill information of the corresponding proteins and domains participating to the PPI.</p>
 	</div>
 	<div class="form_div">
 		<form action="" method="post">
diff --git a/ippisite/ippidb/templates/PpiForm.html b/ippisite/ippidb/templates/PpiForm.html
index 5c30ad21..48c98c67 100644
--- a/ippisite/ippidb/templates/PpiForm.html
+++ b/ippisite/ippidb/templates/PpiForm.html
@@ -16,6 +16,8 @@
 </div>
 <div id="Form">
 	<div class="step_desc">
+		<h1 class="step_title">PPI symmetry</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
 	<p>You have selected a <span style="color:#2d96fa;">{{ complex_type }}</span> that is <span style="color:#2d96fa;">{{ complex_choice }}</span> by the binding of PPI modulator. <br/>
 	Now that you have created a complexe that participate to the formation of the PPI, please choose the stoichiometry of the PPI.</p>
 	</div>
@@ -35,10 +37,12 @@
 				{% endfor %}
 			{% else %}
 			<div class="inline_box_complex">
+				{{PpiComplexForm}}
+				{{PpiForm}}
 				<div class="inline_label"> PPI: </div>
-				<div class="PperPocket">{{ form.pdb_id }}</div>
-				<div clas="inline_label">{{ form.pockets_nb}}</div>
-				<div class="inline_field"> {{ form.symmetry }}</div>
+				<div>{{ wizard.form.pdb_id }}</div>
+				<div class="inline_field">{{ wizard.form.cc_nb }}</div>
+				<div class="inline_field">{{ wizard.form.symmetry }}</div>
 			</div>
 			{% endif %}
 			</table>
diff --git a/ippisite/ippidb/templates/ProteinDomainComplexForm.html b/ippisite/ippidb/templates/ProteinDomainComplexForm.html
index 18853d92..20264b5e 100644
--- a/ippisite/ippidb/templates/ProteinDomainComplexForm.html
+++ b/ippisite/ippidb/templates/ProteinDomainComplexForm.html
@@ -31,6 +31,8 @@
 				{% endfor %}
 			{% else %}
 				<div class="step_step_desc">
+					<h1 class="step_title">Bound and Partner</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
 						<p>You have selected a <span style="color:#2d96fa;">{{ complex_type }}</span> that is <span style="color:#2d96fa;">{{ complex_choice }}</span> by the binding of PPI modulator.<br/>
 						According to this architecture you need to specify:<br/>
 						</p>
diff --git a/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html b/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
index 6fcd1e03..76fc071f 100644
--- a/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
+++ b/ippisite/ippidb/templates/ProteinDomainComplexTypeForm.html
@@ -16,8 +16,10 @@
 </div>
 <div id="Form">
 	<div class="step_desc">
+		<h1 class="step_title">Which architecture fits your PPI?</h1>
+	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
 	<p>Now you need to select an architecture for the PPI complex among the proposed schematics below.</br>
-If your PPI complex is not among them, please select « Custom » {{ pdb }}</p>
+If your PPI complex is not among them, please select « Custom »</p>
 	</div>
 		<div class="form_div">
 		<form action="" method="post">
diff --git a/ippisite/ippidb/templates/add.html b/ippisite/ippidb/templates/add.html
index 2e6b988e..c6357a68 100644
--- a/ippisite/ippidb/templates/add.html
+++ b/ippisite/ippidb/templates/add.html
@@ -9,13 +9,13 @@
         <div class="inner-wrap">
             <ul>
             	<li>
-                    <a href="/admin-session/view">View Content</a>
+                    <a href="/compound/">View Content</a>
                 </li>
                 <li>
-                    <a href="/admin-session/add">Add New Content</a>
+                    <a href="/admin-session/add/IdForm">Add New Content</a>
                 </li>
                 <li>
-                    <a hfref="/admin-session/update">Update Content</a>
+                    <a href="/admin-session/update">Update Content</a>
                 </li>
             </ul>
         </div>
diff --git a/ippisite/ippidb/templates/compound_list.html b/ippisite/ippidb/templates/compound_list.html
index 26917de7..553101a4 100644
--- a/ippisite/ippidb/templates/compound_list.html
+++ b/ippisite/ippidb/templates/compound_list.html
@@ -9,13 +9,13 @@
         <div class="inner-wrap">
             <ul>
               <li>
-                    <a href="/admin-session/view">View Content</a>
+                    <a href="/compound/">View Content</a>
                 </li>
                 <li>
-                    <a href="/admin-session/add">Add New Content</a>
+                    <a href="/admin-session/add/IdForm">Add New Content</a>
                 </li>
                 <li>
-                    <a hfref="/admin-session/update">Update Content</a>
+                    <a href="/admin-session/update">Update Content</a>
                 </li>
             </ul>
         </div>
diff --git a/ippisite/ippidb/views.py b/ippisite/ippidb/views.py
index 2866d6ea..689bc0f9 100644
--- a/ippisite/ippidb/views.py
+++ b/ippisite/ippidb/views.py
@@ -4,7 +4,7 @@ from django.shortcuts import render
 from django.http import HttpResponseRedirect, Http404
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 from formtools.wizard.views import SessionWizardView, NamedUrlSessionWizardView
-from .forms import IdForm, BibliographyForm, PDBForm, ProteinForm, ProteinDomainComplexTypeForm, ProteinDomainComplexForm, PpiForm, ProteinFormSet,ActivityForm, CompoundForm
+from .forms import IdForm, BibliographyForm, PDBForm, ProteinForm, ProteinDomainComplexTypeForm, ProteinDomainComplexForm, PpiForm, PpiComplexForm, ProteinFormSet,ActivityForm, CompoundForm
 from .models import Protein, Bibliography, ProteinDomainComplex, RefCompoundBiblio, TestActivityDescription, Compound, Ppi
 from .ws import get_pdb_uniprot_mapping
 
@@ -66,7 +66,7 @@ TEMPLATES = {"IdForm": "IdForm.html",
              "PDBForm": "PDBForm.html",
              "ProteinDomainComplexTypeForm": "ProteinDomainComplexTypeForm.html",
              "ProteinDomainComplexForm": "ProteinDomainComplexForm.html",
-             "PpiForm": "PpiForm.html",             
+             "PpiForm": "PpiForm.html", 
              "CompoundForm":"CompoundForm.html",
              "ActivityForm":"ActivityForm.html",
              }
-- 
GitLab