progress

application/frontend/src/const.ts

@@ -40,3 +40,4 @@ export const EXPLORER = '/explorer';
 export const GAP_ANALYSIS = '/map_analysis';
 
 export const GA_STRONG_UPPER_LIMIT = 2; // remember to change this in the Python code too
+export const CIRCLES = '/circles';

application/frontend/src/pages/Explorer/explorer.scss

@@ -5,13 +5,45 @@
 }
 
 #explorer-content>.group {
-  border-top: 1px dotted lightgrey;
-  border-left: 6px solid lightgrey;
-  margin: 4px;
-  margin-left: 46px;
-  padding: 5px;
-  vertical-align: top;
-  background-color: rgba(200, 200, 200, 0.2);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#explorer-content>.group-1 {
+  vertical-align: middle;
+  font-size: 120%;
+  font-weight: bold;
+  margin-left: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#explorer-content>.group-2 {
+  vertical-align: middle;
+  width: 500px;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  margin-right: 30px
+}
+
+#explorer-content>#group-span {
+  color: grey;
+}
+
+#explorer-content>#groupped-links-container {
+  margin-left: 6px;
+  font-size: 80%;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#grouped-link {
+  margin: 2px;
+  display: inline-block;
+  border: 1px dashed lightgrey;
+  padding: 3px;
+  background-color: #f0f0f0;
 }
 
 #explorer-content>.doc-id {
@@ -89,17 +121,32 @@ b {
   padding-top: 20px;
   padding-left: 12px;
 }
-p{
-  color: grey; margin-left: 26px;
+
+p {
+  color: grey;
+  margin-left: 26px;
 }
-#explorer-wrapper{
-  margin-left: 24px; margin-top: 20px; margin-bottom: 20px; color: grey;
+
+#explorer-wrapper {
+  margin-left: 24px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  color: grey;
 }
 
-#filter{
-  font-size: 16px; height: 32px; width: 320px; margin-bottom: 10px;
+#filter {
+  font-size: 16px;
+  height: 32px;
+  width: 320px;
+  margin-bottom: 10px;
 }
-#search-summary{
-  display: inline-block; vertical-align: middle;
+
+#search-summary {
+  display: inline-block;
+  vertical-align: middle;
 }
-#graphs{font-size: 80%; color: grey;}
+
+#graphs {
+  font-size: 80%;
+  color: grey;
+}

application/frontend/src/pages/Explorer/explorer.tsx

@@ -9,7 +9,7 @@ import { ClearFilterButton, FilterButton } from '../../components/FilterButton/F
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
 import { useEnvironment } from '../../hooks';
 import { applyFilters, filterContext } from '../../hooks/applyFilters';
-import { Document } from '../../types';
+import { Document, LinkedDocument } from '../../types';
 import { groupLinksByType } from '../../utils';
 import { SearchResults } from '../Search/components/SearchResults';
 
@@ -40,13 +40,13 @@ export const Explorer = () => {
     }
   );
   const docs = localStorage.getItem("documents")
-  useEffect(()=>{
+  useEffect(() => {
     if (docs != null) {
       setData(JSON.parse(docs).sort((a, b) => (a.id + '').localeCompare(b.id + '')));
       setFilteredData(data)
     }
-  },[docs])
-  
+  }, [docs])
+
   const query = useQuery(
     'everything',
     () => {
@@ -89,20 +89,67 @@ export const Explorer = () => {
     }
   }
 
-  function processNode(item) {
-    if (!item) {
+
+  function processGroupedLinks(link) {
+    let title = ""
+    if (link.document.hyperlink) {
+      title = link.document.name;
+      if (link.sections.length > 0) {
+        title += ':\n - ';
+        title += link.sections.join('\n - ');
+      }
+    }
+    return (
+      <div id="grouped-link">
+        {link.document.hyperlink ?
+          <a target="_blank" href={link.document.hyperlink} title={title}>
+            {link.document.name}
+            {link.sections.length > 1 ? '(' + link.sections.length + ')' : ""}
+          </a> : ""}
+      </div>
+    )
+  }
+
+  function processNode(item: Document) {
+    if (!item || !item.id) {
       return (<></>)
     }
+
+    const groupedLinks: LinkedDocument[] = [];
+    const groupedLinksMap = [];
+    item.links?.filter(link => link.ltype === 'Linked To').forEach(link => {
+      const doc = link.ltype + ' ' + link.document.doctype + ' ' + link.document.name;
+      if (!groupedLinksMap[doc]) {
+        groupedLinksMap[doc] = link
+        groupedLinksMap[doc].sections = []
+        groupedLinks.push(link);
+      }
+      if (link.document.section) {
+        groupedLinksMap[doc].sections.push(link.document.section);
+      }
+    });
+    let name
+    if (filter.length && item.name.toLocaleLowerCase() === filter.toLocaleLowerCase()) {
+      name = <span className='bg-yellow'>{filter.charAt(0).toUpperCase() + filter.slice(1)}</span>
+    }
     return (
       <div className="group" >
         <div className="group-1">
           <div className='group-2'>
             <a target="_blank" href={"https://opencre.org/cre/" + item?.id}>
-              {item?.name}
+              <span id="group-span"> {item.id} : </span>
+              {name}
             </a>
           </div>
+          <div id="grouped-links-container">
+            {groupedLinks.map(link => { return processGroupedLinks(link) })}
+          </div>
           <div /*style="font-size: 90%"*/>
-            {item?.links?.forEach(child => processNode(child))}
+            {
+              item.links?.map(child =>
+                processNode(child.document)
+              )
+            }
           </div>
         </div>
       </div>

application/frontend/src/pages/circles/circles.scss

@@ -0,0 +1,25 @@
+
+.node {
+  cursor: pointer;
+}
+
+.node:hover {
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+
+.node--leaf {
+  fill: white;
+}
+
+.label {
+  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  text-anchor: middle;
+  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
+}
+
+.label,
+.node--root,
+.node--leaf {
+  pointer-events: none;
+}