Rolling buttons for selectional preferencies and lexical units

frontend/src/components/unification/Unification/LexicalUnitEdit.vue

@@ -53,6 +53,8 @@ Object.assign(LexicalUnitEdit, {
       selectedSchemas: null,
       selectedExamples: null,
       hidden_frames: [],
+      lexicalUnitsVisible: true,
+      selectionalPreferenciesVisible: true
     }
   },
   components: {InfoTooltip, Spinner, UnificationFramePreview, SlowalFrameComponent, ExamplesComponent, SemanticsSchemataComponent, MeaningComponent},
@@ -886,6 +888,18 @@ Object.assign(LexicalUnitEdit, {
           slowal_frame.arguments = new_slowal_frame_arguments;
         }
       }
+    },
+    hideLexicalUnits() {
+      this.lexicalUnitsVisible = false;
+    },
+    showLexicalUnits() {
+      this.lexicalUnitsVisible = true;
+    },
+    hideSelectionalPreferencies() {
+      this.selectionalPreferenciesVisible = false;
+    },
+    showSelectionalPreferencies() {
+      this.selectionalPreferenciesVisible = true;
     }
   },
   mounted() {
@@ -956,7 +970,9 @@ export default LexicalUnitEdit;
         <div align="center">
         <div align="left" style="display: table;">
           <div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="unified-frame-title" v-html="unified_frame_title"></div>
-          <table v-if="unified_frame.id" id="unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
+          <table v-if="unified_frame.id" id="unified-frame-opac" class="table-borderless">
+            <tr><td>
+            <table id="unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
               <tbody>
             <tr>
               <th scope="row" class="py-2 px-1 text-secondary role-header">Role</th>
@@ -988,7 +1004,7 @@ export default LexicalUnitEdit;
               
               
             </tr>
-            <tr>
+            <tr v-if="selectionalPreferenciesVisible">
               <th scope="row" class="py-0 px-1 text-secondary role-header">Selectional preferences</th>
               <td class="preferences py-0 px-0 border-top border-left border-secondary role-column align-top"
                   v-for='argument in unified_frame_arguments'
@@ -1018,9 +1034,16 @@ export default LexicalUnitEdit;
             </tr>
           </tbody>
             </table>
+            </td><td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px;">
+              <span class="cursor-pointer" @click.stop="hideSelectionalPreferencies()" title="Ukryj jednostki leksykalne">&#9652;</span> /
+              <span class="cursor-pointer" @click.stop="showSelectionalPreferencies()" title="Pokaż jednostki leksykalne">&#9662;</span>
+            </td></tr>
+        </table>
         </div>
         <div v-if="unified_frame.id" class="lu-table mt-3 mb-3">
-            <table class="m-0 table-borderless border border-secondary text-dark">
+          <table class="m-0 table-borderless text-dark">
+            <tr><td>
+            <table class="m-0 border border-secondary text-dark">
               <tbody>
                 <tr>
                   <th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th>
@@ -1028,6 +1051,7 @@ export default LexicalUnitEdit;
                   <th scope="row" class="py-2 px-1 text-secondary">Status</th>
                 </tr>
                 <tr class="preferences py-0 px-0 border-top border-left border-secondary"
+                    v-if="lexicalUnitsVisible"
                   v-for='lexical_unit in lexical_units'
                 >
                   <template v-if="isFrameVisible(lexical_unit.frame_status)">
@@ -1041,6 +1065,12 @@ export default LexicalUnitEdit;
                 </tr>
               </tbody>
             </table>
+            </td>
+              <td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px;">
+                <span class="cursor-pointer" @click.stop="hideLexicalUnits()" title="Ukryj jednostki leksykalne">&#9652;</span> /
+                <span class="cursor-pointer" @click.stop="showLexicalUnits()" title="Pokaż jednostki leksykalne">&#9662;</span></td>
+            </tr>
+          </table>
           </div>
       </div>
       </div>

frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue

@@ -4,13 +4,14 @@ import InfoTooltip from "/src/components/shared/InfoTooltip.vue";
 export default {
   props: {
     frame: Object,
-    selectedExamples: Object
+    selectedExamples: Object,
   },
   components: {InfoTooltip},
   emits: ['frameSelectionChanged'],
   data() {
     return {
       img_prefix: window.STATIC_URL,
+        selectionalPreferenciesShow: Boolean
     }
   },
   methods: {
@@ -18,9 +19,6 @@ export default {
       const ret = window.lexical_units2dom(this.frame.lexical_units);
       return ret;
     },
-    getOpinionHTML() {
-      return window.make_opinion_row(this.frame, this.frame.arguments.length, 3).outerHTML;
-    },
     getArguments() {
       return this.frame.arguments;
     },
@@ -33,6 +31,12 @@ export default {
       const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.argument_ids).flat()) : null;
       return argument.role + ' ' + (argument.selected ? 'active' : argument.hover ? 'bg-highlight' : '')
           + (selectedExampleFrameArguments != null ? selectedExampleFrameArguments.has(argument.id) ? 'example-yes' : 'example-no' : '');
+    },
+      hideSelectionalPreferencies() {
+          this.selectionalPreferenciesShow = false;
+      },
+      showSelectionalPreferencies() {
+          this.selectionalPreferenciesShow = true;
       }
   },
   mounted() {
@@ -44,7 +48,21 @@ export default {
 <template>
         <table class="table m-0 table-borderless border border-secondary text-dark">
             <tbody>
-                <tr class="opinion-row" v-html="getOpinionHTML()">
+                <tr class="opinion-row">
+                    <th scope="row" class="py-2 px-1 text-secondary" style="width: 3em;">Opinia</th>
+                    <td class="opinion-cell py-2 px-1" :colspan="frame.arguments.length">
+                        <table class="table m-0 p-0 table-borderless">
+                            <tr>
+                                <td class="opinion-cell p-0">
+                                    <img :src="'/static/entries/img/' + frame.opinion_key + '.svg'" :alt="frame.opinion"
+                                                                                width="12" height="12"> {{frame.opinion}}
+                                </td>
+                                <td class="opinion-cell p-0" style="text-align: right;">
+                                    <span class="cursor-pointer" @click.stop="hideSelectionalPreferencies()" title="Ukryj preferencje selekcyjne">&#9652;</span> /
+                                    <span class="cursor-pointer" @click.stop="showSelectionalPreferencies()" title="Pokaż preferencje selekcyjne">&#9662;</span></td>
+                            </tr>
+                        </table>
+                    </td>
                 </tr>
                 <tr>
                     <th scope="row" class="py-2 px-1 text-secondary">Rola</th>
@@ -59,7 +77,7 @@ export default {
                         </td>
                     </template>
                 </tr>
-                <tr>
+                <tr v-if="selectionalPreferenciesShow">
                     <th scope="row" class="py-0 px-1 text-secondary">Preferencje selekcyjne</th>
                     <template v-for="argument in getArguments()">