@igea/oac_frontend 1.0.95 → 1.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.95",
+  "version": "1.0.96",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "bin": {

package/src/controllers/investigation.js

@@ -12,7 +12,8 @@ module.exports = function(serviceName) {
             root: serviceName, 
             title: 'Investigation Creation',
             currentPath:  req.baseUrl +req.path,
-            uuid
+            uuid,
+            mode: 'edit'
         });    
         res.render('investigation/form.twig', data.toJson()); 
     }
@@ -25,6 +26,23 @@ module.exports = function(serviceName) {
         renderForm(req, res, req.params.uuid);
     });
 
+    router.get('/view/:uuid', (req, res) => {
+        const { uuid } = req.params;
+
+        let data = new DataModel(req, {
+            root: serviceName,
+            title: 'Indagine viewer',
+            uuid,
+
+            // 👇 NASCONDE MENU E SIDEBAR
+            activeMenu: null,
+            activeSidebar: null,
+            activeSidebarItem: null
+        });
+
+        res.render('investigation/view.twig', data.toJson());
+    });
+
     return router
 }
 

package/src/index.js

@@ -253,6 +253,7 @@ app.get('/frontend/v2/investigation/form', async (req, res) => {
     title: 'Indagine',
     activeMenu: 'investigation',
 activeSidebar: 'investigation',
+activeSidebarItem: 'investigation',
     showForm: true
   });
 

package/src/public/js/app/vue-investigation.js

@@ -36,7 +36,11 @@ const KEEP_LOCK_EVERY = 45*1000;
 document.addEventListener('DOMContentLoaded', () => {
 
     // App separata per l'autocomplete
-    if (typeof __AUTO_COMPLETE_COMPONENT__ !== 'undefined') {
+
+    const elSearch = document.getElementById(searchId);
+
+    if (elSearch && typeof __AUTO_COMPLETE_COMPONENT__ !== 'undefined') {
+    //if (typeof __AUTO_COMPLETE_COMPONENT__ !== 'undefined') {
         try {
             const elSearch = document.getElementById(searchId);
             const searchApp = createApp({
@@ -131,9 +135,9 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (error) {
             console.error('Error mounting search app:', error);
         }
-    } else {
+    } /*else {
         console.error('__AUTO_COMPLETE_COMPONENT__ not defined');
-    }
+    }*/
 
     const el = document.getElementById(appId);
 
@@ -178,9 +182,16 @@ document.addEventListener('DOMContentLoaded', () => {
             }    
         },
         mounted() {
-            if (showForm) {
+            console.log("UUID da dataset:", this.uuid);
+            if (showForm && this.uuid == null) {
                 this.resetShaclForm(null, true);
             }
+            else
+                if (showForm && this.uuid) {
+                    this.isVisible = true;
+                    this.inEditing = true;
+                    this.resetShaclForm(this.uuid, true); // ❌ uuid non definito
+                }
 
             this.initShaclForm();
             setInterval(this.autoSave.bind(this), 30*1000);
@@ -303,19 +314,17 @@ document.addEventListener('DOMContentLoaded', () => {
                 form.remove();
             },
             resetShaclForm(uuid, edit) {
-                // Trova il form esistente
                 const oldForm = document.querySelector("shacl-form");
                 const parent = document.getElementById("shacl-container");
-                
+
                 if (oldForm) oldForm.remove();
-                if(!parent){
-                    setTimeout((function(){
-                        this.resetShaclForm(uuid, edit);
-                    }).bind(this), 150);
+                if (!parent) {
+                    setTimeout(() => {
+                    this.resetShaclForm(uuid, edit);
+                    }, 150);
                     return;
                 }
 
-                // Crea un nuovo shacl-form con gli stessi attributi
                 const newForm = document.createElement("shacl-form");
                 newForm.id = "shacl-form";
                 newForm.dataset.collapse = "open";
@@ -323,27 +332,27 @@ document.addEventListener('DOMContentLoaded', () => {
                 newForm.dataset.shapesUrl = "/backend/ontology/schema/editing";
                 newForm.dataset.generateNodeShapeReference = "";
 
-                //newForm.dataset.editing = edit;
-                if(!edit){
+                if (!edit) {
                     newForm.dataset.view = "";
                 }
-                
-                newForm.dataset.shapeSubject="http://example.org/shapes/E7Activity01Shape";
-                    
-                if(uuid){
-                    var rnd = (new Date()).getTime();
-                    newForm.dataset.valuesUrl="/backend/ontology/form/" + uuid + "?rnd=" + rnd;
-                    newForm.dataset.valuesSubject="http://indagine/" + uuid;
+
+                newForm.dataset.shapeSubject =
+                    "http://example.org/shapes/E7Activity01Shape";
+
+                // ✅ QUESTO È IL PEZZO MANCANTE
+                if (uuid) {
+                    const rnd = Date.now();
+                    newForm.dataset.valuesUrl =
+                    "/backend/ontology/form/" + uuid + "?rnd=" + rnd;
+                    newForm.dataset.valuesSubject =
+                    "http://indagine/" + uuid;
                 }
 
-                // Inserisci il nuovo form
                 parent.appendChild(newForm);
 
-                // Resetta il riferimento e reinizializza
                 this.form = null;
                 this.initShaclForm(uuid);
-                
-            },
+                },
             initShaclForm(uuid) {
                 var _this = this;
                 setTimeout(async ()=>{

package/src/public/js/lib/sparnatural-main.js

@@ -5,113 +5,309 @@
 // reference to the sparnatural webcomponent
 const sparnatural = document.querySelector("spar-natural");
 
-// display on the page the endpoint URL with which sparnatural is configured
-//document.querySelector("#displayEndpoint").setAttribute("href", sparnatural.getAttribute("endpoint"));
-//document.querySelector("#displayEndpoint").textContent = sparnatural.getAttribute("endpoint");
+/* =========================
+   VIEW MODE (radio buttons)
+========================= */
+
+let viewMode = "direct";
+
+document.querySelectorAll('input[name="viewMode"]').forEach(radio => {
+  radio.addEventListener("change", e => {
+    viewMode = e.target.value;
+	sparnatural.enablePlayBtn();
+    console.log("View mode:", viewMode);
+  });
+});
+
+/* =========================
+   INDAGINE RESOLVERS MAP
+========================= */
+
+const INDAGINE_RESOLVERS = {
+  "crm:E39_Actor": {
+    property: "crm:P14_carried_out_by"
+  },
+  "crm:E42_Identifier": {
+    property: "crm:P48_has_preferred_identifier"
+  },
+  "crm:E55_Type": {
+    property: "crm:P2_has_type"
+  },
+  "base:I12_Adopted_Belief": {
+    property: "crm:P17_was_motivated_by"
+  },
+  "j.0:S13_Sample": {
+    property: "crm:P16_used_specific_object"
+  }
+};
+
+/* =========================
+   YASQE INIT
+========================= */
 
-// init yasQE query editor
 const yasqe = new Yasqe(document.getElementById("yasqe"), {
-	requestConfig: {
-	  // make sure the endpoint is the same as sparnatural
-	  endpoint: sparnatural.getAttribute("endpoint"),
-	  method: "GET",
-	  header: {}
-	},
-	copyEndpointOnNewTab: false  
+  requestConfig: {
+    endpoint: sparnatural.getAttribute("endpoint"),
+    method: "GET",
+    header: {}
+  },
+  copyEndpointOnNewTab: false
 });
 
-// init yasR result display
-// register a specific plugin that is capable of displaying clikable label + URI
-Yasr.registerPlugin("TableX",SparnaturalYasguiPlugins.TableX);
-Yasr.registerPlugin("Grid",SparnaturalYasguiPlugins.GridPlugin);
-delete Yasr.plugins['table'];
+/* =========================
+   YASR INIT
+========================= */
 
+Yasr.registerPlugin("TableX", SparnaturalYasguiPlugins.TableX);
+Yasr.registerPlugin("Grid", SparnaturalYasguiPlugins.GridPlugin);
+delete Yasr.plugins['table'];
 
 const yasr = new Yasr(document.getElementById("yasr"), {
-	pluginOrder: ["TableX", "Grid", "response"],
-	defaultPlugin: "TableX"
+  pluginOrder: ["TableX", "Grid", "response"],
+  defaultPlugin: "TableX"
 });
 
-yasr.plugins["TableX"].config.uriHrefAdapter = function(uri) {
-	if(uri.startsWith("http://diagnostica/") || uri.startsWith("http://indagine/")) {
-		return "/frontend/v2/rdf/view?iri=" + encodeURIComponent("<" + uri + ">");
-	} else {
-		return uri;
-	}
+yasr.plugins["TableX"].config.uriHrefAdapter = function (uri) {
+
+  // modalità "indagine": link diretto al form SHACL
+  if (viewMode === "indagine" && uri.startsWith("http://indagine/")) {
+    const id = uri.split("/").pop();
+    return `/frontend/investigation/view/${id}`;
+  }
+
+  // modalità "direct": comportamento attuale
+  if (viewMode === "direct" && uri.startsWith("http://indagine/")) {
+    return "/frontend/v2/rdf/view?iri=" + encodeURIComponent("<" + uri + ">");
+  }
+
+  // fallback
+  return uri;
 };
 
-// link yasqe and yasr
-yasqe.on("queryResponse", function(_yasqe, response, duration) {
-	yasr.setResponse(response, duration);
-	// when response is received, enable the button
-	sparnatural.enablePlayBtn();
+
+/* =========================
+   QUERY RESPONSE HANDLER
+========================= */
+
+yasqe.on("queryResponse", function (_yasqe, response, duration) {
+  yasr.setResponse(response, duration);
+
+	if (viewMode === "indagine") {
+		resolvedIndagini.clear();
+		const sparqlResponse = normalizeSparqlResponse(response);
+		if (sparqlResponse) {
+			resolveIndagini(sparqlResponse);
+		}
+	}
+
+
+  sparnatural.enablePlayBtn();
 });
 
+/* =========================
+   RESOLVER PIPELINE
+========================= */
+
+function resolveIndagini(response) {
+  const uris = extractUrisFromResponse(response);
+
+  console.log("URIs trovate:", uris);
+
+  uris.forEach(uri => {
+    resolveIndagineFromUri(uri);
+  });
+}
+
+function resolveIndagineFromUri(uri) {
+  const typeQuery = `
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+
+SELECT DISTINCT ?type
+WHERE {
+  <${uri}> rdf:type ?type .
+}
+LIMIT 10
+`;
+
+  fetchSparql(typeQuery).then(data => {
+    const types = data.results.bindings
+	.map(b => normalizeRdfType(b.type.value))
+	.filter(Boolean);
+
+	console.log("Tipi normalizzati:", types);
+
+	types.forEach(t => {
+	const resolver = INDAGINE_RESOLVERS[t];
+	if (!resolver) return;
+
+	const q = buildResolverQuery(uri, resolver.property);
+	fetchIndagini(q);
+	});
+
+  });
+}
+
+let resolvedIndagini = new Set();
+
+function fetchIndagini(query) {
+  fetchSparql(query).then(data => {
+    const bindings = data.results?.bindings || [];
+
+    bindings.forEach(b => {
+      if (b.indagine?.type === "uri") {
+        resolvedIndagini.add(b.indagine.value);
+      }
+    });
+
+    // quando finiamo di risolvere, aggiorniamo la UI
+    renderIndaginiResults();
+  });
+}
+
+function renderIndaginiResults() {
+  const bindings = Array.from(resolvedIndagini).map(uri => ({
+    indagine: {
+      type: "uri",
+      value: uri
+    }
+  }));
+
+  const fakeResponse = {
+    head: {
+      vars: ["indagine"]
+    },
+    results: {
+      bindings
+    }
+  };
+
+  console.log("SPARQL response (indagini):", fakeResponse);
+
+  yasr.setResponse(fakeResponse);
+}
+
+
+/* =========================
+   SPARQL HELPERS
+========================= */
+
+function fetchSparql(query) {
+  const url =
+    sparnatural.getAttribute("endpoint") +
+    "?query=" + encodeURIComponent(query);
+
+  return fetch(url).then(r => r.json());
+}
+
+function extractUrisFromResponse(response) {
+  const vars = response.head.vars;
+  const results = response.results.bindings;
+  const uris = [];
+
+  results.forEach(row => {
+    vars.forEach(v => {
+      if (row[v]?.type === "uri") {
+        uris.push(row[v].value);
+      }
+    });
+  });
+
+  return [...new Set(uris)];
+}
+
+
+function normalizeSparqlResponse(response) {
+  if (response?.head && response?.results) {
+    return response; // già ok
+  }
+
+  if (typeof response?.text === "string") {
+    try {
+      return JSON.parse(response.text);
+    } catch (e) {
+      console.error("Errore parsing SPARQL JSON", response.text);
+    }
+  }
+
+  console.warn("Formato response SPARQL non riconosciuto", response);
+  return null;
+}
+
+function normalizeRdfType(uri) {
+  if (!uri) return null;
+
+  // CIDOC CRM
+  if (uri.startsWith("http://www.cidoc-crm.org/cidoc-crm/")) {
+    return "crm:" + uri.split("/").pop();
+  }
+
+  // CRMsci / j.0
+  if (uri.startsWith("http://www.cidoc-crm.org/extensions/crmsci/")) {
+    return "j.0:" + uri.split("/").pop();
+  }
+
+  // base CPM / CRMinf (adatta se necessario)
+  if (uri.startsWith("http://ontome.net/ns/cpm/")) {
+    return "base:" + uri.split("/").pop();
+  }
+
+  // fallback: ultimo frammento
+  return uri.split("/").pop();
+}
+
+/* =========================
+   SPARQL QUERY BUILDER
+========================= */
+
+function buildResolverQuery(uri, property) {
+  return `
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/>
+
+SELECT DISTINCT ?indagine
+WHERE {
+  ?indagine rdf:type crm:E7_Activity ;
+            ${property} <${uri}> .
+}
+`;
+}
+
+/* =========================
+   SPARNATURAL EVENTS
+========================= */
 
 sparnatural.addEventListener("init", (event) => {
-	// notify the specification to yasr plugins
-	for (const plugin in yasr.plugins) {
-	  if (yasr.plugins[plugin].notifyConfiguration) {
-	    yasr.plugins[plugin].notifyConfiguration(
-	      event.detail.config
-	    );
-	  }
-	}
+  for (const plugin in yasr.plugins) {
+    if (yasr.plugins[plugin].notifyConfiguration) {
+      yasr.plugins[plugin].notifyConfiguration(event.detail.config);
+    }
+  }
 });
 
-// listener when sparnatural updates the query
-// see http://docs.sparnatural.eu/Javascript-integration.html#sparnatural-events
 sparnatural.addEventListener("queryUpdated", (event) => {
-	// get the SPARQL query string, and pass it to yasQE
-	queryString = sparnatural.expandSparql(event.detail.queryString);
-	yasqe.setValue(queryString);
-	// display the JSON query on the console
-	console.log("Sparnatural JSON query structure:");
-	console.dir(event.detail.queryJson);
-
-	// notify the query to yasr plugins
-	for (const plugin in yasr.plugins) {
-	  if (yasr.plugins[plugin].notifyQuery) {
-	    yasr.plugins[plugin].notifyQuery(event.detail.queryJson);
-	  }
-	}
-});
+  const queryString = sparnatural.expandSparql(event.detail.queryString);
+  yasqe.setValue(queryString);
 
-// listener when the sparnatural submit button is clicked
-// see http://docs.sparnatural.eu/Javascript-integration.html#sparnatural-events
-sparnatural.addEventListener("submit", (event) => {
-	// enable loader on button
-	sparnatural.disablePlayBtn() ; 
-	// trigger the query from YasQE
-	yasqe.query();
+  console.log("Sparnatural JSON query:");
+  console.dir(event.detail.queryJson);
 });
 
-// listener when the sparnatural reset button is clicked
-// see http://docs.sparnatural.eu/Javascript-integration.html#sparnatural-events
-sparnatural.addEventListener("reset", (event) => {
-	// empties the SPARQL query on yasQE
-	yasqe.setValue("");
+sparnatural.addEventListener("submit", () => {
+  sparnatural.disablePlayBtn();
+  yasqe.query();
 });
 
-// hide/show yasQE
-document.getElementById('sparql-toggle').onclick = function() {
-	if(document.getElementById('yasqe').style.display == 'none') {
-	  document.getElementById('yasqe').style.display = 'block';
-	  yasqe.setValue(yasqe.getValue());
-	  yasqe.refresh();
-	} else {
-	  document.getElementById('yasqe').style.display = 'none';
-	}
-	return false;        
-} ;
-
-/*
-const treeValues = [
-	{ label: "Fruit", children: ["Apple", "Orange", "Banana"] },
-	{ label: "Vegetables", children: ["Carrot", "Lettuce"] }
-];
-
-const widget = new TreeSelectWidget("myWidgetContainer", treeValues);
-*/
+sparnatural.addEventListener("reset", () => {
+  yasqe.setValue("");
+});
 
+/* =========================
+   TOGGLE SPARQL EDITOR
+========================= */
 
+document.getElementById('sparql-toggle').onclick = function () {
+  const el = document.getElementById('yasqe');
+  el.style.display = el.style.display === 'none' ? 'block' : 'none';
+  yasqe.refresh();
+  return false;
+};

package/src/public/v2/css/v2.css

@@ -100,7 +100,7 @@ body.layout-v2 {
   background-image: url('/frontend/v2/images/banner.png');
   background-repeat: no-repeat;
   background-size: contain;
-  background-position: top center;
+  background-position: top left;
   background-color: #B1A891;
 }
 
@@ -607,5 +607,61 @@ body.layout-v2 {
   object-fit: contain;
   flex-shrink: 0;
 }
+/* =====================================================
+   PARTECIPANTI – ACCORDION (SPAZIO BIANCO REALE)
+   ===================================================== */
+
+.department-banner {
+  position: relative;
+  height: 90px;
+  padding: 20px;
+
+  display: flex;
+  align-items: center;
+
+  background-size: cover;
+  background-position: center;
+  border-radius: 4px;
+
+  filter: grayscale(100%);
+}
+
+.department-name {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.9);
+}
 
 
+.department-people {
+  font-size: 1.05rem;
+  font-weight: 600;
+
+  color: #ffffff;                 /* 🔑 bianco pieno */
+  letter-spacing: 0.2px;
+
+  text-shadow:
+    0 1px 2px rgba(0,0,0,0.45);    /* 🔑 aiuta molto */
+}
+
+
+.department-overlay {
+  position: relative;
+  z-index: 1;
+}
+
+
+.department-banner::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+
+  background: linear-gradient(
+    to right,
+    rgba(0,0,0,0.35),
+    rgba(0,0,0,0.10)
+  );
+
+  border-radius: 4px;
+  z-index: 0;
+}

package/src/public/v2/js/v2.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   /* =========================
-   * TOP MENU 
+   * TOP MENU
    * ========================= */
   const topMenuEl = document.querySelector('#top-menu');
   if (topMenuEl) {
@@ -28,4 +28,42 @@ document.addEventListener('DOMContentLoaded', () => {
     }).mount(sidebarEl);
   }
 
+
+    /* =========================
+   * SIDEBAR PRESENTAZIONE
+   * ========================= */
+  const sidebarInd = document.querySelector('#sidebar-investigation');
+  if (sidebarInd) {
+    const activeItem = document.body.dataset.activeSidebarItem || '';
+
+    Vue.createApp({
+      data() {
+        return { activeItem };
+      }
+    }).mount(sidebarInd);
+  }
+  /* =========================
+   * PARTECIPANTI – ACCORDION
+   * ========================= */
+  const accordionHeaders = document.querySelectorAll('.accordion-trigger');
+  if (accordionHeaders.length) {
+
+    accordionHeaders.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const item = btn.closest('.department-banner');
+        if (!item) return;
+
+        // Chiude gli altri accordion aperti
+        document.querySelectorAll('.department-banner.open')
+          .forEach(el => {
+            if (el !== item) el.classList.remove('open');
+          });
+
+        // Toggle dell’elemento corrente
+        item.classList.toggle('open');
+      });
+    });
+
+  }
+
 });

package/src/views/investigation/view.twig

@@ -0,0 +1,155 @@
+{% extends "/v2/layout.twig" %}
+
+{# --------------------------------------------------
+   Forziamo modalità viewer:
+   - niente sidebar
+   - header minimale
+-------------------------------------------------- #}
+{% set activeMenu = null %}
+{% set activeSidebar = null %}
+{% set activeSidebarItem = null %}
+
+{% block extendHead %}
+
+  {# SHACL FORM web component #}
+  <script src="/frontend/js/lib/shacl-form.bundle.js" type="module"></script>
+
+  {# Vue investigation (stessa usata per editing) #}
+  <script src="/frontend/js/app/vue-investigation.js"></script>
+
+  <style>
+    .viewer-container {
+      max-width: 1100px;
+      margin: 20px auto;
+    }
+
+    .viewer-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .viewer-header h2 {
+      margin: 0;
+    }
+
+    .viewer-actions {
+      text-align: center;
+      margin-top: 20px;
+    }
+  </style>
+
+{% endblock %}
+
+{% block content %}
+
+<div class="viewer-container">
+
+  <div class="viewer-header">
+    <h2>Indagine</h2>
+  </div>
+
+  {# --------------------------------------------------
+     Vue root (SENZA search)
+     UUID passato dal controller
+  -------------------------------------------------- #}
+<div v-cloak
+     id="investigation-app"
+     data-cur_role="{{ user.role }}"
+     data-uuid="{{ uuid }}"
+     data-editing="{{ user.role != 3 }}"
+     data-show-form="true"
+     data-label_save_ok="{{ t('investigation.save_ok') }}"
+     data-label_save_err="{{ t('investigation.save_err') }}"
+>
+
+
+    <template v-if="isVisible">
+
+      {# ---------------- BUTTONS ---------------- #}
+      {% if user.role != 3 %}
+      <div class="col-12 text-center mt-4">
+
+        <button class="btn btn-secondary mx-2"
+                @click="download('xml')">
+          RDF/XML
+        </button>
+
+        <button class="btn btn-secondary mx-2"
+                @click="download('ttl')">
+          TURTLE
+        </button>
+
+        <button v-if="inEditing && validForm"
+                :disabled="saving"
+                class="btn btn-primary mx-2"
+                @click="save(false)">
+          <i v-if="saving" class="fa-solid fa-spinner"></i>
+          <i v-else class="fa-solid fa-save"></i>
+        </button>
+
+      </div>
+      {% endif %}
+
+      {# ---------------- SHACL FORM ---------------- #}
+      <div id="shacl-container"
+           style="margin-top:15px;
+                  border:dashed 2px gray;
+                  padding:15px;
+                  border-radius:6px;">
+
+        <shacl-form id="shacl-form"
+          data-collapse="open"
+          data-values-namespace="indagine:"
+          data-shapes-url="/backend/ontology/schema/editing"
+          data-generate-node-shape-reference=""
+        ></shacl-form>
+
+      </div>
+
+      {# ---------------- DEBUG OUTPUT (admin) ---------------- #}
+      {% if user.role in [0,1] %}
+      <fieldset v-if="inEditing"
+        style="margin-top:15px;
+               border: solid 1px gray;
+               border-radius: 6px;
+               padding: 10px;">
+        <legend>
+          Output SHACL
+          [{@ validForm ? 'valido' : 'non valido' @}]
+        </legend>
+        <pre :style="outputStyle">{@ serializedForm @}</pre>
+      </fieldset>
+      {% endif %}
+
+    </template>
+
+  </div>
+
+  {# ---------------- CLOSE TAB ---------------- #}
+  <div class="viewer-actions">
+    <button class="btn btn-outline-secondary"
+            onclick="tryCloseViewer()">
+      Chiudi
+    </button>
+
+    <div id="close-hint"
+         style="display:none; margin-top:6px; color:#666; font-size:0.9em;">
+      Puoi chiudere questa scheda dal browser.
+    </div>
+  </div>
+
+</div>
+
+<script>
+function tryCloseViewer() {
+  window.close();
+  setTimeout(() => {
+    const hint = document.getElementById('close-hint');
+    if (hint) hint.style.display = 'block';
+  }, 200);
+}
+</script>
+
+{% endblock %}

package/src/views/v2/investigation/form.twig

@@ -26,6 +26,7 @@
   </style>
 {% endblock %}
 
+
 {% block content %}
   {% include 'v2/investigation/form_content.twig' %}
-{% endblock %}
+{% endblock %}

package/src/views/v2/investigation/form_content.twig

@@ -1,7 +1,7 @@
 
 
 
-
+<div style="margin: 24px 32px;">
 
 
   <style>
@@ -72,8 +72,9 @@
       data-label_new="{{ t('investigation.new_item') }}"
       data-label_search="{{ t('investigation.search') }}"
       data-label_stop_edit="{{ t('investigation.stop_edit') }}"
+      data-label_edit_from_other_user="{{ t('investigation.edit_from_other_user') }}" 
     ></div>
-
+      
     <div v-cloak id="investigation-app"
       data-show-form="{{ showForm ? 'true' : 'false' }}" 
       data-cur_role="{{ user.role }}"
@@ -167,3 +168,4 @@
 
     </div>
 
+</div>

package/src/views/v2/investigation/view.twig

@@ -0,0 +1,28 @@
+{% extends "/v2/layout.twig" %}
+
+{% block content %}
+
+<div class="container my-4">
+
+  <h2>Indagine</h2>
+
+  <div id="shacl-container"
+       style="margin-top:10px;
+              border: solid 1px #ccc;
+              padding:15px;
+              border-radius:6px;">
+
+    <shacl-form
+      id="shacl-form"
+      data-collapse="open"
+      data-readonly="true"
+      data-values-namespace="indagine:"
+      data-node-iri="indagine:{{ uuid }}"
+      data-shapes-url="/backend/ontology/schema/view"
+    ></shacl-form>
+
+  </div>
+
+</div>
+
+{% endblock %}

package/src/views/v2/partials/header.twig

@@ -1,4 +1,4 @@
-{% set isRdfViewer = title == 'RDF viewer' %}
+{% set isRdfViewer = 'viewer' in title|lower %}
 
 <header class="header-wrapper" id="top-menu">
 

package/src/views/v2/presentazione/contatti.twig

@@ -11,7 +11,13 @@
   </header>
 
     <p class="intro-text">
-    Contatti
+        <p>
+  Per informazioni e contatti, è possibile inviare un’email all’indirizzo
+ <a href="mailto:hdlsd.info@gmail.com?subject=Richiesta%20informazioni">
+  hdlsd.info@gmail.com
+</a>
+
+  </p>
   </p>
 
 

package/src/views/v2/presentazione/crediti.twig

@@ -2,18 +2,51 @@
 
 {% block content %}
 
-<section class="system-page">
+<section class="models-section credits-section">
 
-  {# TITOLO #}
-  <header class="system-header">
+  <header class="models-header">
     <h1>Crediti</h1>
+    <p class="models-intro">
+      La realizzazione di HD-LSD è il risultato di un lavoro interdisciplinare che ha
+      coinvolto competenze scientifiche, metodologiche e informatiche.
+    </p>
   </header>
 
-    <p class="intro-text">
-    Crediti
-  </p>
-
-
+  <!-- SVILUPPO MODELLI -->
+  <section class="credits-block">
+    <h2 class="credits-title">Analisi, progettazione e modellazione formale</h2>
+    <p class="credits-text">
+      Progettazione, definizione e validazione dei modelli concettuali e ontologici
+      per la rappresentazione dei dati diagnostici e del patrimonio culturale.
+    </p>
+    <ul class="credits-list">
+      <li>Donatella Fiorani</li>
+      <li>Chiara Porrovecchio</li>
+      <li>Alessia Vaccariello</li>
+    </ul>
+  </section>
+
+  <!-- SVILUPPO INFORMATICO -->
+  <section class="credits-block">
+    <h2 class="credits-title">Sviluppo del sistema informatico - IGeA Informatica Geografia e Ambiente</h2>
+    <p class="credits-text">
+      Progettazione e sviluppo dell’architettura software, delle interfacce web
+      e dei servizi di gestione e interrogazione dei dati.
+    </p>
+    <ul class="credits-list">
+      <li>Corrado Maddaluno</li>
+      <li>Armando De Filippo</li>
+      <li>Christian Picone</li>
+    </ul>
+  </section>
+
+  <!-- LOGHI -->
+  <section class="credits-block">
+    <h2 class="credits-title">Logo</h2>
+    <ul class="credits-list">
+      <li>Silvia Cutarelli</li>
+    </ul>
+  </section>
 
 </section>
 

package/src/views/v2/presentazione/finalita.twig

@@ -15,7 +15,7 @@
     {# COLONNA 1 — Aree #}
     <div class="system-col system-col-areas">
         <ul class="system-areas system-areas--bulleted">
-        <li>Decentrare</li>
+        <li>Documentare</li>
         <li>Conoscere</li>
         <li>Comparare</li>
         <li>Comprendere</li>

package/src/views/v2/presentazione/partecipanti.twig

@@ -20,18 +20,51 @@
   </p>
 
   <ul class="department-banners">
-    <li class="department-banner banner-sdara">
-      <span>Dipartimento di Storia, Disegno e Restauro dell'Architettura</span>
-    </li>
+
+  <li class="department-banner banner-sdara">
+    <div class="department-overlay">
+      <div class="department-name">
+        Dipartimento di Storia, Disegno e Restauro dell'Architettura
+      </div>
+      <div class="department-people">
+        Donatella Fiorani · Chiara Porrovecchio  · Silvia Cigognetti
+      </div>
+    </div>
+  </li>
+
     <li class="department-banner banner-antichita">
-      <span>Dipartimento di Scienze dell'Antichità</span>
-    </li>
-    <li class="department-banner banner-terra">
-      <span>Dipartimento di Scienze della Terra</span>
-    </li>
-    <li class="department-banner banner-biologia">
-      <span>Dipartimento di Biologia Ambientale</span>
-    </li>
+    <div class="department-overlay">
+      <div class="department-name">
+        Dipartimento di Scienze dell'Antichità
+      </div>
+      <div class="department-people">
+        Cristina Lemorini · Giulia Previti
+      </div>
+    </div>
+  </li>
+
+      <li class="department-banner banner-terra">
+    <div class="department-overlay">
+      <div class="department-name">
+        Dipartimento di Scienze della Terra
+      </div>
+      <div class="department-people">
+        Laura Medeghini · Melania Di Fazio
+      </div>
+    </div>
+  </li>
+
+      <li class="department-banner banner-biologia">
+    <div class="department-overlay">
+      <div class="department-name">
+        Dipartimento di Biologia Ambientale
+      </div>
+      <div class="department-people">
+        Mauro Iberite · Laura Sadori · Alessia Masi · Eleonora Creafogli
+      </div>
+    </div>
+  </li>
+
   </ul>
 
 

package/src/views/v2/search/advanced.twig

@@ -44,6 +44,19 @@
             debug="true"
         ></spar-natural>
         
+        <!-- Modalità risultati -->
+        <div class="mt-3 mb-2">
+          <label class="me-3">
+            <input type="radio" name="viewMode" value="direct" checked>
+            Risultati diretti
+          </label>
+
+          <label>
+            <input type="radio" name="viewMode" value="indagine">
+            Indagini collegate
+          </label>
+        </div>
+
         <span class="btn btn-primary" id="sparql-toggle">Toggle SPARQL query</span>
 
       </div>

package/src/views/v2/search/index.twig

@@ -3,6 +3,10 @@
 {% block content %}
   <div class="system-page">
     <h1>Ricerca</h1>
-    <p>Pagina ricerche caricata correttamente.</p>
+    <p>Funzioni di ricerca SPARQL:</p>
+<ul>
+  <li><strong>Veloce</strong>: solo per specifici oggetti predefiniti</li>
+  <li><strong>Avanzata</strong>: per tutti gli oggetti</li>
+</ul>
   </div>
 {% endblock %}

package/src/views/v2/sidebars/investigation.twig

@@ -1,4 +1,11 @@
-<div class="sidebar-investigation">
-  <span>Indagine</span>
-</div>
+<aside class="sidebar"
+       id="sidebar-investigation">
 
+  <nav class="sidebar-nav">
+
+    <a
+       :class="{ active: activeItem === 'investigation' }">
+       Indagine
+    </a>
+      </nav>
+</aside>

package/src/views/v2/users/index.twig

@@ -3,6 +3,6 @@
 {% block content %}
   <div class="system-page">
     <h1>Amministrazione</h1>
-    <p>Pagina amministrazione caricata correttamente.</p>
+    <p> Funzioni di amministrazione per la gestione degli utenti ed aggiornamento dei vocabolari.</p>
   </div>
 {% endblock %}

package/src/views/v2/users/manage.twig

@@ -7,7 +7,7 @@
 
 {% block content %}
 
-    <div id="manage-users"
+    <div id="manage-users" style="margin: 30px;"
         data-root="frontend/v2"
         data-role_sudo="{{ t('users.role.sudo') }}" 
         data-role_admin="{{ t('users.role.admin') }}" 

package/src/views/v2/vocabolaries/edit.twig

@@ -8,6 +8,8 @@
 {% endblock %}
 
 {% block content %}
+<div style="margin: 30px;">
+
     <div>
         <h2 style="display:flex; justify-content:space-between; align-items:center;">    
             <span>{{ t('users.vocabolaries.title') }}:</span>
@@ -41,7 +43,7 @@
             </div>
         </div>
     </div>
-
+</div>
     <script>
         dropFilesInit({
             labels: {